@progress/kendo-angular-layout 6.5.2 → 7.0.0-next.202203231147

package/esm2015/tabstrip/rendering/tab.component.js

@@ -0,0 +1,123 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import { isPresent } from '../../common/util';
+import { TabCloseEvent } from '../events/tabclose-event';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@angular/common";
+/**
+ * @hidden
+ */
+export class TabComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.tabClose = new EventEmitter();
+        this.hostClasses = true;
+    }
+    get activeClass() {
+        return this.tab.selected;
+    }
+    get disabledClass() {
+        return this.tab.disabled;
+    }
+    get focusedClass() {
+        return this.tab.focused;
+    }
+    get tabIndex() {
+        return this.tab.selected || this.tab.focused ? 0 : -1;
+    }
+    get tabClosable() {
+        if (this.tab.closable !== undefined) {
+            return this.tab.closable;
+        }
+        return this.tabStripClosable;
+    }
+    get closeButtonClasses() {
+        if (isPresent(this.tab.closeIcon)) {
+            return this.tab.closeIcon;
+        }
+        return this.tabStripCloseIcon;
+    }
+    get closeButtonTitle() {
+        return this.localization.get('closeTitle');
+    }
+    closeTab(index) {
+        const closeArgs = new TabCloseEvent(index, this.tab);
+        this.tabClose.emit(closeArgs);
+    }
+}
+TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabComponent, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "class.k-state-default": "this.hostClasses", "attr.aria-selected]": "this.activeClass", "class.k-state-active": "this.activeClass", "attr.aria-disabled]": "this.disabledClass", "class.k-state-disabled": "this.disabledClass", "class.k-state-focused": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
+        <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
+        <span class="k-link" *ngIf="tab.tabTitle">
+            <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
+            </ng-template>
+        </span>
+        <span class="k-remove-tab k-button k-icon-button k-flat" *ngIf="tabClosable"
+            role="button"
+            [title]="closeButtonTitle"
+            [attr.aria-label]="closeButtonTitle"
+            (click)="closeTab(index)"
+        >
+            <span [ngClass]="closeButtonClasses"></span>
+        </span>
+    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoTabStripTab]',
+                    template: `
+        <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
+        <span class="k-link" *ngIf="tab.tabTitle">
+            <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
+            </ng-template>
+        </span>
+        <span class="k-remove-tab k-button k-icon-button k-flat" *ngIf="tabClosable"
+            role="button"
+            [title]="closeButtonTitle"
+            [attr.aria-label]="closeButtonTitle"
+            (click)="closeTab(index)"
+        >
+            <span [ngClass]="closeButtonClasses"></span>
+        </span>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { tab: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], tabStripClosable: [{
+                type: Input
+            }], tabStripCloseIcon: [{
+                type: Input
+            }], tabClose: [{
+                type: Output
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-item']
+            }, {
+                type: HostBinding,
+                args: ['class.k-state-default']
+            }], activeClass: [{
+                type: HostBinding,
+                args: ['attr.aria-selected]']
+            }, {
+                type: HostBinding,
+                args: ['class.k-state-active']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled]']
+            }, {
+                type: HostBinding,
+                args: ['class.k-state-disabled']
+            }], focusedClass: [{
+                type: HostBinding,
+                args: ['class.k-state-focused']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }] } });

package/esm2015/tabstrip/scrollable-button.component.js

@@ -0,0 +1,123 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input, Output, EventEmitter } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { DIRECTION_CLASSES, HIDDEN_CLASS } from './constants';
+import { isTablistHorizontal } from './util';
+import { TabScrollEvent } from './events/tabscroll-event';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+/**
+ * @hidden
+ */
+export class TabStripScrollableButtonComponent {
+    constructor(host, renderer, ngZone) {
+        this.host = host;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.btnClasses = true;
+        this.prev = false;
+        this.tabScroll = new EventEmitter();
+        this.onClick = new EventEmitter();
+        this.subs = new Subscription();
+        this.clickHandler = (scrollEvent) => {
+            const tabStripScrollEvent = this.emitScrollEvent(scrollEvent);
+            const isTabStripScrollEventPrevented = tabStripScrollEvent.isDefaultPrevented();
+            if (isTabStripScrollEventPrevented) {
+                return;
+            }
+            const buttonType = this.prev ? 'prev' : 'next';
+            this.onClick.emit(buttonType);
+        };
+    }
+    get prevClass() {
+        return this.prev;
+    }
+    get nextClass() {
+        return !this.prev;
+    }
+    get hostBoundingClientRect() {
+        return this.host.nativeElement.getBoundingClientRect();
+    }
+    get iconClass() {
+        return this.scrollButtonIconClass[this.prev ? 'prevScrollButton' : 'nextScrollButton'];
+    }
+    ngAfterViewInit() {
+        this.ngZone.runOutsideAngular(() => {
+            this.subs.add(this.renderer.listen(this.host.nativeElement, 'click', this.clickHandler));
+        });
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    toggle(show) {
+        this.renderer[show ? 'removeClass' : 'addClass'](this.host.nativeElement, HIDDEN_CLASS);
+    }
+    get scrollButtonIconClass() {
+        const defaultPrevIcon = isTablistHorizontal(this.tabPosition) ? DIRECTION_CLASSES.left : DIRECTION_CLASSES.up;
+        const defaultNextIcon = isTablistHorizontal(this.tabPosition) ? DIRECTION_CLASSES.right : DIRECTION_CLASSES.down;
+        if (typeof this.scrollable === 'object') {
+            const prevIcon = typeof this.scrollable.prevButtonIcon === 'undefined' ? defaultPrevIcon : this.scrollable.prevButtonIcon;
+            const nextIcon = typeof this.scrollable.nextButtonIcon === 'undefined' ? defaultNextIcon : this.scrollable.nextButtonIcon;
+            return { prevScrollButton: prevIcon, nextScrollButton: nextIcon };
+        }
+        return { prevScrollButton: defaultPrevIcon, nextScrollButton: defaultNextIcon };
+    }
+    emitScrollEvent(event) {
+        const scrollEvent = new TabScrollEvent({
+            originalEvent: event
+        });
+        this.tabScroll.emit(scrollEvent);
+        return scrollEvent;
+    }
+}
+TabStripScrollableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: { prev: "prev", tabPosition: "tabPosition", scrollable: "scrollable" }, outputs: { tabScroll: "tabScroll", onClick: "onClick" }, host: { properties: { "class.k-button": "this.btnClasses", "class.k-button-md": "this.btnClasses", "class.k-icon-button": "this.btnClasses", "class.k-rounded-md": "this.btnClasses", "class.k-button-flat": "this.btnClasses", "class.k-button-flat-base": "this.btnClasses", "class.k-tabstrip-prev": "this.prevClass", "class.k-tabstrip-next": "this.nextClass" } }, ngImport: i0, template: `
+        <span class="k-icon k-button-icon" [ngClass]="iconClass"></span>
+    `, isInline: true, directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TabStripScrollableButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <span class="k-icon k-button-icon" [ngClass]="iconClass"></span>
+    `,
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoTabStripScrollableButton]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { btnClasses: [{
+                type: HostBinding,
+                args: ['class.k-button']
+            }, {
+                type: HostBinding,
+                args: ['class.k-button-md']
+            }, {
+                type: HostBinding,
+                args: ['class.k-icon-button']
+            }, {
+                type: HostBinding,
+                args: ['class.k-rounded-md']
+            }, {
+                type: HostBinding,
+                args: ['class.k-button-flat']
+            }, {
+                type: HostBinding,
+                args: ['class.k-button-flat-base']
+            }], prevClass: [{
+                type: HostBinding,
+                args: ['class.k-tabstrip-prev']
+            }], nextClass: [{
+                type: HostBinding,
+                args: ['class.k-tabstrip-next']
+            }], prev: [{
+                type: Input
+            }], tabPosition: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], tabScroll: [{
+                type: Output
+            }], onClick: [{
+                type: Output
+            }] } });

