@koobiq/components 18.36.0 → 18.37.0

package/split-button/split-button.scss

@@ -1,4 +1,4 @@
-@use '../core/styles/common';
+@use '../core/styles/common/list';
 @use './split-button-theme';
 
 .kbq-split-button {
@@ -9,74 +9,63 @@
 
     border-radius: var(--kbq-size-border-radius);
 
-    & .kbq-button:first-child {
-        padding-right: 10px;
-    }
+    &.kbq-split-button_styles-for-nested {
+        & .kbq-split-button_first {
+            &.kbq-button {
+                padding-right: 10px;
+            }
 
-    & .kbq-button:first-child,
-    & .kbq-button-icon:first-child {
-        min-width: 0;
+            min-width: 0;
 
-        border-right: none;
+            border-right: none;
 
-        border-top-right-radius: unset;
-        border-bottom-right-radius: unset;
+            border-top-right-radius: unset;
+            border-bottom-right-radius: unset;
 
-        & .kbq-button-wrapper {
-            @include common.kbq-truncate-line();
+            & .kbq-button-wrapper {
+                @include list.kbq-truncate-line();
+            }
         }
-    }
 
-    & .kbq-button:last-child,
-    & .kbq-button-icon:last-child {
-        border-left: none;
+        & .kbq-split-button_second {
+            border-left: none;
 
-        border-top-left-radius: unset;
-        border-bottom-left-radius: unset;
+            border-top-left-radius: unset;
+            border-bottom-left-radius: unset;
 
-        &::before {
-            display: none;
+            &::before {
+                display: block;
 
-            content: '';
-            position: absolute;
-            left: 0;
-            top: calc(var(--kbq-size-s) - var(--kbq-button-size-border-width));
+                content: '';
+                position: absolute;
+                left: 0;
+                top: calc(var(--kbq-size-s) - var(--kbq-button-size-border-width));
 
-            width: 1px;
-            height: var(--kbq-size-l);
-        }
-    }
-
-    & .kbq-button,
-    & .kbq-button-icon {
-        &:not(:hover, .cdk-keyboard-focused, .kbq-active, .kbq-progress) {
-            & + .kbq-button,
-            & + .kbq-button-icon {
-                &:not(:hover, .cdk-keyboard-focused, .kbq-active, .kbq-progress) {
-                    &::before {
-                        display: block;
-                    }
-                }
+                width: 1px;
+                height: var(--kbq-size-l);
             }
         }
 
-        &.kbq-progress {
-            & + .kbq-button,
-            & + .kbq-button-icon {
-                &.kbq-progress::before {
-                    display: block;
-                }
+        & .kbq-split-button_first:not(.kbq-disabled):is(:hover, .kbq-hover, .cdk-keyboard-focused, .kbq-active) {
+            & + .kbq-split-button_second::before {
+                display: none;
             }
         }
 
-        &[disabled] + [disabled]::before {
-            display: block;
+        &
+            .kbq-split-button_second:not(.kbq-disabled):is(
+                :hover,
+                .kbq-hover,
+                .cdk-keyboard-focused,
+                .kbq-active
+            )::before {
+            display: none;
         }
-    }
 
-    & .kbq-button-icon + .kbq-button-icon {
-        padding-left: var(--kbq-size-xxs);
-        padding-right: var(--kbq-size-xxs);
+        & .kbq-button-icon + .kbq-button-icon {
+            padding-left: var(--kbq-size-xxs);
+            padding-right: var(--kbq-size-xxs);
+        }
     }
 }
 

package/tags/tag-input.d.ts

@@ -1,4 +1,4 @@
-import { ElementRef, EventEmitter, OnChanges, Renderer2 } from '@angular/core';
+import { ElementRef, EventEmitter, OnChanges } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { KbqAutocompleteTrigger } from '@koobiq/components/autocomplete';
 import { KbqTrim } from '@koobiq/components/form-field';
@@ -6,6 +6,7 @@ import { KbqTagsDefaultOptions } from './tag-default-options';
 import { KbqTagList } from './tag-list.component';
 import { KbqTagTextControl } from './tag-text-control';
 import * as i0 from "@angular/core";
+import * as i1 from "@koobiq/components/core";
 /** Represents an input event on a `kbqTagInput`. */
 export interface KbqTagInputEvent {
     /** The native `<input>` element that the event is being fired for. */
@@ -23,7 +24,6 @@ export interface KbqTagSeparator {
  */
 export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     private elementRef;
-    private renderer;
     private defaultOptions;
     private trimDirective;
     ngControl: NgControl;
@@ -68,12 +68,17 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     private _disabled;
     /** Whether the input is empty. */
     get empty(): boolean;
+    /**
+     * @docs-private
+     *
+     * @deprecated Unused. Will be removed in next major release.
+     */
     countOfSymbolsForUpdateWidth: number;
-    private oneSymbolWidth;
     /** The native input element to which this directive is attached. */
     private inputElement;
-    constructor(elementRef: ElementRef<HTMLInputElement>, renderer: Renderer2, defaultOptions: KbqTagsDefaultOptions, trimDirective: KbqTrim, ngControl: NgControl, autocompleteTrigger?: KbqAutocompleteTrigger | undefined);
+    constructor(elementRef: ElementRef<HTMLInputElement>, defaultOptions: KbqTagsDefaultOptions, trimDirective: KbqTrim, ngControl: NgControl, autocompleteTrigger?: KbqAutocompleteTrigger | undefined);
     ngOnChanges(): void;
+    /** @docs-private */
     onKeydown(event: KeyboardEvent): void;
     /** Checks to see if the blur should emit the (tagEnd) event. */
     blur(event: FocusEvent): void;
@@ -83,6 +88,11 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     get hasDuplicates(): boolean;
     onInput(): void;
     onPaste($event: ClipboardEvent): void;
+    /**
+     * @docs-private
+     *
+     * @deprecated Unused. Will be removed in next major release.
+     */
     updateInputWidth(): void;
     /** @docs-private */
     onFocus(): void;
@@ -92,9 +102,8 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     private trimValue;
     private getSeparatorByKeyCode;
     private hasControl;
-    private setDefaultInputWidth;
     /** Checks whether a keycode is one of the configured separators. */
     private isSeparatorKey;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagInput, [null, null, null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagInput, "input[kbqTagInputFor]", ["kbqTagInput", "kbqTagInputFor"], { "separatorKeyCodes": { "alias": "kbqTagInputSeparatorKeyCodes"; "required": false; }; "distinct": { "alias": "distinct"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "kbqTagInputFor"; "required": false; }; "addOnBlur": { "alias": "kbqTagInputAddOnBlur"; "required": false; }; "addOnPaste": { "alias": "kbqTagInputAddOnPaste"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "kbqTagInputTokenEnd"; }, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagInput, [null, null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; self: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagInput, "input[kbqTagInputFor]", ["kbqTagInput", "kbqTagInputFor"], { "separatorKeyCodes": { "alias": "kbqTagInputSeparatorKeyCodes"; "required": false; }; "distinct": { "alias": "distinct"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "kbqTagInputFor"; "required": false; }; "addOnBlur": { "alias": "kbqTagInputAddOnBlur"; "required": false; }; "addOnPaste": { "alias": "kbqTagInputAddOnPaste"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "kbqTagInputTokenEnd"; }, never, never, false, [{ directive: typeof i1.KbqFieldSizingContent; inputs: {}; outputs: {}; }]>;
 }

package/tags/tag-list.component.d.ts

@@ -8,7 +8,7 @@ import { CanUpdateErrorState, ErrorStateMatcher, KbqOrientation } from '@koobiq/
 import { KbqCleaner, KbqFormFieldControl } from '@koobiq/components/form-field';
 import { Observable, Subject } from 'rxjs';
 import { KbqTagTextControl } from './tag-text-control';
-import { KbqTag, KbqTagEditChange, KbqTagEvent, KbqTagSelectionChange } from './tag.component';
+import { KbqTag, KbqTagEditChange, KbqTagEvent, KbqTagFocusEvent, KbqTagSelectionChange } from './tag.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/cdk/drag-drop";
 /** Change event object that is emitted when the tag list value has changed. */
@@ -43,28 +43,48 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
      * @docs-private
      */
     readonly stateChanges: Subject<void>;
-    /** Combined stream of all of the child tags' selection change events. */
+    /**
+     * Combined stream of all of the child tags' selection change events.
+     *
+     * @docs-private
+     */
     get tagSelectionChanges(): Observable<KbqTagSelectionChange>;
-    /** Combined stream of all of the child tags' focus change events. */
-    get tagFocusChanges(): Observable<KbqTagEvent>;
-    /** Combined stream of all of the child tags' blur change events. */
+    /**
+     * Combined stream of all of the child tags' focus change events.
+     *
+     * @docs-private
+     */
+    get tagFocusChanges(): Observable<KbqTagFocusEvent>;
+    /**
+     * Combined stream of all of the child tags' blur change events.
+     *
+     * @docs-private
+     */
     get tagBlurChanges(): Observable<KbqTagEvent>;
-    /** Combined stream of all of the child tags' remove change events. */
+    /**
+     * Combined stream of all of the child tags' remove change events.
+     *
+     * @docs-private
+     */
     get tagRemoveChanges(): Observable<KbqTagEvent>;
-    /** Combined stream of all of the child tags' edit change events. */
+    /**
+     * Combined stream of all of the child tags' edit change events.
+     *
+     * @docs-private
+     */
     get tagEditChanges(): Observable<KbqTagEditChange>;
     /**
      * The array of selected tags inside tag list.
      *
      * @docs-private
      */
-    get selected(): KbqTag[] | KbqTag;
+    get selected(): KbqTag[];
     /** @docs-private */
     get canShowCleaner(): boolean;
     /**
-     * Whether the user should be allowed to select multiple tags.
+     * @deprecated Unused. Will be removed in next major release.
      *
-     * NOTE! Component does not support dynamic multiple attribute changes.
+     * @docs-private
      */
     multiple: boolean;
     /**
@@ -138,7 +158,12 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     get removable(): boolean;
     set removable(value: boolean);
     private _removable;
-    get tabIndex(): number;
+    /**
+     * Tab index of the tag list. This property is ignored when the tag list contains a tag input or is disabled.
+     *
+     * @docs-private
+     */
+    get tabIndex(): number | null;
     set tabIndex(value: number);
     private _tabIndex;
     /**
@@ -206,8 +231,6 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     private tagFocusSubscription;
     /** Subscription to blur changes in the tags. */
     private tagBlurSubscription;
-    /** Subscription to selection changes in tags. */
-    private tagSelectionSubscription;
     /** Subscription to remove changes in tags. */
     private tagRemoveSubscription;
     /** Subscription to edit changes in tags. */
@@ -250,13 +273,16 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
      *
      * @docs-private
      */
-    onContainerClick(event: MouseEvent): void;
+    onContainerClick(): void;
     /**
-     * Focuses the first non-disabled tag in this tag list, or the associated input when there
-     * are no eligible tags.
+     * Focuses the tag list. If there is a tag input, focuses that instead.
      */
     focus(): void;
-    /** Attempt to focus an input if we have one. */
+    /**
+     * Focuses the tag input inside the tag list.
+     *
+     * @docs-private
+     */
     focusInput(): void;
     /**
      * Pass events to the keyboard manager. Available here for tests.
@@ -294,6 +320,7 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
      * @returns True if the index is valid for our list of tags.
      */
     private isValidIndex;
+    private isInputElement;
     private isInputEmpty;
     private isTagElement;
     private selectAll;
@@ -313,13 +340,9 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     private resetTags;
     private dropSubscriptions;
     /** Listens to user-generated selection events on each tag. */
-    private listenToTagsSelection;
-    /** Listens to user-generated selection events on each tag. */
     private listenToTagsFocus;
     private listenToTagsRemoved;
     private listenToTagsEdit;
-    /** Checks whether an event comes from inside a tag element. */
-    private originatesFromTag;
     /** Checks whether any of the tags is focused. */
     private hasFocusedTag;
     private syncTagsRemovableState;

package/tags/tag-list.scss

@@ -1,4 +1,5 @@
 @use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/input';
 
 .kbq-tag-list {
     display: flex;
@@ -17,22 +18,24 @@
 }
 
 .kbq-tag-input {
-    border: none;
-    outline: none;
-    background: transparent;
-
-    text-overflow: ellipsis;
-
-    min-height: unset;
+    @include input.kbq-reset-input();
 
     padding-top: var(--kbq-tag-size-padding-vertical);
     padding-bottom: var(--kbq-tag-size-padding-vertical);
-    padding-left: 4px;
+    padding-left: var(--kbq-size-xxs);
     padding-right: unset;
 
+    min-width: var(--kbq-size-3xl);
+    max-width: 100%;
+    flex-grow: 1;
+
     &.kbq-input {
-        padding: unset;
-        min-height: unset;
+        --kbq-input-size-padding-vertical: 0;
+        --kbq-form-field-size-border-radius: 0;
+
+        padding-left: var(--kbq-size-xxs);
+        min-height: unset !important;
+        width: auto;
     }
 }
 
@@ -48,10 +51,6 @@
     gap: var(--kbq-tag-list-size-content-gap);
 
     .kbq-tag-input {
-        max-width: 100%;
-
-        flex: 1 1 auto;
-
         // indicating tag list is empty
         &:first-child {
             padding-left: var(--kbq-size-s);

package/tags/tag.component.d.ts

@@ -7,9 +7,12 @@ import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@koobiq/components/core";
 import * as i2 from "@angular/cdk/drag-drop";
-export interface KbqTagEvent {
+/**
+ * Event object emitted by KbqTag.
+ */
+export type KbqTagEvent = {
     tag: KbqTag;
-}
+};
 /**
  * Event object emitted by KbqTag when the tag is edited.
  */
@@ -26,12 +29,18 @@ export declare class KbqTagSelectionChange {
     isUserInput: boolean;
     constructor(source: KbqTag, selected: boolean, isUserInput?: boolean);
 }
-/** @docs-private */
-export type KbqDragData = {
-    tag: KbqTag;
-    hasFocus: boolean;
-    focusOrigin: FocusOrigin;
+/**
+ * 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
@@ -80,7 +89,7 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
      *
      * @docs-private
      */
-    readonly onFocus: Subject<KbqTagEvent>;
+    readonly onFocus: Subject<KbqTagFocusEvent>;
     /**
      * Emits when the tag is blurred.
      *
@@ -95,7 +104,6 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
      * @docs-private
      */
     hasFocus: boolean;
-    private focusOrigin;
     /** Whether the tag is editable. */
     get editable(): boolean;
     set editable(value: boolean);
@@ -137,10 +145,7 @@ 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);
@@ -202,7 +207,7 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
      */
     remove(): void;
     /** @docs-private */
-    handleMousedown(event: MouseEvent): void;
+    handleClick(event: MouseEvent): void;
     /** @docs-private */
     handleKeydown(event: KeyboardEvent): void;
     /** @docs-private */
@@ -227,7 +232,7 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
     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, [{ directive: typeof i1.KbqHovered; inputs: {}; outputs: {}; }, { directive: typeof i2.CdkDrag; inputs: {}; outputs: {}; }]>;
+    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;

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.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

@@ -1,8 +1,19 @@
 import { InjectionToken } from '@angular/core';
 import { ValidatorFn } from '@angular/forms';
 import { KbqTimeRangeService } from './time-range.service';
-import { KbqTimeRangeType } from './types';
+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/time-range-editor.d.ts

@@ -1,8 +1,8 @@
-import { OnInit } from '@angular/core';
+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, KbqTimeRangeRange, KbqTimeRangeType } from './types';
+import { KbqRangeValue, KbqTimeRangeOptionContext, KbqTimeRangeRange, KbqTimeRangeType } from './types';
 import * as i0 from "@angular/core";
 interface FormValue<T> {
     type: FormControl<KbqTimeRangeType>;
@@ -27,14 +27,12 @@ export declare class KbqTimeRangeEditor<T> implements ControlValueAccessor, Vali
     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<{
-        type: "lastMinute" | "last5Minutes" | "last15Minutes" | "last30Minutes" | "lastHour" | "last24Hours" | "last3Days" | "last7Days" | "last14Days" | "last30Days" | "last3Months" | "last12Months" | "allTime" | "currentQuarter" | "currentYear";
-        translationType: import("./types").KbqTimeRangeTranslationType;
-        formattedValue: string;
-    }[]>;
+    protected readonly timeRangeTypesWithoutRange: import("@angular/core").Signal<KbqTimeRangeOptionContext[]>;
     /** @docs-private */
     protected readonly timepickerList: import("@angular/core").Signal<readonly KbqTimepicker<T>[]>;
     /** @docs-private */
@@ -49,7 +47,7 @@ export declare class KbqTimeRangeEditor<T> implements ControlValueAccessor, Vali
     /** @docs-private */
     validate(): ValidationErrors | null;
     /** Implemented as part of ControlValueAccessor */
-    writeValue(value: KbqTimeRangeRange | undefined): void;
+    writeValue(value?: KbqTimeRangeRange): void;
     /** @docs-private */
     onChange: (_value: KbqTimeRangeRange) => void;
     /** @docs-private */
@@ -62,6 +60,6 @@ export declare class KbqTimeRangeEditor<T> implements ControlValueAccessor, Vali
     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>;
+    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

@@ -10,6 +10,7 @@ export declare class KbqTimeRangeTitlePlaceholder {
 /** 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>;

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

@@ -2,7 +2,7 @@ import { InjectionToken, OnInit, Provider, TemplateRef, WritableSignal } from '@
 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 { 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>;
@@ -11,6 +11,7 @@ export declare const kbqTimeRangeLocaleConfigurationProvider: (configuration: Kb
 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>;
@@ -22,6 +23,8 @@ export declare class KbqTimeRange<T> implements ControlValueAccessor, OnInit {
     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>;
     /**
@@ -71,5 +74,5 @@ export declare class KbqTimeRange<T> implements ControlValueAccessor, OnInit {
     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>;
+    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.service.d.ts

@@ -1,27 +1,23 @@
 import { DateAdapter, DateFormatter } from '@koobiq/components/core';
-import { KbqRange, KbqRangeValue, KbqTimeRangeRange, KbqTimeRangeTranslateTypeMap, KbqTimeRangeTranslationType, KbqTimeRangeType, KbqTimeRangeUnits } from './types';
+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>;
-    protected defaultTimeRangeTypes: KbqTimeRangeType[];
     readonly providedDefaultTimeRangeTypes: KbqTimeRangeType[];
-    static readonly DEFAULT_RANGE_TYPE: KbqTimeRangeType;
-    static readonly timeRangeMap: Record<KbqTimeRangeType, KbqTimeRangeUnits>;
-    static readonly timeRangeTranslationMap: KbqTimeRangeTranslateTypeMap;
+    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 | undefined, rangeValue?: KbqRangeValue<T>): KbqRange;
+    calculateTimeRange(type?: KbqTimeRangeType, 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;
+    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>;