@koobiq/components 18.35.0 → 18.37.0

package/tags/tag.component.d.ts

@@ -1,13 +1,18 @@
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, QueryList } from '@angular/core';
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
 import { KbqColorDirective, KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@koobiq/components/core";
-export interface KbqTagEvent {
+import * as i2 from "@angular/cdk/drag-drop";
+/**
+ * Event object emitted by KbqTag.
+ */
+export type KbqTagEvent = {
     tag: KbqTag;
-}
+};
 /**
  * Event object emitted by KbqTag when the tag is edited.
  */
@@ -24,6 +29,18 @@ export declare class KbqTagSelectionChange {
     isUserInput: boolean;
     constructor(source: KbqTag, selected: boolean, isUserInput?: boolean);
 }
+/**
+ * Event object emitted when the KbqTag is focused.
+ */
+export type KbqTagFocusEvent = KbqTagEvent & {
+    origin: FocusOrigin;
+};
+/**
+ * Object passed to the drag data event when a tag is being dragged.
+ *
+ * @docs-private
+ */
+export type KbqTagDragData = KbqTagEvent;
 /**
  * Dummy directive to add CSS class to tag avatar.
  * @docs-private
@@ -61,27 +78,32 @@ export declare class KbqTagEditInput {
 }
 export declare class KbqTag extends KbqColorDirective implements IFocusableOption, OnDestroy, KbqTitleTextRef, AfterContentInit, AfterViewInit {
     changeDetectorRef: ChangeDetectorRef;
-    private _ngZone;
     private readonly focusMonitor;
     private readonly tagList;
+    private readonly drag;
+    private readonly destroyRef;
     /** @docs-private */
     readonly elementRef: ElementRef<HTMLElement>;
-    /** Emits when the tag is focused. */
-    readonly onFocus: Subject<KbqTagEvent>;
-    /** Emits when the tag is blurred. */
+    /**
+     * Emits when the tag is focused.
+     *
+     * @docs-private
+     */
+    readonly onFocus: Subject<KbqTagFocusEvent>;
+    /**
+     * Emits when the tag is blurred.
+     *
+     * @docs-private
+     */
     readonly onBlur: Subject<KbqTagEvent>;
     /** @docs-private */
     readonly nativeElement: HTMLElement;
-    /** Whether the tag has focus. */
-    hasFocus: boolean;
-    /** Whether the tag list is selectable */
-    tagListSelectable: boolean;
     /**
-     * Whether the tag list is editable.
+     * Whether the tag has focus.
      *
      * @docs-private
      */
-    private get tagListEditable();
+    hasFocus: boolean;
     /** Whether the tag is editable. */
     get editable(): boolean;
     set editable(value: boolean);
@@ -123,16 +145,13 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
     set value(value: any);
     private _value;
     /**
-     * Whether or not the tag is selectable. When a tag is not selectable,
-     * changes to its selected state are always ignored. By default a tag is
-     * selectable, and it becomes non-selectable if its parent tag list is
-     * not selectable.
+     * Whether the tag is selectable.
      */
     get selectable(): boolean;
     set selectable(value: boolean);
     private _selectable;
     /**
-     * Determines whether or not the tag displays the remove styling and emits (removed) events.
+     * Determines whether the tag is removable.
      */
     get removable(): boolean;
     set removable(value: boolean);
@@ -140,20 +159,45 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
     get tabindex(): any;
     set tabindex(value: any);
     private _tabindex;
-    get disabled(): any;
-    set disabled(value: any);
+    /**
+     * Whether the tag is disabled.
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
     private _disabled;
-    constructor(changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone);
+    /**
+     * Whether the tag is draggable.
+     *
+     * @docs-private
+     */
+    protected get draggable(): boolean;
+    constructor(changeDetectorRef: ChangeDetectorRef);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    /** @docs-private */
     addClassModificatorForIcons(): void;
+    /** @docs-private */
     addHostClassName(): void;
+    /**
+     * Selects the tag.
+     */
     select(): void;
+    /**
+     * Deselects the tag.
+     */
     deselect(): void;
+    /**
+     * Selects the tag and emits event with isUserInput flag.
+     *
+     * @docs-private
+     */
     selectViaInteraction(): void;
+    /**
+     * Toggles the current selected state of the tag.
+     */
     toggleSelected(isUserInput?: boolean): boolean;
-    /** Allows for programmatic focusing of the tag. */
+    /** Focuses the tag. */
     focus(): void;
     /**
      * Allows for programmatic removal of the tag. Called by the KbqTagList when the DELETE or
@@ -163,7 +207,7 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
      */
     remove(): void;
     /** @docs-private */
-    handleMousedown(event: Event): void;
+    handleClick(event: MouseEvent): void;
     /** @docs-private */
     handleKeydown(event: KeyboardEvent): void;
     /** @docs-private */
@@ -175,11 +219,26 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
     cancelEditing(reason: string): void;
     /** @docs-private */
     submitEditing(reason: string): void;
-    private dispatchSelectionChange;
+    /**
+     * Sets the selected state of the tag.
+     *
+     * @docs-private
+     */
+    setSelectedState(selected: boolean, options?: Partial<{
+        isUserInput: boolean;
+        emitEvent: boolean;
+    }>): void;
+    private setupDragInitialProperties;
+    private syncDragDisabledState;
+    private setupFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTag, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTag, "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", ["kbqTag"], { "editable": { "alias": "editable"; "required": false; }; "preventEditSubmit": { "alias": "preventEditSubmit"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "editChange": "editChange"; "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["editInputElementRef", "avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[kbq-icon]:not([kbqTagRemove]):not([kbqTagEditSubmit])", "[kbqTagEditInput]", "*", "[kbqTagEditSubmit]", "[kbqTagRemove]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTag, "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", ["kbqTag"], { "editable": { "alias": "editable"; "required": false; }; "preventEditSubmit": { "alias": "preventEditSubmit"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "editChange": "editChange"; "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["editInputElementRef", "avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[kbq-icon]:not([kbqTagRemove]):not([kbqTagEditSubmit])", "[kbqTagEditInput]", "*", "[kbqTagEditSubmit]", "[kbqTagRemove]"], false, [{ directive: typeof i2.CdkDrag; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_editable: unknown;
     static ngAcceptInputType_preventEditSubmit: unknown;
+    static ngAcceptInputType_selected: unknown;
+    static ngAcceptInputType_selectable: unknown;
+    static ngAcceptInputType_removable: unknown;
+    static ngAcceptInputType_disabled: unknown;
 }
 /**
  *
@@ -195,8 +254,13 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
 export declare class KbqTagRemove {
     protected parentTag: KbqTag;
     constructor(parentTag: KbqTag);
-    focus($event: any): void;
-    /** Calls the parent tag's public `remove()` method if applicable. */
+    /** @docs-private */
+    focus(event: FocusEvent): void;
+    /**
+     * Calls the parent tag's public `remove()` method if applicable.
+     *
+     * @docs-private
+     */
     handleClick(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagRemove, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagRemove, "[kbqTagRemove]", never, {}, {}, never, never, false, never>;

package/tags/tag.scss

@@ -10,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);
 
@@ -67,6 +68,14 @@
     .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

@@ -1,6 +1,11 @@
-.kbq-textarea {
+:where(.kbq-textarea) {
     --kbq-textarea-size-min-height: 64px;
     --kbq-textarea-size-max-height: 96px;
     --kbq-textarea-size-padding-vertical: 5px;
     --kbq-textarea-size-padding-horizontal: 11px;
+    --kbq-textarea-resizer-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16" viewBox="0 0 16 16"><path fill="%238a8fa8" d="m13.354 5.354-8 8-.708-.707 8-8zm0 4-4 4-.708-.707 4-4z"/></svg>');
+}
+
+:where(.kbq-dark .kbq-textarea) {
+    --kbq-textarea-resizer-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16" viewBox="0 0 16 16"><path fill="%23626884" d="m13.354 5.354-8 8-.708-.707 8-8zm0 4-4 4-.708-.707 4-4z"/></svg>');
 }

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/textarea/textarea.module.d.ts

@@ -2,8 +2,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "./textarea.component";
 import * as i2 from "@angular/cdk/a11y";
 import * as i3 from "@angular/forms";
+import * as i4 from "@koobiq/components/form-field";
 export declare class KbqTextareaModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTextareaModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTextareaModule, [typeof i1.KbqTextarea], [typeof i2.A11yModule, typeof i3.FormsModule], [typeof i1.KbqTextarea]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTextareaModule, [typeof i1.KbqTextarea], [typeof i2.A11yModule, typeof i3.FormsModule], [typeof i1.KbqTextarea, typeof i4.KbqFormFieldModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTextareaModule>;
 }

package/textarea/textarea.scss

@@ -29,6 +29,10 @@
     &.kbq-textarea-resizable {
         resize: vertical;
         min-height: var(--kbq-textarea-size-min-height);
+
+        &::-webkit-resizer {
+            background: var(--kbq-textarea-resizer-icon) center no-repeat;
+        }
     }
 
     &.kbq-textarea_max-row-limit-reached {

package/time-range/constants.d.ts

@@ -0,0 +1,19 @@
+import { InjectionToken } from '@angular/core';
+import { ValidatorFn } from '@angular/forms';
+import { KbqTimeRangeService } from './time-range.service';
+import { KbqCustomTimeRangeType, KbqTimeRangeType } from './types';
+/** Preset of selectable time ranges, provided by DI. */
+export declare const KBQ_DEFAULT_TIME_RANGE_TYPES: InjectionToken<KbqTimeRangeType[]>;
+/** Preset of custom time ranges, provided by DI. */
+export declare const KBQ_CUSTOM_TIME_RANGE_TYPES: InjectionToken<KbqCustomTimeRangeType[]>;
+/** Time range types in range editor if nothing provided */
+export declare const defaultTimeRangeTypes: KbqTimeRangeType[];
+/** @docs-private */
+export declare function createMissingDateImplError(componentName: string, provider: string): Error;
+/**
+ * Validates that the 'from' date-time is not greater than the 'to' date-time in a range form.
+ * Returns an error if the start date-time occurs after the end date-time.
+ *
+ * @param timeRangeService - Service used to manipulate date-time values.
+ */
+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,65 @@
+import { OnInit, TemplateRef } 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, KbqTimeRangeOptionContext, 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>;
+    /** Customizable option output */
+    readonly optionTemplate: import("@angular/core").InputSignal<TemplateRef<KbqTimeRangeOptionContext> | undefined>;
+    /** @docs-private */
+    protected readonly isRangeVisible: import("@angular/core").Signal<boolean>;
+    /** @docs-private */
+    protected readonly timeRangeTypesWithoutRange: import("@angular/core").Signal<KbqTimeRangeOptionContext[]>;
+    /** @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): 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; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};

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

@@ -0,0 +1,41 @@
+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;
+    /** @docs-private */
+    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,78 @@
+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, KbqTimeRangeOptionContext, 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;
+    /** @docs-private */
+    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>;
+    /** Customizable option output */
+    readonly optionTemplate: import("@angular/core").InputSignal<TemplateRef<KbqTimeRangeOptionContext> | 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; }; "optionTemplate": { "alias": "optionTemplate"; "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,25 @@
+import { DateAdapter, DateFormatter } from '@koobiq/components/core';
+import { KbqCustomTimeRangeType, KbqRange, KbqRangeValue, KbqTimeRangeRange, KbqTimeRangeTranslationType, KbqTimeRangeType, KbqTimeRangeUnits } from './types';
+import * as i0 from "@angular/core";
+export declare class KbqTimeRangeService<T> {
+    readonly dateAdapter: DateAdapter<T>;
+    readonly dateFormatter: DateFormatter<T>;
+    readonly providedDefaultTimeRangeTypes: KbqTimeRangeType[];
+    readonly customTimeRangeTypes: KbqCustomTimeRangeType[] | null;
+    readonly DEFAULT_RANGE_TYPE: KbqTimeRangeType;
+    readonly timeRangeConfig: Record<KbqTimeRangeType, Omit<KbqCustomTimeRangeType, 'type'>>;
+    constructor();
+    static range: (dateTimeISOString: string) => KbqRange;
+    add({ type, ...customTimeRangeConfig }: KbqCustomTimeRangeType): void;
+    getTimeRangeTypeUnits(type: KbqTimeRangeType): KbqTimeRangeUnits;
+    getTimeRangeUnitByType(type: KbqTimeRangeType): KbqTimeRangeTranslationType;
+    getDefaultRangeValue(): Required<KbqRangeValue<T>>;
+    getTimeRangeDefaultValue(rangeValue: KbqRangeValue<T>, availableTimeRangeTypes?: KbqTimeRangeType[]): KbqTimeRangeRange;
+    calculateTimeRange(type?: KbqTimeRangeType, rangeValue?: KbqRangeValue<T>): KbqRange;
+    combineDateAndTime(date: T, time: T): T;
+    lastUnitsRange: (unitsInfo: KbqTimeRangeUnits) => 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>>;
+}