Merge branch 'master' of https://github.com/primefaces/primeng

primefaces · Jan 4, 2024 · d7f077c · d7f077c
2 parents efd161c + 0d04b3e
commit d7f077c
Show file tree

Hide file tree

Showing 130 changed files with 2,554 additions and 1,598 deletions.
diff --git a/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts
@@ -614,7 +614,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
             this.focusedItemInfo.set({ index, key, parentKey, item });
 
             this.dirty = !root;
-            DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement);
+            DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement);
         } else {
             if (grouped) {
                 this.onItemChange(event);
@@ -623,7 +623,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
                 this.hide(originalEvent);
                 this.changeFocusedItemInfo(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
 
-                DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement);
+                DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement);
             }
         }
     }
@@ -636,7 +636,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
 
     scrollInView(index: number = -1) {
         const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId;
-        const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${id}"]`);
+        const element = DomHandler.findSingle(this.rootmenu?.el.nativeElement, `li[id="${id}"]`);
 
         if (element) {
             element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
@@ -657,14 +657,14 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
         this.focusedItemInfo.set({ index, key, parentKey, item });
 
         grouped && (this.dirty = true);
-        isFocus && DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement);
+        isFocus && DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement);
     }
 
     hide(event?, isFocus?: boolean) {
         this.activeItem.set(null);
         this.focusedItemInfo.set({ index: -1, key: '', parentKey: '', item: null });
 
-        isFocus && DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement);
+        isFocus && DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement);
         this.dirty = false;
     }
 
