@koobiq/components 18.34.0 → 18.36.0

package/tags/tag.module.d.ts

@@ -5,6 +5,6 @@ import * as i3 from "./tag-input";
 import * as i4 from "@angular/cdk/platform";
 export declare class KbqTagsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTagsModule, [typeof i1.KbqTagList, typeof i2.KbqTag, typeof i3.KbqTagInput, typeof i2.KbqTagTrailingIcon, typeof i2.KbqTagAvatar, typeof i2.KbqTagRemove], [typeof i4.PlatformModule], [typeof i1.KbqTagList, typeof i2.KbqTag, typeof i3.KbqTagInput, typeof i2.KbqTagTrailingIcon, typeof i2.KbqTagAvatar, typeof i2.KbqTagRemove]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTagsModule, [typeof i1.KbqTagList, typeof i2.KbqTag, typeof i3.KbqTagInput, typeof i2.KbqTagTrailingIcon, typeof i2.KbqTagAvatar, typeof i2.KbqTagRemove], [typeof i4.PlatformModule, typeof i2.KbqTagEditSubmit, typeof i2.KbqTagEditInput], [typeof i1.KbqTagList, typeof i2.KbqTag, typeof i3.KbqTagInput, typeof i2.KbqTagTrailingIcon, typeof i2.KbqTagAvatar, typeof i2.KbqTagRemove, typeof i2.KbqTagEditSubmit, typeof i2.KbqTagEditInput]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTagsModule>;
 }

package/tags/tag.scss

@@ -1,5 +1,6 @@
 @use '../core/styles/common/tokens' as *;
 @use '../core/styles/common/vendor-prefixes';
+@use '../core/styles/common/input';
 
 .kbq-tag {
     @include vendor-prefixes.user-select(none);
@@ -9,6 +10,7 @@
     display: inline-block;
 
     max-width: 100%;
+    height: var(--kbq-size-xxl);
 
     padding: var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);
 
@@ -49,6 +51,31 @@
     & .kbq-icon_left {
         margin-left: var(--kbq-tag-size-icon-margin-left);
     }
+
+    .kbq-tag-edit-input {
+        @include input.kbq-reset-input();
+
+        min-width: var(--kbq-size-xs);
+        max-width: 100%;
+
+        &.kbq-input {
+            min-height: unset !important;
+            border-radius: unset !important;
+            padding: unset !important;
+        }
+    }
+
+    .kbq-tag-edit-submit {
+        margin-right: var(--kbq-size-3xs);
+    }
+
+    &.cdk-drag-placeholder {
+        opacity: var(--kbq-opacity-disabled);
+    }
+
+    &.cdk-drag-animating {
+        transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
+    }
 }
 
 .kbq-tag__wrapper {

package/textarea/textarea-tokens.scss

@@ -2,5 +2,5 @@
     --kbq-textarea-size-min-height: 64px;
     --kbq-textarea-size-max-height: 96px;
     --kbq-textarea-size-padding-vertical: 5px;
-    --kbq-textarea-size-padding-horizontal: var(--kbq-size-m);
+    --kbq-textarea-size-padding-horizontal: 11px;
 }

package/textarea/textarea.component.d.ts

