@progress/kendo-angular-inputs 8.0.8-dev.202203090958 → 9.0.0-next.202203101134

package/esm2015/sliders-common/slider-ticks.component.js

@@ -0,0 +1,125 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/* eslint-disable @angular-eslint/component-selector */
+import { Component, Input, ViewChildren, HostBinding } from '@angular/core';
+import { calculateTicksCount, calculateValueFromTick } from './sliders-util';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+/**
+ * @hidden
+ */
+class SliderTick {
+    constructor(value) {
+        this.value = value;
+        this.classes = {
+            'k-tick': true
+        };
+    }
+}
+/**
+ * @hidden
+ */
+export class SliderTicksComponent {
+    constructor() {
+        this.wrapperClasses = 'k-reset k-slider-items';
+        this.ticks = [];
+    }
+    ngOnChanges(_) {
+        this.createTicks();
+    }
+    createTicks() {
+        const count = calculateTicksCount(this.min, this.max, this.step);
+        const largeStep = this.largeStep;
+        const tickValueProps = {
+            max: this.max,
+            min: this.min,
+            smallStep: this.step
+        };
+        let result = [];
+        for (let i = 0; i < count; i++) {
+            result.push(new SliderTick(calculateValueFromTick(i, tickValueProps)));
+            if (largeStep && i % largeStep === 0) {
+                result[i].large = true;
+                result[i].classes['k-tick-large'] = true;
+            }
+        }
+        if (result.length > 0) {
+            Object.assign(result[0].classes, this.endTickClasses(true));
+            Object.assign(result[result.length - 1].classes, this.endTickClasses(false));
+        }
+        this.ticks = result;
+    }
+    endTickClasses(first) {
+        return {
+            'k-first': (first && !this.vertical) || (!first && this.vertical),
+            'k-last': (!first && !this.vertical) || (first && this.vertical)
+        };
+    }
+}
+SliderTicksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderTicksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderTicksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SliderTicksComponent, 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;"
+        [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>
+            </span>
+            <ng-container *ngSwitchCase="false">&nbsp;</ng-container>
+         </ng-container>
+     </li>
+
+     <ng-template #defaultLabel let-value="value">
+        {{ tickTitle(value) }}
+     </ng-template>
+  `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderTicksComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoSliderTicks]',
+                    template: `
+    <li #tickElement *ngFor="let tick of ticks;"
+        [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>
+            </span>
+            <ng-container *ngSwitchCase="false">&nbsp;</ng-container>
+         </ng-container>
+     </li>
+
+     <ng-template #defaultLabel let-value="value">
+        {{ tickTitle(value) }}
+     </ng-template>
+  `
+                }]
+        }], propDecorators: { wrapperClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], tickTitle: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], largeStep: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], labelTemplate: [{
+                type: Input
+            }], tickElements: [{
+                type: ViewChildren,
+                args: ['tickElement']
+            }] } });

package/esm2015/sliders-common/sliders-common.module.js

@@ -0,0 +1,42 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SliderTicksComponent } from './slider-ticks.component';
+import { LabelTemplateDirective } from './label-template.directive';
+import { DraggableModule, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class SlidersCommonModule {
+}
+SlidersCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SlidersCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SlidersCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SlidersCommonModule, declarations: [SliderTicksComponent,
+        LabelTemplateDirective], imports: [CommonModule, DraggableModule, EventsModule, ResizeSensorModule], exports: [LabelTemplateDirective,
+        SliderTicksComponent,
+        DraggableModule,
+        EventsModule,
+        ResizeSensorModule] });
+SlidersCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SlidersCommonModule, imports: [[CommonModule, DraggableModule, EventsModule, ResizeSensorModule], DraggableModule,
+        EventsModule,
+        ResizeSensorModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SlidersCommonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SliderTicksComponent,
+                        LabelTemplateDirective
+                    ],
+                    exports: [
+                        LabelTemplateDirective,
+                        SliderTicksComponent,
+                        DraggableModule,
+                        EventsModule,
+                        ResizeSensorModule
+                    ],
+                    imports: [CommonModule, DraggableModule, EventsModule, ResizeSensorModule]
+                }]
+        }] });

package/esm2015/switch/localization/custom-messages.component.js

@@ -0,0 +1,40 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef } from '@angular/core';
+import { Messages } from './messages';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+/**
+ * Custom component messages override default component messages.
+ */
+export class SwitchCustomMessagesComponent extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+SwitchCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SwitchCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+SwitchCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SwitchCustomMessagesComponent, selector: "kendo-switch-messages", providers: [
+        {
+            provide: Messages,
+            useExisting: forwardRef(() => SwitchCustomMessagesComponent) // eslint-disable-line no-forward-ref
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SwitchCustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => SwitchCustomMessagesComponent) // eslint-disable-line no-forward-ref
+                        }
+                    ],
+                    selector: 'kendo-switch-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });

package/esm2015/switch/localization/localized-switch-messages.directive.js

@@ -0,0 +1,36 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, forwardRef } from '@angular/core';
+import { Messages } from './messages';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+/**
+ * @hidden
+ */
+export class LocalizedSwitchMessagesDirective extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+LocalizedSwitchMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedSwitchMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedSwitchMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedSwitchMessagesDirective, selector: "[kendoSwitchLocalizedMessages]", providers: [
+        {
+            provide: Messages,
+            useExisting: forwardRef(() => LocalizedSwitchMessagesDirective) // eslint-disable-line no-forward-ref
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedSwitchMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => LocalizedSwitchMessagesDirective) // eslint-disable-line no-forward-ref
+                        }
+                    ],
+                    selector: '[kendoSwitchLocalizedMessages]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });

package/esm2015/switch/localization/messages.js

@@ -0,0 +1,24 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import { ComponentMessages } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class Messages extends ComponentMessages {
+}
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages, selector: "kendo-switch-messages-base", inputs: { on: "on", off: "off" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-switch-messages-base'
+                }]
+        }], propDecorators: { on: [{
+                type: Input
+            }], off: [{
+                type: Input
+            }] } });

package/{dist/es2015 → esm2015}/switch/switch.component.js

@@ -2,9 +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 * as tslib_1 from "tslib";
-var SwitchComponent_1;
-import { ElementRef, Renderer2, Component, EventEmitter, HostBinding, Input, Output, ViewChild, forwardRef, ChangeDetectorRef, NgZone, Injector } from '@angular/core';
+import { Component, EventEmitter, HostBinding, Input, Output, ViewChild, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { hasObservers, guid, Keys, KendoInput } from '@progress/kendo-angular-common';
@@ -14,11 +12,15 @@ import { requiresZoneOnBlur, getStylingClasses } from '../common/utils';
 import { Subscription } from "rxjs";
 import { skip, take } from "rxjs/operators";
 import { browser } from '@progress/kendo-common';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./localization/localized-switch-messages.directive";
+import * as i3 from "@progress/kendo-angular-common";
 const FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI Switch component for Angular]({% slug overview_switch %}).
  */
-let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
+export class SwitchComponent {
     constructor(renderer, hostElement, localizationService, injector, changeDetector, ngZone) {
         this.renderer = renderer;
         this.hostElement = hostElement;
@@ -45,11 +47,11 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
         /**
          * Fires each time the user focuses the `input` element.
          */
-        this.onFocus = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onFocus = new EventEmitter();
         /**
          * Fires each time the `input` element gets blurred.
          */
-        this.onBlur = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onBlur = new EventEmitter();
         /**
          * Fires each time the user selects a new value.
          */
@@ -362,8 +364,12 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
         }
     }
     handleTrackClasses(value) {
-        const elem = this.hostElement.nativeElement;
-        const track = this.track.nativeElement;
+        var _a, _b;
+        const elem = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        const track = (_b = this.track) === null || _b === void 0 ? void 0 : _b.nativeElement;
+        if (!elem || !track) {
+            return;
+        }
         const classes = getStylingClasses('switch', 'rounded', this.trackRounded, value);
         if (classes.toRemove) {
             this.renderer.removeClass(elem, classes.toRemove);
@@ -375,7 +381,11 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
         }
     }
     handleThumbClasses(value) {
-        const thumb = this.thumb.nativeElement;
+        var _a;
+        const thumb = (_a = this.thumb) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        if (!thumb) {
+            return;
+        }
         const classes = getStylingClasses('switch', 'rounded', this.thumbRounded, value);
         if (classes.toRemove) {
             this.renderer.removeClass(thumb, classes.toRemove);
@@ -384,122 +394,71 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
             this.renderer.addClass(thumb, classes.toAdd);
         }
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], SwitchComponent.prototype, "focusableId", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], SwitchComponent.prototype, "onLabel", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], SwitchComponent.prototype, "offLabel", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [Boolean])
-], SwitchComponent.prototype, "checked", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], SwitchComponent.prototype, "disabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], SwitchComponent.prototype, "readonly", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], SwitchComponent.prototype, "tabindex", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], SwitchComponent.prototype, "size", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], SwitchComponent.prototype, "thumbRounded", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], SwitchComponent.prototype, "trackRounded", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number),
-    tslib_1.__metadata("design:paramtypes", [Number])
-], SwitchComponent.prototype, "tabIndex", null);
-tslib_1.__decorate([
-    Output('focus'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], SwitchComponent.prototype, "onFocus", void 0);
-tslib_1.__decorate([
-    Output('blur'),
-    tslib_1.__metadata("design:type", EventEmitter)
-], SwitchComponent.prototype, "onBlur", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], SwitchComponent.prototype, "valueChange", void 0);
-tslib_1.__decorate([
-    HostBinding('attr.dir'),
-    tslib_1.__metadata("design:type", String)
-], SwitchComponent.prototype, "direction", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-ie'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], SwitchComponent.prototype, "ieClass", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-disabled'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], SwitchComponent.prototype, "ariaDisabled", null);
-tslib_1.__decorate([
-    HostBinding('attr.aria-readonly'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], SwitchComponent.prototype, "ariaReadonly", null);
-tslib_1.__decorate([
-    HostBinding('class.k-switch'),
-    tslib_1.__metadata("design:type", Boolean)
-], SwitchComponent.prototype, "hostClasses", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-disabled'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], SwitchComponent.prototype, "disabledClass", null);
-tslib_1.__decorate([
-    ViewChild('track', { static: true }),
-    tslib_1.__metadata("design:type", Object)
-], SwitchComponent.prototype, "track", void 0);
-tslib_1.__decorate([
-    ViewChild('thumb', { static: true }),
-    tslib_1.__metadata("design:type", Object)
-], SwitchComponent.prototype, "thumb", void 0);
-SwitchComponent = SwitchComponent_1 = tslib_1.__decorate([
-    Component({
-        exportAs: 'kendoSwitch',
-        providers: [
-            LocalizationService,
-            { provide: L10N_PREFIX, useValue: 'kendo.switch' },
-            {
-                multi: true,
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SwitchComponent_1) /* tslint:disable-line */
-            },
-            {
-                provide: KendoInput,
-                useExisting: forwardRef(() => SwitchComponent_1)
-            }
-        ],
-        selector: 'kendo-switch',
-        template: `
+}
+SwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SwitchComponent, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-ie": "this.ieClass", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+        LocalizationService,
+        { provide: L10N_PREFIX, useValue: 'kendo.switch' },
+        {
+            multi: true,
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SwitchComponent) /* eslint-disable-line*/
+        },
+        {
+            provide: KendoInput,
+            useExisting: forwardRef(() => SwitchComponent)
+        }
+    ], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, static: true }], exportAs: ["kendoSwitch"], ngImport: i0, template: `
+        <ng-container kendoSwitchLocalizedMessages
+            i18n-on="kendo.switch.on|The **On** label of the Switch."
+            on="ON"
+            i18n-off="kendo.switch.off|The **Off** label of the Switch."
+            off="OFF"
+        >
+
+        <span
+            #track
+            class="k-switch-track"
+            [id]="focusableId"
+            role="switch"
+            [style.transitionDuration]="initialized ? '200ms' : '0ms'"
+            [attr.aria-checked]="checked"
+            [attr.tabindex]="(disabled ? undefined : tabIndex)"
+            [kendoEventsOutsideAngular]="{ keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
+        >
+            <span class="k-switch-label-on" [attr.aria-hidden]="true" >{{onLabelMessage}}</span>
+            <span class="k-switch-label-off" [attr.aria-hidden]="true">{{offLabelMessage}}</span>
+        </span>
+        <span
+            class="k-switch-thumb-wrap"
+            tabindex="-1"
+            [style.transitionDuration]="initialized ? '200ms' : '0ms'" [kendoEventsOutsideAngular]="{
+                keydown: keyDownHandler,
+                focus: handleFocus,
+                blur: handleBlur
+            }">
+            <span #thumb class="k-switch-thumb"></span>
+        </span>
+  `, isInline: true, directives: [{ type: i2.LocalizedSwitchMessagesDirective, selector: "[kendoSwitchLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoSwitch',
+                    providers: [
+                        LocalizationService,
+                        { provide: L10N_PREFIX, useValue: 'kendo.switch' },
+                        {
+                            multi: true,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SwitchComponent) /* eslint-disable-line*/
+                        },
+                        {
+                            provide: KendoInput,
+                            useExisting: forwardRef(() => SwitchComponent)
+                        }
+                    ],
+                    selector: 'kendo-switch',
+                    template: `
         <ng-container kendoSwitchLocalizedMessages
             i18n-on="kendo.switch.on|The **On** label of the Switch."
             on="ON"
@@ -531,12 +490,59 @@ SwitchComponent = SwitchComponent_1 = tslib_1.__decorate([
             <span #thumb class="k-switch-thumb"></span>
         </span>
   `
-    }),
-    tslib_1.__metadata("design:paramtypes", [Renderer2,
-        ElementRef,
-        LocalizationService,
-        Injector,
-        ChangeDetectorRef,
-        NgZone])
-], SwitchComponent);
-export { SwitchComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { focusableId: [{
+                type: Input
+            }], onLabel: [{
+                type: Input
+            }], offLabel: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], thumbRounded: [{
+                type: Input
+            }], trackRounded: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], valueChange: [{
+                type: Output
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], ieClass: [{
+                type: HostBinding,
+                args: ['class.k-ie']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], ariaReadonly: [{
+                type: HostBinding,
+                args: ['attr.aria-readonly']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-switch']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], track: [{
+                type: ViewChild,
+                args: ['track', { static: true }]
+            }], thumb: [{
+                type: ViewChild,
+                args: ['thumb', { static: true }]
+            }] } });