@progress/kendo-angular-treeview 5.4.3 → 6.0.0

package/dist/es2015/selection/select.directive.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter, OnDestroy } from '@angular/core';
+import { EventEmitter, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { TreeViewComponent } from '../treeview.component';
 import { SelectableSettings } from './selectable-settings';
 import { Subscription } from 'rxjs';
@@ -11,7 +11,7 @@ import { TreeItem } from '../treeitem.interface';
  * A directive which manages the in-memory selection state of the TreeView node
  * ([see example]({% slug selection_treeview %})).
  */
-export declare class SelectDirective implements OnDestroy {
+export declare class SelectDirective implements OnDestroy, OnChanges {
     protected treeView: TreeViewComponent;
     /**
      * @hidden
@@ -39,8 +39,16 @@ export declare class SelectDirective implements OnDestroy {
     protected subscriptions: Subscription;
     private readonly options;
     private selectActions;
-    private _selectedKeys;
+    /**
+     * Reflectes the internal `selectedKeys` state.
+     */
+    private state;
+    /**
+     * Holds the last emitted `selectedKeys` collection.
+     */
+    private lastChange;
     constructor(treeView: TreeViewComponent);
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     protected itemKey(e: any): any;
     protected select(e: any): void;

package/dist/es2015/selection/select.directive.js

@@ -7,6 +7,7 @@ import { Directive, EventEmitter, HostBinding, Input, Output } from '@angular/co
 import { TreeViewComponent } from '../treeview.component';
 import { isBoolean, isPresent, noop } from '../utils';
 import { Subscription } from 'rxjs';
+import { isChanged } from '@progress/kendo-angular-common';
 /**
  * A directive which manages the in-memory selection state of the TreeView node
  * ([see example]({% slug selection_treeview %})).
@@ -23,9 +24,12 @@ let SelectDirective = class SelectDirective {
             'multiple': (e) => this.selectMultiple(e),
             'single': (e) => this.selectSingle(e)
         };
-        this._selectedKeys = [];
+        /**
+         * Reflectes the internal `selectedKeys` state.
+         */
+        this.state = new Set();
         this.subscriptions.add(this.treeView.selectionChange.subscribe(this.select.bind(this)));
-        this.treeView.isSelected = (dataItem, index) => (this.selectedKeys.indexOf(this.itemKey({ dataItem, index })) > -1);
+        this.treeView.isSelected = (dataItem, index) => (this.state.has(this.itemKey({ dataItem, index })));
     }
     /**
      * @hidden
@@ -33,16 +37,6 @@ let SelectDirective = class SelectDirective {
     set isSelected(value) {
         this.treeView.isSelected = value;
     }
-    /**
-     * Defines the collection that will store the selected keys
-     * ([see example]({% slug selection_treeview %}#toc-selection-modes)).
-     */
-    get selectedKeys() {
-        return this._selectedKeys;
-    }
-    set selectedKeys(keys) {
-        this._selectedKeys = keys;
-    }
     get getAriaMultiselectable() {
         return this.options.mode === 'multiple';
     }
@@ -57,6 +51,11 @@ let SelectDirective = class SelectDirective {
         const selectionSettings = isBoolean(this.selection) ? { enabled: this.selection } : this.selection;
         return Object.assign(defaultOptions, selectionSettings);
     }
+    ngOnChanges(changes) {
+        if (isChanged('selectedKeys', changes, false) && changes.selectedKeys.currentValue !== this.lastChange) {
+            this.state = new Set(changes.selectedKeys.currentValue);
+        }
+    }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -81,29 +80,29 @@ let SelectDirective = class SelectDirective {
     }
     selectSingle(node) {
         const key = this.itemKey(node);
-        if (this.selectedKeys[0] === key) {
-            return;
+        if (!this.state.has(key)) {
+            this.state.clear();
+            this.state.add(key);
+            this.notify();
         }
-        this.selectedKeys = [key];
-        this.notify();
     }
     selectMultiple(node) {
         const key = this.itemKey(node);
-        const idx = this.selectedKeys.indexOf(key);
-        const isSelected = idx > -1;
+        const isSelected = this.state.has(key);
         if (!isPresent(key)) {
             return;
         }
         if (isSelected) {
-            this.selectedKeys.splice(idx, 1);
+            this.state.delete(key);
         }
         else {
-            this.selectedKeys.push(key);
+            this.state.add(key);
         }
         this.notify();
     }
     notify() {
-        this.selectedKeysChange.emit(this.selectedKeys.slice());
+        this.lastChange = Array.from(this.state);
+        this.selectedKeysChange.emit(this.lastChange);
     }
 };
 tslib_1.__decorate([
@@ -121,9 +120,8 @@ tslib_1.__decorate([
 ], SelectDirective.prototype, "selection", void 0);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", Array),
-    tslib_1.__metadata("design:paramtypes", [Array])
-], SelectDirective.prototype, "selectedKeys", null);
+    tslib_1.__metadata("design:type", Array)
+], SelectDirective.prototype, "selectedKeys", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)

