@progress/kendo-angular-layout 13.0.3 → 13.0.4-develop.1

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1686640134,
-    version: '13.0.3',
+    publishDate: 1686676813,
+    version: '13.0.4-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2020/tabstrip/tabstrip.component.mjs

@@ -13,12 +13,12 @@ import { TabStripService } from './tabstrip.service';
 import { ScrollService } from './tabstrip-scroll.service';
 import { Subscription } from 'rxjs';
 import { isFocusable } from '../common/dom-queries';
-import { getTabByIndex, isTablistHorizontal, tabStripHasScrollButtons, mouseScrollEnabled, resetTabFocus } from './util';
+import { getTabByIndex, isTablistHorizontal, tabStripHasScrollButtons, mouseScrollEnabled, resetTabFocus, getId } from './util';
 import { normalizeScrollableSettings } from './models/scrollable-settings';
 import { TabScrollEvent } from './events/tabscroll-event';
 import { TabStripScrollableButtonComponent } from './scrollable-button.component';
 import { take } from 'rxjs/operators';
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { guid, isDocumentAvailable } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./tabstrip.service";
@@ -92,6 +92,7 @@ export class TabStripComponent {
         this._scrollableSettings = normalizeScrollableSettings(false);
         this.subscriptions = new Subscription();
         this.subscriptionsArePresent = false;
+        this.tabStripId = guid();
         validatePackage(packageMetadata);
         this.tabstripService.owner = this;
         this.scrollService.owner = this;
@@ -268,6 +269,18 @@ export class TabStripComponent {
         this.tabstripService.selectTab(tab, index);
         this.scrollToSelectedTab();
     }
+    /**
+     * @hidden
+     */
+    getTabId(idx) {
+        return getId('k-tabstrip-tab', this.tabStripId, idx);
+    }
+    /**
+     * @hidden
+     */
+    getTabPanelId(idx) {
+        return getId('k-tabstrip-tabpanel', this.tabStripId, idx);
+    }
     /**
      * @hidden
      */
@@ -441,8 +454,8 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                             [closeSVGIcon]="closeSVGIcon"
                             (tabClose)="tabClose.emit($event)"
                             (click)="onTabClick($event, i)"
-                            [id]="'k-tabstrip-tab-' + i"
-                            [attr.aria-controls]="tab.selected ? 'k-tabstrip-tabpanel-' + i : undefined"></li>
+                            [id]="getTabId(i)"
+                            [attr.aria-controls]="tab.selected ? getTabPanelId(i) : undefined"></li>
                     </ng-container>
                 </ul>
                 <span
@@ -467,10 +480,10 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                     [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
                     [tabIndex]="0"
                     role="tabpanel"
-                    [id]="'k-tabstrip-tabpanel-' + i"
+                    [id]="getTabPanelId(i)"
                     [attr.aria-hidden]="!tab.selected"
                     [attr.aria-expanded]="tab.selected"
-                    [attr.aria-labelledby]="'k-tabstrip-tab-' + i"
+                    [attr.aria-labelledby]="getTabId(i)"
                     [attr.aria-disabled]="tab.disabled"
                 >
                     <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">
@@ -573,8 +586,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [closeSVGIcon]="closeSVGIcon"
                             (tabClose)="tabClose.emit($event)"
                             (click)="onTabClick($event, i)"
-                            [id]="'k-tabstrip-tab-' + i"
-                            [attr.aria-controls]="tab.selected ? 'k-tabstrip-tabpanel-' + i : undefined"></li>
+                            [id]="getTabId(i)"
+                            [attr.aria-controls]="tab.selected ? getTabPanelId(i) : undefined"></li>
                     </ng-container>
                 </ul>
                 <span
@@ -599,10 +612,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
                     [tabIndex]="0"
                     role="tabpanel"
-                    [id]="'k-tabstrip-tabpanel-' + i"
+                    [id]="getTabPanelId(i)"
                     [attr.aria-hidden]="!tab.selected"
                     [attr.aria-expanded]="tab.selected"
-                    [attr.aria-labelledby]="'k-tabstrip-tab-' + i"
+                    [attr.aria-labelledby]="getTabId(i)"
                     [attr.aria-disabled]="tab.disabled"
                 >
                     <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">

package/esm2020/tabstrip/util.mjs

@@ -107,3 +107,9 @@ export const resetTabSelection = (tabs) => {
  * @hidden
  */
 export const isTablistHorizontal = (tabPosition) => tabPosition === 'top' || tabPosition === 'bottom';
+/**
+ * @hidden
+ */
+export const getId = (prefix, tabStripId, tabIndex) => {
+    return `${prefix}-${tabStripId}-${tabIndex}`;
+};

package/fesm2015/progress-kendo-angular-layout.mjs

@@ -7,7 +7,7 @@ import { Directive, Optional, Injectable, isDevMode, Component, SkipSelf, Host,
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i1$1 from '@progress/kendo-angular-common';
-import { Keys, PreventableEvent as PreventableEvent$1, isDocumentAvailable, hasObservers, focusableSelector, isChanged, EventsModule, DraggableModule, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { Keys, PreventableEvent as PreventableEvent$1, isDocumentAvailable, guid, hasObservers, focusableSelector, isChanged, EventsModule, DraggableModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$2 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
@@ -31,8 +31,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1686640134,
-    version: '13.0.3',
+    publishDate: 1686676813,
+    version: '13.0.4-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -2783,6 +2783,12 @@ const resetTabSelection = (tabs) => {
  * @hidden
  */
 const isTablistHorizontal = (tabPosition) => tabPosition === 'top' || tabPosition === 'bottom';
+/**
+ * @hidden
+ */
+const getId$1 = (prefix, tabStripId, tabIndex) => {
+    return `${prefix}-${tabStripId}-${tabIndex}`;
+};
 
 /**
  * @hidden
@@ -3585,6 +3591,7 @@ class TabStripComponent {
         this._scrollableSettings = normalizeScrollableSettings(false);
         this.subscriptions = new Subscription();
         this.subscriptionsArePresent = false;
+        this.tabStripId = guid();
         validatePackage(packageMetadata);
         this.tabstripService.owner = this;
         this.scrollService.owner = this;
@@ -3761,6 +3768,18 @@ class TabStripComponent {
         this.tabstripService.selectTab(tab, index);
         this.scrollToSelectedTab();
     }
+    /**
+     * @hidden
+     */
+    getTabId(idx) {
+        return getId$1('k-tabstrip-tab', this.tabStripId, idx);
+    }
+    /**
+     * @hidden
+     */
+    getTabPanelId(idx) {
+        return getId$1('k-tabstrip-tabpanel', this.tabStripId, idx);
+    }
     /**
      * @hidden
      */
@@ -3934,8 +3953,8 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                             [closeSVGIcon]="closeSVGIcon"
                             (tabClose)="tabClose.emit($event)"
                             (click)="onTabClick($event, i)"
-                            [id]="'k-tabstrip-tab-' + i"
-                            [attr.aria-controls]="tab.selected ? 'k-tabstrip-tabpanel-' + i : undefined"></li>
+                            [id]="getTabId(i)"
+                            [attr.aria-controls]="tab.selected ? getTabPanelId(i) : undefined"></li>
                     </ng-container>
                 </ul>
                 <span
@@ -3960,10 +3979,10 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                     [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
                     [tabIndex]="0"
                     role="tabpanel"
-                    [id]="'k-tabstrip-tabpanel-' + i"
+                    [id]="getTabPanelId(i)"
                     [attr.aria-hidden]="!tab.selected"
                     [attr.aria-expanded]="tab.selected"
-                    [attr.aria-labelledby]="'k-tabstrip-tab-' + i"
+                    [attr.aria-labelledby]="getTabId(i)"
                     [attr.aria-disabled]="tab.disabled"
                 >
                     <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">
@@ -4066,8 +4085,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [closeSVGIcon]="closeSVGIcon"
                             (tabClose)="tabClose.emit($event)"
                             (click)="onTabClick($event, i)"
-                            [id]="'k-tabstrip-tab-' + i"
-                            [attr.aria-controls]="tab.selected ? 'k-tabstrip-tabpanel-' + i : undefined"></li>
+                            [id]="getTabId(i)"
+                            [attr.aria-controls]="tab.selected ? getTabPanelId(i) : undefined"></li>
                     </ng-container>
                 </ul>
                 <span
@@ -4092,10 +4111,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
                     [tabIndex]="0"
                     role="tabpanel"
-                    [id]="'k-tabstrip-tabpanel-' + i"
+                    [id]="getTabPanelId(i)"
                     [attr.aria-hidden]="!tab.selected"
                     [attr.aria-expanded]="tab.selected"
-                    [attr.aria-labelledby]="'k-tabstrip-tab-' + i"
+                    [attr.aria-labelledby]="getTabId(i)"
                     [attr.aria-disabled]="tab.disabled"
                 >
                     <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">

package/fesm2020/progress-kendo-angular-layout.mjs

@@ -7,7 +7,7 @@ import { Injectable, Directive, Optional, isDevMode, Component, SkipSelf, Host,
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i1$1 from '@progress/kendo-angular-common';
-import { Keys, PreventableEvent as PreventableEvent$1, isDocumentAvailable, hasObservers, focusableSelector, isChanged, EventsModule, DraggableModule, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { Keys, PreventableEvent as PreventableEvent$1, isDocumentAvailable, guid, hasObservers, focusableSelector, isChanged, EventsModule, DraggableModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$2 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
@@ -31,8 +31,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1686640134,
-    version: '13.0.3',
+    publishDate: 1686676813,
+    version: '13.0.4-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -2773,6 +2773,12 @@ const resetTabSelection = (tabs) => {
  * @hidden
  */
 const isTablistHorizontal = (tabPosition) => tabPosition === 'top' || tabPosition === 'bottom';
+/**
+ * @hidden
+ */
+const getId$1 = (prefix, tabStripId, tabIndex) => {
+    return `${prefix}-${tabStripId}-${tabIndex}`;
+};
 
 /**
  * @hidden
@@ -3575,6 +3581,7 @@ class TabStripComponent {
         this._scrollableSettings = normalizeScrollableSettings(false);
         this.subscriptions = new Subscription();
         this.subscriptionsArePresent = false;
+        this.tabStripId = guid();
         validatePackage(packageMetadata);
         this.tabstripService.owner = this;
         this.scrollService.owner = this;
@@ -3751,6 +3758,18 @@ class TabStripComponent {
         this.tabstripService.selectTab(tab, index);
         this.scrollToSelectedTab();
     }
+    /**
+     * @hidden
+     */
+    getTabId(idx) {
+        return getId$1('k-tabstrip-tab', this.tabStripId, idx);
+    }
+    /**
+     * @hidden
+     */
+    getTabPanelId(idx) {
+        return getId$1('k-tabstrip-tabpanel', this.tabStripId, idx);
+    }
     /**
      * @hidden
      */
@@ -3924,8 +3943,8 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                             [closeSVGIcon]="closeSVGIcon"
                             (tabClose)="tabClose.emit($event)"
                             (click)="onTabClick($event, i)"
-                            [id]="'k-tabstrip-tab-' + i"
-                            [attr.aria-controls]="tab.selected ? 'k-tabstrip-tabpanel-' + i : undefined"></li>
+                            [id]="getTabId(i)"
+                            [attr.aria-controls]="tab.selected ? getTabPanelId(i) : undefined"></li>
                     </ng-container>
                 </ul>
                 <span
@@ -3950,10 +3969,10 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                     [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
                     [tabIndex]="0"
                     role="tabpanel"
-                    [id]="'k-tabstrip-tabpanel-' + i"
+                    [id]="getTabPanelId(i)"
                     [attr.aria-hidden]="!tab.selected"
                     [attr.aria-expanded]="tab.selected"
-                    [attr.aria-labelledby]="'k-tabstrip-tab-' + i"
+                    [attr.aria-labelledby]="getTabId(i)"
                     [attr.aria-disabled]="tab.disabled"
                 >
                     <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">
@@ -4056,8 +4075,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [closeSVGIcon]="closeSVGIcon"
                             (tabClose)="tabClose.emit($event)"
                             (click)="onTabClick($event, i)"
-                            [id]="'k-tabstrip-tab-' + i"
-                            [attr.aria-controls]="tab.selected ? 'k-tabstrip-tabpanel-' + i : undefined"></li>
+                            [id]="getTabId(i)"
+                            [attr.aria-controls]="tab.selected ? getTabPanelId(i) : undefined"></li>
                     </ng-container>
                 </ul>
                 <span
@@ -4082,10 +4101,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [ngClass]="!this.keepTabContent || tab.selected ? 'k-tabstrip-content k-active' : 'k-tabstrip-content'"
                     [tabIndex]="0"
                     role="tabpanel"
-                    [id]="'k-tabstrip-tabpanel-' + i"
+                    [id]="getTabPanelId(i)"
                     [attr.aria-hidden]="!tab.selected"
                     [attr.aria-expanded]="tab.selected"
-                    [attr.aria-labelledby]="'k-tabstrip-tab-' + i"
+                    [attr.aria-labelledby]="getTabId(i)"
                     [attr.aria-disabled]="tab.disabled"
                 >
                     <ng-template [ngTemplateOutlet]="tab.tabContent?.templateRef">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "13.0.3",
+  "version": "13.0.4-develop.1",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -39,16 +39,16 @@
     "@angular/core": "13 - 16",
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "13.0.3",
-    "@progress/kendo-angular-l10n": "13.0.3",
-    "@progress/kendo-angular-progressbar": "13.0.3",
-    "@progress/kendo-angular-icons": "13.0.3",
-    "@progress/kendo-angular-buttons": "13.0.3",
+    "@progress/kendo-angular-common": "13.0.4-develop.1",
+    "@progress/kendo-angular-l10n": "13.0.4-develop.1",
+    "@progress/kendo-angular-progressbar": "13.0.4-develop.1",
+    "@progress/kendo-angular-icons": "13.0.4-develop.1",
+    "@progress/kendo-angular-buttons": "13.0.4-develop.1",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "13.0.3",
+    "@progress/kendo-angular-schematics": "13.0.4-develop.1",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",

package/tabstrip/tabstrip.component.d.ts

@@ -137,6 +137,7 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
     private subscriptions;
     private subscriptionsArePresent;
     private _closeSVGIcon;
+    private tabStripId;
     constructor(localization: LocalizationService, renderer: Renderer2, wrapper: ElementRef, tabstripService: TabStripService, scrollService: ScrollService, ngZone: NgZone);
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -174,6 +175,14 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
      * @param {number} index - The index of the tab that will be selected.
      */
     selectTab(index: number): void;
+    /**
+     * @hidden
+     */
+    getTabId(idx: number): string;
+    /**
+     * @hidden
+     */
+    getTabPanelId(idx: number): string;
     /**
      * @hidden
      */

package/tabstrip/util.d.ts

@@ -60,3 +60,7 @@ export declare const resetTabSelection: (tabs: QueryList<TabStripTabComponent>)
  * @hidden
  */
 export declare const isTablistHorizontal: (tabPosition: TabPosition) => boolean;
+/**
+ * @hidden
+ */
+export declare const getId: (prefix: string, tabStripId: string, tabIndex: number) => string;