@progress/kendo-angular-inputs 21.1.1-develop.2 → 21.2.0-develop.10

package/esm2022/slider/slider.component.mjs

@@ -13,11 +13,10 @@ import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { areSame, isPresent, requiresZoneOnBlur } from '../common/utils';
 import { eventValue, decreaseValueToStep, increaseValueToStep } from '../sliders-common/sliders-util';
 import { invokeElementMethod } from '../common/dom-utils';
-import { guid, isDocumentAvailable, hasObservers, KendoInput, anyChanged, Keys, EventsOutsideAngularDirective, DraggableDirective, ResizeSensorComponent, normalizeNumpadKeys } from '@progress/kendo-angular-common';
+import { guid, isDocumentAvailable, hasObservers, KendoInput, anyChanged, Keys, EventsOutsideAngularDirective, DraggableDirective, ResizeSensorComponent, normalizeKeys } from '@progress/kendo-angular-common';
 import { SliderBase } from '../sliders-common/slider-base';
 import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
 import { SliderTicksComponent } from '../sliders-common/slider-ticks.component';
-import { NgIf } from '@angular/common';
 import { LocalizedSliderMessagesDirective } from './localization/localized-slider-messages.directive';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
@@ -220,7 +219,7 @@ export class SliderComponent extends SliderBase {
         const options = this.getProps();
         const { max, min } = options;
         // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
-        const code = normalizeNumpadKeys(e);
+        const code = normalizeKeys(e);
         const handler = this.keyBinding[code];
         if (this.isDisabled || !handler) {
             return;
@@ -460,42 +459,43 @@ export class SliderComponent extends SliderBase {
         return icon;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SliderComponent, isStandalone: true, selector: "kendo-slider", inputs: { focusableId: "focusableId", dragHandleTitle: "dragHandleTitle", incrementTitle: "incrementTitle", animate: "animate", decrementTitle: "decrementTitle", showButtons: "showButtons", value: "value", tabIndex: "tabIndex" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SliderComponent, isStandalone: true, selector: "kendo-slider", inputs: { focusableId: "focusableId", dragHandleTitle: "dragHandleTitle", incrementTitle: "incrementTitle", animate: "animate", decrementTitle: "decrementTitle", showButtons: "showButtons", value: "value", tabIndex: "tabIndex" }, providers: [
             LocalizationService,
             { provide: L10N_PREFIX, useValue: 'kendo.slider' },
             { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent) },
             { provide: KendoInput, useExisting: forwardRef(() => SliderComponent) }
         ], viewQueries: [{ propertyName: "draghandle", first: true, predicate: ["draghandle"], descendants: true, static: true }, { propertyName: "decreaseButton", first: true, predicate: ["decreaseButton"], descendants: true, read: ElementRef }, { propertyName: "increaseButton", first: true, predicate: ["increaseButton"], descendants: true, read: ElementRef }], exportAs: ["kendoSlider"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSliderLocalizedMessages
-            i18n-increment="kendo.slider.increment|The title of the **Increase** button of the Slider."
-            increment="increment"
-            i18n-decrement="kendo.slider.decrement|The title of the **Decrease** button of the Slider."
-            decrement="decrement"
-            i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
-            dragHandle="Drag"
-        >
-        <button
-            kendoButton
-            #decreaseButton
-            *ngIf="showButtons"
-            type="button"
-            rounded="full"
-            [icon]="decreaseButtonArrowIcon"
-            [svgIcon]="decreaseButtonArrowSVGIcon"
-            class="k-button-decrease"
-            [title]="decrementMessage"
-            [attr.tabindex]="-1"
-        ></button>
-        <div
+          i18n-increment="kendo.slider.increment|The title of the **Increase** button of the Slider."
+          increment="increment"
+          i18n-decrement="kendo.slider.decrement|The title of the **Decrease** button of the Slider."
+          decrement="decrement"
+          i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
+          dragHandle="Drag"
+          >
+          @if (showButtons) {
+            <button
+              kendoButton
+              #decreaseButton
+              type="button"
+              rounded="full"
+              [icon]="decreaseButtonArrowIcon"
+              [svgIcon]="decreaseButtonArrowSVGIcon"
+              class="k-button-decrease"
+              [title]="decrementMessage"
+              [attr.tabindex]="-1"
+            ></button>
+          }
+          <div
             #wrap
             class="k-slider-track-wrap"
             [class.k-slider-topleft]="tickPlacement === 'before'"
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
-        >
-            <ul kendoSliderTicks
+            >
+            @if (tickPlacement !== 'none') {
+              <ul kendoSliderTicks
                 #ticks
-                *ngIf="tickPlacement !== 'none'"
                 [tickTitle]="title"
                 [vertical]="vertical"
                 [step]="smallStep"
@@ -504,46 +504,48 @@ export class SliderComponent extends SliderBase {
                 [max]="max"
                 [labelTemplate]="labelTemplate?.templateRef"
                 aria-hidden="true"
-            >
-            </ul>
+                >
+              </ul>
+            }
             <div #track class="k-slider-track">
-                <div #sliderSelection class="k-slider-selection">
-                </div>
-                <span #draghandle
-                    role="slider"
-                    [attr.aria-valuemin]="min"
-                    [attr.aria-valuemax]="max"
-                    [attr.aria-valuenow]="currentValue"
-                    [attr.aria-valuetext]="currentValue"
-                    [attr.aria-disabled]="disabled ? true : undefined"
-                    [attr.aria-readonly]="readonly ? true : undefined"
-                    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
-                    [style.touch-action]="isDisabled ? '' : 'none'"
-                    class="k-draghandle k-draghandle-end"
-                    [title]="dragHandleMessage"
-                    [attr.tabindex]="disabled ? '-1' : tabIndex"
-                    [id]="focusableId"
-                    kendoDraggable
-                    (kendoPress)="ifEnabled(handleDragPress, $event)"
-                    (kendoDrag)="ifEnabled(onHandleDrag, $event)"
-                    (kendoRelease)="ifEnabled(onHandleRelease, $event)"
-                ></span>
+              <div #sliderSelection class="k-slider-selection">
+              </div>
+              <span #draghandle
+                role="slider"
+                [attr.aria-valuemin]="min"
+                [attr.aria-valuemax]="max"
+                [attr.aria-valuenow]="currentValue"
+                [attr.aria-valuetext]="currentValue"
+                [attr.aria-disabled]="disabled ? true : undefined"
+                [attr.aria-readonly]="readonly ? true : undefined"
+                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [style.touch-action]="isDisabled ? '' : 'none'"
+                class="k-draghandle k-draghandle-end"
+                [title]="dragHandleMessage"
+                [attr.tabindex]="disabled ? '-1' : tabIndex"
+                [id]="focusableId"
+                kendoDraggable
+                (kendoPress)="ifEnabled(handleDragPress, $event)"
+                (kendoDrag)="ifEnabled(onHandleDrag, $event)"
+                (kendoRelease)="ifEnabled(onHandleRelease, $event)"
+              ></span>
             </div>
-        </div>
-        <button
-            kendoButton
-            #increaseButton
-            *ngIf="showButtons"
-            type="button"
-            rounded="full"
-            [icon]="increaseButtonArrowIcon"
-            [svgIcon]="increaseButtonArrowSVGIcon"
-            class="k-button-increase"
-            [title]="incrementMessage"
-            [attr.tabindex]="-1"
-        ></button>
-        <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
-  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+          </div>
+          @if (showButtons) {
+            <button
+              kendoButton
+              #increaseButton
+              type="button"
+              rounded="full"
+              [icon]="increaseButtonArrowIcon"
+              [svgIcon]="increaseButtonArrowSVGIcon"
+              class="k-button-increase"
+              [title]="incrementMessage"
+              [attr.tabindex]="-1"
+            ></button>
+          }
+          <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -558,35 +560,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-slider',
                     template: `
         <ng-container kendoSliderLocalizedMessages
-            i18n-increment="kendo.slider.increment|The title of the **Increase** button of the Slider."
-            increment="increment"
-            i18n-decrement="kendo.slider.decrement|The title of the **Decrease** button of the Slider."
-            decrement="decrement"
-            i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
-            dragHandle="Drag"
-        >
-        <button
-            kendoButton
-            #decreaseButton
-            *ngIf="showButtons"
-            type="button"
-            rounded="full"
-            [icon]="decreaseButtonArrowIcon"
-            [svgIcon]="decreaseButtonArrowSVGIcon"
-            class="k-button-decrease"
-            [title]="decrementMessage"
-            [attr.tabindex]="-1"
-        ></button>
-        <div
+          i18n-increment="kendo.slider.increment|The title of the **Increase** button of the Slider."
+          increment="increment"
+          i18n-decrement="kendo.slider.decrement|The title of the **Decrease** button of the Slider."
+          decrement="decrement"
+          i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
+          dragHandle="Drag"
+          >
+          @if (showButtons) {
+            <button
+              kendoButton
+              #decreaseButton
+              type="button"
+              rounded="full"
+              [icon]="decreaseButtonArrowIcon"
+              [svgIcon]="decreaseButtonArrowSVGIcon"
+              class="k-button-decrease"
+              [title]="decrementMessage"
+              [attr.tabindex]="-1"
+            ></button>
+          }
+          <div
             #wrap
             class="k-slider-track-wrap"
             [class.k-slider-topleft]="tickPlacement === 'before'"
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
-        >
-            <ul kendoSliderTicks
+            >
+            @if (tickPlacement !== 'none') {
+              <ul kendoSliderTicks
                 #ticks
-                *ngIf="tickPlacement !== 'none'"
                 [tickTitle]="title"
                 [vertical]="vertical"
                 [step]="smallStep"
@@ -595,48 +598,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 [max]="max"
                 [labelTemplate]="labelTemplate?.templateRef"
                 aria-hidden="true"
-            >
-            </ul>
+                >
+              </ul>
+            }
             <div #track class="k-slider-track">
-                <div #sliderSelection class="k-slider-selection">
-                </div>
-                <span #draghandle
-                    role="slider"
-                    [attr.aria-valuemin]="min"
-                    [attr.aria-valuemax]="max"
-                    [attr.aria-valuenow]="currentValue"
-                    [attr.aria-valuetext]="currentValue"
-                    [attr.aria-disabled]="disabled ? true : undefined"
-                    [attr.aria-readonly]="readonly ? true : undefined"
-                    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
-                    [style.touch-action]="isDisabled ? '' : 'none'"
-                    class="k-draghandle k-draghandle-end"
-                    [title]="dragHandleMessage"
-                    [attr.tabindex]="disabled ? '-1' : tabIndex"
-                    [id]="focusableId"
-                    kendoDraggable
-                    (kendoPress)="ifEnabled(handleDragPress, $event)"
-                    (kendoDrag)="ifEnabled(onHandleDrag, $event)"
-                    (kendoRelease)="ifEnabled(onHandleRelease, $event)"
-                ></span>
+              <div #sliderSelection class="k-slider-selection">
+              </div>
+              <span #draghandle
+                role="slider"
+                [attr.aria-valuemin]="min"
+                [attr.aria-valuemax]="max"
+                [attr.aria-valuenow]="currentValue"
+                [attr.aria-valuetext]="currentValue"
+                [attr.aria-disabled]="disabled ? true : undefined"
+                [attr.aria-readonly]="readonly ? true : undefined"
+                [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                [style.touch-action]="isDisabled ? '' : 'none'"
+                class="k-draghandle k-draghandle-end"
+                [title]="dragHandleMessage"
+                [attr.tabindex]="disabled ? '-1' : tabIndex"
+                [id]="focusableId"
+                kendoDraggable
+                (kendoPress)="ifEnabled(handleDragPress, $event)"
+                (kendoDrag)="ifEnabled(onHandleDrag, $event)"
+                (kendoRelease)="ifEnabled(onHandleRelease, $event)"
+              ></span>
             </div>
-        </div>
-        <button
-            kendoButton
-            #increaseButton
-            *ngIf="showButtons"
-            type="button"
-            rounded="full"
-            [icon]="increaseButtonArrowIcon"
-            [svgIcon]="increaseButtonArrowSVGIcon"
-            class="k-button-increase"
-            [title]="incrementMessage"
-            [attr.tabindex]="-1"
-        ></button>
-        <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
-  `,
+          </div>
+          @if (showButtons) {
+            <button
+              kendoButton
+              #increaseButton
+              type="button"
+              rounded="full"
+              [icon]="increaseButtonArrowIcon"
+              [svgIcon]="increaseButtonArrowSVGIcon"
+              class="k-button-increase"
+              [title]="incrementMessage"
+              [attr.tabindex]="-1"
+            ></button>
+          }
+          <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
+        `,
                     standalone: true,
-                    imports: [LocalizedSliderMessagesDirective, NgIf, ButtonComponent, EventsOutsideAngularDirective, SliderTicksComponent, DraggableDirective, ResizeSensorComponent]
+                    imports: [LocalizedSliderMessagesDirective, ButtonComponent, EventsOutsideAngularDirective, SliderTicksComponent, DraggableDirective, ResizeSensorComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { focusableId: [{
                 type: Input

package/esm2022/sliders-common/slider-ticks.component.mjs

@@ -5,7 +5,7 @@
 /* eslint-disable @angular-eslint/component-selector */
 import { Component, Input, QueryList, ViewChildren, HostBinding, TemplateRef } from '@angular/core';
 import { calculateTicksCount, calculateValueFromTick } from './sliders-util';
-import { NgFor, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -66,51 +66,63 @@ export class SliderTicksComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderTicksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SliderTicksComponent, isStandalone: true, selector: "[kendoSliderTicks]", inputs: { tickTitle: "tickTitle", vertical: "vertical", step: "step", largeStep: "largeStep", min: "min", max: "max", labelTemplate: "labelTemplate" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "tickElements", predicate: ["tickElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <li #tickElement *ngFor="let tick of ticks;"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SliderTicksComponent, isStandalone: true, selector: "[kendoSliderTicks]", inputs: { tickTitle: "tickTitle", vertical: "vertical", step: "step", largeStep: "largeStep", min: "min", max: "max", labelTemplate: "labelTemplate" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "tickElements", predicate: ["tickElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    @for (tick of ticks; track tick) {
+      <li #tickElement
         [ngClass]="tick.classes"
         title="{{ tickTitle(tick.value) }}"
         role="presentation"
-     >
-         <ng-container [ngSwitch]="tick.large">
-            <span class="k-label" *ngSwitchCase="true">
-                <ng-container [ngTemplateOutlet]="labelTemplate || defaultLabel" [ngTemplateOutletContext]="tick">
-                </ng-container>
+        >
+        @switch (tick.large) {
+          @case (true) {
+            <span class="k-label">
+              <ng-container [ngTemplateOutlet]="labelTemplate || defaultLabel" [ngTemplateOutletContext]="tick">
+              </ng-container>
             </span>
-            <ng-container *ngSwitchCase="false">&nbsp;</ng-container>
-         </ng-container>
-     </li>
-
-     <ng-template #defaultLabel let-value="value">
-        {{ tickTitle(value) }}
-     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+          }
+          @case (false) {
+            &nbsp;
+          }
+        }
+      </li>
+    }
+    
+    <ng-template #defaultLabel let-value="value">
+      {{ tickTitle(value) }}
+    </ng-template>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderTicksComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoSliderTicks]',
                     template: `
-    <li #tickElement *ngFor="let tick of ticks;"
+    @for (tick of ticks; track tick) {
+      <li #tickElement
         [ngClass]="tick.classes"
         title="{{ tickTitle(tick.value) }}"
         role="presentation"
-     >
-         <ng-container [ngSwitch]="tick.large">
-            <span class="k-label" *ngSwitchCase="true">
-                <ng-container [ngTemplateOutlet]="labelTemplate || defaultLabel" [ngTemplateOutletContext]="tick">
-                </ng-container>
+        >
+        @switch (tick.large) {
+          @case (true) {
+            <span class="k-label">
+              <ng-container [ngTemplateOutlet]="labelTemplate || defaultLabel" [ngTemplateOutletContext]="tick">
+              </ng-container>
             </span>
-            <ng-container *ngSwitchCase="false">&nbsp;</ng-container>
-         </ng-container>
-     </li>
-
-     <ng-template #defaultLabel let-value="value">
-        {{ tickTitle(value) }}
-     </ng-template>
-  `,
+          }
+          @case (false) {
+            &nbsp;
+          }
+        }
+      </li>
+    }
+    
+    <ng-template #defaultLabel let-value="value">
+      {{ tickTitle(value) }}
+    </ng-template>
+    `,
                     standalone: true,
-                    imports: [NgFor, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet]
+                    imports: [NgClass, NgTemplateOutlet]
                 }]
         }], propDecorators: { wrapperClasses: [{
                 type: HostBinding,