@koobiq/components 19.3.0 → 19.4.0

package/sidepanel/sidepanel.scss

@@ -1,20 +1,32 @@
+@use 'sass:map';
+
 @use '../core/styles/common';
 
 @use '../core/styles/common/tokens' as *;
 
 @use './sidepanel-theme' as *;
 
-.kbq-sidepanel-container_top,
-.kbq-sidepanel-container_bottom {
-    flex-direction: column;
-    height: 33%;
-    min-height: 400px;
-    width: 100%;
-    left: 0;
+$indent-offset: calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset));
+
+@mixin _sidepanel-container($selected-side) {
+    $sides: top, right, bottom, left;
+    $opposite-sides: (
+        'top': 'bottom',
+        'right': 'left',
+        'left': 'right',
+        'bottom': 'top'
+    );
+
+    .kbq-sidepanel-content {
+        @each $side in $sides {
+            @if (not (map.get($opposite-sides, $selected-side) == $side)) {
+                margin-#{$side}: var(--kbq-sidepanel-size-panel-viewport-margin);
+            }
+        }
+    }
 
-    .kbq-sidepanel-indent {
-        height: 16px;
-        width: 100%;
+    & {
+        transform-origin: center #{map.get($opposite-sides, $selected-side)};
     }
 }
 
@@ -51,10 +63,24 @@
         }
 
         .kbq-sidepanel-indent {
-            width: 16px;
+            width: var(--kbq-sidepanel-size-panel-lower-offset);
             height: 100%;
         }
     }
+
+    &.kbq-sidepanel-container_top,
+    &.kbq-sidepanel-container_bottom {
+        flex-direction: column;
+        height: 33%;
+        min-height: 400px;
+        width: calc(100% - 2 * var(--kbq-sidepanel-size-panel-viewport-margin));
+        left: 0;
+
+        .kbq-sidepanel-indent {
+            height: var(--kbq-sidepanel-size-panel-lower-offset);
+            width: 100%;
+        }
+    }
 }
 
 .kbq-sidepanel-container_right {
@@ -64,6 +90,8 @@
     .kbq-sidepanel-wrapper {
         flex-direction: row;
     }
+
+    @include _sidepanel-container(right);
 }
 
 .kbq-sidepanel-container_left {
@@ -73,6 +101,8 @@
     .kbq-sidepanel-wrapper {
         flex-direction: row-reverse;
     }
+
+    @include _sidepanel-container(left);
 }
 
 .kbq-sidepanel-container_top {
@@ -82,6 +112,8 @@
     .kbq-sidepanel-wrapper {
         flex-direction: column-reverse;
     }
+
+    @include _sidepanel-container(top);
 }
 
 .kbq-sidepanel-container_bottom {
@@ -91,6 +123,8 @@
     .kbq-sidepanel-wrapper {
         flex-direction: column;
     }
+
+    @include _sidepanel-container(bottom);
 }
 
 .kbq-sidepanel-wrapper {
@@ -98,11 +132,31 @@
     flex: 1;
     min-height: 0;
     width: 100%;
+    position: relative;
 }
 
 .kbq-sidepanel-indent {
     display: flex;
     flex: 0 0 auto;
+    cursor: pointer;
+
+    position: absolute;
+
+    .kbq-sidepanel-container_top & {
+        bottom: $indent-offset;
+    }
+
+    .kbq-sidepanel-container_right & {
+        left: $indent-offset;
+    }
+
+    .kbq-sidepanel-container_bottom & {
+        top: $indent-offset;
+    }
+
+    .kbq-sidepanel-container_left & {
+        right: $indent-offset;
+    }
 }
 
 .kbq-sidepanel-content {
@@ -112,6 +166,7 @@
     min-height: 0;
     min-width: 0;
     width: 100%;
+    border-radius: var(--kbq-size-border-radius);
 }
 
 .kbq-sidepanel-header {
@@ -121,6 +176,7 @@
 
     flex-flow: row nowrap;
     flex: 0 0 auto;
+    transition: box-shadow 100ms ease-in-out;
 
     padding: var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-right)
         var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-left);
@@ -136,6 +192,10 @@
             @include common.kbq-truncate-line();
         }
     }