@@ -991,7 +991,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
 
     onEnterKey(event: KeyboardEvent) {
         if (this.focusedItemInfo().index !== -1) {
-            const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${`${this.focusedItemId}`}"]`);
+            const element = DomHandler.findSingle(this.rootmenu?.el?.nativeElement, `li[id="${`${this.focusedItemId}`}"]`);
             const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
 
             anchorElement ? anchorElement.click() : element && element.click();
@@ -1044,7 +1044,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = this.renderer.listen(this.document, 'click', (event) => {
-                    const isOutsideContainer = this.rootmenu.el.nativeElement !== event.target && !this.rootmenu.el.nativeElement.contains(event.target);
+                    const isOutsideContainer = this.rootmenu?.el.nativeElement !== event.target && !this.rootmenu?.el.nativeElement.contains(event.target);
 
                     if (isOutsideContainer) {
                         this.hide();

diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts
@@ -176,6 +176,7 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
                         [menuId]="menuId"
                         [activeItemPath]="activeItemPath"
                         [focusedItemId]="focusedItemId"
+                        [ariaLabelledBy]="getItemId(processedItem)"
                         [level]="level + 1"
                         (itemClick)="itemClick.emit($event)"
                         (itemMouseEnter)="onItemMouseEnter($event)"

diff --git a/src/app/components/tree/tree.ts b/src/app/components/tree/tree.ts
@@ -120,7 +120,7 @@ import {
                         </span>
                     </span>
                 </div>
-                <ul class="p-treenode-children" style="display: none;" *ngIf="!tree.virtualScroll && node.children && node.expanded" [style.display]="node.expanded ? 'block' : 'none'" role="group">
+                <ul class="p-treenode-children" style="display: none;" *ngIf="!tree.virtualScroll && node.children && node.expanded" [style.display]="node.expanded ? 'block' : 'none'" role="tree">
                     <p-treeNode
                         *ngFor="let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy"
                         [node]="childNode"

diff --git a/src/app/showcase/demo/deferreddemo.scss b/src/app/showcase/demo/deferreddemo.scss
@@ -0,0 +1,10 @@
+.demo-section-loading {
+    display: grid;
+    place-items: center;
+    padding: 2rem;
+    border-radius: 10px;
+    margin-bottom: 1rem;
+    font-size: 2rem;
+    height: 350px;
+    background: var(--maskbg);
+}
diff --git a/src/app/showcase/demo/deferreddemo.ts b/src/app/showcase/demo/deferreddemo.ts
@@ -0,0 +1,54 @@
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Component, ElementRef, EventEmitter, Inject, Input, OnInit, Output, PLATFORM_ID } from '@angular/core';
+
+@Component({
+    selector: 'p-deferred-demo',
+    standalone: true,
+    imports: [CommonModule],
+    template: `
+        @if(!visible){
+        <div class="demo-section-loading">Loading...</div>
+        } @else {
+        <ng-content></ng-content>
+        }
+    `,
+    styleUrl: './deferreddemo.scss'
+})
+export class DeferredDemo implements OnInit {
+    visible: boolean = false;
+
+    observer = null;
+
+    timeout = null;
+
+    @Input() options: any;
+
+    @Output() load: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    constructor(public el: ElementRef, @Inject(PLATFORM_ID) private platformId: any) {}
+
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.observer = new IntersectionObserver(([entry]) => {
+                clearTimeout(this.timeout);
+
+                if (entry.isIntersecting) {
+                    this.timeout = setTimeout(() => {
+                        this.visible = true;
+                        this.observer.unobserve(this.el.nativeElement);
+                        this.load.emit();
+                    }, 350);
+                }
+            }, this.options);
+
+            this.observer.observe(this.el.nativeElement);
+        }
+    }
+
+    ngOnDestroy() {
+        if (!this.visible && this.el.nativeElement) {
+            this.observer?.unobserve(this.el.nativeElement);
+        }
+        clearTimeout(this.timeout);
+    }
+}
diff --git a/src/app/showcase/doc/chart/basicdoc.ts b/src/app/showcase/doc/chart/basicdoc.ts
@@ -1,6 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { Code } from '../../domain/code';
+import { AppConfigService } from '../../service/appconfigservice';
+import { Subscription, debounceTime } from 'rxjs';
 
 @Component({
     selector: 'chart-basic-demo',
@@ -22,9 +24,20 @@ export class BasicDoc implements OnInit {
 
     basicOptions: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');
@@ -48,22 +61,24 @@ export class BasicDoc implements OnInit {
                 plugins: {
                     legend: {
                         labels: {
-                            color: textColor
+                            fontColor: textColor
                         }
                     }
                 },
                 scales: {
-                    y: {
-                        beginAtZero: true,
+                    x: {
                         ticks: {
-                            color: textColorSecondary
+                            color: textColorSecondary,
+                            font: {
+                                weight: 500
+                            }
                         },
                         grid: {
-                            color: surfaceBorder,
+                            display: false,
                             drawBorder: false
                         }
                     },
-                    x: {
+                    y: {
                         ticks: {
                             color: textColorSecondary
                         },

diff --git a/src/app/showcase/doc/chart/combodoc.ts b/src/app/showcase/doc/chart/combodoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-combo-demo',
     template: `
@@ -19,9 +20,20 @@ export class ComboDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');

diff --git a/src/app/showcase/doc/chart/doughnutdoc.ts b/src/app/showcase/doc/chart/doughnutdoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-doughnut-demo',
     template: `
@@ -19,9 +20,20 @@ export class DoughnutDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');
@@ -49,7 +61,6 @@ export class DoughnutDoc implements OnInit {
             };
         }
     }
-
     code: Code = {
         basic: `<p-chart type="doughnut" [data]="data" [options]="options"></p-chart>`,
         html: `

diff --git a/src/app/showcase/doc/chart/horizontalbardoc.ts b/src/app/showcase/doc/chart/horizontalbardoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-horizontal-bar-demo',
     template: `
@@ -19,9 +20,20 @@ export class HorizontalBarDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart()
+    }
+
+    initChart(){
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');

diff --git a/src/app/showcase/doc/chart/linedoc.ts b/src/app/showcase/doc/chart/linedoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-line-demo',
     template: `
@@ -19,9 +20,20 @@ export class LineDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');

diff --git a/src/app/showcase/doc/chart/linestyledoc.ts b/src/app/showcase/doc/chart/linestyledoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-line-style-demo',
     template: `
@@ -19,9 +20,20 @@ export class LineStyleDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');