@@ -8,7 +8,7 @@ export declare const KBQ_TEXTAREA_VALUE_ACCESSOR: InjectionToken<{
     value: any;
 }>;
 export declare class KbqTextarea implements KbqFormFieldControl<any>, OnInit, OnChanges, OnDestroy, DoCheck, CanUpdateErrorState {
-    protected elementRef: ElementRef;
+    protected elementRef: ElementRef<HTMLTextAreaElement>;
     ngControl: NgControl;
     parentForm: NgForm;
     parentFormGroup: FormGroupDirective;
@@ -88,7 +88,7 @@ export declare class KbqTextarea implements KbqFormFieldControl<any>, OnInit, On
     private lineHeight;
     private minHeight;
     private rowsCount;
-    constructor(elementRef: ElementRef, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any, parent: any, ngZone: NgZone);
+    constructor(elementRef: ElementRef<HTMLTextAreaElement>, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any, parent: any, ngZone: NgZone);
     ngOnInit(): void;
     ngOnChanges(): void;
     ngOnDestroy(): void;

package/time-range/constants.d.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+import { ValidatorFn } from '@angular/forms';
+import { KbqTimeRangeService } from './time-range.service';
+import { KbqTimeRangeType } from './types';
+/** Preset of selectable time ranges, provided by DI. */
+export declare const KBQ_DEFAULT_TIME_RANGE_TYPES: InjectionToken<KbqTimeRangeType[]>;
+export declare function createMissingDateImplError(componentName: string, provider: string): Error;
+export declare const rangeValidator: <T>(timeRangeService: KbqTimeRangeService<T>) => ValidatorFn;

package/time-range/index.d.ts

@@ -0,0 +1,7 @@
+export * from './constants';
+export * from './module';
+export * from './time-range';
+export * from './time-range-editor';
+export * from './time-range-title';
+export * from './time-range-title-as-form-field';
+export * from './types';

package/time-range/module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./time-range";
+import * as i2 from "./time-range-title";
+import * as i3 from "./time-range-editor";
+import * as i4 from "./time-range-title-as-form-field";
+export declare class KbqTimeRangeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimeRangeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimeRangeModule, never, [typeof i1.KbqTimeRange, typeof i2.KbqTimeRangeTitle, typeof i3.KbqTimeRangeEditor, typeof i4.KbqTimeRangeTitlePlaceholder, typeof i4.KbqTimeRangeTitleAsControl], [typeof i1.KbqTimeRange, typeof i2.KbqTimeRangeTitle, typeof i3.KbqTimeRangeEditor, typeof i4.KbqTimeRangeTitlePlaceholder, typeof i4.KbqTimeRangeTitleAsControl]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqTimeRangeModule>;
+}

package/time-range/time-range-editor.d.ts