+
+    &.kbq-sidepanel-header_bottom-overflown {
+        box-shadow: var(--kbq-shadow-overflow-normal-bottom);
+    }
 }
 
 .kbq-sidepanel-title {
@@ -149,13 +209,8 @@
     flex-direction: column;
     min-height: 0;
 
-    padding-top: var(--kbq-sidepanel-size-content-padding-top);
-
-    padding-right: var(--kbq-sidepanel-size-content-padding-horizontal);
-
-    padding-left: var(--kbq-sidepanel-size-content-padding-horizontal);
-
-    padding-bottom: var(--kbq-sidepanel-size-content-padding-bottom);
+    padding: var(--kbq-sidepanel-size-content-padding-top) var(--kbq-sidepanel-size-content-padding-horizontal)
+        var(--kbq-sidepanel-size-content-padding-bottom);
 }
 
 .kbq-sidepanel-footer {
@@ -165,6 +220,7 @@
 
     flex-flow: row nowrap;
     flex: 0 0 auto;
+    transition: box-shadow 100ms ease-in-out;
 
     padding: var(--kbq-sidepanel-size-footer-padding-top) var(--kbq-sidepanel-size-footer-padding-horizontal)
         var(--kbq-sidepanel-size-footer-padding-bottom);
@@ -185,6 +241,10 @@
 
         gap: var(--kbq-sidepanel-size-footer-content-gap-horizontal);
     }
+
+    &.kbq-sidepanel-footer_top-overflown {
+        box-shadow: var(--kbq-shadow-overflow-normal-top);
+    }
 }
 
 @include kbq-sidepanel-theme();

package/sidepanel/sidepanel.service.d.ts

@@ -47,11 +47,13 @@ export declare class KbqSidepanelService implements OnDestroy {
     private closeSidepanels;
     private getBackdropClass;
     private getOpenedSidepanelsWithSamePosition;
+    private updateAnimationState;
     /**
      * Removes a sidepanel from the array of open sidepanels.
      * @param sidepanelRef Sidepanel to be removed.
      */
     private removeOpenSidepanel;
+    private getLowerSidepanelsWithSamePosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelService, [null, null, { optional: true; }, { optional: true; skipSelf: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqSidepanelService>;
 }

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

@@ -154,6 +154,11 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     selectable: boolean;
     /** Whether the tags in the list are editable. */
     editable: boolean;
+    /**
+     * Whether to emit change events when tags are added/removed.
+     * Set to `false` to prevent the form control from being marked as dirty during programmatic updates.
+     */
+    emitOnTagChanges: boolean;
     /** Whether the tags in the list are removable. */
     get removable(): boolean;
     set removable(value: boolean);
@@ -352,11 +357,12 @@ export declare class KbqTagList implements KbqFormFieldControl<any>, ControlValu
     private syncDropListDisabledState;
     private setupFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagList, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTagList, "kbq-tag-list", ["kbqTagList"], { "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "dropped": "dropped"; "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], true, [{ directive: typeof i1.CdkDropList; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTagList, "kbq-tag-list", ["kbqTagList"], { "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "emitOnTagChanges": { "alias": "emitOnTagChanges"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "dropped": "dropped"; "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "kbq-cleaner"], true, [{ directive: typeof i1.CdkDropList; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_draggable: unknown;
     static ngAcceptInputType_selectable: unknown;
     static ngAcceptInputType_editable: unknown;
+    static ngAcceptInputType_emitOnTagChanges: unknown;
     static ngAcceptInputType_removable: unknown;
 }

package/tags/tag.component.d.ts

@@ -72,6 +72,8 @@ export declare class KbqTagEditSubmit {
 export declare class KbqTagEditInput {
     private readonly tag;
     /** @docs-private */
+    protected handleClick(event: MouseEvent): void;
+    /** @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: {}; }]>;

package/tooltip/tooltip.component.d.ts

@@ -108,6 +108,10 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     static ngAcceptInputType_arrow: unknown;
     static ngAcceptInputType_offset: unknown;
 }
+/**
+ * @docs-private
+ * @deprecated Will be removed in next major release
+ */
 export declare class KbqWarningTooltipTrigger extends KbqTooltipTrigger {
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);
@@ -115,6 +119,10 @@ export declare class KbqWarningTooltipTrigger extends KbqTooltipTrigger {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqWarningTooltipTrigger, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqWarningTooltipTrigger, "[kbqWarningTooltip]", ["kbqWarningTooltip"], { "content": { "alias": "kbqWarningTooltip"; "required": false; }; }, {}, never, never, true, never>;
 }
+/**
+ * @docs-private
+ * @deprecated Will be removed in next major release
+ */
 export declare class KbqExtendedTooltipTrigger extends KbqTooltipTrigger {
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);