@koobiq/components 16.0.0-beta.2 → 16.0.0-beta.6

package/tree/tree-option.scss

@@ -1,43 +1,59 @@
 @use 'sass:meta';
 @use 'sass:map';
 
+@use '../core/styles/common';
 @use '../core/styles/tokens';
 
 
 $tokens: meta.module-variables(tokens) !default;
 
+
 .kbq-tree-option {
+    $padding-vertical: map.get($tokens, tree-size-container-padding-vertical);
+    $padding-right: map.get($tokens, tree-size-container-padding-right);
+
+    $outline-width: map.get($tokens, tree-size-container-focus-outline-width);
+
     box-sizing: border-box;
 
     display: flex;
     align-items: center;
 
-    height: var(--kbq-tree-size-node-height, map.get($tokens, tree-size-node-height));
+    min-height: 32px;
 
     word-wrap: break-word;
 
-    border: 2px solid transparent;
+    border-width: var(--kbq-tree-size-container-focus-outline-width, $outline-width);
+    border-style: solid;
+    border-color: transparent;
+
+    padding-top: calc(
+        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) -
+        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+    );
+    padding-right: calc(
+        var(--kbq-tree-size-container-padding-right, $padding-right) -
+        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+    );
+    padding-bottom: calc(
+        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) -
+        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+    );
+
+    gap: var(
+        --kbq-tree-size-container-content-gap-horizontal, map.get($tokens, tree-size-container-content-gap-horizontal)
+    );
 
     & .kbq-option-text {
-        display: inline-block;
-        flex-grow: 1;
+        $tokens: meta.module-variables(tokens) !default;
 
-        overflow: hidden;
-
-        white-space: nowrap;
-        text-overflow: ellipsis;
-
-        margin-right: var(--kbq-tree-size-padding-right, map.get($tokens, tree-size-padding-right));
-    }
-
-    & > .kbq-icon, > .toggle-wrapper > .kbq-icon {
-        margin-right: var(--kbq-tree-size-icon-padding, map.get($tokens, tree-size-icon-padding));
+        @include common.kbq-line-wrapper-base();
+        display: inline-block;
 
-        cursor: pointer;
-    }
+        @include common.kbq-truncate-line();
 
-    & > .kbq-progress-spinner {
-        margin-right: 8px;
+        padding-top: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
+        padding-bottom: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
     }
 
     &:focus {
@@ -48,11 +64,6 @@ $tokens: meta.module-variables(tokens) !default;
         cursor: pointer;
     }
 
-    & > .kbq-pseudo-checkbox,
-    & > .kbq-checkbox {
-        margin-right: var(--kbq-tree-size-icon-padding, map.get($tokens, tree-size-icon-padding));
-    }
-
     & .kbq-option-action {
         display: none;
     }

package/tree/tree.module.d.ts

@@ -9,8 +9,9 @@ import * as i7 from "./tree-option.component";
 import * as i8 from "./toggle";
 import * as i9 from "@angular/common";
 import * as i10 from "@koobiq/components/core";
+import * as i11 from "@koobiq/components/icon";
 export declare class KbqTreeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeModule, [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective], [typeof i9.CommonModule, typeof i10.KbqPseudoCheckboxModule], [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeModule, [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective], [typeof i9.CommonModule, typeof i10.KbqPseudoCheckboxModule, typeof i11.KbqIconModule], [typeof i1.KbqTreeNodeOutlet, typeof i2.KbqTreeNodeDef, typeof i3.KbqTreeNode, typeof i4.KbqTreeNodePadding, typeof i5.KbqTree, typeof i6.KbqTreeSelection, typeof i7.KbqTreeOption, typeof i8.KbqTreeNodeToggleComponent, typeof i8.KbqTreeNodeToggleDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTreeModule>;
 }

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

@@ -22,12 +22,20 @@
         }
     }
 
-    .kbq-tree-select__placeholder {
+    .kbq-select__placeholder {
+        text-overflow: ellipsis;
+
         color: map.get($foreground, text-disabled);
     }
 
     .kbq-tree-select__panel {
         @include popup-params($theme);
+
+        & .kbq-tree-select__footer {
+            $popup: map.get(map.get($theme, components), popup);
+
+            border-color: map.get($popup, border);
+        }
     }
 }
 

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