@@ -0,0 +1,67 @@
+import { OnInit } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, FormControl, FormGroup, FormGroupDirective, NgForm, ValidationErrors, Validator } from '@angular/forms';
+import { ErrorStateMatcher, KbqTimeRangeLocaleConfig } from '@koobiq/components/core';
+import { KbqTimepicker, TimeFormats } from '@koobiq/components/timepicker';
+import { KbqRangeValue, KbqTimeRangeRange, KbqTimeRangeType } from './types';
+import * as i0 from "@angular/core";
+interface FormValue<T> {
+    type: FormControl<KbqTimeRangeType>;
+    fromTime: FormControl<T>;
+    fromDate: FormControl<T>;
+    toTime: FormControl<T>;
+    toDate: FormControl<T>;
+}
+declare class RangeErrorStateMatcher implements ErrorStateMatcher {
+    isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean;
+}
+/** @docs-private */
+export declare class KbqTimeRangeEditor<T> implements ControlValueAccessor, Validator, OnInit {
+    private readonly timeRangeService;
+    /** The maximum selectable date. */
+    readonly maxDate: import("@angular/core").InputSignal<T | null>;
+    /** The minimum selectable date. */
+    readonly minDate: import("@angular/core").InputSignal<T | null>;
+    /** Preset of selectable ranges */
+    readonly availableTimeRangeTypes: import("@angular/core").InputSignal<KbqTimeRangeType[]>;
+    /** Provided value of selected range */
+    readonly rangeValue: import("@angular/core").InputSignal<Required<KbqRangeValue<T>>>;
+    readonly showRangeAsDefault: import("@angular/core").InputSignal<boolean>;
+    readonly localeConfiguration: import("@angular/core").InputSignal<KbqTimeRangeLocaleConfig>;
+    /** @docs-private */
+    protected readonly isRangeVisible: import("@angular/core").Signal<boolean>;
+    /** @docs-private */
+    protected readonly timeRangeTypesWithoutRange: import("@angular/core").Signal<{
+        type: "lastMinute" | "last5Minutes" | "last15Minutes" | "last30Minutes" | "lastHour" | "last24Hours" | "last3Days" | "last7Days" | "last14Days" | "last30Days" | "last3Months" | "last12Months" | "allTime" | "currentQuarter" | "currentYear";
+        translationType: import("./types").KbqTimeRangeTranslationType;
+        formattedValue: string;
+    }[]>;
+    /** @docs-private */
+    protected readonly timepickerList: import("@angular/core").Signal<readonly KbqTimepicker<T>[]>;
+    /** @docs-private */
+    protected readonly form: FormGroup<FormValue<T>>;
+    /** @docs-private */
+    protected readonly timepickerFormat = TimeFormats.HHmmss;
+    /** @docs-private */
+    protected readonly rangeStateMatcher: RangeErrorStateMatcher;
+    private lastValidationErrorOnEmit;
+    constructor();
+    ngOnInit(): void;
+    /** @docs-private */
+    validate(): ValidationErrors | null;
+    /** Implemented as part of ControlValueAccessor */
+    writeValue(value: KbqTimeRangeRange | undefined): void;
+    /** @docs-private */
+    onChange: (_value: KbqTimeRangeRange) => void;
+    /** @docs-private */
+    onTouch: () => void;
+    /** Implemented as part of ControlValueAccessor */
+    registerOnChange(fn: (value: KbqTimeRangeRange) => void): void;
+    /** Implemented as part of ControlValueAccessor */
+    registerOnTouched(fn: () => void): void;
+    private mapTimeRange;
+    private getFormattedOption;
+    private concatControlValidationErrors;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimeRangeEditor<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTimeRangeEditor<any>, "kbq-time-range-editor", never, { "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "availableTimeRangeTypes": { "alias": "availableTimeRangeTypes"; "required": false; "isSignal": true; }; "rangeValue": { "alias": "rangeValue"; "required": false; "isSignal": true; }; "showRangeAsDefault": { "alias": "showRangeAsDefault"; "required": true; "isSignal": true; }; "localeConfiguration": { "alias": "localeConfiguration"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};

package/time-range/time-range-title-as-form-field.d.ts

@@ -0,0 +1,40 @@
+import { NgControl } from '@angular/forms';
+import { KbqFormFieldControl } from '@koobiq/components/form-field';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+/** Directive for easy using styles of time-range placeholder publicly. */
+export declare class KbqTimeRangeTitlePlaceholder {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimeRangeTitlePlaceholder, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTimeRangeTitlePlaceholder, "[kbqTimeRangeTitlePlaceholder]", never, {}, {}, never, never, true, never>;
+}
+/** Component simulates `KbqFormFieldControl` allowing to provide custom content inside `KbqFormField` */
+export declare class KbqTimeRangeTitleAsControl implements KbqFormFieldControl<any> {
+    private timeRange;
+    controlType: string;
+    /** @docs-private */
+    stateChanges: Observable<void>;
+    /** @docs-private */
+    ngControl: NgControl | null;
+    /** @docs-private */
+    value: any;
+    /** @docs-private */
+    id: string;
+    /** @docs-private */
+    placeholder: string;
+    /** @docs-private */
+    focused: boolean;
+    /** @docs-private */
+    empty: boolean;
+    /** @docs-private */
+    required: boolean;
+    /** @docs-private */
+    disabled: boolean;
+    /** @docs-private */
+    errorState: boolean;
+    /** @docs-private */
+    onContainerClick(_event: MouseEvent): void;
+    /** @docs-private */
+    focus(_options?: FocusOptions): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimeRangeTitleAsControl, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTimeRangeTitleAsControl, "kbq-time-range-title-as-control", never, {}, {}, never, ["*"], true, never>;
+}

package/time-range/time-range-title.d.ts

@@ -0,0 +1,18 @@
+import { Injector, TemplateRef } from '@angular/core';
+import { KbqTimeRangeLocaleConfig } from '@koobiq/components/core';
+import { KbqTimeRangeCustomizableTitleContext, KbqTimeRangeRange, KbqTimeRangeTitleContext } from './types';
+import * as i0 from "@angular/core";
+/** @docs-private */
+export declare class KbqTimeRangeTitle {
+    private readonly timeRangeService;
+    private readonly popover;
+    protected readonly injector: Injector;
+    readonly timeRange: import("@angular/core").InputSignal<KbqTimeRangeRange | null>;
+    readonly localeConfiguration: import("@angular/core").InputSignal<KbqTimeRangeLocaleConfig>;
+    readonly titleTemplate: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    protected readonly context: import("@angular/core").Signal<KbqTimeRangeTitleContext | undefined>;
+    protected readonly titleContext: import("@angular/core").Signal<KbqTimeRangeCustomizableTitleContext | undefined>;
+    protected readonly formattedDate: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimeRangeTitle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTimeRangeTitle, "kbq-time-range-title", never, { "timeRange": { "alias": "timeRange"; "required": true; "isSignal": true; }; "localeConfiguration": { "alias": "localeConfiguration"; "required": true; "isSignal": true; }; "titleTemplate": { "alias": "titleTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/time-range/time-range.d.ts

@@ -0,0 +1,75 @@
+import { InjectionToken, OnInit, Provider, TemplateRef, WritableSignal } from '@angular/core';
+import { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';
+import { KbqTimeRangeLocaleConfig, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
+import { KbqPopoverTrigger } from '@koobiq/components/popover';
+import { KbqRangeValue, KbqTimeRangeCustomizableTitleContext, KbqTimeRangeRange, KbqTimeRangeType } from './types';
+import * as i0 from "@angular/core";
+/** Localization configuration provider. */
+export declare const KBQ_TIME_RANGE_LOCALE_CONFIGURATION: InjectionToken<KbqTimeRangeLocaleConfig>;
+/** Utility provider for `KBQ_TIME_RANGE_LOCALE_CONFIGURATION`. */
+export declare const kbqTimeRangeLocaleConfigurationProvider: (configuration: KbqTimeRangeLocaleConfig) => Provider;
+export declare class KbqTimeRange<T> implements ControlValueAccessor, OnInit {
+    private readonly timeRangeService;
+    private readonly localeService;
+    readonly ngControl: NgControl | null;
+    /** The minimum selectable date. */
+    readonly minDate: import("@angular/core").InputSignal<T | undefined>;
+    /** The maximum selectable date. */
+    readonly maxDate: import("@angular/core").InputSignal<T | undefined>;
+    /** provided value of selected range */
+    readonly defaultRangeValue: import("@angular/core").InputSignal<KbqRangeValue<T> | undefined>;
+    /** Preset of selectable ranges */
+    readonly availableTimeRangeTypes: import("@angular/core").InputSignal<KbqTimeRangeType[]>;
+    /** Customizable trigger output */
+    readonly titleTemplate: import("@angular/core").InputSignal<TemplateRef<KbqTimeRangeCustomizableTitleContext> | undefined>;
+    /** Whether to show popover with arrow */
+    readonly arrow: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to show range in popover if not provided
+     * @see availableTimeRangeTypes
+     */
+    readonly showRangeAsDefault: import("@angular/core").InputSignal<boolean>;
+    /** Whether component should fallback to default value if null provided */
+    readonly nonNullable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Emit value update if provided value via formControl wasn't valid */
+    readonly valueCorrected: import("@angular/core").OutputEmitterRef<KbqTimeRangeRange>;
+    /**
+     * Used to calculate time range.
+     * @docs-private */
+    protected readonly normalizedDefaultRangeValue: import("@angular/core").Signal<{
+        fromTime: T;
+        fromDate: T;
+        toTime: T;
+        toDate: T;
+    }>;
+    /** @docs-private */
+    protected readonly titleValue: WritableSignal<KbqTimeRangeRange | null>;
+    /** @docs-private */
+    protected readonly rangeEditorControl: FormControl<KbqTimeRangeRange>;
+    /** @docs-private */
+    protected readonly popoverSize = PopUpSizes.Medium;
+    /** @docs-private */
+    protected readonly popupPlacement = PopUpPlacements.BottomLeft;
+    /** @docs-private */
+    protected readonly localeConfiguration: WritableSignal<KbqTimeRangeLocaleConfig>;
+    constructor();
+    ngOnInit(): void;
+    /** Implemented as part of ControlValueAccessor */
+    writeValue(value: KbqTimeRangeRange | null): void;
+    /** @docs-private */
+    onApply(popover: KbqPopoverTrigger): void;
+    /** @docs-private */
+    onCancel(popover: KbqPopoverTrigger): void;
+    onVisibleChange(isVisible: boolean): void;
+    /** @docs-private */
+    onChange: (_value: KbqTimeRangeRange) => void;
+    /** @docs-private */
+    onTouch: () => void;
+    /** Implemented as part of ControlValueAccessor */
+    registerOnChange(fn: (_value: KbqTimeRangeRange) => void): void;
+    /** Implemented as part of ControlValueAccessor */
+    registerOnTouched(fn: () => void): void;
+    private handleAvailableTypesChange;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimeRange<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTimeRange<any>, "kbq-time-range", never, { "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "defaultRangeValue": { "alias": "defaultRangeValue"; "required": false; "isSignal": true; }; "availableTimeRangeTypes": { "alias": "availableTimeRangeTypes"; "required": false; "isSignal": true; }; "titleTemplate": { "alias": "titleTemplate"; "required": false; "isSignal": true; }; "arrow": { "alias": "arrow"; "required": false; "isSignal": true; }; "showRangeAsDefault": { "alias": "showRangeAsDefault"; "required": false; "isSignal": true; }; "nonNullable": { "alias": "nonNullable"; "required": false; "isSignal": true; }; }, { "valueCorrected": "valueCorrected"; }, never, never, true, never>;
+}

package/time-range/time-range.scss

@@ -0,0 +1,66 @@
+.kbq-time-range {
+    .kbq-time-range__trigger {
+        display: block;
+    }
+}
+
+.kbq-time-range__popover {
+    .kbq-time-range__buttons {
+        display: flex;
+        flex-direction: row;
+        gap: var(--kbq-size-l);
+    }
+}
+
+.kbq-time-range__editor {
+    display: block;
+
+    .kbq-time-range-editor__container {
+        width: 100%;
+    }
+
+    .kbq-time-range-editor__predefined {
+        column-count: 2;
+
+        .kbq-time-range-editor__predefined-option {
+            display: block;
+            margin-bottom: var(--kbq-size-s);
+        }
+    }
+
+    .kbq-time-range-editor__range {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kbq-size-s);
+
+        .kbq-time-range-editor__predefined {
+            column-count: 2;
+
+            .kbq-time-range-editor__predefined-option {
+                display: block;
+            }
+        }
+
+        .kbq-time-range-editor__date-time {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            gap: var(--kbq-size-s);
+
+            .kbq-time-range-editor__date-time-prefix {
+                align-self: center;
+                width: 57px;
+            }
+        }
+    }
+}
+
+.kbq-time-range-title-as-form-field {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-height: calc(var(--kbq-form-field-size-height) - 2 * var(--kbq-size-border-width));
+
+    .kbq-time-range-title__placeholder {
+        color: var(--kbq-foreground-contrast-tertiary);
+    }
+}

package/time-range/time-range.service.d.ts

@@ -0,0 +1,29 @@
+import { DateAdapter, DateFormatter } from '@koobiq/components/core';
+import { KbqRange, KbqRangeValue, KbqTimeRangeRange, KbqTimeRangeTranslateTypeMap, KbqTimeRangeTranslationType, KbqTimeRangeType, KbqTimeRangeUnits } from './types';
+import * as i0 from "@angular/core";
+export declare class KbqTimeRangeService<T> {
+    readonly dateAdapter: DateAdapter<T>;
+    readonly dateFormatter: DateFormatter<T>;
+    protected defaultTimeRangeTypes: KbqTimeRangeType[];
+    readonly providedDefaultTimeRangeTypes: KbqTimeRangeType[];
+    static readonly DEFAULT_RANGE_TYPE: KbqTimeRangeType;
+    static readonly timeRangeMap: Record<KbqTimeRangeType, KbqTimeRangeUnits>;
+    static readonly timeRangeTranslationMap: KbqTimeRangeTranslateTypeMap;
+    constructor();
+    static range: (dateTimeISOString: string) => KbqRange;
+    getTimeRangeTypeUnits(type: KbqTimeRangeType): KbqTimeRangeUnits;
+    getTimeRangeUnitByType(type: KbqTimeRangeType): KbqTimeRangeTranslationType;
+    getDefaultRangeValue(): Required<KbqRangeValue<T>>;
+    getTimeRangeDefaultValue(rangeValue: KbqRangeValue<T>, availableTimeRangeTypes?: KbqTimeRangeType[]): KbqTimeRangeRange;
+    calculateTimeRange(type: KbqTimeRangeType | undefined, rangeValue?: KbqRangeValue<T>): KbqRange;
+    combineDateAndTime(date: T, time: T): T;
+    lastSecondsRange: (seconds: number) => KbqRange;
+    lastMinutesRange: (minutes: number) => KbqRange;
+    lastHoursRange: (hours: number) => KbqRange;
+    lastDaysRange: (days: number) => KbqRange;
+    lastMonthsRange: (months: number) => KbqRange;
+    checkAndCorrectTimeRangeValue(value: KbqTimeRangeRange | null | undefined, availableTimeRangeTypes: KbqTimeRangeType[], rangeValue: KbqRangeValue<T>): KbqTimeRangeRange;
+    omitMilliseconds(date: T): T;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimeRangeService<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqTimeRangeService<any>>;
+}

package/time-range/types.d.ts

@@ -0,0 +1,43 @@
+import { KbqPopoverTrigger } from '@koobiq/components/popover';
+import { DurationUnit } from '@koobiq/date-adapter';
+export interface KbqRangeValue<T> {
+    fromTime?: T;
+    fromDate?: T;
+    toTime?: T;
+    toDate?: T;
+}
+export type KbqRange = {
+    startDateTime?: string;
+    endDateTime?: string;
+};
+export type KbqTimeRangeRange = KbqRange & KbqTimeRangeTypeContext;
+export type KbqTimeRangeTypeContext = {
+    type: KbqTimeRangeType;
+};
+/**
+ * Default accepted “time‑range” identifiers.
+ */
+export type KbqTimeRangeType = 'lastMinute' | 'last5Minutes' | 'last15Minutes' | 'last30Minutes' | 'lastHour' | 'last24Hours' | 'last3Days' | 'last7Days' | 'last14Days' | 'last30Days' | 'last3Months' | 'last12Months' | 'allTime' | 'currentQuarter' | 'currentYear' | 'range';
+export type KbqTimeRangeTranslationType = Extract<DurationUnit, 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months'> | 'other';
+export interface KbqTimeRangeUnits {
+    seconds?: number;
+    minutes?: number;
+    hours?: number;
+    days?: number;
+    weeks?: number;
+    months?: number;
+}
+export type KbqTimeRangeTitleContext = KbqTimeRangeRange & KbqTimeRangeUnits;
+export type KbqTimeRangeCustomizableTitleContext = Partial<KbqTimeRangeTitleContext> & {
+    $implicit: Partial<KbqTimeRangeTitleContext> & {
+        formattedDate: string;
+        popover: KbqPopoverTrigger;
+    };
+} & {
+    formattedDate: string;
+    popover: KbqPopoverTrigger;
+};
+export type KbqTimeRangeTranslateTypeMap = Record<KbqTimeRangeType, KbqTimeRangeTranslationType>;
+export type KbqTimeRangeOptionContext = KbqTimeRangeTypeContext & KbqTimeRangeUnits & {
+    translationType: KbqTimeRangeTranslationType;
+};

package/timepicker/timepicker.directive.d.ts

@@ -20,7 +20,7 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
      * @docs-private
      */
     readonly stateChanges: Subject<void>;
-    readonly errorState: boolean;
+    errorState: boolean;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
@@ -90,7 +90,7 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     private onChange;
     private onTouched;
     private localeSubscription;
-    constructor(elementRef: ElementRef, renderer: Renderer2, dateAdapter: DateAdapter<any>, localeService?: KbqLocaleService | undefined);
+    constructor(elementRef: ElementRef<HTMLInputElement>, renderer: Renderer2, dateAdapter: DateAdapter<any>, localeService?: KbqLocaleService | undefined);
     ngOnDestroy(): void;
     getSize(): number;
     focus(): void;

package/toast/toast.component.d.ts

@@ -1,11 +1,12 @@
 import { AnimationEvent } from '@angular/animations';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { ElementRef, OnDestroy } from '@angular/core';
-import { ThemePalette } from '@koobiq/components/core';
+import { KbqReadStateDirective, ThemePalette } from '@koobiq/components/core';
 import { BehaviorSubject } from 'rxjs';
 import { KbqToastService } from './toast.service';
 import { KbqToastData } from './toast.type';
 import * as i0 from "@angular/core";
+import * as i1 from "@koobiq/components/core";
 export declare class KbqToastCloseButton {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastCloseButton, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqToastCloseButton, "[kbq-toast-close-button]", never, {}, {}, never, never, true, never>;
@@ -13,8 +14,9 @@ export declare class KbqToastCloseButton {
 export declare class KbqToastComponent implements OnDestroy {
     readonly data: KbqToastData;
     readonly service: KbqToastService;
-    elementRef: ElementRef;
+    elementRef: ElementRef<HTMLElement>;
     private focusMonitor;
+    protected readonly readStateDirective: KbqReadStateDirective;
     themePalette: typeof ThemePalette;
     animationState: string;
     readonly hovered: BehaviorSubject<boolean>;
@@ -27,7 +29,7 @@ export declare class KbqToastComponent implements OnDestroy {
         [x: string]: boolean;
     };
     get isFocusedOrHovered(): boolean;
-    constructor(data: KbqToastData, service: KbqToastService, elementRef: ElementRef, focusMonitor: FocusMonitor);
+    constructor(data: KbqToastData, service: KbqToastService, elementRef: ElementRef<HTMLElement>, focusMonitor: FocusMonitor);
     ngOnDestroy(): void;
     close(): void;
     isTemplateRef(value: any): boolean;
@@ -35,5 +37,5 @@ export declare class KbqToastComponent implements OnDestroy {
     private runFocusMonitor;
     private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqToastComponent, "kbq-toast", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqToastComponent, "kbq-toast", never, {}, {}, never, never, true, [{ directive: typeof i1.KbqReadStateDirective; inputs: {}; outputs: {}; }]>;
 }

package/toast/toast.component.scss

@@ -55,6 +55,10 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    &.kbq-toast__title_only-text {
+        white-space: pre-wrap;
+    }
 }
 
 .kbq-toast__title_with-content {
@@ -65,13 +69,19 @@
     display: flex;
     flex: 1;
     align-items: center;
+
+    &.kbq-toast__text_only-text {
+        white-space: pre-wrap;
+    }
 }
 
 .kbq-toast__content {
     display: flex;
     flex-direction: column;
 
-    white-space: pre-wrap;
+    &.kbq-toast__content_only-text {
+        white-space: pre-wrap;
+    }
 }
 
 .kbq-toast__actions {

package/toast/toast.service.d.ts

@@ -15,6 +15,7 @@ export declare class KbqToastService<T extends KbqToastComponent = KbqToastCompo
     private toastConfig;
     get toasts(): ComponentRef<T>[];
     get templates(): EmbeddedViewRef<T>[];
+    readonly read: BehaviorSubject<KbqToastData | null>;
     readonly hovered: BehaviorSubject<boolean>;
     readonly focused: BehaviorSubject<boolean>;
     readonly animation: BehaviorSubject<AnimationEvent | null>;

package/toast/toast.type.d.ts

@@ -15,6 +15,7 @@ export declare enum KbqToastPosition {
     CENTER = "center"
 }
 export declare class KbqToastData {
+    id?: string;
     title?: string | TemplateRef<any>;
     style?: KbqToastStyle | string;
     icon?: TemplateRef<any> | boolean;

package/tooltip/_tooltip-theme.scss

@@ -1,8 +1,6 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-tooltip-color($style-name) {
-    box-shadow: var(--kbq-tooltip-#{$style-name}-shadow);
-
     & .kbq-tooltip__inner {
         color: var(--kbq-tooltip-#{$style-name}-text);
 
@@ -11,11 +9,20 @@
 
     & .kbq-tooltip__arrow {
         background-color: var(--kbq-tooltip-#{$style-name}-background);
+        box-shadow: var(--kbq-tooltip-borderless-shadow);
+    }
+
+    &.kbq-tooltip_arrowless {
         box-shadow: var(--kbq-tooltip-#{$style-name}-shadow);
     }
 }
 
 @mixin kbq-tooltip-theme() {
+    .kbq-tooltip,
+    .kbq-tooltip__arrow {
+        box-shadow: var(--kbq-tooltip-borderless-shadow);
+    }
+
     .kbq-tooltip.kbq-theme {
         @include kbq-tooltip-color(theme-fade-off);
     }

package/tooltip/tooltip-tokens.scss

@@ -20,4 +20,6 @@
     --kbq-tooltip-error-fade-off-background: var(--kbq-background-error);
     --kbq-tooltip-error-fade-off-text: var(--kbq-foreground-white);
     --kbq-tooltip-error-fade-off-shadow: var(--kbq-shadow-popup);
+
+    --kbq-tooltip-borderless-shadow: 0 2px 8px var(--kbq-shadow-key), 0 3px 8px var(--kbq-shadow-ambient);
 }

package/tree/toggle.d.ts

@@ -20,7 +20,7 @@ export declare class KbqTreeNodeToggleBaseDirective<T> {
 }
 export declare class KbqTreeNodeToggleComponent<T> extends KbqTreeNodeToggleBaseDirective<T> {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodeToggleComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeNodeToggleComponent<any>, "kbq-tree-node-toggle", ["kbqTreeNodeToggle"], {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeNodeToggleComponent<any>, "kbq-tree-node-toggle", ["kbqTreeNodeToggle"], {}, {}, never, ["*"], false, never>;
 }
 export declare class KbqTreeNodeToggleDirective<T> extends KbqTreeNodeToggleBaseDirective<T> {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNodeToggleDirective<any>, never>;

package/tree/tree-base.d.ts

@@ -75,7 +75,7 @@ export declare class KbqTreeBase<T> implements AfterContentChecked, CollectionVi
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeBase<any>, never, never, { "treeControl": { "alias": "treeControl"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; }, {}, ["nodeDefs"], never, false, never>;
 }
 export declare class KbqTreeNode<T> implements IFocusableOption, OnDestroy {
-    protected elementRef: ElementRef;
+    protected elementRef: ElementRef<HTMLElement>;
     tree: KbqTreeBase<T>;
     /**
      * The most recently created `KbqTreeNode`. We save it in static variable so we can retrieve it
@@ -88,7 +88,7 @@ export declare class KbqTreeNode<T> implements IFocusableOption, OnDestroy {
     private _data;
     get isExpanded(): boolean;
     get level(): number;
-    constructor(elementRef: ElementRef, tree: KbqTreeBase<T>);
+    constructor(elementRef: ElementRef<HTMLElement>, tree: KbqTreeBase<T>);
     ngOnDestroy(): void;
     focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeNode<any>, never>;

package/tree/tree-option.component.d.ts

@@ -58,7 +58,7 @@ export declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements
     get toggleElement(): KbqTreeNodeToggleBaseDirective<KbqTreeOption>;
     get isToggleInDefaultPlace(): boolean;
     checkboxState: KbqPseudoCheckboxState;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, tree: any);
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, tree: any);
     ngAfterContentInit(): void;
     descendantsAllSelected(): boolean;
     descendantsPartiallySelected(): boolean;