@progress/kendo-angular-layout 17.0.0-develop.3 → 17.0.0-develop.30

package/esm2022/tabstrip/models/tabstrip-tab.component.mjs

@@ -0,0 +1,117 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, ContentChildren, QueryList } from '@angular/core';
+import { TabContentDirective } from '../directives/tab-content.directive';
+import { TabTitleDirective } from '../directives/tab-title.directive';
+import { TabTemplateDirective } from '../directives/tab.directive';
+import * as i0 from "@angular/core";
+/**
+ * Represents the tab component of the TabStrip.
+ */
+export class TabStripTabComponent {
+    /**
+     * Sets the tab title ([see example](slug:tabs_tabstrip#toc-tab-titles)).
+     */
+    title;
+    /**
+     * Used to disable a tab ([see example]({% slug tabs_tabstrip %}#toc-disabled-tabs)).
+     *
+     * Defaults to `false`.
+     */
+    disabled = false;
+    /**
+     * The CSS classes that will be rendered on the `tab` element.
+     * Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
+     */
+    cssClass;
+    /**
+     * The CSS styles that will be rendered on the `tab` element.
+     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
+     */
+    cssStyle;
+    /**
+     * Determines which tab will be selected upon the initial loading of the TabStrip
+     * ([see example](slug:tabs_tabstrip#toc-selected-tab)).
+     */
+    selected;
+    /**
+     * When set to `true`, a close button will be rendered inside the tab.
+     * This option overrides the value of the TabStrip `closable` option.
+     */
+    closable;
+    /**
+     * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
+     * This option overrides the value of the TabStrip `closeIcon` option.
+     */
+    closeIcon;
+    /**
+     * Allows the usage of custom icons by defining a custom CSS class, or multiple classes separated by spaces.
+     * This option overrides the value of the TabStrip `closeIcon` option.
+     */
+    closeIconClass;
+    /**
+     * Defines an SVGIcon to be rendered for the close icon.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    closeSVGIcon;
+    get tabContent() {
+        return this._tabContent.first;
+    }
+    get tabTitle() {
+        return this._tabTitleDirective.first;
+    }
+    get tabTemplate() {
+        return this._tabDirective.first;
+    }
+    _tabDirective = new QueryList();
+    _tabContent = new QueryList();
+    // guards against nested tabstrip components; `descendants` is not defined by default;
+    _tabTitleDirective;
+    /**
+     * @hidden
+     *
+     * Currently only disabled tabs can be focused. Otherwise they will be
+     * immediately selected
+     */
+    focused = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripTabComponent, isStandalone: true, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabDirective", predicate: TabTemplateDirective }, { propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoTabStripTab',
+                    selector: 'kendo-tabstrip-tab',
+                    template: ``,
+                    standalone: true
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], cssClass: [{
+                type: Input
+            }], cssStyle: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], closeIcon: [{
+                type: Input
+            }], closeIconClass: [{
+                type: Input
+            }], closeSVGIcon: [{
+                type: Input
+            }], _tabDirective: [{
+                type: ContentChildren,
+                args: [TabTemplateDirective]
+            }], _tabContent: [{
+                type: ContentChildren,
+                args: [TabContentDirective]
+            }], _tabTitleDirective: [{
+                type: ContentChildren,
+                args: [TabTitleDirective]
+            }] } });

package/{esm2020 → esm2022}/tabstrip/rendering/tab.component.mjs

