+ html: `
-
ProgressSpinner can be customized with styling property like styleClass, strokeWidth and fill.
+
+ html: `
@@ -69,6 +75,22 @@ export class ProgressBar {
* @group Props
*/
@Input() color: string | undefined;
+
+ @ContentChildren(PrimeTemplate) templates: QueryList | undefined;
+
+ contentTemplate: TemplateRef | undefined;
+
+ ngAfterContentInit() {
+ this.templates?.forEach((item) => {
+ switch (item.getType()) {
+ case 'content':
+ this.contentTemplate = item.template;
+ break;
+ default:
+ this.contentTemplate = item.template;
+ }
+ });
+ }
}
@NgModule({
diff --git a/src/app/showcase/doc/progressbar/progressbardoc.module.ts b/src/app/showcase/doc/progressbar/progressbardoc.module.ts
index 66afa7efaae..151de7c64f2 100644
--- a/src/app/showcase/doc/progressbar/progressbardoc.module.ts
+++ b/src/app/showcase/doc/progressbar/progressbardoc.module.ts
@@ -10,11 +10,12 @@ import { BasicDoc } from './basicdoc';
import { DynamicDoc } from './dynamicdoc';
import { ImportDoc } from './importdoc';
import { IndeterminateDoc } from './indeterminatedoc';
+import { TemplateDoc } from './templatedoc';
import { StyleDoc } from './styledoc';
@NgModule({
imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, ProgressBarModule, ToastModule],
- declarations: [BasicDoc, DynamicDoc, ImportDoc, IndeterminateDoc, StyleDoc, AccessibilityDoc],
+ declarations: [BasicDoc, DynamicDoc, ImportDoc, IndeterminateDoc, TemplateDoc, StyleDoc, AccessibilityDoc],
exports: [AppDocModule]
})
export class ProgressBarDocModule {}
diff --git a/src/app/showcase/doc/progressbar/templatedoc.ts b/src/app/showcase/doc/progressbar/templatedoc.ts
new file mode 100644
index 00000000000..05892758b54
--- /dev/null
+++ b/src/app/showcase/doc/progressbar/templatedoc.ts
@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { Code } from '../../domain/code';
+
+@Component({
+ selector: 'template-doc',
+ template: `
+
+
+
+
+ {{value}}/100
+
+ `,
+ html: `
content template allows displaying custom content inside the progressbar.
+
+
+
+ {{value}}/100
+
+
+
+
+
+
+ {{value}}/100
+
+
+
`,
+ typescript: `
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'progress-bar-template-demo',
+ templateUrl: './progress-bar-template-demo.html'
+})
+export class ProgressBarTemplateDemo {}`
+ };
+}
diff --git a/src/app/showcase/pages/progressbar/progressbardemo.ts b/src/app/showcase/pages/progressbar/progressbardemo.ts
index bd96f9247d8..25a06212856 100755
--- a/src/app/showcase/pages/progressbar/progressbardemo.ts
+++ b/src/app/showcase/pages/progressbar/progressbardemo.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
import { BasicDoc } from '../../doc/progressbar/basicdoc';
import { StyleDoc } from '../../doc/progressbar/styledoc';
import { ImportDoc } from '../../doc/progressbar/importdoc';
+import { TemplateDoc } from '../../doc/progressbar/templatedoc';
import { IndeterminateDoc } from '../../doc/progressbar/indeterminatedoc';
import { DynamicDoc } from '../../doc/progressbar/dynamicdoc';
import { AccessibilityDoc } from '../../doc/progressbar/accessibilitydoc';
@@ -31,6 +32,11 @@ export class ProgressBarDemo {
label: 'Indeterminate',
component: IndeterminateDoc
},
+ {
+ id: 'template',
+ label: 'Template',
+ component: TemplateDoc
+ },
{
id: 'style',
label: 'Style',
From c9615837a09901d472c3ee0e2784486072e3c9fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
<92744169+mehmetcetin01140@users.noreply.github.com>
Date: Mon, 4 Dec 2023 12:17:22 +0300
Subject: [PATCH 003/137] skeleton update completed
---
src/app/showcase/doc/skeleton/shapesdoc.ts | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/src/app/showcase/doc/skeleton/shapesdoc.ts b/src/app/showcase/doc/skeleton/shapesdoc.ts
index 39e8aeb0abb..6bbf89aaccc 100644
--- a/src/app/showcase/doc/skeleton/shapesdoc.ts
+++ b/src/app/showcase/doc/skeleton/shapesdoc.ts
@@ -8,7 +8,7 @@ import { Code } from '../../domain/code';
Various shapes and sizes can be created using styling properties like shape, width, height, borderRadius and styleClass.
-
+
Rectangle
+
Rounded
+
Square
+
Circle
-
+
Rectangle
+
Rounded
+
Square
+
-
Circle
Scroll down the page to display the ScrollTo component.
- +Setting the target property to parent binds ScrollTop to its parent element that has scrolling content.
+
-
+ P
+ PRIME
`,
- html: `
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur From 755b51c20b1cef564b85e0da5d0982cd8f10f1d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Mon, 4 Dec 2023 12:52:51 +0300 Subject: [PATCH 005/137] chip update completed --- src/app/showcase/doc/chip/templatedoc.ts | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/app/showcase/doc/chip/templatedoc.ts b/src/app/showcase/doc/chip/templatedoc.ts index 02840522078..67aefb7084f 100644 --- a/src/app/showcase/doc/chip/templatedoc.ts +++ b/src/app/showcase/doc/chip/templatedoc.ts @@ -8,8 +8,9 @@ import { Code } from '../../domain/code';
Content can easily be customized with the dynamic content instead of using the built-in modes.
-
-
+ P
+ PRIME
Content
+ Content
+ basic: `
-
-
-
@@ -231,7 +231,7 @@ export class TieredMenuSub {
@ViewChild('sublist', { static: true }) sublistViewChild: ElementRef;
constructor(public el: ElementRef, public renderer: Renderer2, private cd: ChangeDetectorRef, @Inject(forwardRef(() => TieredMenu)) public tieredMenu: TieredMenu) {}
-
+
positionSubmenu() {
let sublist = this.sublistViewChild && this.sublistViewChild.nativeElement;
diff --git a/src/app/showcase/doc/tieredmenu/basicdoc.ts b/src/app/showcase/doc/tieredmenu/basicdoc.ts
index 44826d6b5c1..96f85ceb918 100644
--- a/src/app/showcase/doc/tieredmenu/basicdoc.ts
+++ b/src/app/showcase/doc/tieredmenu/basicdoc.ts
@@ -21,136 +21,78 @@ export class BasicDoc implements OnInit {
this.items = [
{
label: 'File',
- icon: 'pi pi-fw pi-file',
+ icon: 'pi pi-file',
items: [
{
label: 'New',
- icon: 'pi pi-fw pi-plus',
+ icon: 'pi pi-plus',
items: [
{
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
+ label: 'Document',
+ icon: 'pi pi-file'
+ },
+ {
+ label: 'Image',
+ icon: 'pi pi-image'
},
{
label: 'Video',
- icon: 'pi pi-fw pi-video'
+ icon: 'pi pi-video'
}
]
},
{
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
+ label: 'Open',
+ icon: 'pi pi-folder-open'
},
{
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
+ label: 'Print',
+ icon: 'pi pi-print'
}
]
},
{
label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
+ icon: 'pi pi-file-edit',
items: [
{
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
+ label: 'Copy',
+ icon: 'pi pi-copy'
},
{
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
+ label: 'Delete',
+ icon: 'pi pi-times'
}
]
},
{
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus'
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
- }
- ]
+ label: 'Search',
+ icon: 'pi pi-search'
},
{
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
+ separator: true
+ },
+ {
+ label: 'Share',
+ icon: 'pi pi-share-alt',
items: [
{
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
+ label: 'Slack',
+ icon: 'pi pi-slack'
},
{
- label: 'Archieve',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
+ label: 'Whatsapp',
+ icon: 'pi pi-whatsapp'
}
]
- },
- {
- separator: true
- },
- {
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
}
- ];
+ ]
}
code: Code = {
basic: `Content
+ html: `
+
+ P
+ PRIME
`,
typescript: `
From 07116e01c4b1b7e158874067f39053e4f41dc20f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
<92744169+mehmetcetin01140@users.noreply.github.com>
Date: Mon, 4 Dec 2023 17:02:08 +0300
Subject: [PATCH 006/137] tieredmenu update completed
---
src/app/components/tieredmenu/tieredmenu.ts | 4 +-
src/app/showcase/doc/tieredmenu/basicdoc.ts | 237 +++++------------
src/app/showcase/doc/tieredmenu/commanddoc.ts | 155 +++++++++++
src/app/showcase/doc/tieredmenu/popupdoc.ts | 243 +++++-------------
.../showcase/doc/tieredmenu/templatedoc.ts | 233 +++++++++++++++++
.../doc/tieredmenu/tieredmenudoc.module.ts | 12 +-
.../pages/tieredmenu/tieredmenudemo.ts | 12 +
7 files changed, 536 insertions(+), 360 deletions(-)
create mode 100644 src/app/showcase/doc/tieredmenu/commanddoc.ts
create mode 100644 src/app/showcase/doc/tieredmenu/templatedoc.ts
diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts
index 597ede0ee9c..217227a7337 100755
--- a/src/app/components/tieredmenu/tieredmenu.ts
+++ b/src/app/components/tieredmenu/tieredmenu.ts
@@ -164,7 +164,7 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
+ html: `
+
+
The command property defines the callback to run when an item is activated by click or a key event.
+
+
+
+
`,
+
+ typescript: `
+import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { MessageService } from 'primeng/api';
+
+@Component({
+ selector: 'tiered-menu-command-demo',
+ templateUrl: './tiered-menu-command-demo.html'
+})
+export class TieredMenuCommandDemo implements OnInit {
+ constructor(private messageService: MessageService) {}
+ items: MenuItem[] | undefined;
+
+ ngOnInit() {
+ this.items = [
+ {
+ label: 'File',
+ icon: 'pi pi-file',
+ items: [
+ {
+ label: 'New',
+ icon: 'pi pi-plus',
+ command: () => {
+ this.messageService.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+ }
+ },
+ {
+ label: 'Print',
+ icon: 'pi pi-print',
+ command: () => {
+ this.messageService.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+ }
+ }
+ ]
+ },
+ {
+ label: 'Search',
+ icon: 'pi pi-search',
+ command: () => {
+ this.messageService.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+ }
+ },
+ {
+ separator: true
+ },
+ {
+ label: 'Sync',
+ icon: 'pi pi-cloud',
+ items: [
+ {
+ label: 'Import',
+ icon: 'pi pi-cloud-download',
+ command: () => {
+ this.messageService.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+ }
+ },
+ {
+ label: 'Export',
+ icon: 'pi pi-cloud-upload',
+ command: () => {
+ this.messageService.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+ }
+ }
+ ]
+ }
+ ];
+ }
+}`
+ };
+}
diff --git a/src/app/showcase/doc/tieredmenu/popupdoc.ts b/src/app/showcase/doc/tieredmenu/popupdoc.ts
index 037a6c456b0..2b988d5b11f 100644
--- a/src/app/showcase/doc/tieredmenu/popupdoc.ts
+++ b/src/app/showcase/doc/tieredmenu/popupdoc.ts
@@ -9,7 +9,7 @@ import { Code } from '../../domain/code';
Popup mode is enabled by adding popup property and calling toggle method with an event of the target.
-
+
-
+ html: `
+
+
+
+
+
+ {{ item.label }}
+
+ `,
+
+ html: `
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+ `,
+
+ html: `
+
`,
@@ -172,129 +114,72 @@ export class TieredMenuPopupDemo implements OnInit {
this.items = [
{
label: 'File',
- icon: 'pi pi-fw pi-file',
+ icon: 'pi pi-file',
items: [
{
label: 'New',
- icon: 'pi pi-fw pi-plus',
+ icon: 'pi pi-plus',
items: [
{
- label: 'Bookmark',
- icon: 'pi pi-fw pi-bookmark'
+ label: 'Document',
+ icon: 'pi pi-file'
+ },
+ {
+ label: 'Image',
+ icon: 'pi pi-image'
},
{
label: 'Video',
- icon: 'pi pi-fw pi-video'
+ icon: 'pi pi-video'
}
]
},
{
- label: 'Delete',
- icon: 'pi pi-fw pi-trash'
- },
- {
- separator: true
+ label: 'Open',
+ icon: 'pi pi-folder-open'
},
{
- label: 'Export',
- icon: 'pi pi-fw pi-external-link'
+ label: 'Print',
+ icon: 'pi pi-print'
}
]
},
{
label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
+ icon: 'pi pi-file-edit',
items: [
{
- label: 'Left',
- icon: 'pi pi-fw pi-align-left'
+ label: 'Copy',
+ icon: 'pi pi-copy'
},
{
- label: 'Right',
- icon: 'pi pi-fw pi-align-right'
- },
- {
- label: 'Center',
- icon: 'pi pi-fw pi-align-center'
- },
- {
- label: 'Justify',
- icon: 'pi pi-fw pi-align-justify'
+ label: 'Delete',
+ icon: 'pi pi-times'
}
]
},
{
- label: 'Users',
- icon: 'pi pi-fw pi-user',
- items: [
- {
- label: 'New',
- icon: 'pi pi-fw pi-user-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-user-minus'
- },
- {
- label: 'Search',
- icon: 'pi pi-fw pi-users',
- items: [
- {
- label: 'Filter',
- icon: 'pi pi-fw pi-filter',
- items: [
- {
- label: 'Print',
- icon: 'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon: 'pi pi-fw pi-bars',
- label: 'List'
- }
- ]
- }
- ]
+ label: 'Search',
+ icon: 'pi pi-search'
},
{
- label: 'Events',
- icon: 'pi pi-fw pi-calendar',
+ separator: true
+ },
+ {
+ label: 'Share',
+ icon: 'pi pi-share-alt',
items: [
{
- label: 'Edit',
- icon: 'pi pi-fw pi-pencil',
- items: [
- {
- label: 'Save',
- icon: 'pi pi-fw pi-calendar-plus'
- },
- {
- label: 'Delete',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
+ label: 'Slack',
+ icon: 'pi pi-slack'
},
{
- label: 'Archieve',
- icon: 'pi pi-fw pi-calendar-times',
- items: [
- {
- label: 'Remove',
- icon: 'pi pi-fw pi-calendar-minus'
- }
- ]
+ label: 'Whatsapp',
+ icon: 'pi pi-whatsapp'
}
]
- },
- {
- separator: true
- },
- {
- label: 'Quit',
- icon: 'pi pi-fw pi-power-off'
}
- ];
+ ]
}
}`
};
diff --git a/src/app/showcase/doc/tieredmenu/templatedoc.ts b/src/app/showcase/doc/tieredmenu/templatedoc.ts
new file mode 100644
index 00000000000..b56f3500321
--- /dev/null
+++ b/src/app/showcase/doc/tieredmenu/templatedoc.ts
@@ -0,0 +1,233 @@
+import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { Code } from '../../domain/code';
+
+@Component({
+ selector: 'template-doc',
+ template: `
+ TieredMenu offers item customization with the item template that receives the menuitem instance from the model as a parameter.
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
`,
+
+ typescript: `
+import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+ selector: 'tiered-menu-template-demo',
+ templateUrl: './tiered-menu-template-demo.html'
+})
+export class TieredMenuTemplateDemo implements OnInit {
+ items: MenuItem[] | undefined;
+
+ ngOnInit() {
+ this.items = [
+ {
+ label: 'File',
+ icon: 'pi pi-file',
+ items: [
+ {
+ label: 'New',
+ icon: 'pi pi-plus',
+ items: [
+ {
+ label: 'Document',
+ icon: 'pi pi-file',
+ shortcut: '⌘+N'
+ },
+ {
+ label: 'Image',
+ icon: 'pi pi-image',
+ shortcut: '⌘+I'
+ },
+ {
+ label: 'Video',
+ icon: 'pi pi-video',
+ shortcut: '⌘+L'
+ }
+ ]
+ },
+ {
+ label: 'Open',
+ icon: 'pi pi-folder-open',
+ shortcut: '⌘+O'
+ },
+ {
+ label: 'Print',
+ icon: 'pi pi-print',
+ shortcut: '⌘+P'
+ }
+ ]
+ },
+ {
+ label: 'Edit',
+ icon: 'pi pi-file-edit',
+ items: [
+ {
+ label: 'Copy',
+ icon: 'pi pi-copy',
+ shortcut: '⌘+C'
+ },
+ {
+ label: 'Delete',
+ icon: 'pi pi-times',
+ shortcut: '⌘+D'
+ }
+ ]
+ },
+ {
+ label: 'Search',
+ icon: 'pi pi-search',
+ shortcut: '⌘+S'
+ },
+ {
+ separator: true
+ },
+ {
+ label: 'Share',
+ icon: 'pi pi-share-alt',
+ items: [
+ {
+ label: 'Slack',
+ icon: 'pi pi-slack',
+ badge: '2'
+ },
+ {
+ label: 'Whatsapp',
+ icon: 'pi pi-whatsapp',
+ badge: '3'
+ }
+ ]
+ }
+ ]
+ }
+}`
+ };
+}
diff --git a/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts b/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts
index fd9322cfc53..40ce69475fa 100644
--- a/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts
+++ b/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts
@@ -5,15 +5,21 @@ import { TieredMenuModule } from 'primeng/tieredmenu';
import { ButtonModule } from 'primeng/button';
import { AppDocModule } from '../../layout/doc/app.doc.module';
import { AppCodeModule } from '../../layout/doc/app.code.component';
+import { BadgeModule } from 'primeng/badge';
+import { ToastModule } from 'primeng/toast';
import { BasicDoc } from './basicdoc';
import { ImportDoc } from './importdoc';
import { PopupDoc } from './popupdoc';
+import { TemplateDoc } from './templatedoc';
+import { CommandDoc } from './commanddoc';
import { StyleDoc } from './styledoc';
import { AccessibilityDoc } from './accessibilitydoc';
+import { MessageService } from 'primeng/api';
@NgModule({
- imports: [CommonModule, AppCodeModule, RouterModule, TieredMenuModule, ButtonModule, AppDocModule],
- declarations: [BasicDoc, ImportDoc, PopupDoc, StyleDoc, AccessibilityDoc],
- exports: [AppDocModule]
+ imports: [CommonModule, AppCodeModule, RouterModule, TieredMenuModule, ButtonModule, AppDocModule, BadgeModule, ToastModule],
+ declarations: [BasicDoc, ImportDoc, PopupDoc, StyleDoc, AccessibilityDoc, TemplateDoc,CommandDoc],
+ exports: [AppDocModule],
+ providers:[MessageService]
})
export class TieredMenuDocModule {}
diff --git a/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts b/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts
index d48ff2bfa0b..0ece2fcba6d 100755
--- a/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts
+++ b/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts
@@ -2,6 +2,8 @@ import { Component } from '@angular/core';
import { BasicDoc } from '../../doc/tieredmenu/basicdoc';
import { ImportDoc } from '../../doc/tieredmenu/importdoc';
import { PopupDoc } from '../../doc/tieredmenu/popupdoc';
+import { TemplateDoc } from '../../doc/tieredmenu/templatedoc';
+import { CommandDoc } from '../../doc/tieredmenu/commanddoc';
import { StyleDoc } from '../../doc/tieredmenu/styledoc';
import { AccessibilityDoc } from '../../doc/tieredmenu/accessibilitydoc';
@@ -25,6 +27,16 @@ export class TieredMenuDemo {
label: 'Popup',
component: PopupDoc
},
+ {
+ id: 'template',
+ label: 'Template',
+ component: TemplateDoc
+ },
+ {
+ id: 'command',
+ label: 'Command',
+ component: CommandDoc
+ },
{
id: 'style',
label: 'Style',
From aaf7e22eaf514ee23b85d46287513d0992dd8645 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
<92744169+mehmetcetin01140@users.noreply.github.com>
Date: Mon, 4 Dec 2023 20:51:38 +0300
Subject: [PATCH 007/137] tieredmenu | routerdoc added
---
src/app/showcase/doc/tieredmenu/routerdoc.ts | 198 ++++++++++++++++++
.../doc/tieredmenu/tieredmenudoc.module.ts | 3 +-
.../pages/tieredmenu/tieredmenudemo.ts | 6 +
3 files changed, 206 insertions(+), 1 deletion(-)
create mode 100644 src/app/showcase/doc/tieredmenu/routerdoc.ts
diff --git a/src/app/showcase/doc/tieredmenu/routerdoc.ts b/src/app/showcase/doc/tieredmenu/routerdoc.ts
new file mode 100644
index 00000000000..009dcd6235f
--- /dev/null
+++ b/src/app/showcase/doc/tieredmenu/routerdoc.ts
@@ -0,0 +1,198 @@
+import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { Code } from '../../domain/code';
+import { Router } from '@angular/router';
+
+@Component({
+ selector: 'router-doc',
+ template: `
+ Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+
`,
+
+ typescript: `
+import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { Router } from '@angular/router';
+
+@Component({
+ selector: 'tiered-menu-router-demo',
+ templateUrl: './tiered-menu-router-demo.html'
+})
+export class TieredMenuRouterDemo implements OnInit {
+ constructor(private router: Router) {}
+ items: MenuItem[] | undefined;
+
+ ngOnInit() {
+ this.items = [
+ {
+ label: 'Router',
+ icon: 'pi pi-palette',
+ items: [
+ {
+ label: 'Styled',
+ route: '/theming'
+ },
+ {
+ label: 'Unstyled',
+ route: '/unstyled'
+ }
+ ]
+ },
+ {
+ label: 'Programmatic',
+ icon: 'pi pi-link',
+ command: () => {
+ this.router.navigate(['/installation']);
+ }
+ },
+ {
+ label: 'External',
+ icon: 'pi pi-home',
+ items: [
+ {
+ label: 'Vue.js',
+ url: 'https://vuejs.org/'
+ },
+ {
+ label: 'Vite.js',
+ url: 'https://vuejs.org/'
+ }
+ ]
+ }
+ ];
+ }
+}`
+ };
+}
diff --git a/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts b/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts
index 40ce69475fa..5f7244575a6 100644
--- a/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts
+++ b/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts
@@ -12,13 +12,14 @@ import { ImportDoc } from './importdoc';
import { PopupDoc } from './popupdoc';
import { TemplateDoc } from './templatedoc';
import { CommandDoc } from './commanddoc';
+import { RouterDoc } from './routerdoc';
import { StyleDoc } from './styledoc';
import { AccessibilityDoc } from './accessibilitydoc';
import { MessageService } from 'primeng/api';
@NgModule({
imports: [CommonModule, AppCodeModule, RouterModule, TieredMenuModule, ButtonModule, AppDocModule, BadgeModule, ToastModule],
- declarations: [BasicDoc, ImportDoc, PopupDoc, StyleDoc, AccessibilityDoc, TemplateDoc,CommandDoc],
+ declarations: [BasicDoc, ImportDoc, PopupDoc, StyleDoc, AccessibilityDoc, TemplateDoc, CommandDoc, RouterDoc],
exports: [AppDocModule],
providers:[MessageService]
})
diff --git a/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts b/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts
index 0ece2fcba6d..761e54f9a7e 100755
--- a/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts
+++ b/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts
@@ -4,6 +4,7 @@ import { ImportDoc } from '../../doc/tieredmenu/importdoc';
import { PopupDoc } from '../../doc/tieredmenu/popupdoc';
import { TemplateDoc } from '../../doc/tieredmenu/templatedoc';
import { CommandDoc } from '../../doc/tieredmenu/commanddoc';
+import { RouterDoc } from '../../doc/tieredmenu/routerdoc';
import { StyleDoc } from '../../doc/tieredmenu/styledoc';
import { AccessibilityDoc } from '../../doc/tieredmenu/accessibilitydoc';
@@ -37,6 +38,11 @@ export class TieredMenuDemo {
label: 'Command',
component: CommandDoc
},
+ {
+ id: 'router',
+ label: 'Router',
+ component: RouterDoc
+ },
{
id: 'style',
label: 'Style',
From 1609781c7deaee55ac6110e4562f77480299f6d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
<92744169+mehmetcetin01140@users.noreply.github.com>
Date: Tue, 5 Dec 2023 08:53:19 +0300
Subject: [PATCH 008/137] routerdoc links updated
---
src/app/showcase/doc/tieredmenu/routerdoc.ts | 13 +++++++------
1 file changed, 7 insertions(+), 6 deletions(-)
diff --git a/src/app/showcase/doc/tieredmenu/routerdoc.ts b/src/app/showcase/doc/tieredmenu/routerdoc.ts
index 009dcd6235f..d77534d0c9e 100644
--- a/src/app/showcase/doc/tieredmenu/routerdoc.ts
+++ b/src/app/showcase/doc/tieredmenu/routerdoc.ts
@@ -72,12 +72,12 @@ export class RouterDoc implements OnInit {
icon: 'pi pi-home',
items: [
{
- label: 'Vue.js',
- url: 'https://vuejs.org/'
+ label: 'Angular',
+ url: 'https://angular.dev/'
},
{
label: 'Vite.js',
- url: 'https://vuejs.org/'
+ url: 'https://vitejs.dev/'
}
]
}
@@ -182,17 +182,18 @@ export class TieredMenuRouterDemo implements OnInit {
icon: 'pi pi-home',
items: [
{
- label: 'Vue.js',
- url: 'https://vuejs.org/'
+ label: 'Angular',
+ url: 'https://angular.dev/'
},
{
label: 'Vite.js',
- url: 'https://vuejs.org/'
+ url: 'https://vitejs.dev/'
}
]
}
];
}
+
}`
};
}
From 769d13cce898f208ba629dbc60f95d205f109679 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
<92744169+mehmetcetin01140@users.noreply.github.com>
Date: Tue, 5 Dec 2023 10:11:19 +0300
Subject: [PATCH 009/137] delay | template doc updated
---
src/app/showcase/doc/tooltip/delaydoc.ts | 9 +++--
src/app/showcase/doc/tooltip/templatedoc.ts | 39 +++++++++------------
2 files changed, 21 insertions(+), 27 deletions(-)
diff --git a/src/app/showcase/doc/tooltip/delaydoc.ts b/src/app/showcase/doc/tooltip/delaydoc.ts
index 7a9ef2efba3..2b9b3d3741f 100644
--- a/src/app/showcase/doc/tooltip/delaydoc.ts
+++ b/src/app/showcase/doc/tooltip/delaydoc.ts
@@ -8,18 +8,17 @@ import { Code } from '../../domain/code';
Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively.
-
+
-
+ html: `
+
`,
typescript: `
diff --git a/src/app/showcase/doc/tooltip/templatedoc.ts b/src/app/showcase/doc/tooltip/templatedoc.ts
index 570f25e8c4c..060fab41f1c 100644
--- a/src/app/showcase/doc/tooltip/templatedoc.ts
+++ b/src/app/showcase/doc/tooltip/templatedoc.ts
@@ -8,7 +8,7 @@ import { Code } from '../../domain/code';
Tooltip can use either a string or a TemplateRef.
-
+
@@ -21,27 +21,22 @@ import { Code } from '../../domain/code';
})
export class TemplateDoc {
code: Code = {
- basic: `
+ basic: `
+
+ `,
-
- `,
-
- html: `
-
-
-
- `
+ html: `;
+ /**
+ * Headless template.
+ */
+ headless(): TemplateRef;
}
diff --git a/src/app/components/sidebar/sidebar.ts b/src/app/components/sidebar/sidebar.ts
index fb7581f8d27..09909cdb092 100755
--- a/src/app/components/sidebar/sidebar.ts
+++ b/src/app/components/sidebar/sidebar.ts
@@ -59,6 +59,10 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
[attr.aria-modal]="modal"
(keydown)="onKeyDown($event)"
>
+
+
+
+
`,
animations: [trigger('panelState', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])],
@@ -252,6 +257,8 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy {
closeIconTemplate: Nullable>;
+ headlessTemplate: Nullable>;
+
constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
ngAfterViewInit() {
@@ -273,6 +280,9 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy {
case 'closeicon':
this.closeIconTemplate = item.template;
break;
+ case 'headless':
+ this.headlessTemplate = item.template;
+ break;
default:
this.contentTemplate = item.template;
diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json
index 493cc824031..51587652a77 100644
--- a/src/app/showcase/doc/apidoc/index.json
+++ b/src/app/showcase/doc/apidoc/index.json
@@ -19867,6 +19867,12 @@
"name": "closeicon",
"parameters": [],
"description": "Custom template of closeicon."
+ },
+ {
+ "parent": "sidebar",
+ "name": "headless",
+ "parameters": [],
+ "description": "Headless template."
}
]
}
diff --git a/src/app/showcase/doc/sidebar/headlessdoc.ts b/src/app/showcase/doc/sidebar/headlessdoc.ts
new file mode 100644
index 00000000000..4c5008f54d1
--- /dev/null
+++ b/src/app/showcase/doc/sidebar/headlessdoc.ts
@@ -0,0 +1,579 @@
+import { Component, ViewChild } from '@angular/core';
+import { Code } from '../../domain/code';
+import { Sidebar } from 'primeng/sidebar';
+
+@Component({
+ selector: 'headless-doc',
+ template: `
+
+
+
+
+
+
+
-
@@ -21,27 +21,22 @@ import { Code } from '../../domain/code';
})
export class TemplateDoc {
code: Code = {
- basic: `
+ basic: `
+
+
+ PrimeNG rocks!
+
+
+ PrimeNG rocks!
+
-
-
- PrimeNG rocks!
-
-
-
-
- PrimeNG rocks!
-
-
-
-
- PrimeNG rocks!
-
-
-
-
- PrimeNG rocks!
-
-
+
+
+
+
`
};
}
From 3aad5dfa614983ce0fc02acfa4357f6efc4af288 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
<92744169+mehmetcetin01140@users.noreply.github.com>
Date: Tue, 5 Dec 2023 14:26:53 +0300
Subject: [PATCH 010/137] sidebar headless and stackblitz update
---
.../components/sidebar/sidebar.interface.ts | 4 +
src/app/components/sidebar/sidebar.ts | 10 +
src/app/showcase/doc/apidoc/index.json | 6 +
src/app/showcase/doc/sidebar/headlessdoc.ts | 579 ++++++++++++++++++
.../showcase/doc/sidebar/sidebardoc.module.ts | 8 +-
.../layout/doc/codeeditor/templates.ts | 8 +-
src/app/showcase/pages/sidebar/sidebardemo.ts | 6 +
7 files changed, 617 insertions(+), 4 deletions(-)
create mode 100644 src/app/showcase/doc/sidebar/headlessdoc.ts
diff --git a/src/app/components/sidebar/sidebar.interface.ts b/src/app/components/sidebar/sidebar.interface.ts
index cf80b5838ec..16c6f705405 100644
--- a/src/app/components/sidebar/sidebar.interface.ts
+++ b/src/app/components/sidebar/sidebar.interface.ts
@@ -21,4 +21,8 @@ export interface SidebarTemplates {
* Custom template of closeicon.
*/
closeicon(): TemplateRef
+
+ PrimeNG rocks!
+
+
+ PrimeNG rocks!
+ Headless mode allows you to customize the entire user interface instead of the default elements.
+
+
+
+
+
+
+
+
+
+
+
+ Your Logo
+
+
+
+
+
+ -
+
-
+ + FAVORITES + ++
-
+
- + + + Dashboard + + +
- + + + Bookmarks + + +
- + + + Reports + + + + +
- + + + Team + + +
- + + + Messages + 3 + + +
- + + + Calendar + + +
- + + + Settings + + +
+
-
+
-
+ + APPLICATION + ++
-
+
- + + + Projects + + +
- + + + Performance + + +
- + + + Settings + + +
+
+
+ +
+ + +
+
+
+
+
+ Your Logo
+
+
+
+
+
+ -
+
-
+ + FAVORITES + ++
-
+
- + + + Dashboard + + +
- + + + Bookmarks + + +
- + + + Reports + + + + +
- + + + Team + + +
- + + + Messages + 3 + + +
- + + + Calendar + + +
- + + + Settings + + +
+
-
+
-
+ + APPLICATION + ++
-
+
- + + + Projects + + +
- + + + Performance + + +
- + + + Settings + + +
+
+
+ +
+ + +
+
+
+
+
+
`,
+
+ typescript: `
+import { Component, ViewChild } from '@angular/core';
+import { Sidebar } from 'primeng/sidebar';
+
+@Component({
+ selector: 'sidebar-headless-demo',
+ templateUrl: './sidebar-headless-demo.html'
+})
+export class SidebarHeadlessDemo {
+ @ViewChild('sidebarRef') sidebarRef!: Sidebar;
+
+ closeCallback(e): void {
+ this.sidebarRef.close(e);
+ }
+
+ sidebarVisible: boolean = false;
+}`
+ };
+}
diff --git a/src/app/showcase/doc/sidebar/sidebardoc.module.ts b/src/app/showcase/doc/sidebar/sidebardoc.module.ts
index 73615db508a..13709333737 100644
--- a/src/app/showcase/doc/sidebar/sidebardoc.module.ts
+++ b/src/app/showcase/doc/sidebar/sidebardoc.module.ts
@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { SidebarModule } from 'primeng/sidebar';
import { ButtonModule } from 'primeng/button';
+import { AvatarModule } from 'primeng/avatar';
import { AppDocModule } from '../../layout/doc/app.doc.module';
import { AppCodeModule } from '../../layout/doc/app.code.component';
import { BasicDoc } from './basicdoc';
@@ -13,11 +14,14 @@ import { StyleDoc } from './styledoc';
import { PositionDoc } from './positiondoc';
import { FullScreenDoc } from './fullscreendoc';
import { SizeDoc } from './sizedoc';
+import { HeadlessDoc } from './headlessdoc';
import { AccessibilityDoc } from './accessibilitydoc';
+import { RippleModule } from 'primeng/ripple';
+import { StyleClassModule } from 'primeng/styleclass';
@NgModule({
- imports: [CommonModule, FormsModule, AppCodeModule, RouterModule, SidebarModule, ButtonModule, AppDocModule],
- declarations: [BasicDoc, TemplateDoc, ImportDoc, StyleDoc, PositionDoc, FullScreenDoc, SizeDoc, AccessibilityDoc],
+ imports: [CommonModule, FormsModule, AppCodeModule, RouterModule, SidebarModule, ButtonModule, AppDocModule, AvatarModule, RippleModule, StyleClassModule],
+ declarations: [BasicDoc, TemplateDoc, ImportDoc, StyleDoc, PositionDoc, FullScreenDoc, SizeDoc, AccessibilityDoc, HeadlessDoc],
exports: [AppDocModule]
})
export class SidebarDocModule {}
diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts
index 057e1fe5914..181f01ecce1 100644
--- a/src/app/showcase/layout/doc/codeeditor/templates.ts
+++ b/src/app/showcase/layout/doc/codeeditor/templates.ts
@@ -489,7 +489,6 @@ const getAngularApp = (props: Props = {}) => {
const serviceImports = code.service ? getServiceImports(code.service) : '';
const routerModule = code.routerModule ? code.routerModule : `RouterModule.forRoot([{ path: '', component: ${componentName} }])`;
const declarations = routeFiles && routeFiles.length ? (componentName ? routeFiles.map((r) => r.name).join(', ') + ',' + componentName : routeFiles.map((r) => r.name).join(', ')) : `${componentName}`;
- const providers = code.service && code.service.length ? code.service.map((s) => s).join(', ') : '';
const app_module_ts = `import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@@ -588,6 +587,9 @@ import { AnimateModule } from 'primeng/animate';
import { CardModule } from 'primeng/card';
import { BlockUIModule } from 'primeng/blockui';
import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { RippleModule } from 'primeng/ripple';
+import { StyleClassModule } from 'primeng/styleclass';
+import { MessageService } from 'primeng/api';
${serviceImports}
@NgModule({
@@ -685,10 +687,12 @@ ${serviceImports}
TreeTableModule,
AnimateModule,
CardModule,
+ RippleModule,
+ StyleClassModule,
${routerModule}],
declarations: [ ${declarations} ],
bootstrap: [ ${componentName} ],
- providers: [ ${providers} ]
+ providers: [ MessageService ]
})
export class AppModule {}`;
diff --git a/src/app/showcase/pages/sidebar/sidebardemo.ts b/src/app/showcase/pages/sidebar/sidebardemo.ts
index ddac8cf0df2..bbd60da4963 100755
--- a/src/app/showcase/pages/sidebar/sidebardemo.ts
+++ b/src/app/showcase/pages/sidebar/sidebardemo.ts
@@ -6,6 +6,7 @@ import { StyleDoc } from '../../doc/sidebar/styledoc';
import { PositionDoc } from '../../doc/sidebar/positiondoc';
import { FullScreenDoc } from '../../doc/sidebar/fullscreendoc';
import { SizeDoc } from '../../doc/sidebar/sizedoc';
+import { HeadlessDoc } from '../../doc/sidebar/headlessdoc';
import { AccessibilityDoc } from '../../doc/sidebar/accessibilitydoc';
@Component({
@@ -43,6 +44,11 @@ export class SidebarDemo {
label: 'Template',
component: TemplateDoc
},
+ {
+ id: 'headless',
+ label: 'Headless',
+ component: HeadlessDoc
+ },
{
id: 'style',
label: 'Style',
From ffa098c61b499116e22c8707cd04f4f5725ae910 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
<92744169+mehmetcetin01140@users.noreply.github.com>
Date: Tue, 5 Dec 2023 15:10:42 +0300
Subject: [PATCH 011/137] toast templatedoc update completed
---
src/app/showcase/doc/toast/templatedoc.ts | 81 +++++++------------
src/app/showcase/doc/toast/toastdoc.module.ts | 3 +-
2 files changed, 32 insertions(+), 52 deletions(-)
diff --git a/src/app/showcase/doc/toast/templatedoc.ts b/src/app/showcase/doc/toast/templatedoc.ts
index a1709657158..2212035a779 100644
--- a/src/app/showcase/doc/toast/templatedoc.ts
+++ b/src/app/showcase/doc/toast/templatedoc.ts
@@ -11,20 +11,13 @@ import { Code } from '../../domain/code';
+
+
+
+
+ Your Logo
+
+
+
+
+
+ -
+
-
+ + FAVORITES + ++
-
+
- + + + Dashboard + + +
- + + + Bookmarks + + +
- + + + Reports + + + + +
- + + + Team + + +
- + + + Messages + 3 + + +
- + + + Calendar + + +
- + + + Settings + + +
+
-
+
-
+ + APPLICATION + ++
-
+
- + + + Projects + + +
- + + + Performance + + +
- + + + Settings + + +
+
+
+ +
+ + +
-
-
-
- {{ message.summary }}
-{{ message.detail }}
-
-
-
-
-
-
-
-
-
+
+
@@ -35,13 +28,14 @@ import { Code } from '../../domain/code';
providers: [MessageService]
})
export class TemplateDoc {
- visible: boolean = false;
constructor(private messageService: MessageService) {}
+ visible: boolean = false;
+
showConfirm() {
if (!this.visible) {
- this.messageService.add({ key: 'confirm', sticky: true, severity: 'warn', summary: 'Are you sure?', detail: 'Confirm to proceed' });
+ this.messageService.add({ key: 'confirm', sticky: true, severity: 'success', summary: 'Can you send me the report?' });
this.visible = true;
}
}
@@ -57,48 +51,33 @@ export class TemplateDoc {
}
code: Code = {
- basic: `
+
+ {{ message.summary }}
+
-
-
-
- {{message.summary}}
-{{message.detail}}
-
-
-
-
+
+
`,
- html: `
-
-
-
-
-
+ basic: `
+
+
-
+
-
+
+ {{ message.summary }}
+
-
+ html: `
+
- | undefined;
+ @Input() headlessTemplate: TemplateRef | undefined;
+
@Input() showTransformOptions: string | undefined;
@Input() hideTransformOptions: string | undefined;
@@ -140,7 +147,7 @@ export class ToastItem implements AfterViewInit, OnDestroy {
timeout: any;
- constructor(private zone: NgZone,private config: PrimeNGConfig) {}
+ constructor(private zone: NgZone, private config: PrimeNGConfig) {}
ngAfterViewInit() {
this.initTimeout();
@@ -192,8 +199,6 @@ export class ToastItem implements AfterViewInit, OnDestroy {
ngOnDestroy() {
this.clearTimeout();
}
-
-
}
/**
@@ -211,6 +216,7 @@ export class ToastItem implements AfterViewInit, OnDestroy {
[life]="life"
(onClose)="onMessageClose($event)"
[template]="template"
+ [headlessTemplate]="headlessTemplate"
@toastAnimation
(@toastAnimation.start)="onAnimationStart($event)"
(@toastAnimation.done)="onAnimationEnd($event)"
@@ -330,6 +336,8 @@ export class Toast implements OnInit, AfterContentInit, OnDestroy {
template: TemplateRef | undefined;
+ headlessTemplate: TemplateRef | undefined;
+
_position: ToastPositionType = 'top-right';
constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, public messageService: MessageService, private cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
@@ -411,6 +419,9 @@ export class Toast implements OnInit, AfterContentInit, OnDestroy {
case 'message':
this.template = item.template;
break;
+ case 'headless':
+ this.headlessTemplate = item.template;
+ break;
default:
this.template = item.template;
diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json
index 51587652a77..34140e896c5 100644
--- a/src/app/showcase/doc/apidoc/index.json
+++ b/src/app/showcase/doc/apidoc/index.json
@@ -23858,6 +23858,17 @@
}
],
"description": "Custom template of message."
+ },
+ {
+ "parent": "toast",
+ "name": "headless",
+ "parameters": [
+ {
+ "name": "context",
+ "type": "{\n \t $implicit: any, // Data of the message.\n }"
+ }
+ ],
+ "description": "Headless template."
}
]
}
diff --git a/src/app/showcase/doc/toast/headlessdoc.ts b/src/app/showcase/doc/toast/headlessdoc.ts
new file mode 100644
index 00000000000..61acf9769d9
--- /dev/null
+++ b/src/app/showcase/doc/toast/headlessdoc.ts
@@ -0,0 +1,176 @@
+import { ChangeDetectorRef, Component } from '@angular/core';
+import { MessageService } from 'primeng/api';
+import { Code } from '../../domain/code';
+
+@Component({
+ selector: 'headless-doc',
+ template: `
+
+
+
+
+
+
+
+
+
+`,
+ html: `
@@ -57,16 +57,18 @@ interface TableRowSelectEvent {
providers: [MessageService]
})
export class DataTableDoc implements OnInit {
+
+ constructor(private productService: ProductService, private messageService: MessageService, private cdr: ChangeDetectorRef) {}
+
products: Product[] | undefined;
selectedProduct: Product | undefined;
- constructor(private productService: ProductService, private messageService: MessageService) {}
-
ngOnInit() {
this.productService.getProductsSmall().then((products) => {
this.products = products;
this.selectedProduct = products[0];
+ this.cdr.markForCheck()
});
}
@@ -77,18 +79,18 @@ export class DataTableDoc implements OnInit {
code: Code = {
basic: `
+
@@ -100,53 +102,52 @@ export class DataTableDoc implements OnInit {
- {{product.name}}
- 
{{product.price}}
+ {{ product.name }}
+ {{ product.price }}
`,
- html: `
->;
+ headlessTemplate: Nullable>;
+
_visible: boolean = false;
maskVisible: boolean | undefined;
@@ -544,6 +552,10 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
this.minimizeIconTemplate = item.template;
break;
+ case 'headless':
+ this.headlessTemplate = item.template;
+ break;
+
default:
this.contentTemplate = item.template;
break;
diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json
index 34140e896c5..2b28272ee76 100644
--- a/src/app/showcase/doc/apidoc/index.json
+++ b/src/app/showcase/doc/apidoc/index.json
@@ -9059,6 +9059,12 @@
"name": "minimizeicon",
"parameters": [],
"description": "Custom template of minimizeicon."
+ },
+ {
+ "parent": "dialog",
+ "name": "headless",
+ "parameters": [],
+ "description": "Headless template."
}
]
}
diff --git a/src/app/showcase/doc/dialog/dialogdoc.module.ts b/src/app/showcase/doc/dialog/dialogdoc.module.ts
index 43452ac5c57..27931806869 100644
--- a/src/app/showcase/doc/dialog/dialogdoc.module.ts
+++ b/src/app/showcase/doc/dialog/dialogdoc.module.ts
@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms';
import { DialogModule } from 'primeng/dialog';
import { ButtonModule } from 'primeng/button';
import { DropdownModule } from 'primeng/dropdown';
+import { InputTextModule } from 'primeng/inputtext';
import { AppDocModule } from '../../layout/doc/app.doc.module';
import { AppCodeModule } from '../../layout/doc/app.code.component';
import { BasicDoc } from './basicdoc';
@@ -17,11 +18,11 @@ import { MaximizableDoc } from './maximizabledoc';
import { TemplateDoc } from './templatedoc';
import { OverlaysInsideDoc } from './overlaysinsidedoc';
import { ModalDoc } from './modaldoc';
+import { HeadlessDoc } from './headlessdoc';
import { AccessibilityDoc } from './accessibilitydoc';
-
@NgModule({
- imports: [CommonModule, AppCodeModule, RouterModule, FormsModule, DialogModule, ButtonModule, DropdownModule, AppDocModule],
- declarations: [BasicDoc, ImportDoc, StyleDoc, LongContentDoc, ResponsiveDoc, PositionDoc, MaximizableDoc, TemplateDoc, OverlaysInsideDoc, ModalDoc, AccessibilityDoc],
+ imports: [CommonModule, AppCodeModule, RouterModule, FormsModule, DialogModule, ButtonModule, DropdownModule, AppDocModule, InputTextModule],
+ declarations: [BasicDoc, ImportDoc, StyleDoc, LongContentDoc, ResponsiveDoc, PositionDoc, MaximizableDoc, TemplateDoc, OverlaysInsideDoc, ModalDoc, AccessibilityDoc, HeadlessDoc],
exports: [AppDocModule]
})
export class DialogDocModule {}
diff --git a/src/app/showcase/doc/dialog/headlessdoc.ts b/src/app/showcase/doc/dialog/headlessdoc.ts
new file mode 100644
index 00000000000..58342dfd127
--- /dev/null
+++ b/src/app/showcase/doc/dialog/headlessdoc.ts
@@ -0,0 +1,137 @@
+import { Component } from '@angular/core';
+import { Code } from '../../domain/code';
+
+@Component({
+ selector: 'dialog-headless-demo',
+ template: `
+
+
+
+
+
+ `,
+
+ html: `
+
-
+
+
+
+
`,
animations: [
@@ -126,6 +131,8 @@ export class ToastItem implements AfterViewInit, OnDestroy {
@Input() template: TemplateRef
-
-
- {{message.summary}}
-{{message.detail}}
-
-
`,
typescript: `
import { Component } from '@angular/core';
@@ -116,7 +95,7 @@ export class ToastTemplateDemo {
showConfirm() {
if (!this.visible) {
- this.messageService.add({ key: 'confirm', sticky: true, severity: 'warn', summary: 'Are you sure?', detail: 'Confirm to proceed' });
+ this.messageService.add({ key: 'confirm', sticky: true, severity: 'success', summary: 'Can you send me the report?' });
this.visible = true;
}
}
diff --git a/src/app/showcase/doc/toast/toastdoc.module.ts b/src/app/showcase/doc/toast/toastdoc.module.ts
index d18878d5676..beb927ddf62 100644
--- a/src/app/showcase/doc/toast/toastdoc.module.ts
+++ b/src/app/showcase/doc/toast/toastdoc.module.ts
@@ -6,6 +6,7 @@ import { RippleModule } from 'primeng/ripple';
import { ToastModule } from 'primeng/toast';
import { AppDocModule } from '../../layout/doc/app.doc.module';
import { AppCodeModule } from '../../layout/doc/app.code.component';
+import { AvatarModule } from 'primeng/avatar';
import { ImportDoc } from './importdoc';
import { AnimationDoc } from './animationdoc';
import { BasicDoc } from './basicdoc';
@@ -22,7 +23,7 @@ import { ClearDoc } from './cleardoc';
import { AccessibilityDoc } from './accessibilitydoc';
@NgModule({
- imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, ToastModule, ButtonModule, RippleModule],
+ imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, ToastModule, ButtonModule, RippleModule, AvatarModule],
declarations: [AnimationDoc, BasicDoc, ImportDoc, MultipleDoc, PositionDoc, ResponsiveDoc, SeverityDoc, LifeDoc, StickyDoc, StyleDoc, TargetDoc, TemplateDoc, ClearDoc, AccessibilityDoc],
exports: [AppDocModule]
})
From 2e65ed1fda414f237181639fcc429473d32022c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
<92744169+mehmetcetin01140@users.noreply.github.com>
Date: Tue, 5 Dec 2023 17:27:59 +0300
Subject: [PATCH 012/137] toast | template and headless doc completed
---
src/app/components/toast/toast.interface.ts | 9 +
src/app/components/toast/toast.ts | 79 ++++----
src/app/showcase/doc/apidoc/index.json | 11 ++
src/app/showcase/doc/toast/headlessdoc.ts | 176 ++++++++++++++++++
src/app/showcase/doc/toast/toastdoc.module.ts | 6 +-
src/app/showcase/pages/toast/toastdemo.ts | 6 +
6 files changed, 251 insertions(+), 36 deletions(-)
create mode 100644 src/app/showcase/doc/toast/headlessdoc.ts
diff --git a/src/app/components/toast/toast.interface.ts b/src/app/components/toast/toast.interface.ts
index b73f8ebebe0..6879543c9ac 100644
--- a/src/app/components/toast/toast.interface.ts
+++ b/src/app/components/toast/toast.interface.ts
@@ -15,6 +15,15 @@ export interface ToastTemplates {
*/
$implicit: any;
}): TemplateRef<{ $implicit: any }>;
+ /**
+ * Headless template.
+ */
+ headless(context: {
+ /**
+ * Data of the message.
+ */
+ $implicit: any;
+ }): TemplateRef<{ $implicit: any }>;
}
/**
diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts
index 7cc2dc1d57d..f939d0177b4 100755
--- a/src/app/components/toast/toast.ts
+++ b/src/app/components/toast/toast.ts
@@ -50,37 +50,42 @@ import { ToastCloseEvent, ToastItemCloseEvent, ToastPositionType } from './toast
[attr.data-pc-name]="'toast'"
[attr.data-pc-section]="'root'"
>
-
+
-
-
-
-
-
+
+
-
+
+
+ {{ message.summary }}
+ Headless mode allows you to customize the entire user interface instead of the default elements.
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ message.summary }}
+{{ message.detail }}
+
+
+
+
+
+
+ {{ message.summary }}
+{{ message.detail }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`,
+ typescript: `
+import { ChangeDetectorRef, Component } from '@angular/core';
+import { MessageService } from 'primeng/api';
+
+@Component({
+ selector: 'toast-headless-demo',
+ templateUrl: './toast-headless-demo.html',
+ providers: [MessageService]
+})
+export class ToastHeadlessDemo {
+ constructor(private messageService: MessageService,private cdr:ChangeDetectorRef) {}
+
+ visible: boolean = false;
+
+ progress: number = 0;
+
+ interval = null;
+
+ showConfirm() {
+ if (!this.visible) {
+ this.messageService.add({ key: 'confirm', sticky: true, severity: 'custom', summary: 'Uploading your files.' });
+ this.visible = true;
+ this.progress = 0;
+
+ if (this.interval) {
+ clearInterval(this.interval);
+ }
+
+ this.interval = setInterval(() => {
+ if (this.progress <= 100) {
+ this.progress = this.progress + 20;
+ }
+
+ if (this.progress >= 100) {
+ this.progress = 100;
+ clearInterval(this.interval);
+ }
+ this.cdr.detectChanges()
+ }, 1000);
+ }
+ }
+
+ onConfirm() {
+ this.messageService.clear('confirm');
+ this.visible = false;
+ }
+
+ onReject() {
+ this.messageService.clear('confirm');
+ this.visible = false;
+ }
+}`
+ };
+}
diff --git a/src/app/showcase/doc/toast/toastdoc.module.ts b/src/app/showcase/doc/toast/toastdoc.module.ts
index beb927ddf62..fe2b1cc974f 100644
--- a/src/app/showcase/doc/toast/toastdoc.module.ts
+++ b/src/app/showcase/doc/toast/toastdoc.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ButtonModule } from 'primeng/button';
import { RippleModule } from 'primeng/ripple';
+import { ProgressBarModule } from 'primeng/progressbar';
import { ToastModule } from 'primeng/toast';
import { AppDocModule } from '../../layout/doc/app.doc.module';
import { AppCodeModule } from '../../layout/doc/app.code.component';
@@ -20,11 +21,12 @@ import { StyleDoc } from './styledoc';
import { TargetDoc } from './targetdoc';
import { TemplateDoc } from './templatedoc';
import { ClearDoc } from './cleardoc';
+import { HeadlessDoc } from './headlessdoc';
import { AccessibilityDoc } from './accessibilitydoc';
@NgModule({
- imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, ToastModule, ButtonModule, RippleModule, AvatarModule],
- declarations: [AnimationDoc, BasicDoc, ImportDoc, MultipleDoc, PositionDoc, ResponsiveDoc, SeverityDoc, LifeDoc, StickyDoc, StyleDoc, TargetDoc, TemplateDoc, ClearDoc, AccessibilityDoc],
+ imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, ToastModule, ButtonModule, RippleModule, AvatarModule, ProgressBarModule],
+ declarations: [AnimationDoc, BasicDoc, ImportDoc, MultipleDoc, PositionDoc, ResponsiveDoc, SeverityDoc, LifeDoc, StickyDoc, StyleDoc, TargetDoc, TemplateDoc, ClearDoc, HeadlessDoc, AccessibilityDoc],
exports: [AppDocModule]
})
export class ToastDocModule {}
diff --git a/src/app/showcase/pages/toast/toastdemo.ts b/src/app/showcase/pages/toast/toastdemo.ts
index 8b91eae600d..2a5ddda7fbd 100755
--- a/src/app/showcase/pages/toast/toastdemo.ts
+++ b/src/app/showcase/pages/toast/toastdemo.ts
@@ -13,6 +13,7 @@ import { StickyDoc } from '../../doc/toast/stickydoc';
import { StyleDoc } from '../../doc/toast/styledoc';
import { TargetDoc } from '../../doc/toast/targetdoc';
import { TemplateDoc } from '../../doc/toast/templatedoc';
+import { HeadlessDoc } from '../../doc/toast/headlessdoc';
@Component({
templateUrl: './toastdemo.html'
@@ -69,6 +70,11 @@ export class ToastDemo {
label: 'Templating',
component: TemplateDoc
},
+ {
+ id: 'headless',
+ label: 'Headless',
+ component: HeadlessDoc
+ },
{
id: 'responsive',
label: 'Responsive',
From 9b2058716340b29b6d4ecd21ec54db662844d9d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
<92744169+mehmetcetin01140@users.noreply.github.com>
Date: Wed, 6 Dec 2023 10:38:21 +0300
Subject: [PATCH 013/137] datatable doc update completed
---
.../showcase/doc/overlaypanel/datatabledoc.ts | 101 +++++++++---------
1 file changed, 52 insertions(+), 49 deletions(-)
diff --git a/src/app/showcase/doc/overlaypanel/datatabledoc.ts b/src/app/showcase/doc/overlaypanel/datatabledoc.ts
index 3958bb4fcab..15716f8c89f 100644
--- a/src/app/showcase/doc/overlaypanel/datatabledoc.ts
+++ b/src/app/showcase/doc/overlaypanel/datatabledoc.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { MessageService } from 'primeng/api';
import { OverlayPanel } from 'primeng/overlaypanel';
import { Code } from '../../domain/code';
@@ -20,7 +20,7 @@ interface TableRowSelectEvent {
+
+ {{ message.summary }}
+{{ message.detail }}
+
+
+
+
+
@@ -57,16 +57,18 @@ interface TableRowSelectEvent {
providers: [MessageService]
})
export class DataTableDoc implements OnInit {
+
+ constructor(private productService: ProductService, private messageService: MessageService, private cdr: ChangeDetectorRef) {}
+
products: Product[] | undefined;
selectedProduct: Product | undefined;
- constructor(private productService: ProductService, private messageService: MessageService) {}
-
ngOnInit() {
this.productService.getProductsSmall().then((products) => {
this.products = products;
this.selectedProduct = products[0];
+ this.cdr.markForCheck()
});
}
@@ -77,18 +79,18 @@ export class DataTableDoc implements OnInit {
code: Code = {
basic: `
- {{selectedProduct.name}}
- {{'$' + selectedProduct.price}}
+ {{ selectedProduct.name }}
+ {{ '$' + selectedProduct.price }}
- {{selectedProduct.category}}
+ {{ selectedProduct.category }}
-
`,
@@ -455,6 +461,8 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
minimizeIconTemplate: Nullable
-
+
+
+
-
-
-
-
- {{selectedProduct.name}}
- {{'$' + selectedProduct.price}}
-
- {{selectedProduct.category}}
+ html: `
+
+
+
+
+
+ Name
+ Image
+ Price
+
+
+
+
+ {{ product.name }}
+ {{ product.price }}
+
+
+
+
+
`,
typescript: `
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { MessageService } from 'primeng/api';
import { OverlayPanel } from 'primeng/overlaypanel';
import { Product } from '../../domain/product';
@@ -162,19 +163,21 @@ interface TableRowSelectEvent {
@Component({
selector: 'overlay-panel-data-table-demo',
templateUrl: './overlay-panel-data-table-demo.html',
- providers: [ MessageService ]
+ providers: [ MessageService, ProductService ]
})
export class OverlayPanelDataTableDemo implements OnInit {
+
+ constructor(private productService: ProductService, private messageService: MessageService, private cdr: ChangeDetectorRef) {}
+
products: Product[] | undefined;
selectedProduct: Product | undefined;
- constructor(private productService: ProductService, private messageService: MessageService) {}
-
ngOnInit() {
this.productService.getProductsSmall().then((products) => {
this.products = products;
this.selectedProduct = products[0];
+ this.cdr.markForCheck()
});
}
From e43ef5a6e12f6bcd4ae667f93431e5ca5817c2ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
<92744169+mehmetcetin01140@users.noreply.github.com>
Date: Wed, 6 Dec 2023 12:23:11 +0300
Subject: [PATCH 014/137] dialog | headless mode added
---
src/app/components/dialog/dialog.ts | 12 ++
src/app/showcase/doc/apidoc/index.json | 6 +
.../showcase/doc/dialog/dialogdoc.module.ts | 7 +-
src/app/showcase/doc/dialog/headlessdoc.ts | 137 ++++++++++++++++++
src/app/showcase/pages/dialog/dialogdemo.ts | 6 +
5 files changed, 165 insertions(+), 3 deletions(-)
create mode 100644 src/app/showcase/doc/dialog/headlessdoc.ts
diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts
index 40bfc366306..1c65bb52b59 100755
--- a/src/app/components/dialog/dialog.ts
+++ b/src/app/components/dialog/dialog.ts
@@ -77,6 +77,11 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
[attr.aria-labelledby]="ariaLabelledBy"
[attr.aria-modal]="true"
>
+
+
-
-
-
-
- Name
- Image
- Price
-
-
-
-
- {{product.name}}
- {{product.price}}
-
-
-
-
-
+
+
+
-
+ {{ selectedProduct.name }}
+ {{ '$' + selectedProduct.price }}
+
+ {{ selectedProduct.category }}
+
{{ header }}
@@ -126,6 +131,7 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
+ Headless mode allows you to customize the entire user interface instead of the default elements.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`,
+
+ typescript: `
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'dialog-headless-demo',
+ templateUrl: './dialog-headless-demo.html'
+})
+export class DialogHeadlessDemo {
+ visible: boolean = false;
+
+ showDialog() {
+ this.visible = true;
+ }
+
+ closeDialog() {
+ this.visible = false;
+ }
+}`
+ };
+}
diff --git a/src/app/showcase/pages/dialog/dialogdemo.ts b/src/app/showcase/pages/dialog/dialogdemo.ts
index f58dd0a9759..87606347c2d 100755
--- a/src/app/showcase/pages/dialog/dialogdemo.ts
+++ b/src/app/showcase/pages/dialog/dialogdemo.ts
@@ -9,6 +9,7 @@ import { MaximizableDoc } from '../../doc/dialog/maximizabledoc';
import { TemplateDoc } from '../../doc/dialog/templatedoc';
import { OverlaysInsideDoc } from '../../doc/dialog/overlaysinsidedoc';
import { ModalDoc } from '../../doc/dialog/modaldoc';
+import { HeadlessDoc } from '../../doc/dialog/headlessdoc';
import { AccessibilityDoc } from '../../doc/dialog/accessibilitydoc';
@Component({
@@ -61,6 +62,11 @@ export class DialogDemo {
label: 'Overlays Inside',
component: OverlaysInsideDoc
},
+ {
+ id: 'headless',
+ label: 'Headless',
+ component: HeadlessDoc
+ },
{
id: 'style',
label: 'Style',
From 925d3098f89540908265ec0e9b75fcda18b4ef7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
<92744169+mehmetcetin01140@users.noreply.github.com>
Date: Wed, 6 Dec 2023 12:42:33 +0300
Subject: [PATCH 015/137] dialog mask style added
---
src/app/components/dialog/dialog.ts | 6 ++++++
src/app/showcase/doc/apidoc/index.json | 7 +++++++
src/app/showcase/doc/dialog/headlessdoc.ts | 2 +-
3 files changed, 14 insertions(+), 1 deletion(-)
diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts
index 1c65bb52b59..e52570660c6 100755
--- a/src/app/components/dialog/dialog.ts
+++ b/src/app/components/dialog/dialog.ts
@@ -48,6 +48,7 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
+
+
+
+
+
+
+
+
+
+
+
+
+