@koobiq/components 20.2.0 → 20.3.1

package/checkbox/index.d.ts

@@ -1,7 +1,9 @@
 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';
+import * as i1 from '@koobiq/components/core';
+import { KbqCheckableClickAction, KbqColorDirective, KbqCheckedState } from '@koobiq/components/core';
+export { TransitionCheckState } from '@koobiq/components/core';
 
 /**
  * Checkbox click action when user click on input element.
@@ -10,32 +12,19 @@ import { KbqColorDirective, KbqCheckedState } from '@koobiq/components/core';
  * check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior.
  * undefined: Same as `check-indeterminate`.
  */
-type KbqCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;
+type KbqCheckboxClickAction = KbqCheckableClickAction;
 /**
  * Injection token that can be used to specify the checkbox click behavior.
  */
-declare const KBQ_CHECKBOX_CLICK_ACTION: InjectionToken<KbqCheckboxClickAction>;
+declare const KBQ_CHECKBOX_CLICK_ACTION: InjectionToken<KbqCheckableClickAction>;
 
 /**
  * Provider Expression that allows kbq-checkbox to register as a ControlValueAccessor.
  * This allows it to support [(ngModel)].
  * @docs-private
+ * @deprecated Unused - the `ControlValueAccessor` is now registered by the `KbqCheckable` host directive.
  */
 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. */