@@ -15,11 +15,15 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class TabComponent {
-    constructor(localization) {
-        this.localization = localization;
-        this.tabClose = new EventEmitter();
-        this.hostClasses = true;
-    }
+    localization;
+    tab;
+    index;
+    tabStripClosable;
+    tabStripCloseIcon;
+    customTabstripCloseIcon;
+    closeSVGIcon;
+    tabClose = new EventEmitter();
+    hostClasses = true;
     get activeClass() {
         return this.tab.selected;
     }
@@ -32,6 +36,9 @@ export class TabComponent {
     get tabIndex() {
         return this.tab.selected || this.tab.focused ? 0 : -1;
     }
+    constructor(localization) {
+        this.localization = localization;
+    }
     get tabClosable() {
         if (this.tab.closable !== undefined) {
             return this.tab.closable;
@@ -73,13 +80,14 @@ export class TabComponent {
         const closeArgs = new TabCloseEvent(index, this.tab);
         this.tabClose.emit(closeArgs);
     }
-}
-TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "class.k-tabstrip-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
         <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
-            <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
+            <span class="k-link" *ngIf="!tab.tabTitle">
+                <span class="k-link-text">{{ tab.title }}</span>
+            </span>
             <span class="k-link" *ngIf="tab.tabTitle">
-                <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
+                <ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
                 </ng-template>
             </span>
         </ng-container>
@@ -101,17 +109,20 @@ TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
             (click)="closeTab(index)"
             class="k-remove-tab k-icon-button"
         ></button>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoTabStripTab]',
                     template: `
         <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
-            <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
+            <span class="k-link" *ngIf="!tab.tabTitle">
+                <span class="k-link-text">{{ tab.title }}</span>
+            </span>
             <span class="k-link" *ngIf="tab.tabTitle">
-                <ng-template [ngTemplateOutlet]="tab.tabTitle?.templateRef">
+                <ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
                 </ng-template>
             </span>
         </ng-container>
@@ -154,9 +165,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-item']
-            }, {
-                type: HostBinding,
-                args: ['class.k-tabstrip-item']
             }], activeClass: [{
                 type: HostBinding,
                 args: ['attr.aria-selected']

package/{esm2020 → esm2022}/tabstrip/scrollable-button.component.mjs

@@ -17,35 +17,21 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class TabStripScrollableButtonComponent {
-    constructor(host, renderer, ngZone, localization) {
-        this.host = host;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.localization = localization;
-        this.prev = false;
-        this.tabScroll = new EventEmitter();
-        this.onClick = new EventEmitter();
-        this.caretAltLeftIcon = caretAltLeftIcon;
-        this.caretAltRightIcon = caretAltRightIcon;
-        this.caretAltUpIcon = caretAltUpIcon;
-        this.caretAltDownIcon = caretAltDownIcon;
-        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);
-        };
-    }
+    host;
+    renderer;
+    ngZone;
+    localization;
     get prevClass() {
         return this.prev;
     }
     get nextClass() {
         return !this.prev;
     }
+    prev = false;
+    tabPosition;
+    scrollable;
+    tabScroll = new EventEmitter();
+    onClick = new EventEmitter();
     get hostBoundingClientRect() {
         return this.host.nativeElement.getBoundingClientRect();
     }
@@ -58,6 +44,17 @@ export class TabStripScrollableButtonComponent {
     get svgIcon() {
         return this.scrollButtonSVGIcon;
     }
+    caretAltLeftIcon = caretAltLeftIcon;
+    caretAltRightIcon = caretAltRightIcon;
+    caretAltUpIcon = caretAltUpIcon;
+    caretAltDownIcon = caretAltDownIcon;
+    subs = new Subscription();
+    constructor(host, renderer, ngZone, localization) {
+        this.host = host;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.localization = localization;
+    }
     ngAfterViewInit() {
         this.ngZone.runOutsideAngular(() => {
             this.subs.add(this.renderer.listen(this.host.nativeElement, 'click', this.clickHandler));
@@ -69,6 +66,15 @@ export class TabStripScrollableButtonComponent {
     toggle(show) {
         this.renderer[show ? 'removeClass' : 'addClass'](this.host.nativeElement, HIDDEN_CLASS);
     }
+    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 scrollButtonIconClass() {
         const defaultPrevIcon = isTablistHorizontal(this.tabPosition) ?
             !this.localization.rtl ?
@@ -129,9 +135,8 @@ export class TabStripScrollableButtonComponent {
         this.tabScroll.emit(scrollEvent);
         return scrollEvent;
     }
-}
-TabStripScrollableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabStripScrollableButtonComponent, isStandalone: true, selector: "[kendoTabStripScrollableButton]", inputs: { prev: "prev", tabPosition: "tabPosition", scrollable: "scrollable" }, outputs: { tabScroll: "tabScroll", onClick: "onClick" }, host: { properties: { "class.k-tabstrip-prev": "this.prevClass", "class.k-tabstrip-next": "this.nextClass" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripScrollableButtonComponent, isStandalone: true, selector: "[kendoTabStripScrollableButton]", inputs: { prev: "prev", tabPosition: "tabPosition", scrollable: "scrollable" }, outputs: { tabScroll: "tabScroll", onClick: "onClick" }, host: { properties: { "class.k-tabstrip-prev": "this.prevClass", "class.k-tabstrip-next": "this.nextClass" } }, ngImport: i0, template: `
         <kendo-icon-wrapper
             [name]="iconClass"
             [customFontClass]="customIconClass"
@@ -140,7 +145,8 @@ TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
         >
         </kendo-icon-wrapper>
     `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripScrollableButtonComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripScrollableButtonComponent, decorators: [{
             type: Component,
             args: [{
                     template: `

package/{esm2020 → esm2022}/tabstrip/tabstrip-scroll.service.mjs

@@ -12,12 +12,10 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 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');
-    }
+    ngZone;
+    owner;
+    position = 0;
+    scrollButtonActiveStateChange = new Subject();
     get tablistElement() {
         return this.owner.tablist.nativeElement;
     }
@@ -49,6 +47,9 @@ export class ScrollService {
         const nextSize = isTablistHorizontal(this.owner.tabPosition) ? nextRect.width : nextRect.height;
         return prevSize + nextSize;
     }
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+    }
     toggleScrollButtonsState() {
         const tabStrip = this.owner;
         if (!tabStrip.hasScrollButtons) {
@@ -171,9 +172,10 @@ export class ScrollService {
     toggleButtonActiveState(buttonType, active) {
         this.scrollButtonActiveStateChange.next({ buttonType, active });
     }
+    isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`].host.nativeElement.classList.contains('k-disabled');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService });
 }
-ScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-ScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });