@progress/kendo-angular-spreadsheet 17.0.0-develop.4 → 17.0.0-develop.41

package/{esm2020 → esm2022}/sheets-bar/sheets-bar.component.mjs

@@ -24,6 +24,16 @@ import * as i3 from "@progress/kendo-angular-dialog";
  * @hidden
  */
 export class SheetsBarComponent {
+    spreadsheetService;
+    element;
+    renderer;
+    localization;
+    dialogService;
+    ngZone;
+    hostClasses = true;
+    sheets;
+    sheetDescriptors;
+    subs = new Subscription();
     constructor(spreadsheetService, element, renderer, localization, dialogService, ngZone) {
         this.spreadsheetService = spreadsheetService;
         this.element = element;
@@ -31,93 +41,33 @@ export class SheetsBarComponent {
         this.localization = localization;
         this.dialogService = dialogService;
         this.ngZone = ngZone;
-        this.hostClasses = true;
-        this.subs = new Subscription();
-        this.plusIcon = plusIcon;
-        this.menuIcon = menuIcon;
-        this.caretAltDownIcon = caretAltDownIcon;
-        this.caretAltLeftIcon = caretAltLeftIcon;
-        this.caretAltRightIcon = caretAltRightIcon;
-        this.selected = false;
-        this.sheetsMenuList = [];
-        this.openedDdb = null;
-        this.hiddenStateIcons = {
-            hidden: 'eye-slash',
-            visible: 'eye'
-        };
-        this.hiddenStateSVGIcons = {
-            hidden: eyeSlashIcon,
-            visible: eyeIcon
-        };
-        this.onAddClick = () => {
-            if (this.spreadsheetService.spreadsheet) {
-                this.spreadsheetService.spreadsheet.view.sheetsbar.onAddSelect();
-                this.notifySheetsChange();
-            }
-        };
-        this.actionsCallback = {
-            copy: (sheetInfo) => {
-                let copies = 0;
-                const regex = this.getCopyRegex(sheetInfo.text);
-                this.sheets.forEach(sheet => {
-                    const isPresent = regex.test(sheet.text);
-                    if (isPresent) {
-                        copies += 1;
-                    }
-                });
-                const sheetToCopy = this.spreadsheetService.spreadsheet.sheets().find(s => s.name() === sheetInfo.text);
-                const newName = `${sheetInfo.text} (${copies + 1})`;
-                this.spreadsheetService.spreadsheet.insertSheet({ data: { ...sheetToCopy.toJSON(), name: newName }, index: sheetInfo.index + 1 });
-                this.selectSheet(newName);
-            },
-            move: (sheetInfo, itemKey) => {
-                const isMoveRight = itemKey === 'sheetMoveRight';
-                let oldIndex = -1;
-                let newIndex = -1;
-                const sheets = this.spreadsheetService.spreadsheet.sheets();
-                if (isMoveRight) {
-                    for (let i = 0; i < sheets.length; i++) {
-                        if (sheets[i].name() === sheetInfo.text) {
-                            oldIndex = i;
-                        }
-                        if (oldIndex > -1 && i > oldIndex && sheets[i]._state() === 'visible') {
-                            newIndex = i;
-                            break;
-                        }
-                    }
-                }
-                else {
-                    for (let i = sheets.length - 1; i >= 0; i--) {
-                        if (sheets[i].name() === sheetInfo.text) {
-                            oldIndex = i;
-                        }
-                        if (oldIndex > -1 && (i < oldIndex) && sheets[i]._state() === 'visible') {
-                            newIndex = i;
-                            break;
-                        }
-                    }
-                }
-                const sheetsBar = this.spreadsheetService.spreadsheet.view.sheetsbar;
-                sheetsBar.onSheetReorderEnd({ oldIndex, newIndex });
-                this.selectSheet(sheetInfo.text);
-                this.notifySheetsChange();
-            },
-            hide: (sheet) => {
-                sheet.state = 'hidden';
-                const sheets = this.spreadsheetService.spreadsheet.sheets();
-                const sheetIndex = sheets.findIndex(s => s.name() === sheet.text);
-                sheets[sheetIndex]._state('hidden');
-                const newSelectedIndex = sheetIndex < sheets.length - 1 ? sheetIndex + 1 : 0;
-                const sheetToSelect = sheets[newSelectedIndex].name();
-                this.selectSheet(sheetToSelect);
-                this.notifySheetsChange();
-            }
-        };
         this.subs.add(spreadsheetService.onSheetsBarFocus.subscribe(() => ngZone.run(() => this.tabstrip.selectTab(this.sheets.findIndex(sh => sh.text === spreadsheetService.currentActiveSheet)))));
     }
+    addButton;
+    menuButton;
+    tabstrip;
+    actionDdbs;
+    actionDdbRefs;
     get activeSheet() {
         return this.spreadsheetService.spreadsheet?.activeSheet()?.name();
     }
+    plusIcon = plusIcon;
+    menuIcon = menuIcon;
+    caretAltDownIcon = caretAltDownIcon;
+    caretAltLeftIcon = caretAltLeftIcon;
+    caretAltRightIcon = caretAltRightIcon;
+    selected = false;
+    sheetsMenuList = [];
+    openedDdb = null;
+    tabListSub;
+    hiddenStateIcons = {
+        hidden: 'eye-slash',
+        visible: 'eye'
+    };
+    hiddenStateSVGIcons = {
+        hidden: eyeSlashIcon,
+        visible: eyeIcon
+    };
     get tablistId() {
         return this.spreadsheetService.tablistId;
     }
@@ -153,6 +103,12 @@ export class SheetsBarComponent {
         }
         this.subs.unsubscribe();
     }
+    onAddClick = () => {
+        if (this.spreadsheetService.spreadsheet) {
+            this.spreadsheetService.spreadsheet.view.sheetsbar.onAddSelect();
+            this.notifySheetsChange();
+        }
+    };
     onTabSelect(ev) {
         if (ev.title !== this.activeSheet) {
             this.selectSheet(ev.title);
@@ -228,6 +184,64 @@ export class SheetsBarComponent {
         const st = `(${newName})\\s?\\(`;
         return new RegExp(st, 's');
     }
+    actionsCallback = {
+        copy: (sheetInfo) => {
+            let copies = 0;
+            const regex = this.getCopyRegex(sheetInfo.text);
+            this.sheets.forEach(sheet => {
+                const isPresent = regex.test(sheet.text);
+                if (isPresent) {
+                    copies += 1;
+                }
+            });
+            const sheetToCopy = this.spreadsheetService.spreadsheet.sheets().find(s => s.name() === sheetInfo.text);
+            const newName = `${sheetInfo.text} (${copies + 1})`;
+            this.spreadsheetService.spreadsheet.insertSheet({ data: { ...sheetToCopy.toJSON(), name: newName }, index: sheetInfo.index + 1 });
+            this.selectSheet(newName);
+        },
+        move: (sheetInfo, itemKey) => {
+            const isMoveRight = itemKey === 'sheetMoveRight';
+            let oldIndex = -1;
+            let newIndex = -1;
+            const sheets = this.spreadsheetService.spreadsheet.sheets();
+            if (isMoveRight) {
+                for (let i = 0; i < sheets.length; i++) {
+                    if (sheets[i].name() === sheetInfo.text) {
+                        oldIndex = i;
+                    }
+                    if (oldIndex > -1 && i > oldIndex && sheets[i]._state() === 'visible') {
+                        newIndex = i;
+                        break;
+                    }
+                }
+            }
+            else {
+                for (let i = sheets.length - 1; i >= 0; i--) {
+                    if (sheets[i].name() === sheetInfo.text) {
+                        oldIndex = i;
+                    }
+                    if (oldIndex > -1 && (i < oldIndex) && sheets[i]._state() === 'visible') {
+                        newIndex = i;
+                        break;
+                    }
+                }
+            }
+            const sheetsBar = this.spreadsheetService.spreadsheet.view.sheetsbar;
+            sheetsBar.onSheetReorderEnd({ oldIndex, newIndex });
+            this.selectSheet(sheetInfo.text);
+            this.notifySheetsChange();
+        },
+        hide: (sheet) => {
+            sheet.state = 'hidden';
+            const sheets = this.spreadsheetService.spreadsheet.sheets();
+            const sheetIndex = sheets.findIndex(s => s.name() === sheet.text);
+            sheets[sheetIndex]._state('hidden');
+            const newSelectedIndex = sheetIndex < sheets.length - 1 ? sheetIndex + 1 : 0;
+            const sheetToSelect = sheets[newSelectedIndex].name();
+            this.selectSheet(sheetToSelect);
+            this.notifySheetsChange();
+        }
+    };
     selectSheet(sheetName) {
         const spreadsheetSheet = this.spreadsheetService.spreadsheet.sheets().find(s => s.name() === sheetName);
         this.spreadsheetService.spreadsheet.activeSheet(spreadsheetSheet);
@@ -236,7 +250,7 @@ export class SheetsBarComponent {
         this.notifySheetsChange();
     }
     onTabListKeyDown(ev) {
-        const buttonEl = ev.target.querySelector('.k-dropdown-button');
+        const buttonEl = ev.target.querySelector('kendo-dropdownbutton');
         const index = Array.from(this.actionDdbRefs).findIndex(el => el.nativeElement === buttonEl);
         const ddb = Array.from(this.actionDdbs)[index];
         if (!ddb) {
@@ -274,9 +288,8 @@ export class SheetsBarComponent {
         });
         this.ngZone.onStable.pipe(take(1)).subscribe(() => this.spreadsheetService.spreadsheet.view.clipboard.focus());
     }
-}
-SheetsBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SheetsBarComponent, deps: [{ token: i1.SpreadsheetService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.SpreadsheetLocalizationService }, { token: i3.DialogService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SheetsBarComponent, isStandalone: true, selector: "[kendoSpreadsheetSheetsBar]", inputs: { sheets: "sheets", sheetDescriptors: "sheetDescriptors" }, host: { properties: { "class.k-spreadsheet-sheets-bar": "this.hostClasses" } }, viewQueries: [{ propertyName: "addButton", first: true, predicate: ["addButton"], descendants: true }, { propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "tabstrip", first: true, predicate: ["tabstrip"], descendants: true }, { propertyName: "actionDdbs", predicate: ["sheetDdb"], descendants: true }, { propertyName: "actionDdbRefs", predicate: ["sheetDdb"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SheetsBarComponent, deps: [{ token: i1.SpreadsheetService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.SpreadsheetLocalizationService }, { token: i3.DialogService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SheetsBarComponent, isStandalone: true, selector: "[kendoSpreadsheetSheetsBar]", inputs: { sheets: "sheets", sheetDescriptors: "sheetDescriptors" }, host: { properties: { "class.k-spreadsheet-sheets-bar": "this.hostClasses" } }, viewQueries: [{ propertyName: "addButton", first: true, predicate: ["addButton"], descendants: true }, { propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true }, { propertyName: "tabstrip", first: true, predicate: ["tabstrip"], descendants: true }, { propertyName: "actionDdbs", predicate: ["sheetDdb"], descendants: true }, { propertyName: "actionDdbRefs", predicate: ["sheetDdb"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <button kendoButton #addButton
             [title]="messageFor('addSheet')"
             type="button"
@@ -302,7 +315,7 @@ SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             [tabPosition]="'bottom'"
             [showContentArea]="false"
             [scrollable]="{prevButtonIcon: 'caret-alt-left', prevSVGButtonIcon: caretAltLeftIcon, nextButtonIcon: 'caret-alt-right', nextSVGButtonIcon: caretAltRightIcon}"
-            class="k-spreadsheet-sheets k-overflow-hidden"
+            class="k-spreadsheet-sheets"
             (tabSelect)="onTabSelect($event)">
             <ng-container *ngFor="let sheet of sheets">
                 <kendo-tabstrip-tab
@@ -310,25 +323,30 @@ SheetsBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
                     [title]="sheet.text"
                     [selected]="sheet.text === activeSheet">
                     <ng-template kendoTabTemplate>
-                        <span class="k-link">{{sheet.text}}</span>
-                        <kendo-dropdownbutton #sheetDdb
-                            fillMode="flat"
-                            icon="caret-alt-down"
-                            [svgIcon]="caretAltDownIcon"
-                            buttonClass="k-menu-button"
-                            [data]="sheet.sheetActions"
-                            [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
-                            (open)="onOpen(sheetDdb)"
-                            (close)="onClose()"
-                            (click)="$event.stopPropagation()"
-                            (itemClick)="onActionClick($event, sheet)">
-                        </kendo-dropdownbutton>
+                        <span class="k-link">
+                            <span class="k-link-text">{{sheet.text}}</span>
+                        </span>
+                        <span class="k-item-actions">
+                            <kendo-dropdownbutton #sheetDdb
+                                fillMode="flat"
+                                icon="caret-alt-down"
+                                [svgIcon]="caretAltDownIcon"
+                                buttonClass="k-menu-button"
+                                [data]="sheet.sheetActions"
+                                [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
+                                (open)="onOpen(sheetDdb)"
+                                (close)="onClose()"
+                                (click)="$event.stopPropagation()"
+                                (itemClick)="onActionClick($event, sheet)">
+                            </kendo-dropdownbutton>
+                        </span>
                     </ng-template>
                 </kendo-tabstrip-tab>
             </ng-container>
         </kendo-tabstrip>
-    `, isInline: true, dependencies: [{ 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"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SheetsBarComponent, decorators: [{
+    `, isInline: true, dependencies: [{ 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"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTemplateDirective, selector: "[kendoTabTemplate]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SheetsBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoSpreadsheetSheetsBar]',
@@ -358,7 +376,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [tabPosition]="'bottom'"
             [showContentArea]="false"
             [scrollable]="{prevButtonIcon: 'caret-alt-left', prevSVGButtonIcon: caretAltLeftIcon, nextButtonIcon: 'caret-alt-right', nextSVGButtonIcon: caretAltRightIcon}"
-            class="k-spreadsheet-sheets k-overflow-hidden"
+            class="k-spreadsheet-sheets"
             (tabSelect)="onTabSelect($event)">
             <ng-container *ngFor="let sheet of sheets">
                 <kendo-tabstrip-tab
@@ -366,19 +384,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     [title]="sheet.text"
                     [selected]="sheet.text === activeSheet">
                     <ng-template kendoTabTemplate>
-                        <span class="k-link">{{sheet.text}}</span>
-                        <kendo-dropdownbutton #sheetDdb
-                            fillMode="flat"
-                            icon="caret-alt-down"
-                            [svgIcon]="caretAltDownIcon"
-                            buttonClass="k-menu-button"
-                            [data]="sheet.sheetActions"
-                            [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
-                            (open)="onOpen(sheetDdb)"
-                            (close)="onClose()"
-                            (click)="$event.stopPropagation()"
-                            (itemClick)="onActionClick($event, sheet)">
-                        </kendo-dropdownbutton>
+                        <span class="k-link">
+                            <span class="k-link-text">{{sheet.text}}</span>
+                        </span>
+                        <span class="k-item-actions">
+                            <kendo-dropdownbutton #sheetDdb
+                                fillMode="flat"
+                                icon="caret-alt-down"
+                                [svgIcon]="caretAltDownIcon"
+                                buttonClass="k-menu-button"
+                                [data]="sheet.sheetActions"
+                                [buttonAttributes]="{'aria-hidden': 'true', 'tabindex': '-1', role: 'presentation'}"
+                                (open)="onOpen(sheetDdb)"
+                                (close)="onClose()"
+                                (click)="$event.stopPropagation()"
+                                (itemClick)="onActionClick($event, sheet)">
+                            </kendo-dropdownbutton>
+                        </span>
                     </ng-template>
                 </kendo-tabstrip-tab>
             </ng-container>