@progress/kendo-angular-inputs 13.2.1-develop.11 → 13.2.1-develop.13

package/esm2020/switch/switch.component.mjs

@@ -0,0 +1,577 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, Renderer2, Component, EventEmitter, HostBinding, Input, Output, ViewChild, forwardRef, ChangeDetectorRef, NgZone, Injector } 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';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+import { requiresZoneOnBlur, getStylingClasses } from '../common/utils';
+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";
+const FOCUSED = 'k-focus';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_THUMB_ROUNDED = 'full';
+const DEFAULT_TRACK_ROUNDED = 'full';
+/**
+ * Represents the [Kendo UI Switch component for Angular]({% slug overview_switch %}).
+ */
+export class SwitchComponent {
+    constructor(renderer, hostElement, localizationService, injector, changeDetector, ngZone) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        this.localizationService = localizationService;
+        this.injector = injector;
+        this.changeDetector = changeDetector;
+        this.ngZone = ngZone;
+        /**
+         * Determines whether the Switch is disabled ([see example]({% slug disabled_switch %})).
+         */
+        this.disabled = false;
+        /**
+         * Determines whether the Switch is in its read-only state ([see example]({% slug readonly_switch %})).
+         */
+        this.readonly = false;
+        /**
+         * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Switch.
+         */
+        this.tabindex = 0;
+        /**
+         * Fires each time the Switch component is focused as a result of user interaction.
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         * Fires each time the Switch component is blurred as a result of user interaction.
+         */
+        this.onBlur = new EventEmitter();
+        /**
+         * Fires each time the user selects a new value.
+         */
+        this.valueChange = new EventEmitter();
+        this.hostRole = 'switch';
+        this.hostClasses = true;
+        /**
+         * @hidden
+         */
+        this.initialized = false;
+        this.domSubscriptions = [];
+        this._checked = false;
+        this._size = 'medium';
+        this._trackRounded = 'full';
+        this._thumbRounded = 'full';
+        this.ngChange = (_) => { };
+        this.ngTouched = () => { };
+        /**
+         * @hidden
+         */
+        this.handleFocus = (event) => {
+            if (this.isFocused) {
+                return;
+            }
+            event.stopImmediatePropagation();
+            this.focused = true;
+            if (hasObservers(this.onFocus)) {
+                this.ngZone.run(() => {
+                    const eventArgs = { originalEvent: event };
+                    this.onFocus.emit(eventArgs);
+                });
+            }
+        };
+        /**
+         * @hidden
+         */
+        this.handleBlur = (event) => {
+            const relatedTarget = event && event.relatedTarget;
+            if (this.hostElement.nativeElement.contains(relatedTarget)) {
+                return;
+            }
+            event.stopImmediatePropagation();
+            this.changeDetector.markForCheck();
+            this.focused = false;
+            if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
+                this.ngZone.run(() => {
+                    this.ngTouched();
+                    const eventArgs = { originalEvent: event };
+                    this.onBlur.emit(eventArgs);
+                });
+            }
+        };
+        validatePackage(packageMetadata);
+        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+        this.keyDownHandler = this.keyDownHandler.bind(this);
+        this.clickHandler = this.clickHandler.bind(this);
+    }
+    /**
+     * @hidden
+     */
+    get focusableId() {
+        if (this.hostElement.nativeElement.hasAttribute('id')) {
+            return this.hostElement.nativeElement.getAttribute('id');
+        }
+        return `k-${guid()}`;
+    }
+    /**
+     * Sets the value of the Switch when it is initially displayed.
+     */
+    set checked(value) {
+        this.setHostClasses(value);
+        this._checked = value;
+    }
+    get checked() {
+        return this._checked;
+    }
+    /**
+     * Specifies the width and height of the Switch.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Specifies the border radius of the Switch thumb.
+     *
+     * The possible values are:
+     * * `full` (default)
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `none`
+     */
+    set thumbRounded(thumbRounded) {
+        const newThumbRounded = thumbRounded ? thumbRounded : DEFAULT_THUMB_ROUNDED;
+        this.handleThumbClasses(newThumbRounded);
+        this._thumbRounded = newThumbRounded;
+    }
+    get thumbRounded() {
+        return this._thumbRounded;
+    }
+    /**
+     * Specifies the border radius of the Switch track.
+     *
+     * The possible values are:
+     * * `full` (default)
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `none`
+     */
+    set trackRounded(trackRounded) {
+        const newTrackRounded = trackRounded ? trackRounded : DEFAULT_TRACK_ROUNDED;
+        this.handleTrackClasses(newTrackRounded);
+        this._trackRounded = newTrackRounded;
+    }
+    get trackRounded() {
+        return this._trackRounded;
+    }
+    /**
+     * @hidden
+     */
+    set tabIndex(tabIndex) {
+        this.tabindex = tabIndex;
+    }
+    get tabIndex() {
+        return this.tabindex;
+    }
+    get ieClass() {
+        return browser && browser.msie;
+    }
+    get hostId() {
+        return this.focusableId;
+    }
+    get ariaChecked() {
+        return this.checked;
+    }
+    get ariaInvalid() {
+        return this.isControlInvalid ? true : undefined;
+    }
+    get hostTabIndex() {
+        return this.disabled ? undefined : this.tabIndex;
+    }
+    get ariaDisabled() {
+        return this.disabled ? true : undefined;
+    }
+    get ariaReadonly() {
+        return this.readonly;
+    }
+    get disabledClass() {
+        return this.disabled;
+    }
+    /**
+     * @hidden
+     */
+    get onLabelMessage() {
+        return this.onLabel || this.localizationService.get('on');
+    }
+    /**
+     * @hidden
+     */
+    get offLabelMessage() {
+        return this.offLabel || this.localizationService.get('off');
+    }
+    get isEnabled() {
+        return !this.disabled && !this.readonly;
+    }
+    ngOnInit() {
+        if (this.hostElement) {
+            const wrapper = this.hostElement.nativeElement;
+            this.renderer.removeAttribute(wrapper, "tabindex");
+        }
+        this.localizationChangeSubscription = this.localizationService
+            .changes
+            .pipe(skip(1))
+            .subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+        this.control = this.injector.get(NgControl, null);
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.initialized = true);
+    }
+    ngAfterViewInit() {
+        const wrapper = this.hostElement.nativeElement;
+        if (!this.checked && !wrapper.classList.contains('k-switch-off')) {
+            this.renderer.addClass(wrapper, 'k-switch-off');
+        }
+        this.handleClasses(this.size, 'size');
+        this.handleTrackClasses(this.trackRounded);
+        this.handleThumbClasses(this.thumbRounded);
+        this.attachHostHandlers();
+    }
+    ngOnDestroy() {
+        if (this.localizationChangeSubscription) {
+            this.localizationChangeSubscription.unsubscribe();
+        }
+        this.domSubscriptions.forEach(subscription => subscription());
+        const wrapper = this.hostElement.nativeElement;
+        wrapper.removeEventListener('focus', this.handleFocus, true);
+        wrapper.removeEventListener('blur', this.handleBlur, true);
+    }
+    /**
+     * Focuses the Switch.
+     *
+     * @example
+     * ```ts-no-run
+     * _@Component({
+     * selector: 'my-app',
+     * template: `
+     *  <button (click)="switch.focus()">Focus</button>
+     *  <kendo-switch #switch></kendo-switch>
+     * `
+     * })
+     * class AppComponent { }
+     * ```
+     */
+    focus() {
+        if (!this.hostElement) {
+            return;
+        }
+        this.hostElement.nativeElement.focus();
+    }
+    /**
+     * Blurs the Switch.
+     */
+    blur() {
+        if (!this.hostElement) {
+            return;
+        }
+        this.hostElement.nativeElement.blur();
+    }
+    /**
+     * @hidden
+     * Called when the status of the component changes to or from `disabled`.
+     * Depending on the value, it enables or disables the appropriate DOM element.
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.changeDetector.markForCheck();
+    }
+    /**
+     * @hidden
+     */
+    get isControlInvalid() {
+        return this.control && this.control.touched && !this.control.valid;
+    }
+    /**
+     * @hidden
+     */
+    writeValue(value) {
+        this.checked = value === null ? false : value;
+        this.changeDetector.markForCheck();
+    }
+    /**
+     * @hidden
+     */
+    registerOnChange(fn) {
+        this.ngChange = fn;
+    }
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn) {
+        this.ngTouched = fn;
+    }
+    /**
+     * @hidden
+     */
+    keyDownHandler(e) {
+        const keyCode = e.keyCode;
+        if (this.isEnabled && (keyCode === Keys.Space || keyCode === Keys.Enter)) {
+            this.changeValue(!this.checked);
+            e.preventDefault();
+        }
+    }
+    /**
+     * @hidden
+     */
+    clickHandler() {
+        if (this.isEnabled) {
+            this.changeValue(!this.checked);
+        }
+    }
+    /**
+     * @hidden
+     * Used by the FloatingLabel to determine if the component is empty.
+     */
+    isEmpty() {
+        return false;
+    }
+    changeValue(value) {
+        if (this.checked !== value) {
+            this.ngZone.run(() => {
+                this.checked = value;
+                this.ngChange(value);
+                this.valueChange.emit(value);
+                this.changeDetector.markForCheck();
+            });
+        }
+    }
+    set focused(value) {
+        if (this.isFocused !== value && this.hostElement) {
+            const wrapper = this.hostElement.nativeElement;
+            if (value) {
+                this.renderer.addClass(wrapper, FOCUSED);
+            }
+            else {
+                this.renderer.removeClass(wrapper, FOCUSED);
+            }
+            this.isFocused = value;
+        }
+    }
+    attachHostHandlers() {
+        this.ngZone.runOutsideAngular(() => {
+            const wrapper = this.hostElement.nativeElement;
+            this.domSubscriptions.push(this.renderer.listen(wrapper, 'click', this.clickHandler), this.renderer.listen(wrapper, 'keydown', this.keyDownHandler));
+            wrapper.addEventListener('focus', this.handleFocus, true);
+            wrapper.addEventListener('blur', this.handleBlur, true);
+        });
+    }
+    setHostClasses(value) {
+        const wrapper = this.hostElement.nativeElement;
+        if (value) {
+            this.renderer.removeClass(wrapper, 'k-switch-off');
+            this.renderer.addClass(wrapper, 'k-switch-on');
+        }
+        else {
+            this.renderer.removeClass(wrapper, 'k-switch-on');
+            this.renderer.addClass(wrapper, 'k-switch-off');
+        }
+    }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const classes = getStylingClasses('switch', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+    handleTrackClasses(value) {
+        const elem = this.hostElement?.nativeElement;
+        const track = this.track?.nativeElement;
+        if (!elem || !track) {
+            return;
+        }
+        const classes = getStylingClasses('switch', 'rounded', this.trackRounded, value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+            this.renderer.removeClass(track, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+            this.renderer.addClass(track, classes.toAdd);
+        }
+    }
+    handleThumbClasses(value) {
+        const thumb = this.thumb?.nativeElement;
+        if (!thumb) {
+            return;
+        }
+        const classes = getStylingClasses('switch', 'rounded', this.thumbRounded, value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(thumb, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(thumb, classes.toAdd);
+        }
+    }
+}
+SwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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: "13.3.12", 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.role": "this.hostRole", "attr.id": "this.hostId", "attr.aria-checked": "this.ariaChecked", "attr.aria-invalid": "this.ariaInvalid", "attr.tabindex": "this.hostTabIndex", "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"
+            [style.transitionDuration]="initialized ? '200ms' : '0ms'"
+        >
+            <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"
+            [style.transitionDuration]="initialized ? '200ms' : '0ms'">
+            <span #thumb class="k-switch-thumb"></span>
+        </span>
+  `, isInline: true, directives: [{ type: i2.LocalizedSwitchMessagesDirective, selector: "[kendoSwitchLocalizedMessages]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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"
+            i18n-off="kendo.switch.off|The **Off** label of the Switch."
+            off="OFF"
+        >
+
+        <span
+            #track
+            class="k-switch-track"
+            [style.transitionDuration]="initialized ? '200ms' : '0ms'"
+        >
+            <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"
+            [style.transitionDuration]="initialized ? '200ms' : '0ms'">
+            <span #thumb class="k-switch-thumb"></span>
+        </span>
+  `
+                }]
+        }], 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']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], ariaChecked: [{
+                type: HostBinding,
+                args: ['attr.aria-checked']
+            }], ariaInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
+            }], hostTabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], 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 }]
+            }] } });

