@koobiq/components 18.1.0 → 18.2.1

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.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/padding.directive.d.ts

@@ -1,9 +1,9 @@
 import { Directionality } from '@angular/cdk/bidi';
-import { AfterViewInit, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
+import { AfterViewInit, ElementRef, Renderer2 } from '@angular/core';
 import { KbqTreeBase, KbqTreeNode } from './tree-base';
 import { KbqTreeOption } from './tree-option.component';
 import * as i0 from "@angular/core";
-export declare class KbqTreeNodePadding<T> implements OnDestroy, AfterViewInit {
+export declare class KbqTreeNodePadding<T> implements AfterViewInit {
     protected treeNode: KbqTreeNode<T>;
     protected tree: KbqTreeBase<T>;
     private renderer;
@@ -22,10 +22,8 @@ export declare class KbqTreeNodePadding<T> implements OnDestroy, AfterViewInit {
     baseLeftPadding: number;
     withIcon: boolean;
     iconWidth: number;
-    private destroyed;
     constructor(treeNode: KbqTreeNode<T>, tree: KbqTreeBase<T>, renderer: Renderer2, element: ElementRef<HTMLElement>, option: KbqTreeOption, dir: Directionality);
     ngAfterViewInit(): void;
-    ngOnDestroy(): void;
     paddingIndent(): string | null;
     /**
      * This has been extracted to a util because of TS 4 and VE.

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-base.d.ts

@@ -1,5 +1,5 @@
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
-import { AfterContentChecked, ChangeDetectorRef, ElementRef, IterableDiffer, IterableDiffers, OnDestroy, OnInit, QueryList, TrackByFunction, ViewContainerRef } from '@angular/core';
+import { AfterContentChecked, ChangeDetectorRef, DestroyRef, ElementRef, IterableDiffer, IterableDiffers, OnDestroy, OnInit, QueryList, TrackByFunction, ViewContainerRef } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { TreeControl } from './control/tree-control';
@@ -30,8 +30,6 @@ export declare class KbqTreeBase<T> implements AfterContentChecked, CollectionVi
     }>;
     /** Differ used to find the changes in the data provided by the data source. */
     protected dataDiffer: IterableDiffer<T>;
-    /** Subject that emits when the component has been destroyed. */
-    private onDestroy;
     /** Stores the node definition that does not have a when predicate. */
     private defaultNodeDef;
     /** Data subscription */
@@ -46,6 +44,7 @@ export declare class KbqTreeBase<T> implements AfterContentChecked, CollectionVi
     get dataSource(): DataSource<T> | Observable<T[]> | T[];
     set dataSource(dataSource: DataSource<T> | Observable<T[]> | T[]);
     private _dataSource;
+    protected readonly destroyRef: DestroyRef;
     constructor(differs: IterableDiffers, changeDetectorRef: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;

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/tree-selection.component.d.ts

@@ -1,6 +1,6 @@
 import { Clipboard } from '@angular/cdk/clipboard';
 import { SelectionModel } from '@angular/cdk/collections';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, IterableDiffer, IterableDiffers, OnDestroy, QueryList, ViewContainerRef } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, IterableDiffer, IterableDiffers, QueryList, ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
 import { CanDisable, HasTabIndex, MultipleMode } from '@koobiq/components/core';
@@ -36,7 +36,7 @@ interface SelectionModelOption {
     id: number | string;
     value: string;
 }
-export declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueAccessor, AfterContentInit, CanDisable, HasTabIndex, OnDestroy {
+export declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueAccessor, AfterContentInit, CanDisable, HasTabIndex {
     private elementRef;
     private scheduler;
     private clipboard;
@@ -72,12 +72,10 @@ export declare class KbqTreeSelection extends KbqTreeBase<any> implements Contro
     private _tabIndex;
     get showCheckbox(): boolean;
     get isEmpty(): boolean;
-    private readonly destroy;
     private optionFocusSubscription;
     private optionBlurSubscription;
     constructor(elementRef: ElementRef, scheduler: AsyncScheduler, differs: IterableDiffers, changeDetectorRef: ChangeDetectorRef, multiple: MultipleMode, clipboard: Clipboard);
     ngAfterContentInit(): void;
-    ngOnDestroy(): void;
     focus($event: any): void;
     highlightSelectedOption(): void;
     blur(): void;

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

@@ -166,9 +166,8 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     private scrollTop;
     /** Unique id for this input. */
     private readonly uid;
-    /** Emits whenever the component is destroyed. */
-    private readonly destroy;
     private tempValues;
+    private readonly destroyRef;
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, scrollStrategyFactory: any, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, localeService?: KbqLocaleService | undefined);
     ngOnInit(): void;
     ngAfterContentInit(): void;