@koobiq/components 18.35.0 → 18.37.0

package/split-button/_split-button-theme.scss

@@ -0,0 +1,114 @@
+@mixin kbq-split-button-theme() {
+    .kbq-split-button {
+        &:hover:has(.kbq-button_transparent) {
+            background: var(--kbq-states-background-transparent-hover, rgba(108, 115, 147, 0.08));
+        }
+
+        & .kbq-split-button_item {
+            &.kbq-contrast.kbq-button_filled::before {
+                background: var(--kbq-foreground-on-contrast);
+            }
+
+            &.kbq-contrast.kbq-button_transparent,
+            &.kbq-contrast-fade.kbq-button_outline,
+            &.kbq-contrast-fade.kbq-button_filled {
+                &::before {
+                    background: var(--kbq-line-contrast-fade);
+                }
+            }
+
+            &.kbq-theme-fade.kbq-button_outline,
+            &.kbq-theme.kbq-button_transparent {
+                &::before {
+                    background: var(--kbq-line-theme-fade);
+                }
+            }
+
+            &.kbq-split-button_first.cdk-keyboard-focused {
+                z-index: 1;
+                box-shadow: inset -1px 0 0 0 var(--kbq-states-line-focus-theme);
+            }
+
+            &.kbq-split-button_second.cdk-keyboard-focused {
+                box-shadow: inset 1px 0 0 0 var(--kbq-states-line-focus-theme);
+            }
+        }
+
+        & .kbq-button_outline:has(+ .kbq-button_outline) {
+            border-right: none;
+
+            & + .kbq-button_outline {
+                border-left: none;
+            }
+        }
+
+        &.kbq-split-button_first-disabled {
+            &.kbq-contrast-fade.kbq-button_filled,
+            &.kbq-contrast.kbq-button_filled {
+                & .kbq-split-button_item {
+                    background: var(--kbq-states-background-disabled);
+                }
+
+                & .kbq-split-button_second:not(.kbq-disabled) {
+                    &:hover {
+                        background: var(--kbq-states-background-contrast-fade-hover);
+                    }
+
+                    &:active {
+                        background: var(--kbq-states-background-contrast-fade-active);
+                    }
+
+                    & .kbq-icon.kbq-empty {
+                        color: var(--kbq-icon-contrast);
+                    }
+
+                    &:before {
+                        background: var(--kbq-line-contrast-fade);
+                    }
+                }
+            }
+
+            &.kbq-theme-fade.kbq-button_outline {
+                & .kbq-split-button_item {
+                    border-color: var(--kbq-button-outline-theme-fade-on-states-disabled-border);
+                }
+            }
+        }
+
+        &.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled) {
+            &.kbq-contrast.kbq-button_filled {
+                & .kbq-split-button_second {
+                    background: var(--kbq-button-filled-contrast-fade-off-background);
+                }
+            }
+
+            &.kbq-contrast-fade.kbq-button_filled {
+                & .kbq-split-button_first {
+                    background: var(--kbq-states-background-disabled);
+                }
+            }
+
+            &.kbq-theme-fade.kbq-button_outline {
+                & .kbq-split-button_item {
+                    border-color: var(--kbq-button-outline-theme-fade-on-states-disabled-border);
+                }
+            }
+
+            &.kbq-theme.kbq-button_transparent {
+                & .kbq-split-button_second:before {
+                    background: var(--kbq-states-line-disabled);
+                }
+            }
+
+            & .kbq-split-button_second:before {
+                background: rgba(138, 143, 168, 0.6);
+            }
+        }
+
+        &.kbq-split-button_first-disabled.kbq-split-button_second-disabled {
+            & .kbq-split-button_second:before {
+                background: var(--kbq-line-contrast-fade);
+            }
+        }
+    }
+}

package/split-button/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/split-button/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './split-button';
+export * from './split-button.module';

package/split-button/split-button.d.ts

