Merge pull request #12371 from primefaces/toolbar-update

Fixed #12364, Fixed #12365, Fixed #12366
primefaces · Dec 28, 2022 · 69b9e6a · 69b9e6a
2 parents 3d3aa78 + 5180990
commit 69b9e6a
Show file tree

Hide file tree

Showing 45 changed files with 99 additions and 35 deletions.
diff --git a/src/app/components/toolbar/toolbar.css b/src/app/components/toolbar/toolbar.css
@@ -4,9 +4,14 @@
     justify-content: space-between;
     flex-wrap: wrap;
 }
-
+.p-toolbar-group-start,
+.p-toolbar-group-center,
+.p-toolbar-group-end {
+    display: flex;
+    align-items: center;
+}
 .p-toolbar-group-left,
 .p-toolbar-group-right {
     display: flex;
     align-items: center;
-}
+}
diff --git a/src/app/components/toolbar/toolbar.ts b/src/app/components/toolbar/toolbar.ts
@@ -1,16 +1,19 @@
-import { NgModule, Component, Input, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, AfterContentInit, ContentChildren, QueryList, TemplateRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { BlockableUI, PrimeTemplate } from 'primeng/api';
 
 @Component({
     selector: 'p-toolbar',
     template: `
         <div [ngClass]="'p-toolbar p-component'" [ngStyle]="style" [class]="styleClass" role="toolbar">
             <ng-content></ng-content>
-            <div class="p-toolbar-group-left" *ngIf="leftTemplate">
-                <ng-container *ngTemplateOutlet="leftTemplate"></ng-container>
+            <div class="p-toolbar-group-left p-toolbar-group-start" *ngIf="startTemplate">
+                <ng-container *ngTemplateOutlet="startTemplate"></ng-container>
             </div>
-            <div class="p-toolbar-group-right" *ngIf="rightTemplate">
+            <div class="p-toolbar-group-center" *ngIf="centerTemplate">
+                <ng-container *ngTemplateOutlet="centerTemplate"></ng-container>
+            </div>
+            <div class="p-toolbar-group-right p-toolbar-group-end" *ngIf="endTemplate">
                 <ng-container *ngTemplateOutlet="rightTemplate"></ng-container>
             </div>
         </div>
@@ -29,9 +32,11 @@ export class Toolbar implements AfterContentInit, BlockableUI {
 
     @ContentChildren(PrimeTemplate) templates: QueryList<any>;
 
-    leftTemplate: TemplateRef<any>;
+    startTemplate: TemplateRef<any>;
+
+    endTemplate: TemplateRef<any>;
 
-    rightTemplate: TemplateRef<any>;
+    centerTemplate: TemplateRef<any>;
 
     constructor(private el: ElementRef) {}
 
@@ -43,11 +48,15 @@ export class Toolbar implements AfterContentInit, BlockableUI {
         this.templates.forEach((item) => {
             switch (item.getType()) {
                 case 'left':
-                    this.leftTemplate = item.template;
+                    this.startTemplate = item.template;
                     break;
 
                 case 'right':
-                    this.rightTemplate = item.template;
+                    this.endTemplate = item.template;
+                    break;
+
+                case 'center':
+                    this.centerTemplate = item.template;
                     break;
             }
         });

diff --git a/src/app/showcase/components/toolbar/toolbardemo.html b/src/app/showcase/components/toolbar/toolbardemo.html
@@ -8,16 +8,16 @@ <h1>Toolbar</h1>
 
 <div class="content-section implementation">
     <p-toolbar>
-        <div class="p-toolbar-group-left">
+        <div class="p-toolbar-group-start">
             <p-button label="New" icon="pi pi-plus" class="mr-2"></p-button>
             <p-button label="Upload" icon="pi pi-upload" styleClass="p-button-success"></p-button>
-                
+
             <i class="p-toolbar-separator pi pi-bars mr-2" style="vertical-align: middle"></i>
-            
+
             <p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="p-button-warning"></p-splitButton>
         </div>
-        
-        <div class="p-toolbar-group-right">
+
+        <div class="p-toolbar-group-end">
             <p-button icon="pi pi-search" class="mr-2"></p-button>
             <p-button icon="pi pi-calendar" styleClass="p-button-success mr-2"></p-button>
             <p-button icon="pi pi-times" styleClass="p-button-danger"></p-button>
@@ -34,27 +34,27 @@ <h5>Import</h5>
 </app-code>
 
             <h5>Getting Started</h5>
-            <p>Toolbar is a container component defined using p-toolbar element. Left aligned content is placed inside a div 
-            having <i>.p-toolbar-group-left</i> class and similarly <i>.p-toolbar-group-right</i> for right alignment.</p>
+            <p>Toolbar provides <i>start</i>, <i>center</i> and <i>end</i> templates to place content at these sections.</p>
+
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-toolbar&gt;
-    &lt;div class="p-toolbar-group-left"&gt;
+    &lt;div class="p-toolbar-group-start"&gt;
         &lt;p-button label="New" icon="pi pi-plus"&gt;&lt;/p-button&gt;
         &lt;p-button label="Upload" icon="pi pi-upload" styleClass="p-button-success"&gt;&lt;/p-button&gt;
-            
+
         &lt;i class="pi pi-bars"&gt;&lt;/i&gt;
-        
+
         &lt;p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="p-button-warning"&gt;&lt;/p-splitButton&gt;
     &lt;/div&gt;
-    
-    &lt;div class="p-toolbar-group-right"&gt;
+
+    &lt;div class="p-toolbar-group-end"&gt;
         &lt;p-button icon="pi pi-search"&gt;&lt;/p-button&gt;
         &lt;p-button icon="pi pi-calendar" styleClass="p-button-success"&gt;&lt;/p-button&gt;
         &lt;p-button icon="pi pi-times" styleClass="p-button-danger"&gt;&lt;/p-button&gt;
     &lt;/div&gt;
 &lt;/p-toolbar&gt;
 </app-code>
-            
+
             <h5>Properties</h5>
             <div class="doc-tablewrapper">
                 <table class="doc-table">
@@ -99,12 +99,16 @@ <h5>Styling</h5>
                             <td>Main container element.</td>
                         </tr>
                         <tr>
-                            <td>p-toolbar-group-left</td>
-                            <td>Left content container.</td>
+                            <td>p-toolbar-group-start</td>
+                            <td>Start content container.</td>
                         </tr>
                         <tr>
-                            <td>p-toolbar-group-right</td>
-                            <td>Right content container.</td>
+                            <td>p-toolbar-group-center</td>
+                            <td>Center content container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toolbar-group-end</td>
+                            <td>End content container.</td>
                         </tr>
                     </tbody>
                 </table>
@@ -121,11 +125,15 @@ <h5>Templates</h5>
                         </thead>
                         <tbody>
                             <tr>
-                                <td>right</td>
+                                <td>start</td>
+                                <td>-</td>
+                            </tr>
+                            <tr>
+                                <td>center</td>
                                 <td>-</td>
                             </tr>
                             <tr>
-                                <td>left</td>
+                                <td>end</td>
                                 <td>-</td>
                             </tr>
                         </tbody>
@@ -145,16 +153,16 @@ <h5>Dependencies</h5>
             </a>
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-toolbar&gt;
-    &lt;div class="p-toolbar-group-left"&gt;
+    &lt;div class="p-toolbar-group-start"&gt;
         &lt;p-button label="New" icon="pi pi-plus" class="mr-2"&gt;&lt;/p-button&gt;
         &lt;p-button label="Upload" icon="pi pi-upload" styleClass="p-button-success"&gt;&lt;/p-button&gt;
-            
+
         &lt;i class="p-toolbar-separator pi pi-bars mr-2" style="vertical-align: middle"&gt;&lt;/i&gt;
-        
+
         &lt;p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="p-button-warning"&gt;&lt;/p-splitButton&gt;
     &lt;/div&gt;
-    
-    &lt;div class="p-toolbar-group-right"&gt;
+
+    &lt;div class="p-toolbar-group-end"&gt;
         &lt;p-button icon="pi pi-search" class="mr-2"&gt;&lt;/p-button&gt;
         &lt;p-button icon="pi pi-calendar" styleClass="p-button-success mr-2"&gt;&lt;/p-button&gt;
         &lt;p-button icon="pi pi-times" styleClass="p-button-danger"&gt;&lt;/p-button&gt;
@@ -194,4 +202,4 @@ <h5>Dependencies</h5>
             </ng-template>
         </p-tabPanel>
     </p-tabView>
-</div>
+</div>
diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
@@ -4370,6 +4370,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #383838;
   padding: 1rem;
   border-radius: 3px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
@@ -4370,6 +4370,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #383838;
   padding: 1rem;
   border-radius: 3px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
@@ -4370,6 +4370,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #383838;
   padding: 1rem;
   border-radius: 3px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
@@ -4370,6 +4370,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #383838;
   padding: 1rem;
   border-radius: 3px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
@@ -4382,6 +4382,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #3f4b5b;
   padding: 1rem 1.25rem;
   border-radius: 4px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
@@ -4382,6 +4382,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #3f4b5b;
   padding: 1rem 1.25rem;
   border-radius: 4px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css
@@ -4382,6 +4382,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #dee2e6;
   padding: 1rem 1.25rem;
   border-radius: 4px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css
@@ -4382,6 +4382,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #dee2e6;
   padding: 1rem 1.25rem;
   border-radius: 4px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css
@@ -4346,6 +4346,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #a19f9d;
   padding: 1rem;
   border-radius: 2px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css
@@ -4346,6 +4346,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #0b213f;
   padding: 1.25rem;
   border-radius: 6px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css
@@ -4346,6 +4346,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #0b213f;
   padding: 1.25rem;
   border-radius: 6px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css
@@ -4346,6 +4346,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #0b213f;
   padding: 1.25rem;
   border-radius: 6px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css
@@ -4346,6 +4346,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #0b213f;
   padding: 1.25rem;
   border-radius: 6px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css
@@ -4346,6 +4346,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #dee2e6;
   padding: 1.25rem;
   border-radius: 6px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css
@@ -4346,6 +4346,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #dee2e6;
   padding: 1.25rem;
   border-radius: 6px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css
@@ -4346,6 +4346,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #dee2e6;
   padding: 1.25rem;
   border-radius: 6px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css
@@ -4346,6 +4346,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #dee2e6;
   padding: 1.25rem;
   border-radius: 6px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css
@@ -4358,6 +4358,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #191919;
   padding: 0.857rem 1rem;
   border-radius: 3px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css
@@ -4358,6 +4358,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #191919;
   padding: 0.857rem 1rem;
   border-radius: 3px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css
@@ -4358,6 +4358,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #191919;
   padding: 0.857rem 1rem;
   border-radius: 3px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css
@@ -4358,6 +4358,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #191919;
   padding: 0.857rem 1rem;
   border-radius: 3px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css
@@ -4394,6 +4394,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid rgba(255, 255, 255, 0.12);
   padding: 1rem;
   border-radius: 4px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css
@@ -4394,6 +4394,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid rgba(255, 255, 255, 0.12);
   padding: 1rem;
   border-radius: 4px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css
@@ -4394,6 +4394,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #e0e0e0;
   padding: 1rem;
   border-radius: 4px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;

diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css
@@ -4394,6 +4394,7 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border: 1px solid #e0e0e0;
   padding: 1rem;
   border-radius: 4px;
+  gap: 0.5rem;
 }
 .p-toolbar .p-toolbar-separator {
   margin: 0 0.5rem;