package/dist/es2015/size.d.ts

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible size options of the TreeView.
+ *
+ * The possible values are:
+ * - `'small'`
+ * - `'medium'`
+ * - `'large'`
+ * - `null`
+ */
+export declare type TreeViewSize = 'small' | 'medium' | 'large';

package/dist/es2015/size.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/treeview-group.component.d.ts

@@ -13,6 +13,7 @@ import { LoadingNotificationService } from './loading-notification.service';
 import { CheckedState } from './checkbox/checked-state';
 import { Observable } from 'rxjs';
 import { DataChangeNotificationService } from './data-change-notification.service';
+import { TreeViewSize } from './size';
 /**
  * @hidden
  */
@@ -41,6 +42,7 @@ export declare class TreeViewGroupComponent implements OnChanges, OnInit, OnDest
     nodeTemplateRef: TemplateRef<any>;
     loadMoreButtonTemplateRef: TemplateRef<any>;
     loadMoreService: LoadMoreService;
+    size: TreeViewSize;
     initialNodesLoaded: boolean;
     loadingMoreNodes: boolean;
     readonly moreNodesAvailable: boolean;

package/dist/es2015/treeview-group.component.js

@@ -33,6 +33,7 @@ let TreeViewGroupComponent = class TreeViewGroupComponent {
         this.role = 'group';
         this.loadOnDemand = true;
         this.textField = "";
+        this.size = 'medium';
         this.initialNodesLoaded = false;
         this.loadingMoreNodes = false;
         this._data = [];
@@ -233,7 +234,7 @@ let TreeViewGroupComponent = class TreeViewGroupComponent {
     }
 };
 tslib_1.__decorate([
-    HostBinding("class.k-group"),
+    HostBinding("class.k-treeview-group"),
     tslib_1.__metadata("design:type", Boolean)
 ], TreeViewGroupComponent.prototype, "kGroupClass", void 0);
 tslib_1.__decorate([
@@ -296,6 +297,10 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Object)
 ], TreeViewGroupComponent.prototype, "loadMoreService", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], TreeViewGroupComponent.prototype, "size", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