@@ -0,0 +1,37 @@
+import { AfterContentInit, QueryList } from '@angular/core';
+import { KbqButton, KbqButtonStyles } from '@koobiq/components/button';
+import { KbqColorDirective, KbqComponentColors, ThemePalette } from '@koobiq/components/core';
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
+import * as i0 from "@angular/core";
+export declare class KbqSplitButton extends KbqColorDirective implements AfterContentInit {
+    private nativeElement;
+    /** @docs-private */
+    protected buttons: QueryList<KbqButton>;
+    /** @docs-private */
+    protected dropdownTrigger: KbqDropdownTrigger;
+    /** Sets the width of the dropdown to the width of the trigger. Default is false */
+    panelAutoWidth: boolean;
+    /** component style, will be set for nested buttons */
+    get kbqStyle(): string;
+    set kbqStyle(value: KbqButtonStyles | string);
+    private _kbqStyle;
+    /** component color, will be set for nested buttons */
+    get color(): KbqComponentColors | ThemePalette | string;
+    set color(value: KbqComponentColors | ThemePalette | string);
+    /** Whether the checkbox is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    protected _disabled: boolean;
+    get firstDisabled(): boolean;
+    get secondDisabled(): boolean;
+    constructor();
+    ngAfterContentInit(): void;
+    private updateClasses;
+    private updateColor;
+    private updateStyle;
+    private updateDisabledState;
+    private updateDropdownParams;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSplitButton, "kbq-split-button, [kbq-split-button]", never, { "panelAutoWidth": { "alias": "panelAutoWidth"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["dropdownTrigger", "buttons"], ["[kbq-button]", "[kbq-button]"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}

package/split-button/split-button.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./split-button";
+export declare class KbqSplitButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSplitButtonModule, never, [typeof i1.KbqSplitButton], [typeof i1.KbqSplitButton]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqSplitButtonModule>;
+}

package/split-button/split-button.scss

@@ -0,0 +1,72 @@
+@use '../core/styles/common/list';
+@use './split-button-theme';
+
+.kbq-split-button {
+    display: flex;
+    flex-direction: row;
+
+    min-width: 0;
+
+    border-radius: var(--kbq-size-border-radius);
+
+    &.kbq-split-button_styles-for-nested {
+        & .kbq-split-button_first {
+            &.kbq-button {
+                padding-right: 10px;
+            }
+
+            min-width: 0;
+
+            border-right: none;
+
+            border-top-right-radius: unset;
+            border-bottom-right-radius: unset;
+
+            & .kbq-button-wrapper {
+                @include list.kbq-truncate-line();
+            }
+        }
+
+        & .kbq-split-button_second {
+            border-left: none;
+
+            border-top-left-radius: unset;
+            border-bottom-left-radius: unset;
+
+            &::before {
+                display: block;
+
+                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-split-button_first:not(.kbq-disabled):is(:hover, .kbq-hover, .cdk-keyboard-focused, .kbq-active) {
+            & + .kbq-split-button_second::before {
+                display: none;
+            }
+        }
+
+        &
+            .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);
+        }
+    }
+}
+
+@include split-button-theme.kbq-split-button-theme();

package/splitter/splitter.component.d.ts

@@ -28,7 +28,7 @@ export declare class KbqGutterDirective implements OnInit {
     private _size;
     get isVertical(): boolean;
     dragged: boolean;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
     ngOnInit(): void;
     getPosition(): IPoint;
     private setStyle;
@@ -52,14 +52,14 @@ export declare class KbqGutterGhostDirective {
     set size(size: number);
     private _size;
     get isVertical(): boolean;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
     private updateDimensions;
     private setStyle;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqGutterGhostDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqGutterGhostDirective, "kbq-gutter-ghost", never, { "visible": { "alias": "visible"; "required": false; }; "x": { "alias": "x"; "required": false; }; "y": { "alias": "y"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class KbqSplitterComponent implements OnInit, AfterContentInit, OnDestroy {
-    elementRef: ElementRef;
+    elementRef: ElementRef<HTMLElement>;
     changeDetectorRef: ChangeDetectorRef;
     private ngZone;
     private renderer;
@@ -90,7 +90,7 @@ export declare class KbqSplitterComponent implements OnInit, AfterContentInit, O
     private _gutterSize;
     get resizing(): boolean;
     private _resizing;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, renderer: Renderer2);
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, renderer: Renderer2);
     addArea(area: KbqSplitterAreaDirective): void;
     ngOnInit(): void;
     ngAfterContentInit(): void;
@@ -113,7 +113,7 @@ export declare class KbqSplitterAreaDirective implements AfterViewInit, OnDestro
     private splitter;
     readonly sizeChange: EventEmitter<number>;
     private readonly window;
-    constructor(elementRef: ElementRef, renderer: Renderer2, splitter: KbqSplitterComponent);
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2, splitter: KbqSplitterComponent);
     isResizing(): boolean;
     disableFlex(): void;
     ngAfterViewInit(): void;

package/tabs/paginated-tab-header.d.ts

@@ -70,7 +70,7 @@ export declare abstract class KbqPaginatedTabHeader implements AfterContentCheck
     /** Whether the header should scroll to the selected index after the view has been checked. */
     private selectedIndexChanged;
     protected readonly destroyRef: DestroyRef;
-    readonly elementRef: ElementRef<any>;
+    readonly elementRef: ElementRef<HTMLElement>;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     private readonly viewportRuler;
     private readonly ngZone;

package/tabs/tab-header.component.d.ts

@@ -23,8 +23,8 @@ export declare class KbqTabHeader extends KbqPaginatedTabHeader {
     readonly tabList: ElementRef;
     readonly nextPaginator: ElementRef<HTMLElement>;
     readonly previousPaginator: ElementRef<HTMLElement>;
-    protected get activeTabOffsetWidth(): string | null;
-    protected get activeTabOffsetLeft(): string | null;
+    protected get activeTabOffsetWidth(): number | undefined;
+    protected get activeTabOffsetLeft(): number | undefined;
     protected itemSelected(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabHeader, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "underlined": { "alias": "underlined"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false, never>;

package/tabs/tab-label-wrapper.directive.d.ts

@@ -6,14 +6,14 @@ import * as i0 from "@angular/core";
  * @docs-private
  */
 export declare class KbqTabLabelWrapper implements AfterViewInit {
-    elementRef: ElementRef;
+    elementRef: ElementRef<HTMLElement>;
     private renderer;
     labelContent: ElementRef;
     tab: KbqTab;
     get disabled(): boolean;
     set disabled(value: boolean);
     private _disabled;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
     ngAfterViewInit(): void;
     /** Sets focus on the wrapper element */
     focus(): void;

package/tabs/tab-nav-bar.d.ts

@@ -20,8 +20,8 @@ export declare class KbqTabNavBar extends KbqPaginatedTabHeader implements After
      */
     tabNavPanel?: KbqTabNavPanel;
     get role(): string | null;
-    protected get activeTabOffsetWidth(): string | null;
-    protected get activeTabOffsetLeft(): string | null;
+    protected get activeTabOffsetWidth(): number | undefined;
+    protected get activeTabOffsetLeft(): number | undefined;
     ngAfterContentInit(): void;
     protected itemSelected(): void;
     /** Notifies the component that the active link has been changed. */
@@ -59,7 +59,7 @@ export declare class KbqTabLink implements OnDestroy, AfterViewInit {
     protected get ariaControls(): string | null;
     /** Link aria-current attribute value. */
     protected get ariaCurrent(): string | null;
-    readonly elementRef: ElementRef<any>;
+    readonly elementRef: ElementRef<HTMLElement>;
     private readonly focusMonitor;
     private readonly renderer;
     private readonly tabNavBar;

package/tags/_tag-theme.scss

@@ -1,8 +1,7 @@
 @use '../core/styles/common/tokens' as *;
-
 @use './tag-tokens';
 
-@mixin kbq-tag-state($type, $style-name) {
+@mixin _kbq-tag-state($type, $style-name) {
     $base: tag-#{$type}-#{$style-name};
 
     background: var(--kbq-#{$base}-background);
@@ -16,25 +15,32 @@
     }
 }
 
-@mixin kbq-tag-color($type) {
-    @include kbq-tag-state($type, default);
+@mixin _kbq-tag-color($type) {
+    @include _kbq-tag-state($type, default);
 
     &:hover,
     &.kbq-hovered {
-        @include kbq-tag-state($type, states-hover);
+        @include _kbq-tag-state($type, states-hover);
+    }
+
+    &.cdk-keyboard-focused,
+    &.kbq-tag_editing {
+        @include _kbq-tag-state($type, states-focus);
+
+        outline: 2px solid var(--kbq-tag-#{$type}-states-focus-outline);
     }
 
-    &.kbq-focused {
-        @include kbq-tag-state($type, states-focus);
+    &.kbq-selected:not(.kbq-disabled, .kbq-tag_editing) {
+        @include _kbq-tag-state($type, states-selected);
 
-        box-shadow:
-            inset 0 0 0.1px 1px var(--kbq-tag-#{$type}-states-focus-outline),
-            0 0 0.1px 1px var(--kbq-tag-#{$type}-states-focus-outline);
+        &.cdk-keyboard-focused {
+            box-shadow: inset 0 0 0 var(--kbq-size-border-width) var(--kbq-background-bg);
+        }
     }
 
     // TODO: Combine disabled states for all colors (#DS-3778)
     &.kbq-disabled {
-        @include kbq-tag-state($type, states-disabled);
+        @include _kbq-tag-state($type, states-disabled);
     }
 
     &.kbq-tag_editing {
@@ -49,19 +55,19 @@
 @mixin kbq-tag-theme() {
     .kbq-tag {
         &.kbq-theme {
-            @include kbq-tag-color(theme-fade-on);
+            @include _kbq-tag-color(theme-fade-on);
         }
 
         &.kbq-contrast-fade {
-            @include kbq-tag-color(contrast-fade-on);
+            @include _kbq-tag-color(contrast-fade-on);
         }
 
         &.kbq-error {
-            @include kbq-tag-color(error-fade-on);
+            @include _kbq-tag-color(error-fade-on);
         }
 
         &.kbq-warning {
-            @include kbq-tag-color(warning-fade);
+            @include _kbq-tag-color(warning-fade);
         }
     }
 }

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,16 +88,22 @@ 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;
     /** Focuses the input. */
     focus(): void;
+    private getSeparatorsForString;
     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: {}; }]>;
 }