@progress/kendo-angular-dropdowns 5.5.1 → 6.0.1-dev.202201201129

package/dist/es2015/dropdowntrees/dropdowntree.component.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 var DropDownTreeComponent_1;
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, NgZone, Renderer2, TemplateRef, ViewChild, ChangeDetectorRef, ContentChild, forwardRef, ViewContainerRef, isDevMode, Optional, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, NgZone, Renderer2, TemplateRef, ViewChild, ChangeDetectorRef, ContentChild, forwardRef, ViewContainerRef, isDevMode, Optional, Inject, HostListener } from '@angular/core';
 import { anyChanged, guid, hasObservers, isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { TreeViewComponent, DataBoundComponent, ExpandableComponent } from '@progress/kendo-angular-treeview';
@@ -16,7 +16,7 @@ import { NavigationService } from '../common/navigation/navigation.service';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { SelectionService } from '../common/selection/selection.service';
 import { PreventableEvent } from '../common/models/preventable-event';
-import { inDropDown, isArray, isPresent, isUntouched, noop } from '../common/util';
+import { getFillModeClass, getRoundedClass, getSizeClass, inDropDown, isArray, isPresent, isUntouched, noop } from '../common/util';
 import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
 import { of } from 'rxjs';
 import { tap } from 'rxjs/operators';
@@ -40,16 +40,18 @@ const ɵ3 = isNodeVisible;
  * Represents the [Kendo UI DropDownTree component for Angular]({% slug overview_ddt %}).
  */
 let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponent {
-    constructor(popupService, navigationService, renderer, hostElement, _zone, cdr, localization, touchEnabled) {
+    constructor(wrapper, popupService, navigationService, renderer, _zone, cdr, localization, touchEnabled) {
+        this.wrapper = wrapper;
         this.popupService = popupService;
         this.navigationService = navigationService;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this._zone = _zone;
         this.cdr = cdr;
         this.localization = localization;
         this.touchEnabled = touchEnabled;
         this.hostClasses = true;
+        this.role = 'listbox';
+        this.ariaHasPopup = 'tree';
         /**
          * Fires each time the popup is about to open
          * ([see example]({% slug openstate_ddt %})).
@@ -184,15 +186,52 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
         this._popupSettings = DEFAULT_POPUP_SETTINGS;
         this._tabindex = 0;
         this._isFocused = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.subscriptions = [];
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.subscribeEvents();
         this.subscribeTouchEvents();
+        this.subscribeFocusEvents();
     }
-    get clearable() {
-        return this.clearButton;
+    get isDisabled() {
+        return this.disabled;
+    }
+    get isLoading() {
+        return this.loading;
+    }
+    get id() {
+        return this.focusableId;
+    }
+    get hostTabIndex() {
+        return this.tabindex;
+    }
+    get isAriaExpanded() {
+        return this.isOpen;
+    }
+    get isReadonly() {
+        return this.readonly;
+    }
+    /**
+     * @hidden
+     */
+    handleClick() {
+        this.togglePopup(!this.isOpen);
+    }
+    /**
+     * @hidden
+     */
+    handleKeydown(event) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const eventData = event;
+        this.navigationService.process({
+            originalEvent: eventData
+        });
     }
     set treeview(treeview) {
         if (treeview) {
@@ -271,8 +310,69 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
     get tabindex() {
         return this.disabled ? -1 : this._tabindex;
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(size) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
+        if (size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', size));
+        }
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    set fillMode(fillMode) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
+        if (fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', fillMode));
+        }
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     set isFocused(isFocused) {
-        this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-state-focused');
+        this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
         this._isFocused = isFocused;
     }
     get isFocused() {
@@ -367,13 +467,14 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
         return this.isNodeVisible;
     }
     ngOnInit() {
-        this.renderer.removeAttribute(this.hostElement.nativeElement, 'tabindex');
+        this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.assignAriaDescribedBy();
         this.subscriptions.push(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
         }));
+        this.setComponentClasses();
     }
     /**
      * @hidden
@@ -424,7 +525,11 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
     /**
      * @hidden
      */
-    handleFocus() {
+    handleFocus(event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
         if (!this.isFocused) {
             this.isFocused = true;
             if (hasObservers(this.onFocus)) {
@@ -439,13 +544,13 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
      */
     handleBlur(e) {
         const relatedTarget = e && e.relatedTarget;
-        if (this.hostElement.nativeElement.contains(relatedTarget) ||
+        if (this.wrapper.nativeElement.contains(relatedTarget) ||
             (this.isOpen && this.popupRef.popupElement.contains(relatedTarget))) {
             return;
         }
         this.isFocused = false;
         if (hasObservers(this.onBlur) ||
-            isUntouched(this.hostElement.nativeElement)) {
+            isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(() => {
                 this.togglePopup(false);
                 this.onBlur.emit();
@@ -456,24 +561,6 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
             this.togglePopup(false);
         }
     }
-    /**
-     * @hidden
-     */
-    handleKeydown(event) {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        const eventData = event;
-        this.navigationService.process({
-            originalEvent: eventData
-        });
-    }
-    /**
-     * @hidden
-     */
-    handleClick() {
-        this.togglePopup(!this.isOpen);
-    }
     /**
      * Focuses a specific item of the DropDownTree based on a provided index in the format of `1_1`.
      * The targeted item should be expanded in order for it to be focused.
@@ -535,7 +622,7 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
      * @hidden
      */
     get popupContainerClasses() {
-        const containerClasses = ['k-popup-dropdowntree', 'k-reset', 'k-group', 'k-list-container'];
+        const containerClasses = ['k-popup-dropdowntree'];
         if (this.popupSettings.popupClass) {
             containerClasses.push(this.popupSettings.popupClass);
         }
@@ -635,6 +722,18 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
     get buttonClasses() {
         return this.loading ? 'k-i-loading' : 'k-i-arrow-s';
     }
+    /**
+     * @hidden
+     */
+    get selectButtonClasses() {
+        return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''} ${this.fillMode ? 'k-button-' + this.fillMode + '-base' : ''}`;
+    }
+    /**
+     * @hidden
+     */
+    get filterInputClasses() {
+        return `${this.size ? getSizeClass('input', this.size) : ''} ${this.fillMode ? 'k-input-' + this.fillMode : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
+    }
     verifySettings() {
         if (!isDevMode()) {
             return;
@@ -794,7 +893,7 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
         // Roll up DropDownTree on iOS when tapped outside
         this.touchstartDisposeHandler = this.renderer.listen(document, 'touchstart', (e) => {
             const target = e.target;
-            if (this.isFocused && !inDropDown(this.hostElement, target, this.popupRef)) {
+            if (this.isFocused && !inDropDown(this.wrapper, target, this.popupRef)) {
                 this._zone.run(() => {
                     if (this.isOpen) {
                         this.treeview.blur();
@@ -804,34 +903,117 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
             }
         }));
     }
+    subscribeFocusEvents() {
+        if (isDocumentAvailable()) {
+            this.handleFocus = this.handleFocus.bind(this);
+            this.handleDocumentBlur = this.handleDocumentBlur.bind(this);
+            this._zone.runOutsideAngular(() => {
+                const useCapture = true;
+                document.addEventListener('focus', this.handleFocus, useCapture);
+                document.addEventListener('blur', this.handleDocumentBlur, useCapture);
+            });
+        }
+    }
+    unSubscribeFocusEvents() {
+        if (isDocumentAvailable()) {
+            const useCapture = true;
+            document.removeEventListener('focus', this.handleFocus, useCapture);
+            document.removeEventListener('blur', this.handleDocumentBlur, useCapture);
+        }
+    }
     unsubscribeEvents() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.unSubscribeFocusEvents();
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
         }
     }
+    handleDocumentBlur(event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.handleBlur(event);
+    }
     assignAriaDescribedBy() {
         const currentValue = this.wrapper.nativeElement.getAttribute('aria-describedby') || '';
         // add to the current value - don't replace it (the aria-describedby is used by the FormField component as well)
         const newValue = `${this.valueLabelId} ${currentValue.trim()}`.trim();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
     }
+    setComponentClasses() {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
+        }
+    }
 };
 tslib_1.__decorate([
-    HostBinding('class.k-widget'),
     HostBinding('class.k-dropdowntree'),
-    HostBinding('class.k-dropdowntree-clearable'),
+    HostBinding('class.k-picker'),
     tslib_1.__metadata("design:type", Boolean)
 ], DropDownTreeComponent.prototype, "hostClasses", void 0);
+tslib_1.__decorate([
+    HostBinding('class.k-disabled'),
+    HostBinding('attr.aria-disabled'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], DropDownTreeComponent.prototype, "isDisabled", null);
+tslib_1.__decorate([
+    HostBinding('class.k-loading'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], DropDownTreeComponent.prototype, "isLoading", null);
+tslib_1.__decorate([
+    HostBinding('attr.id'),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [])
+], DropDownTreeComponent.prototype, "id", null);
 tslib_1.__decorate([
     HostBinding('attr.dir'),
     tslib_1.__metadata("design:type", String)
 ], DropDownTreeComponent.prototype, "direction", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-dropdowntree-clearable'),
+    HostBinding('attr.tabindex'),
+    tslib_1.__metadata("design:type", Number),
+    tslib_1.__metadata("design:paramtypes", [])
+], DropDownTreeComponent.prototype, "hostTabIndex", null);
+tslib_1.__decorate([
+    HostBinding('attr.role'),
+    tslib_1.__metadata("design:type", String)
+], DropDownTreeComponent.prototype, "role", void 0);
+tslib_1.__decorate([
+    HostBinding('attr.aria-haspopup'),
+    tslib_1.__metadata("design:type", String)
+], DropDownTreeComponent.prototype, "ariaHasPopup", void 0);
+tslib_1.__decorate([
+    HostBinding('attr.aria-expanded'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], DropDownTreeComponent.prototype, "isAriaExpanded", null);
+tslib_1.__decorate([
+    HostBinding('attr.readonly'),
+    HostBinding('attr.aria-readonly'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
-], DropDownTreeComponent.prototype, "clearable", null);
+], DropDownTreeComponent.prototype, "isReadonly", null);
+tslib_1.__decorate([
+    HostListener('click'),
+    tslib_1.__metadata("design:type", Function),
+    tslib_1.__metadata("design:paramtypes", []),
+    tslib_1.__metadata("design:returntype", void 0)
+], DropDownTreeComponent.prototype, "handleClick", null);
+tslib_1.__decorate([
+    HostListener('keydown', ['$event']),
+    tslib_1.__metadata("design:type", Function),
+    tslib_1.__metadata("design:paramtypes", [Object]),
+    tslib_1.__metadata("design:returntype", void 0)
+], DropDownTreeComponent.prototype, "handleKeydown", null);
 tslib_1.__decorate([
     ContentChild(NoDataTemplateDirective, { static: false }),
     tslib_1.__metadata("design:type", NoDataTemplateDirective)
@@ -856,10 +1038,6 @@ tslib_1.__decorate([
     ViewChild('popupTemplate', { static: true }),
     tslib_1.__metadata("design:type", TemplateRef)
 ], DropDownTreeComponent.prototype, "popupTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('wrapper', { static: true }),
-    tslib_1.__metadata("design:type", ElementRef)
-], DropDownTreeComponent.prototype, "wrapper", void 0);
 tslib_1.__decorate([
     ViewChild('container', { read: ViewContainerRef, static: true }),
     tslib_1.__metadata("design:type", ViewContainerRef)
@@ -986,6 +1164,21 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Number),
     tslib_1.__metadata("design:paramtypes", [Number])
 ], DropDownTreeComponent.prototype, "tabindex", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DropDownTreeComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DropDownTreeComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DropDownTreeComponent.prototype, "fillMode", null);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
@@ -1056,30 +1249,10 @@ DropDownTreeComponent = DropDownTreeComponent_1 = tslib_1.__decorate([
         >
         </ng-container>
         <span
-            #wrapper
-            [ngClass]="{
-                'k-dropdown-wrap': true,
-                'k-state-disabled': this.disabled
-            }"
-            [attr.id]="focusableId"
-            role="listbox"
-            aria-haspopup="tree"
-            [attr.aria-expanded]="isOpen"
-            [attr.aria-readonly]="readonly"
-            [attr.tabindex]="tabindex"
-            [attr.dir]="direction"
-            (click)="handleClick()"
-            (keydown)="handleKeydown($event)"
-            [kendoEventsOutsideAngular]="{
-                focus: handleFocus,
-                blur: handleBlur
-            }"
-            [scope]="this"
+            [attr.id]="valueLabelId"
+            class="k-input-inner"
         >
-            <span
-                [attr.id]="valueLabelId"
-                class="k-input"
-            >
+            <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"
                     [templateContext]="{
                         templateRef: valueTemplate.templateRef,
@@ -1088,47 +1261,61 @@ DropDownTreeComponent = DropDownTreeComponent_1 = tslib_1.__decorate([
                 </ng-template>
                 <ng-template [ngIf]="!valueTemplate"> {{ text || placeholder }} </ng-template>
             </span>
-            <span
-                *ngIf="!loading && !readonly && clearButton && text?.length && !disabled"
-                class="k-icon k-clear-value k-i-close"
-                [style.visibility]="clearButtonVisiblity"
-                aria-hidden="true"
-                [attr.title]="messageFor('clearTitle')"
-                (click)="clearValue($event)"
-            >
-            </span>
-            <span class="k-select" aria-hidden="true">
-                <span
-                    class="k-icon k-i-arrow-60-down"
-                    [ngClass]="buttonClasses"
-                ></span>
-            </span>
         </span>
+        <span
+            *ngIf="!loading && !readonly && clearButton && text?.length && !disabled"
+            class="k-clear-value"
+            [style.visibility]="clearButtonVisiblity"
+            aria-hidden="true"
+            [attr.title]="messageFor('clearTitle')"
+            (click)="clearValue($event)"
+        >
+            <span class="k-icon k-i-x"></span>
+        </span>
+        <button
+            tabindex="-1"
+            type="button"
+            aria-hidden="true"
+            class="k-input-button k-button k-icon-button"
+            [ngClass]="selectButtonClasses"
+        >
+            <span
+                class="k-button-icon k-icon"
+                [ngClass]="buttonClasses"
+            ></span>
+        </button>
         <ng-template #popupTemplate>
             <span
                 *ngIf="filterable"
                 class="k-list-filter"
             >
-                <input
-                    #filterInput
-                    (input)="handleFilterInputChange($event.target.value)"
-                    [filterInput]="filterable && !touchEnabled"
-                    (keydown.arrowdown)="handleKeydown($event)"
-                    (keydown.alt.arrowup)="handleKeydown($event)"
-                    [(ngModel)]="filter"
-                    class="k-textbox"
-                    role="textbox"
-                    aria-haspopup="true"
-                    aria-expanded="false"
-                    tabindex="0"
-                    aria-disabled="false"
-                    aria-readonly="false"
-                    [kendoEventsOutsideAngular]="{
-                        blur: handleBlur
-                    }"
-                    [scope]="this"
+                <span
+                    class="k-textbox k-input"
+                    [ngClass]="filterInputClasses"
                 >
-                <span class="k-icon k-i-zoom"></span>
+                    <span class="k-input-prefix">
+                        <span class="k-input-icon k-icon k-i-search"></span>
+                    </span>
+                    <input
+                        #filterInput
+                        (input)="handleFilterInputChange($event.target.value)"
+                        [filterInput]="filterable && !touchEnabled"
+                        (keydown.arrowdown)="handleKeydown($event)"
+                        (keydown.alt.arrowup)="handleKeydown($event)"
+                        [(ngModel)]="filter"
+                        class="k-input-inner"
+                        role="textbox"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        [kendoEventsOutsideAngular]="{
+                            blur: handleBlur
+                        }"
+                        [scope]="this"
+                    >
+                </span>
             </span>
             <!--header template-->
             <ng-template
@@ -1140,6 +1327,7 @@ DropDownTreeComponent = DropDownTreeComponent_1 = tslib_1.__decorate([
             <kendo-treeview
                 #treeview
                 *ngIf="data.length !== 0 && !allNodesHidden"
+                [size]="size"
                 [nodes]="data"
                 [style.maxHeight.px]="listHeight"
                 [animate]="false"
@@ -1170,7 +1358,7 @@ DropDownTreeComponent = DropDownTreeComponent_1 = tslib_1.__decorate([
                 }">
             </ng-template>
             <!--no-data template-->
-            <div class="k-nodata" *ngIf="data.length === 0 || allNodesHidden">
+            <div class="k-no-data" *ngIf="data.length === 0 || allNodesHidden">
                 <ng-template [ngIf]="noDataTemplate"
                     [templateContext]="{
                         templateRef: noDataTemplate?.templateRef
@@ -1186,10 +1374,10 @@ DropDownTreeComponent = DropDownTreeComponent_1 = tslib_1.__decorate([
         changeDetection: ChangeDetectionStrategy.OnPush
     }),
     tslib_1.__param(7, Optional()), tslib_1.__param(7, Inject(TOUCH_ENABLED)),
-    tslib_1.__metadata("design:paramtypes", [PopupService,
+    tslib_1.__metadata("design:paramtypes", [ElementRef,
+        PopupService,
         NavigationService,
         Renderer2,
-        ElementRef,
         NgZone,
         ChangeDetectorRef,
         LocalizationService, Boolean])