-
{{ header }}
-
+
{{ header }}
+
-
-
+
+
-
+
-
+
-
+
-
-
+
+
@@ -118,11 +120,11 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
-
+
-
@@ -133,7 +135,7 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
encapsulation: ViewEncapsulation.None,
providers: [DialogStyle]
})
-export class Dialog extends BaseComponent implements OnInit, OnDestroy {
+export class Dialog extends BaseComponent implements OnInit, AfterContentInit, OnDestroy {
/**
* Title text of the dialog.
* @group Props
@@ -570,6 +572,20 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy {
_componentStyle = inject(DialogStyle);
+ headerT: TemplateRef
| undefined;
+
+ contentT: TemplateRef | undefined;
+
+ footerT: TemplateRef | undefined;
+
+ closeIconT: TemplateRef | undefined;
+
+ maximizeIconT: TemplateRef | undefined;
+
+ minimizeIconT: TemplateRef | undefined;
+
+ headlessT: TemplateRef | undefined;
+
get maximizeLabel(): string {
return this.config.getTranslation(TranslationKeys.ARIA)['maximizeLabel'];
}
@@ -593,6 +609,46 @@ export class Dialog extends BaseComponent implements OnInit, OnDestroy {
}
}
+ @ContentChildren(PrimeTemplate) templates: QueryList | undefined;
+
+ ngAfterContentInit() {
+ this.templates?.forEach((item) => {
+ switch (item.getType()) {
+ case 'header':
+ this.headerT = item.template;
+ break;
+
+ case 'content':
+ this.contentT = item.template;
+ break;
+
+ case 'footer':
+ this.footerT = item.template;
+ break;
+
+ case 'closeicon':
+ this.closeIconT = item.template;
+ break;
+
+ case 'maximizeicon':
+ this.maximizeIconT = item.template;
+ break;
+
+ case 'minimizeicon':
+ this.minimizeIconT = item.template;
+ break;
+
+ case 'headless':
+ this.headlessT = item.template;
+ break;
+
+ default:
+ this.contentT = item.template;
+ break;
+ }
+ });
+ }
+
getAriaLabelledBy() {
return this.header !== null ? uuid('pn_id_') + '_header' : null;
}
diff --git a/packages/primeng/src/divider/divider.ts b/packages/primeng/src/divider/divider.ts
index 2acf31e2aff..fe953f8ab8a 100755
--- a/packages/primeng/src/divider/divider.ts
+++ b/packages/primeng/src/divider/divider.ts
@@ -32,7 +32,6 @@ import { DividerStyle } from './style/dividerstyle';
'[class.p-divider-right]': 'layout === "horizontal" && align === "right"',
'[class.p-divider-top]': 'layout === "vertical" && align === "top"',
'[class.p-divider-bottom]': 'layout === "vertical" && align === "bottom"',
- '[style]': 'inlineStyles',
'[attr.aria-orientation]': 'layout',
'[attr.data-pc-name]': "'divider'",
'[attr.role]': '"separator"',
@@ -66,7 +65,7 @@ export class Divider extends BaseComponent {
* Alignment of the content.
* @group Props
*/
- @Input() align: 'left' | 'center' | 'right' | 'top' | 'center' | 'bottom' | undefined;
+ @Input() align: 'left' | 'center' | 'right' | 'top' | 'bottom' | undefined;
_componentStyle = inject(DividerStyle);
diff --git a/packages/primeng/src/dock/dock.ts b/packages/primeng/src/dock/dock.ts
index d5674d94287..bceef2049cf 100755
--- a/packages/primeng/src/dock/dock.ts
+++ b/packages/primeng/src/dock/dock.ts
@@ -1,8 +1,8 @@
import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, inject, Input, NgModule, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, inject, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { RouterModule } from '@angular/router';
import { find, findSingle, resolve, uuid } from '@primeuix/utils';
-import { MenuItem, SharedModule } from 'primeng/api';
+import { MenuItem, PrimeTemplate, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { Divider } from 'primeng/divider';
import { Ripple } from 'primeng/ripple';
@@ -17,7 +17,7 @@ import { DockStyle } from './style/dockstyle';
@Component({
selector: 'p-dock',
standalone: true,
- imports: [CommonModule, RouterModule, Ripple, TooltipModule, Divider, SharedModule],
+ imports: [CommonModule, RouterModule, Ripple, TooltipModule, SharedModule],
template: `
@@ -71,8 +71,8 @@ import { DockStyle } from './style/dockstyle';
[state]="item.state"
[attr.aria-hidden]="true"
>
-
-
+
+
-
-
+
+
@@ -101,7 +101,7 @@ import { DockStyle } from './style/dockstyle';
encapsulation: ViewEncapsulation.None,
providers: [DockStyle]
})
-export class Dock extends BaseComponent {
+export class Dock extends BaseComponent implements AfterContentInit {
/**
* Current id state as a string.
* @group Props
@@ -178,6 +178,8 @@ export class Dock extends BaseComponent {
@ContentChild('item') itemTemplate: TemplateRef
| undefined;
+ _itemTemplate: TemplateRef | undefined;
+
getItemId(item, index) {
return item && item?.id ? item.id : `${index}`;
}
@@ -225,6 +227,7 @@ export class Dock extends BaseComponent {
this.focusedOptionIndex = -1;
this.onBlur.emit(event);
}
+
onListKeyDown(event) {
switch (event.code) {
case 'ArrowDown': {
@@ -342,6 +345,22 @@ export class Dock extends BaseComponent {
'p-disabled': this.disabled(item)
};
}
+
+ @ContentChildren(PrimeTemplate) templates: QueryList | undefined;
+
+ ngAfterContentInit() {
+ this.templates?.forEach((item) => {
+ switch (item.getType()) {
+ case 'item':
+ this._itemTemplate = item.template;
+ break;
+
+ default:
+ this._itemTemplate = item.template;
+ break;
+ }
+ });
+ }
}
@NgModule({
diff --git a/packages/primeng/src/drawer/drawer.ts b/packages/primeng/src/drawer/drawer.ts
index 44145ac2fa8..16642816308 100755
--- a/packages/primeng/src/drawer/drawer.ts
+++ b/packages/primeng/src/drawer/drawer.ts
@@ -1,8 +1,28 @@
import { animate, animation, style, transition, trigger, useAnimation } from '@angular/animations';
import { CommonModule } from '@angular/common';
-import { AfterViewInit, booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, inject, Input, NgModule, numberAttribute, OnDestroy, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+ AfterContentInit,
+ AfterViewInit,
+ booleanAttribute,
+ ChangeDetectionStrategy,
+ Component,
+ ContentChild,
+ ContentChildren,
+ ElementRef,
+ EventEmitter,
+ inject,
+ Input,
+ NgModule,
+ numberAttribute,
+ OnDestroy,
+ Output,
+ QueryList,
+ TemplateRef,
+ ViewChild,
+ ViewEncapsulation
+} from '@angular/core';
import { addClass, appendChild, blockBodyScroll, setAttribute, unblockBodyScroll } from '@primeuix/utils';
-import { SharedModule } from 'primeng/api';
+import { PrimeTemplate, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { Button, ButtonProps } from 'primeng/button';
import { TimesIcon } from 'primeng/icons';
@@ -44,39 +64,42 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
[attr.data-pc-section]="'root'"
(keydown)="onKeyDown($event)"
>
-
-
-
-
-
{{ header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ @if (headlessTemplate || _headlessTemplate) {
+
+ } @else {
+
+
+
+
{{ header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }