@koobiq/components 18.34.0 → 18.35.0

package/tags/tag.component.d.ts

@@ -1,12 +1,22 @@
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, QueryList } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, 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 {
     tag: KbqTag;
 }
+/**
+ * Event object emitted by KbqTag when the tag is edited.
+ */
+export declare class KbqTagEditChange {
+    readonly tag: KbqTag;
+    readonly type: 'start' | 'submit' | 'cancel';
+    readonly reason: string;
+    constructor(tag: KbqTag, type: 'start' | 'submit' | 'cancel', reason: string);
+}
 /** Event object emitted by KbqTag when selected or deselected. */
 export declare class KbqTagSelectionChange {
     source: KbqTag;
@@ -30,20 +40,67 @@ export declare class KbqTagTrailingIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagTrailingIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagTrailingIcon, "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", never, {}, {}, never, never, false, never>;
 }
-export declare class KbqTag extends KbqColorDirective implements IFocusableOption, OnDestroy, KbqTitleTextRef, AfterContentInit {
-    elementRef: ElementRef;
+/**
+ * Directive to add submit behavior for the editable tag.
+ */
+export declare class KbqTagEditSubmit {
+    /** @docs-private */
+    protected readonly tag: KbqTag;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagEditSubmit, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagEditSubmit, "[kbqTagEditSubmit]", ["kbqTagEditSubmit"], {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to add input behavior for the editable tag.
+ */
+export declare class KbqTagEditInput {
+    private readonly tag;
+    /** @docs-private */
+    protected handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagEditInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagEditInput, "[kbqTagEditInput]", ["kbqTagEditInput"], {}, {}, never, never, true, [{ directive: typeof i1.KbqFieldSizingContent; inputs: {}; outputs: {}; }]>;
+}
+export declare class KbqTag extends KbqColorDirective implements IFocusableOption, OnDestroy, KbqTitleTextRef, AfterContentInit, AfterViewInit {
     changeDetectorRef: ChangeDetectorRef;
     private _ngZone;
+    private readonly focusMonitor;
+    private readonly tagList;
+    /** @docs-private */
+    readonly elementRef: ElementRef<HTMLElement>;
     /** Emits when the tag is focused. */
     readonly onFocus: Subject<KbqTagEvent>;
     /** Emits when the tag is blurred. */
     readonly onBlur: Subject<KbqTagEvent>;
-    nativeElement: HTMLElement;
+    /** @docs-private */
+    readonly nativeElement: HTMLElement;
     /** Whether the tag has focus. */
     hasFocus: boolean;
     /** Whether the tag list is selectable */
     tagListSelectable: boolean;
-    textElement: ElementRef;
+    /**
+     * Whether the tag list is editable.
+     *
+     * @docs-private
+     */
+    private get tagListEditable();
+    /** Whether the tag is editable. */
+    get editable(): boolean;
+    set editable(value: boolean);
+    private _editable;
+    /** Whether the tag edits can't be submitted. */
+    preventEditSubmit: boolean;
+    private readonly editInputElementRef;
+    /**
+     * Emits event when the tag is edited.
+     */
+    readonly editChange: EventEmitter<KbqTagEditChange>;
+    /**
+     * @docs-private
+     */
+    protected readonly editing: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * @docs-private
+     */
+    readonly textElement: ElementRef<HTMLSpanElement>;
     contentChildren: QueryList<KbqIcon>;
     /** The tag avatar */
     avatar: KbqTagAvatar;
@@ -86,11 +143,12 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
     get disabled(): any;
     set disabled(value: any);
     private _disabled;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone);
+    constructor(changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone);
     ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     addClassModificatorForIcons(): void;
     addHostClassName(): void;
-    ngOnDestroy(): void;
     select(): void;
     deselect(): void;
     selectViaInteraction(): void;
@@ -104,12 +162,24 @@ export declare class KbqTag extends KbqColorDirective implements IFocusableOptio
      * Informs any listeners of the removal request. Does not remove the tag from the DOM.
      */
     remove(): void;
+    /** @docs-private */
     handleMousedown(event: Event): void;
+    /** @docs-private */
     handleKeydown(event: KeyboardEvent): void;
+    /** @docs-private */
     blur(): void;
+    /** @docs-private */
+    protected handleDblClick(event: MouseEvent): void;
+    private startEditing;
+    /** @docs-private */
+    cancelEditing(reason: string): void;
+    /** @docs-private */
+    submitEditing(reason: string): void;
     private dispatchSelectionChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTag, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTag, "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", ["kbqTag"], { "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; }; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[kbq-icon]:not([kbqTagRemove])", "*", "[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, never>;
+    static ngAcceptInputType_editable: unknown;
+    static ngAcceptInputType_preventEditSubmit: unknown;
 }
 /**
  *

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);
@@ -49,6 +50,23 @@
     & .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);
+    }
 }
 
 .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/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);
 }