package/esm2020/switch.module.mjs

@@ -0,0 +1,68 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 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 { SwitchComponent } from './switch/switch.component';
+import { CommonModule } from '@angular/common';
+import { ResizeSensorModule } from '@progress/kendo-angular-common';
+import { LocalizedSwitchMessagesDirective } from './switch/localization/localized-switch-messages.directive';
+import { SwitchCustomMessagesComponent } from './switch/localization/custom-messages.component';
+import { EventsModule } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the Switch component.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the Switch module
+ * import { SwitchModule } from '@progress/kendo-angular-inputs';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, SwitchModule], // import Switch module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+export class SwitchModule {
+}
+SwitchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SwitchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SwitchModule, declarations: [SwitchComponent,
+        SwitchCustomMessagesComponent,
+        LocalizedSwitchMessagesDirective], imports: [CommonModule, EventsModule, ResizeSensorModule], exports: [SwitchComponent,
+        SwitchCustomMessagesComponent,
+        LocalizedSwitchMessagesDirective] });
+SwitchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SwitchModule, imports: [[CommonModule, EventsModule, ResizeSensorModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SwitchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SwitchComponent,
+                        SwitchCustomMessagesComponent,
+                        LocalizedSwitchMessagesDirective
+                    ],
+                    exports: [
+                        SwitchComponent,
+                        SwitchCustomMessagesComponent,
+                        LocalizedSwitchMessagesDirective
+                    ],
+                    imports: [CommonModule, EventsModule, ResizeSensorModule]
+                }]
+        }] });