package/{dist/es2015 → esm2015}/tabstrip/tabstrip-scroll.service.js

@@ -2,36 +2,25 @@
 * 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 { DEFAULT_SCROLL_BEHAVIOR, DIRECTION_CLASSES } from './constants';
-import { Injectable, NgZone } from '@angular/core';
-import { hasObservers, isDocumentAvailable } from '@progress/kendo-angular-common';
+import { DEFAULT_SCROLL_BEHAVIOR } from './constants';
+import { Injectable } from '@angular/core';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { Subject } from 'rxjs';
-import { TabScrollEvent } from './events/tabscroll-event';
 import { getActiveTab, isTablistHorizontal, mouseScrollEnabled } from './util';
+import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-let ScrollService = class ScrollService {
+export class ScrollService {
     constructor(ngZone) {
         this.ngZone = ngZone;
         this.position = 0;
         this.scrollButtonActiveStateChange = new Subject();
+        this.isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`].host.nativeElement.classList.contains('k-disabled');
     }
     get tablistElement() {
         return this.owner.tablist.nativeElement;
     }
-    get scrollButtonIconClass() {
-        const tabStrip = this.owner;
-        const defaultPrevIcon = isTablistHorizontal(tabStrip.tabPosition) ? DIRECTION_CLASSES.left : DIRECTION_CLASSES.up;
-        const defaultNextIcon = isTablistHorizontal(tabStrip.tabPosition) ? DIRECTION_CLASSES.right : DIRECTION_CLASSES.down;
-        if (typeof tabStrip.scrollable === 'object') {
-            const prevIcon = typeof tabStrip.scrollable.prevButtonIcon === 'undefined' ? defaultPrevIcon : tabStrip.scrollable.prevButtonIcon;
-            const nextIcon = typeof tabStrip.scrollable.nextButtonIcon === 'undefined' ? defaultNextIcon : tabStrip.scrollable.nextButtonIcon;
-            return { prevScrollButton: prevIcon, nextScrollButton: nextIcon };
-        }
-        return { prevScrollButton: defaultPrevIcon, nextScrollButton: defaultNextIcon };
-    }
     get tabstripSize() {
         const hostElement = this.owner.wrapper.nativeElement;
         const wrapperWidth = parseFloat(getComputedStyle(hostElement).width);
@@ -65,8 +54,8 @@ let ScrollService = class ScrollService {
         if (!tabStrip.hasScrollButtons) {
             return;
         }
-        const currentPrevButtonActive = !tabStrip.prevScrollButton.disabled;
-        const currentNextButtonActive = !tabStrip.nextScrollButton.disabled;
+        const currentPrevButtonActive = !this.isDisabled('prev');
+        const currentNextButtonActive = !this.isDisabled('next');
         const calculatedPrevButtonActive = this.position > 0 && this.tablistOverflowSize > 0;
         const calculatedNextButtonActive = this.position < this.tablistOverflowSize + this.scrollButtonsSize && this.tablistOverflowSize > 0;
         if (calculatedPrevButtonActive !== currentPrevButtonActive) {
@@ -98,10 +87,10 @@ let ScrollService = class ScrollService {
         }
         const isFirstTabActive = activeIndex === 0;
         const isLastTabActive = activeIndex === this.owner.tabs.length - 1;
-        if (isFirstTabActive && !tabStrip.prevScrollButton.disabled) {
+        if (isFirstTabActive && !this.isDisabled('prev')) {
             this.ngZone.run(() => this.toggleButtonActiveState('prev', false));
         }
-        if (isLastTabActive && !tabStrip.nextScrollButton.disabled) {
+        if (isLastTabActive && !this.isDisabled('next')) {
             this.ngZone.run(() => this.toggleButtonActiveState('next', false));
         }
     }
@@ -170,15 +159,6 @@ let ScrollService = class ScrollService {
             this.position += scrollSpeed;
         }
     }
-    emitScrollEvent(ev) {
-        const scrollEvent = new TabScrollEvent({
-            originalEvent: ev
-        });
-        if (hasObservers(this.owner.tabScroll)) {
-            this.owner.tabScroll.emit(scrollEvent);
-        }
-        return scrollEvent;
-    }
     restoreScrollPosition() {
         if (isTablistHorizontal(this.owner.tabPosition)) {
             this.tablistElement.scrollTo({ left: this.position });
@@ -191,9 +171,9 @@ let ScrollService = class ScrollService {
     toggleButtonActiveState(buttonType, active) {
         this.scrollButtonActiveStateChange.next({ buttonType, active });
     }
-};
-ScrollService = tslib_1.__decorate([
-    Injectable(),
-    tslib_1.__metadata("design:paramtypes", [NgZone])
-], ScrollService);
-export { ScrollService };
+}
+ScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });