@koobiq/components 18.0.0 → 18.2.0

package/toast/toast.component.scss

@@ -9,30 +9,30 @@
     display: flex;
     box-sizing: border-box;
 
-    width: kbq-css-variable(toast-size-container-width);
+    width: var(--kbq-toast-size-container-width);
 
     height: auto;
 
-    border-radius: kbq-css-variable(toast-size-container-border-radius);
+    border-radius: var(--kbq-toast-size-container-border-radius);
 
-    padding-left: kbq-css-variable(toast-size-container-padding-left);
-    padding-right: kbq-css-variable(toast-size-container-padding-right);
+    padding-left: var(--kbq-toast-size-container-padding-left);
+    padding-right: var(--kbq-toast-size-container-padding-right);
 }
 
 .kbq-toast__icon-container {
     flex-shrink: 0;
-    width: kbq-css-variable(toast-size-icon-width);
-    max-width: kbq-css-variable(toast-size-icon-width);
-    height: kbq-css-variable(toast-size-icon-height);
-    max-height: kbq-css-variable(toast-size-icon-height);
+    width: var(--kbq-toast-size-icon-width);
+    max-width: var(--kbq-toast-size-icon-width);
+    height: var(--kbq-toast-size-icon-height);
+    max-height: var(--kbq-toast-size-icon-height);
 
-    border-radius: kbq-css-variable(toast-size-container-border-radius);
+    border-radius: var(--kbq-toast-size-container-border-radius);
 
-    margin-right: kbq-css-variable(toast-size-icon-margin-right);
+    margin-right: var(--kbq-toast-size-icon-margin-right);
 
-    $padding-top: kbq-css-variable(toast-size-content-padding-top);
-    $toast-font-title-line-height: kbq-css-variable(toast-font-title-line-height);
-    $toast-size-icon-height: kbq-css-variable(toast-size-icon-height);
+    $padding-top: var(--kbq-toast-size-content-padding-top);
+    $toast-font-title-line-height: var(--kbq-toast-font-title-line-height);
+    $toast-size-icon-height: var(--kbq-toast-size-icon-height);
     padding-top: calc($padding-top + (($toast-font-title-line-height - $toast-size-icon-height) / 2));
 }
 
@@ -42,9 +42,9 @@
 
     flex: 1;
 
-    padding-top: kbq-css-variable(toast-size-content-padding-top);
-    padding-right: kbq-css-variable(size-s);
-    padding-bottom: kbq-css-variable(toast-size-content-padding-bottom);
+    padding-top: var(--kbq-toast-size-content-padding-top);
+    padding-right: var(--kbq-size-s);
+    padding-bottom: var(--kbq-toast-size-content-padding-bottom);
 
     overflow: hidden;
 }
@@ -61,7 +61,7 @@
 }
 
 .kbq-toast__title_with-content {
-    padding-bottom: kbq-css-variable(toast-size-caption-padding-bottom);
+    padding-bottom: var(--kbq-toast-size-caption-padding-bottom);
 }
 
 .kbq-toast__text {
@@ -78,9 +78,9 @@
 .kbq-toast__actions {
     display: flex;
 
-    padding-top: kbq-css-variable(toast-size-button-stack-padding-top);
+    padding-top: var(--kbq-toast-size-button-stack-padding-top);
 
-    gap: kbq-css-variable(toast-size-button-stack-content-gap-horizontal);
+    gap: var(--kbq-toast-size-button-stack-content-gap-horizontal);
 }
 
 .kbq-toast__close-button {
@@ -89,14 +89,14 @@
         calc(
                 kbq-difference-series-css-variables(
                         [kbq-sum-series-css-variables(
-                            [calc(kbq-css-variable(icon-button-size-small-vertical-padding) * 2),
+                            [calc(var(--kbq-icon-button-size-small-vertical-padding) * 2),
                             16px]
                         ),
                         toast-font-title-line-height]
                     ) / 2
             )]
     );
-    margin-right: kbq-css-variable(toast-size-close-button-margin-right);
+    margin-right: var(--kbq-toast-size-close-button-margin-right);
 }
 
 @include kbq-toast-theme();

package/toggle/_toggle-theme.scss

@@ -7,12 +7,12 @@
     $base: toggle-#{$type}-#{$state-name};
 
     .kbq-toggle-bar {
-        border-color: kbq-css-variable(#{$base}-border);
-        background: kbq-css-variable(#{$base}-background);
+        border-color: var(--kbq-#{$base}-border);
+        background: var(--kbq-#{$base}-background);
     }
 
     .kbq-toggle__circle {
-        background: kbq-css-variable(#{$base}-circle-background);
+        background: var(--kbq-#{$base}-circle-background);
     }
 }
 
@@ -35,8 +35,8 @@
         @include kbq-toggle-state($type, states-focused);
 
         & .kbq-toggle-bar {
-            border-color: kbq-css-variable(toggle-#{$type}-states-focused-focus-outline);
-            box-shadow: 0 0 0.1px 1px kbq-css-variable(toggle-#{$type}-states-focused-focus-outline);
+            border-color: var(--kbq-toggle-#{$type}-states-focused-focus-outline);
+            box-shadow: 0 0 0.1px 1px var(--kbq-toggle-#{$type}-states-focused-focus-outline);
         }
     }
 
@@ -44,8 +44,8 @@
         @include kbq-toggle-state($type, states-checked-focused);
 
         & .kbq-toggle-bar {
-            border-color: kbq-css-variable(toggle-#{$type}-states-checked-focused-focus-outline);
-            box-shadow: 0 0 0.1px 1px kbq-css-variable(toggle-#{$type}-states-checked-focused-focus-outline);
+            border-color: var(--kbq-toggle-#{$type}-states-checked-focused-focus-outline);
+            box-shadow: 0 0 0.1px 1px var(--kbq-toggle-#{$type}-states-checked-focused-focus-outline);
         }
     }
 
@@ -64,7 +64,7 @@
         }
 
         &.kbq-disabled {
-            color: kbq-css-variable(foreground-text-disabled);
+            color: var(--kbq-foreground-text-disabled);
         }
     }
 }

package/toggle/toggle.scss

@@ -53,12 +53,12 @@
             radius: 8px;
         }
 
-        height: kbq-css-variable(toggle-size-normal-height);
-        width: kbq-css-variable(toggle-size-normal-width);
+        height: var(--kbq-toggle-size-normal-height);
+        width: var(--kbq-toggle-size-normal-width);
     }
 
     .kbq-hint {
-        margin-top: kbq-css-variable(toggle-size-normal-vertical-content-padding);
+        margin-top: var(--kbq-toggle-size-normal-vertical-content-padding);
     }
 }
 
@@ -69,22 +69,22 @@
     flex: 1;
 
     &.left {
-        margin-right: kbq-css-variable(toggle-size-normal-horizontal-content-padding);
+        margin-right: var(--kbq-toggle-size-normal-horizontal-content-padding);
     }
 
     &.right {
-        margin-left: kbq-css-variable(toggle-size-normal-horizontal-content-padding);
+        margin-left: var(--kbq-toggle-size-normal-horizontal-content-padding);
     }
 }
 
 .kbq-toggle.kbq-toggle_big {
     & .kbq-toggle-bar {
-        height: kbq-css-variable(toggle-size-big-height);
-        width: kbq-css-variable(toggle-size-big-width);
+        height: var(--kbq-toggle-size-big-height);
+        width: var(--kbq-toggle-size-big-width);
     }
 
     & .kbq-hint {
-        margin-top: kbq-css-variable(toggle-size-big-vertical-content-padding);
+        margin-top: var(--kbq-toggle-size-big-vertical-content-padding);
     }
 
     .kbq-toggle-layout {

package/tooltip/_tooltip-theme.scss

@@ -1,17 +1,17 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-tooltip-color($style-name) {
-    box-shadow: kbq-css-variable(tooltip-#{$style-name}-shadow);
+    box-shadow: var(--kbq-tooltip-#{$style-name}-shadow);
 
     & .kbq-tooltip__inner {
-        color: kbq-css-variable(tooltip-#{$style-name}-text);
+        color: var(--kbq-tooltip-#{$style-name}-text);
 
-        background-color: kbq-css-variable(tooltip-#{$style-name}-background);
+        background-color: var(--kbq-tooltip-#{$style-name}-background);
     }
 
     & .kbq-tooltip__arrow {
-        background-color: kbq-css-variable(tooltip-#{$style-name}-background);
-        box-shadow: kbq-css-variable(tooltip-#{$style-name}-shadow);
+        background-color: var(--kbq-tooltip-#{$style-name}-background);
+        box-shadow: var(--kbq-tooltip-#{$style-name}-shadow);
     }
 }
 

package/tooltip/tooltip.component.d.ts

@@ -27,7 +27,7 @@ export declare class KbqTooltipComponent extends KbqPopUp {
         modifier: any;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTooltipComponent, "kbq-tooltip-component", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTooltipComponent, "kbq-tooltip-component", never, {}, {}, never, never, true, never>;
 }
 export declare const KBQ_TOOLTIP_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 /** @docs-private */
@@ -44,6 +44,11 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     get tooltipVisible(): boolean;
     set tooltipVisible(value: boolean);
     get tooltipPlacement(): PopUpPlacements;
+    /**
+     * Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement.
+     * Does not work with kbqPlacementPriority.
+     */
+    relativeToPointer: boolean;
     set tooltipPlacement(value: PopUpPlacements);
     get tooltipPlacementPriority(): string | string[] | null;
     set tooltipPlacementPriority(value: string | string[] | null);
@@ -79,8 +84,10 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     closingActions(): import("rxjs").Observable<void | MouseEvent>;
     getOverlayHandleComponentType(): Type<KbqTooltipComponent>;
     updateClassMap(newPlacement?: string): void;
+    protected applyRelativeToPointer(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "relativeToPointer": { "alias": "kbqRelativeToPointer"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
+    static ngAcceptInputType_relativeToPointer: unknown;
     static ngAcceptInputType_arrow: unknown;
     static ngAcceptInputType_offset: unknown;
 }
@@ -89,7 +96,7 @@ export declare class KbqWarningTooltipTrigger extends KbqTooltipTrigger {
     set content(content: string | TemplateRef<any>);
     protected modifier: TooltipModifier;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqWarningTooltipTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqWarningTooltipTrigger, "[kbqWarningTooltip]", ["kbqWarningTooltip"], { "content": { "alias": "kbqWarningTooltip"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqWarningTooltipTrigger, "[kbqWarningTooltip]", ["kbqWarningTooltip"], { "content": { "alias": "kbqWarningTooltip"; "required": false; }; }, {}, never, never, true, never>;
 }
 export declare class KbqExtendedTooltipTrigger extends KbqTooltipTrigger {
     get content(): string | TemplateRef<any>;
@@ -100,5 +107,5 @@ export declare class KbqExtendedTooltipTrigger extends KbqTooltipTrigger {
     protected modifier: TooltipModifier;
     updateData(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqExtendedTooltipTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqExtendedTooltipTrigger, "[kbqExtendedTooltip]", ["kbqExtendedTooltip"], { "content": { "alias": "kbqExtendedTooltip"; "required": false; }; "header": { "alias": "kbqTooltipHeader"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqExtendedTooltipTrigger, "[kbqExtendedTooltip]", ["kbqExtendedTooltip"], { "content": { "alias": "kbqExtendedTooltip"; "required": false; }; "header": { "alias": "kbqTooltipHeader"; "required": false; }; }, {}, never, never, true, never>;
 }

package/tooltip/tooltip.module.d.ts

@@ -1,9 +1,7 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./tooltip.component";
-import * as i2 from "@angular/cdk/overlay";
-import * as i3 from "@angular/common";
 export declare class KbqToolTipModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToolTipModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToolTipModule, [typeof i1.KbqTooltipComponent, typeof i1.KbqTooltipTrigger, typeof i1.KbqExtendedTooltipTrigger, typeof i1.KbqWarningTooltipTrigger], [typeof i2.OverlayModule, typeof i3.NgClass, typeof i3.NgTemplateOutlet], [typeof i1.KbqTooltipComponent, typeof i1.KbqTooltipTrigger, typeof i1.KbqExtendedTooltipTrigger, typeof i1.KbqWarningTooltipTrigger]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToolTipModule, never, [typeof i1.KbqTooltipComponent, typeof i1.KbqTooltipTrigger, typeof i1.KbqExtendedTooltipTrigger, typeof i1.KbqWarningTooltipTrigger], [typeof i1.KbqTooltipComponent, typeof i1.KbqTooltipTrigger, typeof i1.KbqExtendedTooltipTrigger, typeof i1.KbqWarningTooltipTrigger]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqToolTipModule>;
 }

package/tooltip/tooltip.scss

@@ -37,23 +37,23 @@ $trigger-margin_without-arrow: 4px;
 }
 
 .kbq-tooltip__inner {
-    border-radius: kbq-css-variable(tooltip-size-border-radius);
+    border-radius: var(--kbq-tooltip-size-border-radius);
     word-break: break-word;
 }
 
 .kbq-tooltip {
     box-sizing: border-box;
 
-    border-radius: kbq-css-variable(tooltip-size-border-radius);
+    border-radius: var(--kbq-tooltip-size-border-radius);
 
     white-space: pre-line;
 
     @include pop-up.popup-margins(kbq-tooltip, $trigger-margin);
 
-    max-width: kbq-css-variable(tooltip-size-max-width);
+    max-width: var(--kbq-tooltip-size-max-width);
 
     .kbq-tooltip__inner {
-        padding: kbq-css-variable(tooltip-size-padding-vertical) kbq-css-variable(tooltip-size-padding-horizontal);
+        padding: var(--kbq-tooltip-size-padding-vertical) var(--kbq-tooltip-size-padding-horizontal);
     }
 
     &.kbq-tooltip_arrowless {
@@ -67,15 +67,15 @@ $trigger-margin_without-arrow: 4px;
 .kbq-tooltip__arrow {
     position: absolute;
 
-    width: kbq-css-variable(tooltip-size-arrow-size);
-    height: kbq-css-variable(tooltip-size-arrow-size);
+    width: var(--kbq-tooltip-size-arrow-size);
+    height: var(--kbq-tooltip-size-arrow-size);
 
     transform: rotate(45deg);
 
     z-index: -1;
 }
 
-$arrow-offset: calc((#{kbq-css-variable(tooltip-size-arrow-size)} - 1px) / -2);
+$arrow-offset: calc((#{var(--kbq-tooltip-size-arrow-size)} - 1px) / -2);
 $arrow-padding: calc((18px + $trigger-margin) / 2);
 
 @include pop-up.popup-arrow-positions(kbq-tooltip, $arrow-offset, $arrow-padding);

package/tree/_tree-theme.scss

@@ -6,22 +6,22 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-tree-option($state-name) {
-    background: kbq-css-variable(tree-#{$state-name}-container-background);
+    background: var(--kbq-tree-#{$state-name}-container-background);
 
     .kbq-option-text {
-        color: kbq-css-variable(tree-#{$state-name}-text-color);
+        color: var(--kbq-tree-#{$state-name}-text-color);
     }
 
     .kbq-tree-node-toggle .kbq-icon {
-        color: kbq-css-variable(tree-#{$state-name}-tree-toggle-color);
+        color: var(--kbq-tree-#{$state-name}-tree-toggle-color);
     }
 
     .kbq-option-action .kbq-icon {
-        color: kbq-css-variable(tree-#{$state-name}-action-button-color);
+        color: var(--kbq-tree-#{$state-name}-action-button-color);
     }
 
     .kbq-option-caption {
-        color: kbq-css-variable(tree-#{$state-name}-caption-color);
+        color: var(--kbq-tree-#{$state-name}-caption-color);
     }
 }
 
@@ -39,7 +39,7 @@
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: kbq-css-variable(tree-states-focused-focus-outline-color);
+            border-color: var(--kbq-tree-states-focused-focus-outline-color);
         }
 
         &.kbq-selected {

package/tree/toggle.scss

@@ -13,8 +13,8 @@
 
     height: 100%;
     // FIXME: default token doesn't exist
-    padding-left: kbq-css-variable(tree-size-toggle-padding);
-    padding-right: kbq-css-variable(tree-size-toggle-padding);
+    padding-left: var(--kbq-tree-size-toggle-padding);
+    padding-right: var(--kbq-tree-size-toggle-padding);
 
     cursor: pointer;
 

package/tree/tree-option.component.d.ts

@@ -45,6 +45,7 @@ export declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements
     set showCheckbox(value: any);
     private _showCheckbox;
     readonly onSelectionChange: EventEmitter<KbqTreeOptionChange>;
+    readonly userInteraction: EventEmitter<void>;
     get selected(): boolean;
     set selected(value: boolean);
     private _selected;

package/tree/tree-option.scss

@@ -16,7 +16,7 @@
 
     word-wrap: break-word;
 
-    border-width: kbq-css-variable(tree-size-container-focus-outline-width);
+    border-width: var(--kbq-tree-size-container-focus-outline-width);
     border-style: solid;
     border-color: transparent;
 
@@ -33,7 +33,7 @@
         tree-size-container-focus-outline-width]
     );
 
-    gap: kbq-css-variable(tree-size-container-content-gap-horizontal);
+    gap: var(--kbq-tree-size-container-content-gap-horizontal);
 
     & .kbq-option-text {
         @include common.kbq-line-wrapper-base();
@@ -41,8 +41,8 @@
 
         @include common.kbq-truncate-line();
 
-        padding-top: kbq-css-variable(list-size-text-padding-vertical);
-        padding-bottom: kbq-css-variable(list-size-text-padding-vertical);
+        padding-top: var(--kbq-list-size-text-padding-vertical);
+        padding-bottom: var(--kbq-list-size-text-padding-vertical);
     }
 
     &:focus {

package/tree-select/_tree-select-theme.scss

@@ -6,29 +6,29 @@
 
 @mixin kbq-tree-select-theme() {
     .kbq-tree-select {
-        color: kbq-css-variable(foreground-contrast);
+        color: var(--kbq-foreground-contrast);
 
         &.ng-invalid {
-            color: kbq-css-variable(error-default);
+            color: var(--kbq-error-default);
         }
 
         &.kbq-disabled {
-            color: kbq-css-variable(foreground-text-disabled);
+            color: var(--kbq-foreground-text-disabled);
         }
     }
 
     .kbq-select__placeholder {
         text-overflow: ellipsis;
 
-        color: kbq-css-variable(foreground-text-disabled);
+        color: var(--kbq-foreground-text-disabled);
     }
 
     .kbq-tree-select__panel {
-        box-shadow: kbq-css-variable(select-panel-dropdown-shadow);
-        background: kbq-css-variable(select-panel-dropdown-background);
+        box-shadow: var(--kbq-select-panel-dropdown-shadow);
+        background: var(--kbq-select-panel-dropdown-background);
 
         & .kbq-select__footer {
-            border-color: kbq-css-variable(divider-color);
+            border-color: var(--kbq-divider-color);
         }
     }
 }

package/tree-select/tree-select.component.d.ts

@@ -119,6 +119,8 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     sortComparator: (a: KbqTreeOption, b: KbqTreeOption, options: KbqTreeOption[]) => number;
     /** Combined stream of all of the child options' change events. */
     readonly optionSelectionChanges: Observable<KbqTreeSelectChange>;
+    /** Combined stream of all of the child options userInteraction events. */
+    readonly userInteractionChanges: Observable<void>;
     get placeholder(): string;
     set placeholder(value: string);
     private _placeholder;