From b972b937b0da31834170b8c5bc26e938454c9db3 Mon Sep 17 00:00:00 2001
From: andreaslampe <70583111+anlampe@users.noreply.github.com>
Date: Thu, 5 Oct 2023 15:08:16 +0200
Subject: [PATCH 1/2] Toolbar: Accept documented template names #13814

---
 src/app/components/toolbar/toolbar.ts         |   2 +
 src/app/showcase/doc/toolbar/templatedoc.ts   | 134 ++++++++++++++++++
 .../showcase/doc/toolbar/toolbardoc.module.ts |   3 +-
 src/app/showcase/pages/toolbar/toolbardemo.ts |   6 +
 4 files changed, 144 insertions(+), 1 deletion(-)
 create mode 100644 src/app/showcase/doc/toolbar/templatedoc.ts

diff --git a/src/app/components/toolbar/toolbar.ts b/src/app/components/toolbar/toolbar.ts
index 89f9f858f19..ff0c96f43d4 100755
--- a/src/app/components/toolbar/toolbar.ts
+++ b/src/app/components/toolbar/toolbar.ts
@@ -62,10 +62,12 @@ export class Toolbar implements AfterContentInit, BlockableUI {
     ngAfterContentInit() {
         (this.templates as QueryList<PrimeTemplate>).forEach((item) => {
             switch (item.getType()) {
+                case 'start':
                 case 'left':
                     this.startTemplate = item.template;
                     break;
 
+                case 'end':
                 case 'right':
                     this.endTemplate = item.template;
                     break;
diff --git a/src/app/showcase/doc/toolbar/templatedoc.ts b/src/app/showcase/doc/toolbar/templatedoc.ts
new file mode 100644
index 00000000000..360ddb5eeb0
--- /dev/null
+++ b/src/app/showcase/doc/toolbar/templatedoc.ts
@@ -0,0 +1,134 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'template-doc',
+    template: ` <section class="py-3">
+        <app-docsectiontext [title]="title" [id]="id"></app-docsectiontext>
+        <div class="card">
+            <p-toolbar>
+                <ng-template pTemplate="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>
+                </ng-template>
+                <ng-template pTemplate="center">
+                    <span class="text-primary font-semibold text-xl">Center</span>
+                </ng-template>
+                <ng-template pTemplate="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>
+                </ng-template>
+            </p-toolbar>
+        </div>
+        <app-code [code]="code" selector="toolbar-template-demo"></app-code>
+    </section>`
+})
+export class TemplateDoc implements OnInit {
+    @Input() id: string;
+
+    @Input() title: string;
+
+    items: MenuItem[] | undefined;
+
+    ngOnInit() {
+        this.items = [
+            {
+                label: 'Update',
+                icon: 'pi pi-refresh'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-times'
+            },
+            {
+                label: 'Angular',
+                icon: 'pi pi-external-link',
+                url: 'http://angular.io'
+            },
+            {
+                label: 'Router',
+                icon: 'pi pi-upload',
+                routerLink: '/fileupload'
+            }
+        ];
+    }
+
+    code: Code = {
+        basic: `
+<p-toolbar>
+    <ng-template pTemplate="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>
+    </ng-template>
+    <ng-template pTemplate="center">
+        <span class="text-primary font-semibold text-xl">Center</span>
+    </ng-template>
+    <ng-template pTemplate="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>
+    </ng-template>
+</p-toolbar>`,
+
+        html: `
+<ng-template class="card">
+    <p-toolbar>
+        <ng-template pTemplate="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>
+        </ng-template>
+        <ng-template pTemplate="center">
+            <span class="text-primary font-semibold text-xl">Center</span>
+        </ng-template>
+        <ng-template pTemplate="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>
+        </ng-template>
+    </p-toolbar>
+</div>`,
+
+        typescript: `
+import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+    selector: 'toolbar-template-demo',
+    templateUrl: './toolbar-template-demo.html'
+})
+export class ToolbarTemplateDemo implements OnInit {
+    items: MenuItem[] | undefined;
+
+    ngOnInit() {
+        this.items = [
+            {
+                label: 'Update',
+                icon: 'pi pi-refresh'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-times'
+            },
+            {
+                label: 'Angular',
+                icon: 'pi pi-external-link',
+                url: 'http://angular.io'
+            },
+            {
+                label: 'Router',
+                icon: 'pi pi-upload',
+                routerLink: '/fileupload'
+            }
+        ];
+    }
+}`
+    };
+}
diff --git a/src/app/showcase/doc/toolbar/toolbardoc.module.ts b/src/app/showcase/doc/toolbar/toolbardoc.module.ts
index 371ae5556ca..8b6f8f014d1 100644
--- a/src/app/showcase/doc/toolbar/toolbardoc.module.ts
+++ b/src/app/showcase/doc/toolbar/toolbardoc.module.ts
@@ -10,10 +10,11 @@ import { AccessibilityDoc } from './accessibilitydoc';
 import { BasicDoc } from './basicdoc';
 import { ImportDoc } from './importdoc';
 import { StyleDoc } from './styledoc';
+import {TemplateDoc} from "./templatedoc";
 
 @NgModule({
     imports: [CommonModule, AppCodeModule, AppDocModule, ToolbarModule, RouterModule, ButtonModule, SplitButtonModule],
     exports: [AppDocModule],
-    declarations: [ImportDoc, BasicDoc, StyleDoc, AccessibilityDoc]
+    declarations: [ImportDoc, BasicDoc, TemplateDoc, StyleDoc, AccessibilityDoc]
 })
 export class ToolbarDocModule {}
diff --git a/src/app/showcase/pages/toolbar/toolbardemo.ts b/src/app/showcase/pages/toolbar/toolbardemo.ts
index b2cc8cfa603..1fd22ed9c93 100755
--- a/src/app/showcase/pages/toolbar/toolbardemo.ts
+++ b/src/app/showcase/pages/toolbar/toolbardemo.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { StyleDoc } from '../../doc/toolbar/styledoc';
 import { ImportDoc } from '../../doc/toolbar/importdoc';
 import { BasicDoc } from '../../doc/toolbar/basicdoc';
+import { TemplateDoc } from '../../doc/toolbar/templatedoc';
 import { AccessibilityDoc } from '../../doc/toolbar/accessibilitydoc';
 
 @Component({
@@ -19,6 +20,11 @@ export class ToolbarDemo {
             label: 'Basic',
             component: BasicDoc
         },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
         {
             id: 'style',
             label: 'Style',

From 7f61c400a8054902756c9acf49bab845593b2c21 Mon Sep 17 00:00:00 2001
From: andreaslampe <70583111+anlampe@users.noreply.github.com>
Date: Mon, 9 Oct 2023 09:53:45 +0200
Subject: [PATCH 2/2] Toolbar: Added/changed docs

---
 src/app/showcase/doc/toolbar/basicdoc.ts    | 2 +-
 src/app/showcase/doc/toolbar/templatedoc.ts | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/showcase/doc/toolbar/basicdoc.ts b/src/app/showcase/doc/toolbar/basicdoc.ts
index 02ef2f8d597..fb4b1e8ed2c 100644
--- a/src/app/showcase/doc/toolbar/basicdoc.ts
+++ b/src/app/showcase/doc/toolbar/basicdoc.ts
@@ -6,7 +6,7 @@ import { Code } from '../../domain/code';
     selector: 'basic-doc',
     template: ` <section class="py-3">
         <app-docsectiontext [title]="title" [id]="id">
-            <p>Toolbar provides <i>start</i>, <i>center</i> and <i>end</i> templates to place content at these sections.</p>
+            <p>Toolbar is a grouping component for buttons and other content. Its content can be placed inside the <i>start</i>, <i>center</i> and <i>end</i> sections.</p>
         </app-docsectiontext>
         <div class="card">
             <p-toolbar>
diff --git a/src/app/showcase/doc/toolbar/templatedoc.ts b/src/app/showcase/doc/toolbar/templatedoc.ts
index 360ddb5eeb0..e6ffb235177 100644
--- a/src/app/showcase/doc/toolbar/templatedoc.ts
+++ b/src/app/showcase/doc/toolbar/templatedoc.ts
@@ -5,7 +5,9 @@ import { Code } from '../../domain/code';
 @Component({
     selector: 'template-doc',
     template: ` <section class="py-3">
-        <app-docsectiontext [title]="title" [id]="id"></app-docsectiontext>
+        <app-docsectiontext [title]="title" [id]="id">
+            <p>Content can also be placed using the  <i>start</i>, <i>center</i> and <i>end</i> templates.</p>
+        </app-docsectiontext>
         <div class="card">
             <p-toolbar>
                 <ng-template pTemplate="start">