@@ -51,8 +40,9 @@ declare class KbqCheckboxChange {
  * 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;
+    private readonly changeDetectorRef;
+    private readonly focusMonitor;
+    private readonly checkable;
     readonly big: _angular_core.InputSignal<boolean>;
     /** A unique id for the checkbox input. If none is supplied, it will be auto-generated. */
     id: string;
@@ -79,14 +69,11 @@ declare class KbqCheckbox extends KbqColorDirective implements ControlValueAcces
      */
     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
@@ -95,23 +82,42 @@ declare class KbqCheckbox extends KbqColorDirective implements ControlValueAcces
      */
     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
+     * @deprecated Unused - `ControlValueAccessor` is now implemented by the `KbqCheckable` host directive,
+     * so this is never called by Angular forms. Will be removed in the next major version.
      */
     onTouched: () => any;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** Method being called whenever the label text changes. */
     onLabelTextChange(): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @deprecated Unused - `ControlValueAccessor` is now implemented by the `KbqCheckable` host directive,
+     * so this is never called by Angular forms. Will be removed in the next major version.
+     */
     writeValue(value: any): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @deprecated Unused - `ControlValueAccessor` is now implemented by the `KbqCheckable` host directive,
+     * so this is never called by Angular forms. Will be removed in the next major version.
+     */
     registerOnChange(fn: (value: any) => void): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @deprecated Unused - `ControlValueAccessor` is now implemented by the `KbqCheckable` host directive,
+     * so this is never called by Angular forms. Will be removed in the next major version.
+     */
     registerOnTouched(fn: any): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @deprecated Unused - `ControlValueAccessor` is now implemented by the `KbqCheckable` host directive,
+     * so this is never called by Angular forms. Will be removed in the next major version.
+     */
     setDisabledState(isDisabled: boolean): void;
     getAriaChecked(): KbqCheckedState;
     /** Toggles the `checked` state of the checkbox. */
@@ -127,13 +133,11 @@ declare class KbqCheckbox extends KbqColorDirective implements ControlValueAcces
     /** 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 ɵ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, [{ directive: typeof i1.KbqCheckable; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_tabIndex: unknown;
 }
@@ -155,5 +159,5 @@ declare class KbqCheckboxModule {
     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 { KBQ_CHECKBOX_CLICK_ACTION, KBQ_CHECKBOX_CONTROL_VALUE_ACCESSOR, KBQ_CHECKBOX_REQUIRED_VALIDATOR, KbqCheckbox, KbqCheckboxChange, KbqCheckboxModule, KbqCheckboxRequiredValidator };
 export type { KbqCheckboxClickAction };

package/clamped-text/index.d.ts

@@ -1,7 +1,7 @@
 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, OnInit, AfterViewInit, ElementRef } from '@angular/core';
+import { InjectionToken, Signal, Provider, OnInit, AfterViewInit, ElementRef } from '@angular/core';
 
 /**
  * Default maximum number of visible rows for the clamped text component

package/code-block/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, Provider, AfterViewInit, TemplateRef } from '@angular/core';
+import { InjectionToken, AfterViewInit, TemplateRef, Provider } from '@angular/core';
 import { CdkScrollable, ExtendedScrollToOptions } from '@angular/cdk/scrolling';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqCodeBlockLocaleConfiguration, KbqComponentColors } from '@koobiq/components/core';
@@ -48,6 +48,18 @@ declare const kbqCodeBlockLocaleConfigurationProvider: (configuration: KbqCodeBl
 declare const KBQ_CODE_BLOCK_FALLBACK_FILE_NAME: InjectionToken<string>;
 /** Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_NAME`. */
 declare const kbqCodeBlockFallbackFileNameProvider: (fileName: string) => Provider;
+/** Default options for `kbq-code-block`. */
+type KbqCodeBlockDefaultOptions = Partial<{
+    /** Whether the actionbar should remain visible when tabs are hidden. */
+    alwaysShowActionbar: boolean;
+}>;
+/** Injection token used to configure the default options for all `kbq-code-block` components. */
+declare const KBQ_CODE_BLOCK_DEFAULT_OPTIONS: InjectionToken<Partial<{
+    /** Whether the actionbar should remain visible when tabs are hidden. */
+    alwaysShowActionbar: boolean;
+}>>;
+/** Utility provider for `KBQ_CODE_BLOCK_DEFAULT_OPTIONS`. */
+declare const kbqCodeBlockDefaultOptionsProvider: (options: KbqCodeBlockDefaultOptions) => Provider;
 /** Marks a template as a custom tab link. */
 declare class KbqCodeBlockTabLinkContent {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqCodeBlockTabLinkContent, never>;
@@ -58,6 +70,7 @@ declare class KbqCodeBlockTabLinkContent {
  */
 declare class KbqCodeBlock implements AfterViewInit {
     private readonly copyButtonTooltip;
+    private readonly defaultOptions;
     /**
      * Reference to the scrollable code content.
      *
@@ -114,6 +127,8 @@ declare class KbqCodeBlock implements AfterViewInit {
     canDownload: boolean;
     /** Added copy code button. */
     readonly canCopy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the actionbar should remain visible when tabs are hidden. */
+    readonly alwaysShowActionbar: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @deprecated Will be removed in next major release, use `files` instead.
      */
@@ -141,7 +156,8 @@ declare class KbqCodeBlock implements AfterViewInit {
      */
     get hideTabs(): boolean;
     set hideTabs(value: boolean);
-    private _hideTabs;
+    private readonly _hideTabs;
+    private readonly actionbarHovered;
     /**
      * Output to support two-way binding on `[(hideTabs)]` property.
      */
@@ -179,7 +195,6 @@ declare class KbqCodeBlock implements AfterViewInit {
     private readonly changeDetectorRef;
     private readonly localeService;
     private readonly destroyRef;
-    private readonly renderer;
     private readonly platform;
     private readonly focusMonitor;
     private readonly clipboard;
@@ -191,6 +206,8 @@ declare class KbqCodeBlock implements AfterViewInit {
      */
     protected readonly fallbackFileName: string;
     private readonly window;
+    /** @docs-private */
+    protected readonly actionbarVisible: _angular_core.Signal<boolean>;
     constructor();
     ngAfterViewInit(): void;
     /**
@@ -222,21 +239,9 @@ declare class KbqCodeBlock implements AfterViewInit {
      * @docs-private
      */
     protected onSelectedTabChange(index: number): void;
-    /**
-     * Tracks hover events to show/hide the actionbar when `hideTabs` is `true`.
-     * Reacts to `hideTabs` changes dynamically.
-     */
+    /** Tracks hover when tabs are hidden and `alwaysShowActionbar` is disabled. */
     private trackHoverState;
     private setupContentOverflowDetection;
-    /**
-     * Adds or removes the actionbar display class from the code block based on the specified condition.
-     *
-     * The actionbar is always visible on mobile devices and when the tabs are visible.
-     * Otherwise, the actionbar is only visible when the mouse is hovered over the code block.
-     *
-     * @param shouldShowActionbar - A boolean indicating whether the actionbar should be visible.
-     */
-    private setupActionbarDisplay;
     /** Whether the element has scroll. */
     private hasScroll;
     /**
@@ -271,7 +276,7 @@ declare class KbqCodeBlock implements AfterViewInit {
      */
     protected downloadCode(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqCodeBlock, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqCodeBlock, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; "canToggleSoftWrap": { "alias": "canToggleSoftWrap"; "required": false; "isSignal": true; }; "softWrap": { "alias": "softWrap"; "required": false; }; "viewAll": { "alias": "viewAll"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "canLoad": { "alias": "canLoad"; "required": false; }; "canDownload": { "alias": "canDownload"; "required": false; }; "canCopy": { "alias": "canCopy"; "required": false; "isSignal": true; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "files": { "alias": "files"; "required": false; }; "activeFileIndex": { "alias": "activeFileIndex"; "required": false; }; "noBorder": { "alias": "noBorder"; "required": false; "isSignal": true; }; "hideTabs": { "alias": "hideTabs"; "required": false; }; }, { "softWrapChange": "softWrapChange"; "viewAllChange": "viewAllChange"; "activeFileIndexChange": "activeFileIndexChange"; "hideTabsChange": "hideTabsChange"; }, ["tabLinkTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqCodeBlock, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; "canToggleSoftWrap": { "alias": "canToggleSoftWrap"; "required": false; "isSignal": true; }; "softWrap": { "alias": "softWrap"; "required": false; }; "viewAll": { "alias": "viewAll"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "canLoad": { "alias": "canLoad"; "required": false; }; "canDownload": { "alias": "canDownload"; "required": false; }; "canCopy": { "alias": "canCopy"; "required": false; "isSignal": true; }; "alwaysShowActionbar": { "alias": "alwaysShowActionbar"; "required": false; "isSignal": true; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "files": { "alias": "files"; "required": false; }; "activeFileIndex": { "alias": "activeFileIndex"; "required": false; }; "noBorder": { "alias": "noBorder"; "required": false; "isSignal": true; }; "hideTabs": { "alias": "hideTabs"; "required": false; }; }, { "softWrapChange": "softWrapChange"; "viewAllChange": "viewAllChange"; "activeFileIndexChange": "activeFileIndexChange"; "hideTabsChange": "hideTabsChange"; }, ["tabLinkTemplate"], never, true, never>;
     static ngAcceptInputType_softWrap: unknown;
     static ngAcceptInputType_viewAll: unknown;
     static ngAcceptInputType_canLoad: unknown;
@@ -379,5 +384,5 @@ declare class KbqCodeBlockModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqCodeBlockModule>;
 }
 
-export { KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE, KBQ_CODE_BLOCK_FALLBACK_FILE_NAME, KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG, KBQ_CODE_BLOCK_LOCALE_CONFIGURATION, KbqCodeBlock, KbqCodeBlockHighlight, KbqCodeBlockModule, KbqCodeBlockTabLinkContent, kbqCodeBlockFallbackFileLanguageProvider, kbqCodeBlockFallbackFileNameProvider, kbqCodeBlockHighlightJsConfigProvider, kbqCodeBlockLocaleConfigurationProvider };
-export type { KbqCodeBlockFile, KbqCodeBlockHighlightJsConfig, KbqTabLinkTemplateContext };
+export { KBQ_CODE_BLOCK_DEFAULT_OPTIONS, KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE, KBQ_CODE_BLOCK_FALLBACK_FILE_NAME, KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG, KBQ_CODE_BLOCK_LOCALE_CONFIGURATION, KbqCodeBlock, KbqCodeBlockHighlight, KbqCodeBlockModule, KbqCodeBlockTabLinkContent, kbqCodeBlockDefaultOptionsProvider, kbqCodeBlockFallbackFileLanguageProvider, kbqCodeBlockFallbackFileNameProvider, kbqCodeBlockHighlightJsConfigProvider, kbqCodeBlockLocaleConfigurationProvider };
+export type { KbqCodeBlockDefaultOptions, KbqCodeBlockFile, KbqCodeBlockHighlightJsConfig, KbqTabLinkTemplateContext };

package/content-panel/index.d.ts

@@ -1,5 +1,5 @@
 import * as _koobiq_components_core from '@koobiq/components/core';
-import { KbqComponentColors, KbqOverflowShadowContainer } from '@koobiq/components/core';
+import { KbqOverflowShadowContainer, KbqComponentColors } from '@koobiq/components/core';
 import * as i0 from '@angular/core';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqResizerSizeChangeEvent } from '@koobiq/components/resizer';