@progress/kendo-angular-buttons 7.0.0-next.202111120840 → 7.0.2-dev.202201201235

package/dist/es2015/button/button.directive.js

@@ -0,0 +1,671 @@
+/**-----------------------------------------------------------------------------------------
+* 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";
+import { Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, Renderer2 as Renderer, Output, Optional, NgZone } from '@angular/core';
+import { KendoButtonService } from './button.service';
+import { isDocumentAvailable, isChanged, hasObservers, Keys } from '@progress/kendo-angular-common';
+import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+import { getStylingClasses, getThemeColorClasses } from '../util';
+const SPAN_TAG_NAME = 'SPAN';
+/**
+ * Represents the Kendo UI Button component for Angular.
+ */
+let ButtonDirective = class ButtonDirective {
+    constructor(element, renderer, service, localization, ngZone) {
+        this.service = service;
+        this.ngZone = ngZone;
+        /**
+         * Provides visual styling that indicates if the Button is active.
+         * By default, `toggleable` is set to `false`.
+         */
+        this.toggleable = false;
+        /**
+         * @hidden
+         */
+        this.role = 'button';
+        /**
+         * Fires each time the selected state of a toggleable button is changed.
+         *
+         * The event argument is the new selected state (boolean).
+         */
+        this.selectedChange = new EventEmitter();
+        /**
+         * Fires each time the user clicks the button.
+         */
+        this.click = new EventEmitter();
+        this.isDisabled = false;
+        this.isIcon = false;
+        this.isIconClass = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._shape = 'rectangle';
+        this._fillMode = 'solid';
+        this._themeColor = 'base';
+        this._focused = false;
+        this.domEvents = [];
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr'));
+        this.element = element.nativeElement;
+        this.renderer = renderer;
+    }
+    /**
+     * Backwards-compatible alias
+     *
+     * @hidden
+     */
+    get togglable() {
+        return this.toggleable;
+    }
+    /**
+     * @hidden
+     */
+    set togglable(value) {
+        this.toggleable = value;
+    }
+    /**
+     * Sets the selected state of the Button.
+     */
+    get selected() {
+        return this._selected || false;
+    }
+    set selected(value) {
+        this._selected = value;
+    }
+    /**
+     * @hidden
+     */
+    set tabIndex(index) {
+        this.element.tabIndex = index;
+    }
+    get tabIndex() {
+        return this.element.tabIndex;
+    }
+    /**
+     * Defines the name for an existing icon in a Kendo UI theme.
+     * The icon is rendered inside the Button by a `span.k-icon` element.
+     */
+    set icon(icon) {
+        if (icon) {
+            this.iconSetter(icon, () => {
+                this.isIcon = true;
+                const classes = 'k-button-icon k-icon k-i-' + icon;
+                this.addIcon(classes);
+            });
+        }
+        else {
+            this.isIcon = false;
+            this.updateIconNode();
+        }
+    }
+    /**
+     * Defines a CSS class—or multiple classes separated by spaces—
+     * which are applied to a `span` element inside the Button. Allows the usage of custom icons.
+     */
+    set iconClass(iconClassName) {
+        if (iconClassName) {
+            this.iconSetter(iconClassName, () => {
+                this.isIconClass = true;
+                const classes = 'k-button-icon k-icon ' + iconClassName;
+                this.addIcon(classes);
+            });
+        }
+        else {
+            this.isIconClass = false;
+            this.updateIconNode();
+        }
+    }
+    /**
+     * Defines a URL which is used for an `img` element inside the Button.
+     * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
+     */
+    set imageUrl(imageUrl) {
+        if (imageUrl) {
+            this.iconSetter(imageUrl, this.addImgIcon.bind(this));
+        }
+        else {
+            this.removeImageNode();
+        }
+    }
+    /**
+     * If set to `true`, it disables the Button.
+     */
+    set disabled(disabled) {
+        this.isDisabled = disabled;
+        this.renderer.setProperty(this.element, 'disabled', disabled);
+    }
+    get disabled() {
+        return this.isDisabled;
+    }
+    /**
+     * The size property specifies the padding of the Button
+     * ([see example]({% slug appearance_button %}#toc-size)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    set size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * The rounded property specifies the border radius of the Button
+     * ([see example]({% slug appearance_button %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     */
+    set rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * The fillMode property specifies the background and border styles of the Button
+     * ([see example]({% slug appearance_button %}#toc-fillMode)).
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `'clear'`
+     * * `'link'`
+     * * `null`
+     */
+    set fillMode(fillMode) {
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    /**
+     * The Button allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color while also amending the text color accordingly
+     * ([see example]({% slug appearance_button %}#toc-themeColor)).
+     *
+     * The possible values are:
+     * * `'base'` (default)
+     * * `'primary'`
+     * * `'secondary'`
+     * * `'tertiary'`
+     * * `'info'`
+     * * `'success'`
+     * * `'warning'`
+     * * `'error'`
+     * * `'dark'`
+     * * `'light`'
+     * * `'inverse'`
+     */
+    set themeColor(themeColor) {
+        this.handleThemeColor(themeColor);
+        this._themeColor = themeColor;
+    }
+    get themeColor() {
+        return this._themeColor;
+    }
+    /**
+     * The shape property specifies if the Button will form a rectangle or square.
+     * ([see example]({% slug appearance_button %}#toc-shape)).
+     *
+     * The possible values are:
+     * * `'square'`
+     * * `'rectangle'` (default)
+     */
+    set shape(shape) {
+        this.handleClasses(shape, 'shape');
+        this._shape = shape;
+    }
+    get shape() {
+        return this._shape;
+    }
+    set isFocused(isFocused) {
+        this.toggleClass('k-focus', isFocused);
+        this._focused = isFocused;
+    }
+    get isFocused() {
+        return this._focused;
+    }
+    get classButton() {
+        return true;
+    }
+    get isToggleable() {
+        return this.toggleable;
+    }
+    get roleSetter() {
+        return this.role;
+    }
+    get classDisabled() {
+        return this.isDisabled;
+    }
+    get classActive() {
+        return this.selected;
+    }
+    get getDirection() {
+        return this.direction;
+    }
+    /**
+     * @hidden
+     */
+    onFocus() {
+        this.isFocused = true;
+    }
+    /**
+     * @hidden
+     */
+    onBlur() {
+        this.isFocused = false;
+    }
+    /**
+     * @hidden
+     */
+    set primary(value) {
+        this.themeColor = value ? 'primary' : 'base';
+    }
+    /**
+     * @hidden
+     */
+    set look(value) {
+        switch (value) {
+            case 'default':
+                this.fillMode = 'solid';
+                break;
+            default:
+                this.fillMode = value;
+                break;
+        }
+    }
+    ngOnInit() {
+        const isSpan = this.element.tagName === SPAN_TAG_NAME;
+        this.addTextSpan();
+        if (!this.element.hasAttribute('role') && this.togglable) {
+            this.toggleAriaPressed(this.toggleable);
+        }
+        if (this.role) {
+            this.setAttribute('role', this.role);
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.domEvents.push(this.renderer.listen(this.element, 'click', this._onButtonClick.bind(this)));
+            this.domEvents.push(this.renderer.listen(this.element, 'keydown', (event) => {
+                const isSpaceOrEnter = event.keyCode === Keys.Space || event.keyCode === Keys.Enter;
+                if (isSpan && isSpaceOrEnter) {
+                    this.click.emit(event);
+                    this._onButtonClick();
+                }
+            }));
+        });
+    }
+    ngOnChanges(change) {
+        if (isChanged('togglable', change) || isChanged('toggleable', change)) {
+            this.toggleAriaPressed(this.toggleable);
+        }
+    }
+    ngAfterViewInit() {
+        const stylingOptions = ['size', 'rounded', 'shape', 'fillMode'];
+        stylingOptions.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
+    ngAfterViewChecked() {
+        this.setIconTextClasses();
+    }
+    ngOnDestroy() {
+        this.imageNode = null;
+        this.iconNode = null;
+        this.iconSpanNode = null;
+        this.renderer = null;
+        this.localizationChangeSubscription.unsubscribe();
+        clearTimeout(this.deferTimeout);
+        this.domEvents.forEach(unbindHandler => unbindHandler());
+    }
+    /**
+     * Focuses the Button component.
+     */
+    focus() {
+        if (isDocumentAvailable()) {
+            this.element.focus();
+            this.isFocused = true;
+        }
+    }
+    /**
+     * Blurs the Button component.
+     */
+    blur() {
+        if (isDocumentAvailable()) {
+            this.element.blur();
+            this.isFocused = false;
+        }
+    }
+    /**
+     * @hidden
+     */
+    setAttribute(attribute, value) {
+        this.renderer.setAttribute(this.element, attribute, value);
+    }
+    /**
+     * @hidden
+     */
+    removeAttribute(attribute) {
+        this.renderer.removeAttribute(this.element, attribute);
+    }
+    /**
+     * @hidden
+     *
+     * Internal setter that triggers selectedChange
+     */
+    setSelected(value) {
+        const changed = this.selected !== value;
+        this.selected = value;
+        this.setAttribute('aria-pressed', this.selected.toString());
+        this.toggleClass('k-selected', this.selected);
+        if (changed && hasObservers(this.selectedChange)) {
+            this.ngZone.run(() => {
+                this.selectedChange.emit(value);
+            });
+        }
+    }
+    toggleAriaPressed(shouldSet) {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        if (shouldSet) {
+            this.setAttribute('aria-pressed', this.selected.toString());
+        }
+        else {
+            this.removeAttribute('aria-pressed');
+        }
+    }
+    hasText() {
+        return isDocumentAvailable() && this.element.textContent.trim().length > 0;
+    }
+    addImgIcon(imageUrl) {
+        let renderer = this.renderer;
+        this.iconSpanNode = renderer.createElement('span');
+        renderer.setProperty(this.iconSpanNode, 'className', 'k-button-icon k-icon');
+        if (this.imageNode) {
+            renderer.setProperty(this.imageNode, 'src', imageUrl);
+        }
+        else if (isDocumentAvailable()) {
+            this.imageNode = renderer.createElement('img');
+            renderer.setProperty(this.imageNode, 'src', imageUrl);
+            renderer.setProperty(this.imageNode, 'className', 'k-image');
+            renderer.setAttribute(this.imageNode, 'role', 'presentation');
+        }
+        this.iconSpanNode.appendChild(this.imageNode);
+        this.prependChild(this.iconSpanNode);
+    }
+    addIcon(classNames) {
+        let renderer = this.renderer;
+        if (this.iconNode) {
+            renderer.setProperty(this.iconNode, 'className', classNames);
+        }
+        else if (isDocumentAvailable()) {
+            this.iconNode = renderer.createElement('span');
+            renderer.setProperty(this.iconNode, 'className', classNames);
+            renderer.setAttribute(this.iconNode, 'role', 'presentation');
+            this.prependChild(this.iconNode);
+        }
+    }
+    addTextSpan() {
+        if (isDocumentAvailable() && this.hasText()) {
+            const span = this.renderer.createElement('span');
+            this.renderer.addClass(span, 'k-button-text');
+            const buttonContentNodes = Array.from(this.element.childNodes);
+            buttonContentNodes.forEach(node => this.renderer.appendChild(span, node));
+            this.renderer.appendChild(this.element, span);
+        }
+    }
+    prependChild(node) {
+        this.defer(() => {
+            if (this.renderer && node !== this.element.firstChild) {
+                this.renderer.insertBefore(this.element, node, this.element.firstChild);
+            }
+        });
+    }
+    defer(callback) {
+        this.ngZone.runOutsideAngular(() => {
+            this.deferTimeout = setTimeout(callback, 0);
+        });
+    }
+    iconSetter(icon, insertIcon) {
+        if (icon) {
+            insertIcon(icon);
+        }
+        this.setIconTextClasses();
+    }
+    removeImageNode() {
+        if (this.imageNode && this.renderer.parentNode(this.imageNode)) {
+            this.renderer.removeChild(this.element, this.imageNode);
+            this.renderer.removeChild(this.element, this.iconSpanNode);
+            this.imageNode = null;
+            this.iconSpanNode = null;
+        }
+    }
+    removeIconNode() {
+        if (this.iconNode && this.renderer.parentNode(this.iconNode)) {
+            this.renderer.removeChild(this.element, this.iconNode);
+            this.iconNode = null;
+        }
+        if (this.iconSpanNode) {
+            this.renderer.removeChild(this.element, this.iconSpanNode);
+            this.iconSpanNode = null;
+        }
+    }
+    updateIconNode() {
+        if (!this.isIcon && !this.isIconClass) {
+            this.removeIconNode();
+        }
+    }
+    setIconTextClasses() {
+        const hasIcon = this.isIcon || this.isIconClass || this.imageNode;
+        this.toggleClass('k-icon-button', hasIcon && !this.hasText());
+    }
+    toggleClass(className, add) {
+        if (add) {
+            this.renderer.addClass(this.element, className);
+        }
+        else {
+            this.renderer.removeClass(this.element, className);
+        }
+    }
+    _onButtonClick() {
+        if (!this.disabled && this.service) {
+            this.ngZone.run(() => {
+                this.service.click(this);
+            });
+        }
+        if (this.togglable && !this.service) {
+            this.setSelected(!this.selected);
+        }
+    }
+    handleClasses(value, input) {
+        const elem = this.element;
+        const classes = getStylingClasses('button', input, this[input], value);
+        if (input === 'fillMode') {
+            this.handleThemeColor(this.themeColor, this[input], value);
+        }
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+    handleThemeColor(value, prevFillMode, fillMode) {
+        const elem = this.element;
+        const removeFillMode = prevFillMode ? prevFillMode : this.fillMode;
+        const addFillMode = fillMode ? fillMode : this.fillMode;
+        const themeColorClass = getThemeColorClasses('button', removeFillMode, addFillMode, this.themeColor, value);
+        this.renderer.removeClass(elem, themeColorClass.toRemove);
+        if (addFillMode !== null && fillMode !== null) {
+            if (themeColorClass.toAdd) {
+                this.renderer.addClass(elem, themeColorClass.toAdd);
+            }
+        }
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], ButtonDirective.prototype, "toggleable", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [Boolean])
+], ButtonDirective.prototype, "togglable", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [Boolean])
+], ButtonDirective.prototype, "selected", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Number),
+    tslib_1.__metadata("design:paramtypes", [Number])
+], ButtonDirective.prototype, "tabIndex", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "icon", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "iconClass", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "imageUrl", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [Boolean])
+], ButtonDirective.prototype, "disabled", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "fillMode", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "themeColor", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "shape", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ButtonDirective.prototype, "role", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], ButtonDirective.prototype, "selectedChange", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], ButtonDirective.prototype, "click", void 0);
+tslib_1.__decorate([
+    HostBinding('class.k-button'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], ButtonDirective.prototype, "classButton", null);
+tslib_1.__decorate([
+    HostBinding('class.k-toggle-button'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], ButtonDirective.prototype, "isToggleable", null);
+tslib_1.__decorate([
+    HostBinding('attr.role'),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [])
+], ButtonDirective.prototype, "roleSetter", null);
+tslib_1.__decorate([
+    HostBinding('attr.aria-disabled'),
+    HostBinding('class.k-disabled'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], ButtonDirective.prototype, "classDisabled", null);
+tslib_1.__decorate([
+    HostBinding('class.k-selected'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], ButtonDirective.prototype, "classActive", null);
+tslib_1.__decorate([
+    HostBinding('attr.dir'),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [])
+], ButtonDirective.prototype, "getDirection", null);
+tslib_1.__decorate([
+    HostListener('focus'),
+    tslib_1.__metadata("design:type", Function),
+    tslib_1.__metadata("design:paramtypes", []),
+    tslib_1.__metadata("design:returntype", void 0)
+], ButtonDirective.prototype, "onFocus", null);
+tslib_1.__decorate([
+    HostListener('blur'),
+    tslib_1.__metadata("design:type", Function),
+    tslib_1.__metadata("design:paramtypes", []),
+    tslib_1.__metadata("design:returntype", void 0)
+], ButtonDirective.prototype, "onBlur", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [Boolean])
+], ButtonDirective.prototype, "primary", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ButtonDirective.prototype, "look", null);
+ButtonDirective = tslib_1.__decorate([
+    Directive({
+        exportAs: 'kendoButton',
+        providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.button'
+            }
+        ],
+        selector: 'button[kendoButton], span[kendoButton]',
+    }),
+    tslib_1.__param(2, Optional()),
+    tslib_1.__metadata("design:paramtypes", [ElementRef,
+        Renderer,
+        KendoButtonService,
+        LocalizationService,
+        NgZone])
+], ButtonDirective);
+export { ButtonDirective };

package/{button → dist/es2015/button}/button.module.d.ts

@@ -2,8 +2,6 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as i0 from "@angular/core";
-import * as i1 from "./button.directive";
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmodules'] }})
  * definition for the Button directive.
@@ -36,7 +34,4 @@ import * as i1 from "./button.directive";
  * ```
  */
 export declare class ButtonModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ButtonModule, [typeof i1.ButtonDirective], never, [typeof i1.ButtonDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<ButtonModule>;
 }