Fixed #12117 Sidebar | Add footer template

primefaces · Nov 1, 2022 · dc8327f · dc8327f
1 parent 9d6121c
commit dc8327f
Show file tree

Hide file tree

Showing 44 changed files with 891 additions and 857 deletions.
diff --git a/src/app/components/sidebar/sidebar.ts b/src/app/components/sidebar/sidebar.ts
@@ -60,6 +60,9 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
                 <ng-content></ng-content>
                 <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
             </div>
+            <div class="p-sidebar-footer">
+                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+            </div>
         </div>
     `,
     animations: [trigger('panelState', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])],
@@ -127,6 +130,8 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy {
 
     headerTemplate: TemplateRef<any>;
 
+    footerTemplate: TemplateRef<any>;
+
     constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
 
     ngAfterViewInit() {
@@ -142,6 +147,9 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy {
                 case 'header':
                     this.headerTemplate = item.template;
                     break;
+                case 'footer':
+                    this.footerTemplate = item.template;
+                    break;
                 default:
                     this.contentTemplate = item.template;
                     break;

diff --git a/src/app/showcase/components/sidebar/sidebardemo.html b/src/app/showcase/components/sidebar/sidebardemo.html
@@ -86,6 +86,15 @@ <h5>Full Screen</h5>
 &lt;p-sidebar [(visible)]="display" [fullScreen]="true"&gt;
 Content
 &lt;/p-sidebar&gt;
+</app-code>
+
+            <h5>Custom Content</h5>
+<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
+&lt;p-sidebar [(visible)]="display"&gt;
+&emsp; &lt;ng-template pTemplate="header"&gt;Header Content&lt;/ng-template&gt;
+&emsp; &lt;ng-template pTemplate="content"&gt;Body Content&lt;/ng-template&gt;
+&emsp; &lt;ng-template pTemplate="footer"&gt;Footer Content&lt;/ng-template&gt;
+&lt;/p-sidebar&gt;
 </app-code>
 
             <h5>Properties</h5>
@@ -242,6 +251,10 @@ <h5>Templates</h5>
                             <td>content</td>
                             <td>-</td>
                         </tr>
+                        <tr>
+                            <td>footer</td>
+                            <td>-</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>

diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
@@ -243,7 +243,6 @@
 }
 .p-autocomplete .p-autocomplete-multiple-container {
   padding: 0.25rem 0.5rem;
-  gap: 0.5rem;
 }
 .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
   border-color: #64B5F6;
@@ -266,6 +265,7 @@
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
   padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
   background: rgba(100, 181, 246, 0.16);
   color: rgba(255, 255, 255, 0.87);
   border-radius: 3px;
@@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
 
 .p-chips .p-chips-multiple-container {
   padding: 0.25rem 0.5rem;
-  gap: 0.5rem;
 }
 .p-chips .p-chips-multiple-container:not(.p-disabled):hover {
   border-color: #64B5F6;
@@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
 }
 .p-chips .p-chips-multiple-container .p-chips-token {
   padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
   background: rgba(100, 181, 246, 0.16);
   color: rgba(255, 255, 255, 0.87);
   border-radius: 3px;
@@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-multiselect.p-multiselect-chip .p-multiselect-label {
-  gap: 0.5rem;
-}
 .p-multiselect.p-multiselect-chip .p-multiselect-token {
   padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
   background: rgba(100, 181, 246, 0.16);
   color: rgba(255, 255, 255, 0.87);
   border-radius: 3px;
@@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
 .p-sidebar .p-sidebar-content {
   padding: 1rem;
 }
+.p-sidebar .p-sidebar-footer {
+  padding: 1rem;
+}
 
 .p-tooltip .p-tooltip-text {
   background: #383838;

diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
@@ -243,7 +243,6 @@
 }
 .p-autocomplete .p-autocomplete-multiple-container {
   padding: 0.25rem 0.5rem;
-  gap: 0.5rem;
 }
 .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
   border-color: #81C784;
@@ -266,6 +265,7 @@
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
   padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
   background: rgba(129, 199, 132, 0.16);
   color: rgba(255, 255, 255, 0.87);
   border-radius: 3px;
@@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
 
 .p-chips .p-chips-multiple-container {
   padding: 0.25rem 0.5rem;
-  gap: 0.5rem;
 }
 .p-chips .p-chips-multiple-container:not(.p-disabled):hover {
   border-color: #81C784;
@@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
 }
 .p-chips .p-chips-multiple-container .p-chips-token {
   padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
   background: rgba(129, 199, 132, 0.16);
   color: rgba(255, 255, 255, 0.87);
   border-radius: 3px;
@@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-multiselect.p-multiselect-chip .p-multiselect-label {
-  gap: 0.5rem;
-}
 .p-multiselect.p-multiselect-chip .p-multiselect-token {
   padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
   background: rgba(129, 199, 132, 0.16);
   color: rgba(255, 255, 255, 0.87);
   border-radius: 3px;
@@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
 .p-sidebar .p-sidebar-content {
   padding: 1rem;
 }
+.p-sidebar .p-sidebar-footer {
+  padding: 1rem;
+}
 
 .p-tooltip .p-tooltip-text {
   background: #383838;

diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
@@ -243,7 +243,6 @@
 }
 .p-autocomplete .p-autocomplete-multiple-container {
   padding: 0.25rem 0.5rem;
-  gap: 0.5rem;
 }
 .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
   border-color: #FFD54F;
@@ -266,6 +265,7 @@
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
   padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
   border-radius: 3px;
@@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
 
 .p-chips .p-chips-multiple-container {
   padding: 0.25rem 0.5rem;
-  gap: 0.5rem;
 }
 .p-chips .p-chips-multiple-container:not(.p-disabled):hover {
   border-color: #FFD54F;
@@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
 }
 .p-chips .p-chips-multiple-container .p-chips-token {
   padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
   border-radius: 3px;
@@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-multiselect.p-multiselect-chip .p-multiselect-label {
-  gap: 0.5rem;
-}
 .p-multiselect.p-multiselect-chip .p-multiselect-token {
   padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
   border-radius: 3px;
@@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
 .p-sidebar .p-sidebar-content {
   padding: 1rem;
 }
+.p-sidebar .p-sidebar-footer {
+  padding: 1rem;
+}
 
 .p-tooltip .p-tooltip-text {
   background: #383838;

diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
@@ -243,7 +243,6 @@
 }
 .p-autocomplete .p-autocomplete-multiple-container {
   padding: 0.25rem 0.5rem;
-  gap: 0.5rem;
 }
 .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
   border-color: #BA68C8;
@@ -266,6 +265,7 @@
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
   padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);
   border-radius: 3px;
@@ -716,7 +716,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
 
 .p-chips .p-chips-multiple-container {
   padding: 0.25rem 0.5rem;
-  gap: 0.5rem;
 }
 .p-chips .p-chips-multiple-container:not(.p-disabled):hover {
   border-color: #BA68C8;
@@ -729,6 +728,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
 }
 .p-chips .p-chips-multiple-container .p-chips-token {
   padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);
   border-radius: 3px;
@@ -1331,11 +1331,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-multiselect.p-multiselect-chip .p-multiselect-label {
-  gap: 0.5rem;
-}
 .p-multiselect.p-multiselect-chip .p-multiselect-token {
   padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);
   border-radius: 3px;
@@ -4522,6 +4520,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
 .p-sidebar .p-sidebar-content {
   padding: 1rem;
 }
+.p-sidebar .p-sidebar-footer {
+  padding: 1rem;
+}
 
 .p-tooltip .p-tooltip-text {
   background: #383838;

diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
@@ -243,7 +243,6 @@
 }
 .p-autocomplete .p-autocomplete-multiple-container {
   padding: 0.25rem 0.75rem;
-  gap: 0.5rem;
 }
 .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
   border-color: #3f4b5b;
@@ -266,6 +265,7 @@
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
   padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
   background: #8dd0ff;
   color: #151515;
   border-radius: 4px;
@@ -720,7 +720,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
 
 .p-chips .p-chips-multiple-container {
   padding: 0.25rem 0.75rem;
-  gap: 0.5rem;
 }
 .p-chips .p-chips-multiple-container:not(.p-disabled):hover {
   border-color: #3f4b5b;
@@ -733,6 +732,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
 }
 .p-chips .p-chips-multiple-container .p-chips-token {
   padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
   background: #8dd0ff;
   color: #151515;
   border-radius: 4px;
@@ -1335,11 +1335,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-multiselect.p-multiselect-chip .p-multiselect-label {
-  gap: 0.5rem;
-}
 .p-multiselect.p-multiselect-chip .p-multiselect-token {
   padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
   background: #8dd0ff;
   color: #151515;
   border-radius: 4px;
@@ -4534,6 +4532,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
 .p-sidebar .p-sidebar-content {
   padding: 1.25rem;
 }
+.p-sidebar .p-sidebar-footer {
+  padding: 1rem 1.25rem;
+}
 
 .p-tooltip .p-tooltip-text {
   background: #3f4b5b;

diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
@@ -243,7 +243,6 @@
 }
 .p-autocomplete .p-autocomplete-multiple-container {
   padding: 0.25rem 0.75rem;
-  gap: 0.5rem;
 }
 .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
   border-color: #3f4b5b;
@@ -266,6 +265,7 @@
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
   padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
   background: #c298d8;
   color: #151515;
   border-radius: 4px;
@@ -720,7 +720,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
 
 .p-chips .p-chips-multiple-container {
   padding: 0.25rem 0.75rem;
-  gap: 0.5rem;
 }
 .p-chips .p-chips-multiple-container:not(.p-disabled):hover {
   border-color: #3f4b5b;
@@ -733,6 +732,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
 }
 .p-chips .p-chips-multiple-container .p-chips-token {
   padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
   background: #c298d8;
   color: #151515;
   border-radius: 4px;
@@ -1335,11 +1335,9 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
 .p-multiselect .p-multiselect-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-multiselect.p-multiselect-chip .p-multiselect-label {
-  gap: 0.5rem;
-}
 .p-multiselect.p-multiselect-chip .p-multiselect-token {
   padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
   background: #c298d8;
   color: #151515;
   border-radius: 4px;
@@ -4534,6 +4532,9 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
 .p-sidebar .p-sidebar-content {
   padding: 1.25rem;
 }
+.p-sidebar .p-sidebar-footer {
+  padding: 1rem 1.25rem;
+}
 
 .p-tooltip .p-tooltip-text {
   background: #3f4b5b;