@@ -1,11 +1,11 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { SelectionModel } from '@angular/cdk/collections';
 import { CdkConnectedOverlay, ConnectedPosition, ViewportRuler } from '@angular/cdk/overlay';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanDisable, CanUpdateErrorState, ErrorStateMatcher, HasTabIndex, CanDisableCtor, HasTabIndexCtor, CanUpdateErrorStateCtor } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
-import { KbqSelectSearch } from '@koobiq/components/select';
+import { KbqSelectMatcher, KbqSelectSearch } from '@koobiq/components/select';
 import { KbqTag } from '@koobiq/components/tags';
 import { KbqTreeSelection, KbqTreeOption } from '@koobiq/components/tree';
 import { Observable, Subject } from 'rxjs';
@@ -91,6 +91,8 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     cleaner: KbqCleaner;
     /** User-supplied override of the trigger element. */
     customTrigger: KbqTreeSelectTrigger;
+    customMatcher: KbqSelectMatcher;
+    customTagTemplateRef: TemplateRef<any>;
     tree: KbqTreeSelection;
     search: KbqSelectSearch;
     hiddenItemsText: string;
@@ -278,6 +280,6 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     private _compareWith;
     private subscribeOnSearchChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["mcTreeSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "tree", "search"], ["kbq-tree-select-trigger", "kbq-cleaner", "[mcSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-tree-select-footer,[kbq-tree-select-footer],[kbq-tree-selection-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["mcTreeSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-tree-select-trigger", "kbq-cleaner", "[mcSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-tree-select-footer,[kbq-tree-select-footer],[kbq-tree-selection-footer]"], false, never>;
 }
 export {};

package/tree-select/tree-select.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/common';
+@use '../core/styles/common/select' as *;
 
 @use '../core/styles/tokens';
 
@@ -9,184 +10,19 @@
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-tree-select {
-    box-sizing: border-box;
-
-    display: inline-block;
-
-    width: 100%;
-
-    outline: none;
-
-    &.kbq-disabled {
-        & .kbq-tree-select__trigger {
-            @include common.user-select(none);
-
-            cursor: default;
-        }
-    }
-}
-
-/* stylelint-disable no-descending-specificity */
-.kbq-tree-select__trigger {
-    display: flex;
-    box-sizing: border-box;
-    position: relative;
-
-    height: var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height));
-
-    cursor: pointer;
-
-    padding-left: calc(
-        var(--kbq-select-size-left-padding, #{map.get($tokens, select-size-left-padding)}) -
-        var(--kbq-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-    );
-    padding-right: calc(
-        var(--kbq-select-size-right-padding, #{map.get($tokens, select-size-right-padding)}) -
-        var(--kbq-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-    );
-
-    &.kbq-tree-select__trigger_multiple {
-        padding-left: calc(
-            var(--kbq-select-size-left-padding-multiple, #{map.get($tokens, select-size-left-padding-multiple)}) -
-            var(--kbq-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-        );
-
-        & .kbq-tree-select__placeholder {
-            margin-left: 8px;
-        }
-
-        & .kbq-tag.kbq-disabled .kbq-tag__text {
-            margin-right: 7px;
-        }
-    }
-}
-/* stylelint-enable no-descending-specificity */
-
-.kbq-tree-select__matcher {
-    display: flex;
-    align-items: center;
-
-    width: 100%;
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    white-space: nowrap;
-
-    & > span {
-        width: 100%;
-    }
-}
-
-.kbq-tree-select__multiple-matcher {
-    display: flex;
-
-    width: 100%;
-}
-
-.kbq-tree-select__match-list {
-    display: flex;
-    flex-wrap: wrap;
-
-    overflow: hidden;
-
-    max-height: calc(
-        var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
-        (var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
-    );
-
-    & .kbq-tag {
-        margin-right: 4px;
-    }
-}
-
-.kbq-tree-select__match-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    width: 100%;
-
-    & .kbq-tree-select__match-hidden-text {
-        flex: 0 0 70px;
-        align-self: center;
-        padding: 0 8px;
-
-        text-align: right;
-    }
-}
-
-.kbq-tree-select__match-item {
-    display: flex;
-
-    border: 1px solid transparent;
-    border-radius: 3px;
-
-    padding-left: 7px;
-
-    margin-right: 4px;
-
-    max-width: 100%;
-}
-
-.kbq-tree-select__arrow-wrapper {
-    display: flex;
-    align-self: center;
-
-    // When used in a box or standard appearance form-field the arrow should be shifted up 50%.
-    .kbq-form-field-appearance-fill &,
-    .kbq-form-field-appearance-standard & {
-        transform: translateY(-50%);
-    }
-
-    // When used in a outline form-field the arrow should be shifted up 25%.
-    .kbq-form-field-appearance-outline & {
-        transform: translateY(-25%);
-    }
+    @extend %kbq-select-base;
 }
 
 .kbq-tree-select__panel {
-    min-width: 100%; // prevents some animcion twitching and test inconsistencies in IE11
-    max-width: var(--kbq-select-panel-size-max-width, map.get($tokens, select-panel-size-max-width));
-
-    border: {
-        width: var(--kbq-select-panel-size-border-width, map.get($tokens, select-panel-size-border-width));
-        style: solid;
-    }
-
-    border-bottom-left-radius: var(
-        --kbq-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
-    );
-    border-bottom-right-radius: var(
-        --kbq-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
-    );
-
-    // Override optgroup and option to scale based on font-size of the trigger.
-    .kbq-optgroup-label,
-    .kbq-tree-select-option {
-        font-size: inherit;
-        line-height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
-        height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
-    }
+    @extend %kbq-select-panel;
 
     & .kbq-tree-select__footer {
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
-        border-top-width: 1px;
-        border-top-style: solid;
-        min-height: var(
-            --kbq-list-size-footer-min-height,
-            map.get($tokens, list-size-footer-min-height)
-        );
+        @extend %kbq-select-footer;
     }
 }
 
 .kbq-tree-select__content {
-    max-height: var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height));
-
-    overflow: auto;
+    @extend %kbq-select-content;
 
     & .kbq-tree-selection {
         height: 100%;
@@ -198,28 +34,3 @@ $tokens: meta.module-variables(tokens) !default;
         cursor: pointer;
     }
 }
-
-.kbq-select__no-options-message {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-
-    position: relative;
-
-    max-width: 100%;
-    height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
-
-    cursor: default;
-    outline: none;
-
-    padding-left: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
-    padding-right: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
-}
-
-.kbq-select__search-container {
-    border-bottom: {
-        width: 1px;
-        style: solid;
-    }
-}

package/list/_list-base.scss

@@ -1,54 +0,0 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/common/list';
-
-@use '../core/styles/tokens';
-
-@use '../core/styles/common';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
-// This mixin provides all list-item styles, changing font size and height based on whether the list is in dense mode.
-@mixin kbq-list-item-base() {
-    position: relative;
-
-    display: flex;
-    align-items: center;
-
-    box-sizing: border-box;
-    height: var(--kbq-list-size-item-height, map.get($tokens, list-size-item-height));
-
-    border: 2px solid transparent;
-
-    padding-left: var(--kbq-list-size-horizontal-padding, map.get($tokens, list-size-horizontal-padding));
-
-    .kbq-list-text {
-        @include list.kbq-line-wrapper-base();
-
-        padding-right: var(--kbq-list-size-horizontal-padding, map.get($tokens, list-size-horizontal-padding));
-        display: inline-block;
-        @include common.kbq-truncate-line();
-    }
-
-    .kbq-divider {
-        position: absolute;
-
-        bottom: 0;
-        left: 0;
-
-        width: 100%;
-
-        margin: 0;
-
-        [dir='rtl'] & {
-            margin-left: auto;
-            margin-right: 0;
-        }
-
-        &.kbq-divider_inset {
-            position: absolute; // necessary to override card styles
-        }
-    }
-}