@@ -342,7 +347,7 @@ TreeViewGroupComponent = tslib_1.__decorate([
         template: `
         <li
             *ngFor="let node of data; let index = index; trackBy: trackBy"
-            class="k-item k-treeview-item"
+            class="k-treeview-item"
             [class.k-display-none]="!isVisible(node, nodeIndex(index))"
             kendoTreeViewItem
             [attr.aria-setsize]="totalNodesCount"
@@ -361,18 +366,23 @@ TreeViewGroupComponent = tslib_1.__decorate([
             [isSelected]="isSelected(node, nodeIndex(index))"
             [attr.data-treeindex]="nodeIndex(index)"
         >
-            <div class="k-mid">
+            <div class="k-treeview-mid">
                 <span
-                    class="k-icon"
-                    [class.k-i-collapse]="isExpanded(node, nodeIndex(index))"
-                    [class.k-i-expand]="!isExpanded(node, nodeIndex(index))"
+                    class="k-treeview-toggle"
                     [kendoTreeViewLoading]="nodeIndex(index)"
                     (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
                     *ngIf="expandIcons && hasChildren(node)"
                 >
+                    <span
+                        class="k-icon"
+                        [class.k-i-collapse]="isExpanded(node, nodeIndex(index))"
+                        [class.k-i-expand]="!isExpanded(node, nodeIndex(index))"
+                    >
+                    </span>
                 </span>
                 <kendo-checkbox
                     *ngIf="checkboxes"
+                    [size]="size"
                     [node]="node"
                     [index]="nodeIndex(index)"
                     [isChecked]="isChecked"
@@ -385,24 +395,26 @@ TreeViewGroupComponent = tslib_1.__decorate([
                     [index]="nodeIndex(index)"
                     [initialSelection]="isSelected(node, nodeIndex(index))"
                     [isSelected]="isSelected"
-                    class="k-in"
+                    class="k-treeview-leaf"
                     [style.touch-action]="touchActions ? '' : 'none'"
                 >
-                    <ng-container [ngSwitch]="hasTemplate">
-                        <ng-container *ngSwitchCase="true">
-                            <ng-template
-                                [ngTemplateOutlet]="nodeTemplateRef"
-                                [ngTemplateOutletContext]="{
-                                    $implicit: node,
-                                    index: nodeIndex(index)
-                                }"
-                            >
-                            </ng-template>
+                    <span class="k-treeview-leaf-text">
+                        <ng-container [ngSwitch]="hasTemplate">
+                            <ng-container *ngSwitchCase="true">
+                                <ng-template
+                                    [ngTemplateOutlet]="nodeTemplateRef"
+                                    [ngTemplateOutletContext]="{
+                                        $implicit: node,
+                                        index: nodeIndex(index)
+                                    }"
+                                >
+                                </ng-template>
+                            </ng-container>
+                            <ng-container *ngSwitchDefault>
+                                {{nodeText(node)}}
+                            </ng-container>
                         </ng-container>
-                        <ng-container *ngSwitchDefault>
-                            {{nodeText(node)}}
-                        </ng-container>
-                    </ng-container>
+                    </span>
                 </span>
             </div>
             <ul
@@ -436,7 +448,7 @@ TreeViewGroupComponent = tslib_1.__decorate([
         </li>
         <li
             *ngIf="initialNodesLoaded && moreNodesAvailable"
-            class="k-item k-treeview-item"
+            class="k-treeview-item"
             [class.k-treeview-load-more-checkboxes-container]="checkboxes"
             kendoTreeViewItem
             role="button"
@@ -448,29 +460,31 @@ TreeViewGroupComponent = tslib_1.__decorate([
             [parentIndex]="parentIndex"
             [attr.data-treeindex]="loadMoreButtonIndex"
         >
-            <div class="k-mid">
+            <div class="k-treeview-mid">
                 <span
                     *ngIf="loadingMoreNodes"
                     class="k-icon k-i-loading k-i-expand"
                 >
                 </span>
                 <span
-                    class="k-in k-treeview-load-more-button"
+                    class="k-treeview-leaf k-treeview-load-more-button"
                     [attr.data-treeindex]="loadMoreButtonIndex"
                     kendoTreeViewItemContent
                     [index]="loadMoreButtonIndex"
                 >
-                    <ng-template
-                        *ngIf="loadMoreButtonTemplateRef"
-                        [ngTemplateOutlet]="loadMoreButtonTemplateRef"
-                        [ngTemplateOutletContext]="{
-                            index: loadMoreButtonIndex
-                        }"
-                    >
-                    </ng-template>
-                    <ng-container *ngIf="!loadMoreButtonTemplateRef">
-                        Load more
-                    </ng-container>
+                    <span class="k-treeview-leaf-text">
+                        <ng-template
+                            *ngIf="loadMoreButtonTemplateRef"
+                            [ngTemplateOutlet]="loadMoreButtonTemplateRef"
+                            [ngTemplateOutletContext]="{
+                                index: loadMoreButtonIndex
+                            }"
+                        >
+                        </ng-template>
+                        <ng-container *ngIf="!loadMoreButtonTemplateRef">
+                            Load more
+                        </ng-container>
+                    </span>
                 </span>
             </div>
         </li>

package/dist/es2015/treeview-item-content.directive.js

@@ -45,10 +45,10 @@ let TreeViewItemContentDirective = class TreeViewItemContentDirective {
         this.subscriptions.unsubscribe();
     }
     updateFocusClass() {
-        this.render(this.navigationService.isActive(this.index), 'k-state-focused');
+        this.render(this.navigationService.isActive(this.index), 'k-focus');
     }
     updateSelectionClass(selected) {
-        this.render(selected, 'k-state-selected');
+        this.render(selected, 'k-selected');
     }
     render(addClass, className) {
         const action = addClass ? 'addClass' : 'removeClass';

package/dist/es2015/treeview-item.directive.js

@@ -181,7 +181,7 @@ let TreeViewItemDirective = class TreeViewItemDirective {
         this.setAttribute('aria-checked', this.checkable ? this.ariaChecked : null);
     }
     setDisabledClass() {
-        this.setClass('k-state-disabled', this.isDisabled);
+        this.setClass('k-disabled', this.isDisabled);
     }
     setClass(className, toggle) {
         const action = toggle ? 'addClass' : 'removeClass';

package/dist/es2015/treeview.component.d.ts

@@ -21,6 +21,7 @@ import { TreeViewLookupService } from './treeview-lookup.service';
 import { LoadMoreService } from './load-more/load-more.service';
 import { TreeItemDropEvent, TreeItemAddRemoveArgs, EditService, TreeItemDragEvent, TreeItemDragStartEvent } from './drag-and-drop/models';
 import { FilterState } from './filter-state.interface';
+import { TreeViewSize } from './size';
 /**
  * Represents the [Kendo UI TreeView component for Angular]({% slug overview_treeview %}).
  *
@@ -266,6 +267,17 @@ export declare class TreeViewComponent implements OnChanges, OnInit, OnDestroy,
      * Sets an initial value of the built-in input element used for filtering.
      */
     filter: string;
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    size: TreeViewSize;
     /**
      * @hidden
      */
@@ -287,6 +299,7 @@ export declare class TreeViewComponent implements OnChanges, OnInit, OnDestroy,
     private _hasChildren;
     private _nodeTemplateRef;
     private _loadMoreButtonTemplateRef;
+    private _size;
     private subscriptions;
     private domSubscriptions;
     constructor(element: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, expandService: ExpandStateService, navigationService: NavigationService, nodeChildrenService: NodeChildrenService, selectionService: SelectionService, treeViewLookupService: TreeViewLookupService, ngZone: NgZone, renderer: Renderer2, dataChangeNotification: DataChangeNotificationService, localization: LocalizationService);

package/dist/es2015/treeview.component.js

@@ -22,7 +22,7 @@ import { DataBoundComponent } from './data-bound-component';
 import { ExpandableComponent } from './expandable-component';
 import { SelectionService } from './selection/selection.service';
 import { TreeViewLookupService } from './treeview-lookup.service';
-import { closestNode, focusableNode, hasParent, isContent, isFocusable, match, nodeId, isLoadMoreButton, isPresent, nodeIndex, buildTreeItem } from './utils';
+import { closestNode, focusableNode, hasParent, isContent, isFocusable, match, nodeId, isLoadMoreButton, isPresent, nodeIndex, buildTreeItem, getSizeClass } from './utils';
 const LOAD_MORE_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button/';
 const providers = [
     ExpandStateService,
@@ -229,6 +229,7 @@ let TreeViewComponent = class TreeViewComponent {
         this.isActive = false;
         this.data = new BehaviorSubject([]);
         this._animate = true;
+        this._size = 'medium';
         this.subscriptions = new Subscription();
         this.domSubscriptions = [];
         validatePackage(packageMetadata);
@@ -324,6 +325,26 @@ let TreeViewComponent = class TreeViewComponent {
         this._isSelected = callback;
         this.selectable = Boolean(this._isSelected);
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(size) {
+        this.renderer.removeClass(this.element.nativeElement, getSizeClass('treeview', this.size));
+        if (size) {
+            this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', size));
+        }
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
     ngOnChanges(changes) {
         this.navigationService.navigable = Boolean(this.navigable);
         // TODO: should react to changes.loadOnDemand as well - should preload the data or clear the already cached items
@@ -358,6 +379,9 @@ let TreeViewComponent = class TreeViewComponent {
                 this.attachDomHandlers();
             });
         }
+        if (this.size) {
+            this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', this.size));
+        }
     }
     /**
      * Blurs the focused TreeView item.
@@ -514,7 +538,7 @@ let TreeViewComponent = class TreeViewComponent {
             return;
         }
         const index = nodeId(closestNode(target));
-        // the disabled check is probably not needed due to the k-state-disabled styles
+        // the disabled check is probably not needed due to the k-disabled styles
         if (!index || this.navigationService.isDisabled(index)) {
             return;
         }
@@ -570,7 +594,6 @@ let TreeViewComponent = class TreeViewComponent {
     }
 };
 tslib_1.__decorate([
-    HostBinding("class.k-widget"),
     HostBinding("class.k-treeview"),
     tslib_1.__metadata("design:type", Boolean)
 ], TreeViewComponent.prototype, "classNames", void 0);
@@ -744,6 +767,11 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
 ], TreeViewComponent.prototype, "filter", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], TreeViewComponent.prototype, "size", null);
 TreeViewComponent = tslib_1.__decorate([
     Component({
         changeDetection: ChangeDetectionStrategy.Default,
@@ -751,21 +779,26 @@ TreeViewComponent = tslib_1.__decorate([
         providers: providers,
         selector: 'kendo-treeview',
         template: `
-        <kendo-textbox
-            #filterInput
+        <span
+            class="k-treeview-filter"
             *ngIf="filterable"
-            [value]="filter"
-            [clearButton]="true"
-            (valueChange)="filterChange.emit($event)"
-            [placeholder]="filterInputPlaceholder"
         >
-            <ng-template kendoTextBoxPrefixTemplate>
-                <span class="k-icon k-i-search"></span>
-            </ng-template>
-        </kendo-textbox>
+            <kendo-textbox
+                [size]="size"
+                [value]="filter"
+                [clearButton]="true"
+                (valueChange)="filterChange.emit($event)"
+                [placeholder]="filterInputPlaceholder"
+            >
+                <ng-template kendoTextBoxPrefixTemplate>
+                    <span class="k-input-icon k-icon k-i-search"></span>
+                </ng-template>
+            </kendo-textbox>
+        </span>
         <ul class="k-treeview-lines"
             kendoTreeViewGroup
             role="group"
+            [size]="size"
             [loadOnDemand]="loadOnDemand"
             [checkboxes]="checkboxes"
             [expandIcons]="expandIcons"

package/dist/es2015/utils.d.ts

@@ -8,6 +8,7 @@ import { TreeItem } from './treeitem.interface';
 import { TreeItemLookup } from './treeitem-lookup.interface';
 import { TreeItemFilterState } from './drag-and-drop/models/tree-item-filter-state';
 import { TreeViewFilterSettings } from './treeview-filter-settings';
+import { TreeViewSize } from './size';
 /**
  * @hidden
  */
@@ -55,7 +56,7 @@ export declare const isContent: (element: any) => boolean;
 /**
  * @hidden
  *
- * Returns the nested .k-in:not(.k-treeview-load-more-button) element.
+ * Returns the nested .k-treeview-leaf:not(.k-treeview-load-more-button) element.
  * If the passed parent item is itself a content node, it is returned.
  */
 export declare const getContentElement: (parent: HTMLElement) => HTMLElement;
@@ -125,9 +126,13 @@ export declare const fetchLoadedDescendants: (lookup: TreeItemLookup, filterExpr
 /**
  * @hidden
  *
- * Compares two arrays to determine whether all unique elements in one, are present in the other.
+ * Compares two Seets to determine whether all unique elements in one, are present in the other.
  * Important:
  *  - it disregards the element order
- *  - it disregards element repetitions - sameValues([1, 1, 2], [1, 2, 2]) will return true
  */
-export declare const sameValues: (a: any[], b: any[]) => boolean;
+export declare const sameValues: (as: Set<any>, bs: Set<any>) => boolean;
+/**
+ * @hidden
+ * Returns the size class based on the component and size input.
+ */
+export declare const getSizeClass: (component: string, size: TreeViewSize) => string;

package/dist/es2015/utils.js

@@ -90,7 +90,7 @@ export const isFocusable = (element) => {
  * @hidden
  */
 export const isContent = (element) => {
-    const scopeSelector = '.k-in:not(.k-treeview-load-more-button),.k-treeview-item,.k-treeview';
+    const scopeSelector = '.k-treeview-leaf:not(.k-treeview-load-more-button),.k-treeview-item,.k-treeview';
     if (!isDocumentAvailable()) {
         return null;
     }
@@ -99,20 +99,20 @@ export const isContent = (element) => {
         node = node.parentNode;
     }
     if (node) {
-        return match(node, '.k-in:not(.k-treeview-load-more-button)');
+        return match(node, '.k-treeview-leaf:not(.k-treeview-load-more-button)');
     }
 };
 /**
  * @hidden
  *
- * Returns the nested .k-in:not(.k-treeview-load-more-button) element.
+ * Returns the nested .k-treeview-leaf:not(.k-treeview-load-more-button) element.
  * If the passed parent item is itself a content node, it is returned.
  */
 export const getContentElement = (parent) => {
     if (!isPresent(parent)) {
         return null;
     }
-    const selector = '.k-in:not(.k-treeview-load-more-button)';
+    const selector = '.k-treeview-leaf:not(.k-treeview-load-more-button)';
     if (match(parent, selector)) {
         return parent;
     }
@@ -122,7 +122,7 @@ export const getContentElement = (parent) => {
  * @hidden
  */
 export const isLoadMoreButton = (element) => {
-    return isPresent(closestWithMatch(element, '.k-in.k-treeview-load-more-button'));
+    return isPresent(closestWithMatch(element, '.k-treeview-leaf.k-treeview-load-more-button'));
 };
 /**
  * @hidden
@@ -282,16 +282,26 @@ export const fetchLoadedDescendants = (lookup, filterExpression) => {
 /**
  * @hidden
  *
- * Compares two arrays to determine whether all unique elements in one, are present in the other.
+ * Compares two Seets to determine whether all unique elements in one, are present in the other.
  * Important:
  *  - it disregards the element order
- *  - it disregards element repetitions - sameValues([1, 1, 2], [1, 2, 2]) will return true
  */
-export const sameValues = (a, b) => {
-    if (a.length !== b.length) {
+export const sameValues = (as, bs) => {
+    if (as.size !== bs.size) {
         return false;
     }
-    const values = new Set(b);
-    return a.every(v => values.has(v));
+    return Array.from(as).every(v => bs.has(v));
+};
+/**
+ * @hidden
+ * Returns the size class based on the component and size input.
+ */
+export const getSizeClass = (component, size) => {
+    const SIZE_CLASSES = {
+        'small': `k-${component}-sm`,
+        'medium': `k-${component}-md`,
+        'large': `k-${component}-lg`
+    };
+    return SIZE_CLASSES[size];
 };
 export { ɵ0, ɵ1, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8, ɵ9 };