@worktile/theia 13.0.11 → 13.0.12

package/fesm2020/worktile-theia.mjs

@@ -11323,8 +11323,9 @@ class TheToolbarItemComponent extends TheBaseToolbarItem {
     constructor(ngZone) {
         super();
         this.ngZone = ngZone;
-        this.itemMode = ToolbarItemMode.horizontal;
         this.ToolbarItemMode = ToolbarItemMode;
+        this.className = 'the-toolbar-item';
+        this.itemMode = ToolbarItemMode.horizontal;
     }
     toggleDropdown(event) {
         super.execute(event);
@@ -11354,7 +11355,7 @@ class TheToolbarItemComponent extends TheBaseToolbarItem {
     }
 }
 TheToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TheToolbarItemComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { itemMode: "itemMode" }, host: { listeners: { "mousedown": "toggleDropdown($event)" }, classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { itemMode: "itemMode" }, host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-container *ngIf="itemMode === ToolbarItemMode.horizontal; else selectionItem">
             <a
                 href="javascript:;"
@@ -11403,12 +11404,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </ng-template>
         <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>
         <ng-container #toolbarContainer></ng-container>
-    `,
-                    host: {
-                        class: 'the-toolbar-item'
-                    }
+    `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { itemMode: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }], itemMode: [{
                 type: Input
             }], toolbarContainer: [{
                 type: ViewChild,
@@ -12541,12 +12542,15 @@ class TheToolbarComponent {
      *	└───────────────────────────────────────────────────────────────────────────────────────────────┘
      * split width: 17px
      * item width: default item: 35px; dropdown item: 42px
+     * default paddingRight: 4px
      * set aside 50px
      */
     toolbarItemsCompose() {
         let elementWidth = this.isMore ? this.elementWidth : null;
-        const maxItemWidth = 42;
-        const defaultItemWidth = 35;
+        // dropdown item + paddingRight
+        const maxItemWidth = 46;
+        // default item + paddingRight
+        const defaultItemWidth = 36;
         const splitWidth = 17;
         const splitPadding = 8;
         // special type
@@ -13502,7 +13506,8 @@ class TheToolbarGroupComponent {
             origin: event.currentTarget,
             viewContainerRef: this.viewContainerRef,
             hasBackdrop: false,
-            outsideClosable: true
+            outsideClosable: true,
+            manualClosure: true
         });
         this.groupPopoverRef.afterClosed().subscribe(() => {
             this.activeChange();