fix(select): "show more" text calculations (#DS-2649)

packages/components/select/select.component.ts

@@ -105,6 +105,7 @@ import {
     distinctUntilChanged,
     delay
 } from 'rxjs/operators';
+import { SizeXxs } from '@koobiq/design-tokens';
 
 
 let nextUniqueId = 0;
@@ -230,6 +231,9 @@ export class KbqSelect extends KbqSelectMixinBase implements
         }
     ];
 
+    /**
+     * Trigger - is a clickable field to open select dropdown panel
+     */
     @ViewChild('trigger', { static: false }) trigger: ElementRef;
 
     @ViewChild('panel', { static: false }) panel: ElementRef;
@@ -944,12 +948,13 @@ export class KbqSelect extends KbqSelectMixinBase implements
         this._renderer.appendChild(this.trigger.nativeElement, triggerClone);
 
         let totalItemsWidth: number = 0;
-        (triggerClone.querySelectorAll('kbq-tag') as NodeListOf<HTMLElement>)
-            .forEach((item) => totalItemsWidth += this.getItemWidth(item));
+        const selectedItemsViewValueContainers = triggerClone.querySelectorAll<HTMLElement>('kbq-tag');
+        selectedItemsViewValueContainers.forEach((item) => totalItemsWidth += this.getItemWidth(item));
 
         triggerClone.remove();
 
-        return totalItemsWidth;
+        // item width + flex gap between each item
+        return totalItemsWidth + parseInt(SizeXxs) * (selectedItemsViewValueContainers.length - 1);
     }
 
     private getItemWidth(element: HTMLElement): number {

packages/components/tree-select/tree-select.component.ts

@@ -94,6 +94,7 @@ import {
     startWith,
     delay
 } from 'rxjs/operators';
+import { SizeXxs } from '@koobiq/design-tokens';
 
 
 let nextUniqueId = 0;
@@ -221,6 +222,10 @@ export class KbqTreeSelect extends KbqTreeSelectMixinBase implements
 
     options: QueryList<KbqTreeOption>;
 
+
+    /**
+     * Trigger - is a clickable field to open select dropdown panel
+     */
     @ViewChild('trigger', { static: false }) trigger: ElementRef;
 
     @ViewChild('panel', { static: false }) panel: ElementRef;
@@ -896,12 +901,13 @@ export class KbqTreeSelect extends KbqTreeSelectMixinBase implements
         this.renderer.appendChild(this.trigger.nativeElement, triggerClone);
 
         let totalItemsWidth: number = 0;
-        (triggerClone.querySelectorAll('kbq-tag') as NodeListOf<HTMLElement>)
-            .forEach((item) => totalItemsWidth += this.getItemWidth(item));
+        const selectedItemsViewValueContainers = triggerClone.querySelectorAll<HTMLElement>('kbq-tag');
+        selectedItemsViewValueContainers.forEach((item) => totalItemsWidth += this.getItemWidth(item));
 
         triggerClone.remove();
 
-        return totalItemsWidth;
+        // item width + flex gap between each item
+        return totalItemsWidth + parseInt(SizeXxs) * (selectedItemsViewValueContainers.length - 1);
     }
 
     private getTotalVisibleItems(): [number, number] {

tools/public_api_guard/components/select.api.md

@@ -223,7 +223,6 @@ export class KbqSelect extends KbqSelectMixinBase implements AfterContentInit, A
     tags: QueryList<KbqTag>;
     toggle(): void;
     transformOrigin: string;
-    // (undocumented)
     trigger: ElementRef;
     triggerFontSize: number;
     triggerRect: ClientRect;

tools/public_api_guard/components/tree-select.api.md

@@ -192,7 +192,6 @@ export class KbqTreeSelect extends KbqTreeSelectMixinBase implements AfterConten
     transformOrigin: string;
     // (undocumented)
     tree: KbqTreeSelection;
-    // (undocumented)
     trigger: ElementRef;
     triggerFontSize: number;
     triggerRect: DOMRect;