Merge branch 'master' into 13946-fix-tristatecheckbox

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,5 +1,5 @@
 name: Bug report
-description: Create a report to help us improve
+description: Create a report to help PrimeNG improve.
 title: "Component: Title"
 labels: ['Status: Needs Triage']
 body:

.github/ISSUE_TEMPLATE/config.yml

@@ -1,4 +1,7 @@
 contact_links:
+    - name: Feature request
+      url: https://github.com/orgs/primefaces/discussions/categories/primeng
+      about: Propose an enhancement at discussions.
     - name: Support
-      url: https://primeng.org/support
+      url: https://primeng.org/support/
       about: Professional support for the open source innovation.

CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## [16.7.1](https://github.com/primefaces/primeng/tree/16.7.1) (2023-11-06)
+
+[Full Changelog](https://github.com/primefaces/primeng/compare/16.7.0...16.7.1)
+
+**Fixed bugs:**
+- BIG ERROR with DropDown [\#13996](https://github.com/primefaces/primeng/issues/13996)
+- Component: p-dropdwon onChange is called multiple times at init [\#14005](https://github.com/primefaces/primeng/issues/14005)
+- Change of Dropdown selection throws error: Cannot read properties of undefined (reading 'length') primeng dropdown [\#14007](https://github.com/primefaces/primeng/issues/14007)
+- Dropdown filtering issues with array of strings [\#14011](https://github.com/primefaces/primeng/issues/14011)
+- The ngModel directive can't set an item of dropdown in version 16.7.0 [\#14023](https://github.com/primefaces/primeng/issues/14023)
+- ListBox | onClick event does not emit [\#14036](https://github.com/primefaces/primeng/issues/14036)
+- ListBox | OnChange doesn't emit [\#14033](https://github.com/primefaces/primeng/issues/14033)
+- onClick event listbox error v16.7.0 [\#13998](https://github.com/primefaces/primeng/issues/13998)
+- MultiSelect | Input section receives focus on filter click. [\#14035](https://github.com/primefaces/primeng/issues/14035)
+- Multiselect set value error v16.7.0 [\#13999](https://github.com/primefaces/primeng/issues/13999)
+- SelectButton broken in v16.7.0 [\#14021](https://github.com/primefaces/primeng/issues/14021)
+- Global filter to search tree-table is not returning all the relevant results [\#14016](https://github.com/primefaces/primeng/issues/14016)
+
+## [16.7.0](https://github.com/primefaces/primeng/tree/16.7.0) (2023-11-01)
+
+[Full Changelog](https://github.com/primefaces/primeng/compare/16.6.0...16.7.0)
+
+**Deprecated:**
+- Deprecate pAnimate directive [\#13972](https://github.com/primefaces/primeng/issues/13972)
+
+**Implemented New Features and Enhancements:**
+- Accessibility | Input Section (part 1) [\#13413](https://github.com/primefaces/primeng/issues/13413)
+- ListBox | VirtualScroller support [\#13939](https://github.com/primefaces/primeng/issues/13939)
+- Add animateOnScroll directive [\#13970](https://github.com/primefaces/primeng/issues/13970)
+- p-image: missing support for lazyloading [\#13926](https://github.com/primefaces/primeng/issues/13926)
+
+**Fixed bugs:**
+- OverlayPanel: Calendar and table inside OverlayPanel, click inside dissmiss the overlaypanel [\#13605](https://github.com/primefaces/primeng/issues/13605)
+- 16.3.1 regression: p-overlayPanel dismisses when making changes to nested p-multiSelect [\#13601](https://github.com/primefaces/primeng/issues/13601)
+- Component: Accordion Component Allows Tab Navigation Into Closed Accordion Tabs [\#13845](https://github.com/primefaces/primeng/issues/13845)
+- Component: ContextMenu with appendTo="body" doesn't close when destroyed [\#13948](https://github.com/primefaces/primeng/issues/13948)
+- Component: Carousel | Circular is broken when OnPush is enabled in parent components and it's initializing [\#13974](https://github.com/primefaces/primeng/issues/13974)
+- Using AccordionTab inside of div or another element and not directly inside of an Accordion [\#13969](https://github.com/primefaces/primeng/issues/13969)
+
 ## [16.6.0](https://github.com/primefaces/primeng/tree/16.6.0) (2023-10-26)
 
 [Full Changelog](https://github.com/primefaces/primeng/compare/16.5.1...16.6.0)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "primeng",
-    "version": "16.6.0",
+    "version": "16.7.1",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
         "ng": "ng",

src/app/components/accordion/accordion.ts

@@ -91,13 +91,15 @@ import { UniqueComponentId } from 'primeng/utils';
             state(
                 'hidden',
                 style({
-                    height: '0'
+                    height: '0',
+                    visibility: 'hidden'
                 })
             ),
             state(
                 'visible',
                 style({
-                    height: '*'
+                    height: '*',
+                    visibility: 'visible'
                 })
             ),
             transition('visible <=> hidden', [animate('{{transitionParams}}')]),

src/app/components/animate/animate.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { AfterViewInit, Directive, ElementRef, Input, NgModule, Renderer2 } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, Input, NgModule, OnInit, Renderer2 } from '@angular/core';
 import { DomHandler } from 'primeng/dom';
 /**
  * Animate manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load.
@@ -11,7 +11,7 @@ import { DomHandler } from 'primeng/dom';
         '[class.p-animate]': 'true'
     }
 })
-export class Animate implements AfterViewInit {
+export class Animate implements OnInit, AfterViewInit {
     /**
      * Selector to define the CSS class for enter animation.
      * @group Props
@@ -29,6 +29,10 @@ export class Animate implements AfterViewInit {
 
     constructor(private host: ElementRef, public el: ElementRef, public renderer: Renderer2) {}
 
+    ngOnInit() {
+        console.log('pAnimate directive is deprecated in 16.7.0 and will be removed in the future. Use pAnimateOnScroll directive instead');
+    }
+
     ngAfterViewInit() {
         this.bindIntersectionObserver();
     }

src/app/components/animateonscroll/animateonscroll.ts

@@ -0,0 +1,175 @@
+import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { AfterViewInit, Directive, ElementRef, Input, NgModule, Renderer2, OnInit, Inject, PLATFORM_ID } from '@angular/core';
+import { DomHandler } from 'primeng/dom';
+
+interface AnimateOnScrollOptions {
+    root?: HTMLElement;
+    rootMargin?: string;
+    threshold?: number;
+}
+
+/**
+ * AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling.
+ * @group Components
+ */
+@Directive({
+    selector: '[pAnimateOnScroll]',
+    host: {
+        '[class.p-animateonscroll]': 'true'
+    }
+})
+export class AnimateOnScroll implements OnInit, AfterViewInit {
+    /**
+     * Selector to define the CSS class for enter animation.
+     * @group Props
+     */
+    @Input() enterClass: string | undefined;
+    /**
+     * Selector to define the CSS class for leave animation.
+     * @group Props
+     */
+    @Input() leaveClass: string | undefined;
+    /**
+     * Specifies the root option of the IntersectionObserver API.
+     * @group Props
+     */
+    @Input() root: HTMLElement | undefined | null;
+    /**
+     * Specifies the rootMargin option of the IntersectionObserver API.
+     * @group Props
+     */
+    @Input() rootMargin: string | undefined;
+    /**
+     * Specifies the threshold option of the IntersectionObserver API
+     * @group Props
+     */
+    @Input() threshold: number | undefined;
+    /**
+     * Whether the scroll event listener should be removed after initial run.
+     * @group Props
+     */
+    @Input() once: boolean = true;
+
+    observer: IntersectionObserver | undefined;
+
+    resetObserver: any;
+
+    isObserverActive: boolean = false;
+
+    animationState: any;
+
+    animationEndListener: VoidFunction | undefined;
+
+    constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private host: ElementRef, public el: ElementRef, public renderer: Renderer2) {}
+
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.renderer.setStyle(this.host.nativeElement, 'opacity', this.enterClass ? '0' : '');
+        }
+    }
+
+    ngAfterViewInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.bindIntersectionObserver();
+        }
+    }
+
+    get options(): AnimateOnScrollOptions {
+        return {
+            root: this.root,
+            rootMargin: this.rootMargin,
+            threshold: this.threshold
+        };
+    }
+
+    bindIntersectionObserver() {
+        this.observer = new IntersectionObserver(([entry]) => {
+            if (this.isObserverActive) {
+                if (entry.boundingClientRect.top > 0) {
+                    entry.isIntersecting ? this.enter() : this.leave();
+                }
+            } else if (entry.isIntersecting) {
+                this.enter();
+            }
+
+            this.isObserverActive = true;
+        }, this.options);
+
+        setTimeout(() => this.observer.observe(this.host.nativeElement), 0);
+
+        // Reset
+
+        this.resetObserver = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.boundingClientRect.top > 0 && !entry.isIntersecting) {
+                    this.host.nativeElement.style.opacity = this.enterClass ? '0' : '';
+                    DomHandler.removeMultipleClasses(this.host.nativeElement, [this.enterClass, this.leaveClass]);
+
+                    this.resetObserver.unobserve(this.host.nativeElement);
+                }
+
+                this.animationState = undefined;
+            },
+            { ...this.options, threshold: 0 }
+        );
+    }
+
+    enter() {
+        if (this.animationState !== 'enter' && this.enterClass) {
+            this.host.nativeElement.style.opacity = '';
+            DomHandler.removeMultipleClasses(this.host.nativeElement, this.leaveClass);
+            DomHandler.addMultipleClasses(this.host.nativeElement, this.enterClass);
+
+            this.once && this.unbindIntersectionObserver();
+
+            this.bindAnimationEvents();
+            this.animationState = 'enter';
+        }
+    }
+
+    leave() {
+        if (this.animationState !== 'leave' && this.leaveClass) {
+            this.host.nativeElement.style.opacity = this.enterClass ? '0' : '';
+            DomHandler.removeMultipleClasses(this.host.nativeElement, this.enterClass);
+            DomHandler.addMultipleClasses(this.host.nativeElement, this.leaveClass);
+
+            this.bindAnimationEvents();
+            this.animationState = 'leave';
+        }
+    }
+
+    bindAnimationEvents() {
+        if (!this.animationEndListener) {
+            this.animationEndListener = this.renderer.listen(this.host.nativeElement, 'animationend', () => {
+                DomHandler.removeMultipleClasses(this.host.nativeElement, [this.enterClass, this.leaveClass]);
+                !this.once && this.resetObserver.observe(this.host.nativeElement);
+                this.unbindAnimationEvents();
+            });
+        }
+    }
+
+    unbindAnimationEvents() {
+        if (this.animationEndListener) {
+            this.animationEndListener();
+            this.animationEndListener = null;
+        }
+    }
+
+    unbindIntersectionObserver() {
+        this.observer?.unobserve(this.host.nativeElement);
+        this.resetObserver?.unobserve(this.host.nativeElement);
+        this.isObserverActive = false;
+    }
+
+    ngOnDestroy() {
+        this.unbindAnimationEvents();
+        this.unbindIntersectionObserver();
+    }
+}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [AnimateOnScroll],
+    declarations: [AnimateOnScroll]
+})
+export class AnimateOnScrollModule {}

src/app/components/animateonscroll/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public_api.ts"
+    }
+}

src/app/components/animateonscroll/public_api.ts

@@ -0,0 +1 @@
+export * from './animateonscroll';

src/app/components/api/primengconfig.ts

@@ -8,6 +8,8 @@ import { Translation } from './translation';
 export class PrimeNGConfig {
     ripple: boolean = false;
 
+    inputStyle: 'outlined' | 'filled' = 'outlined';
+
     overlayOptions: OverlayOptions = {};
 
     filterMatchModeOptions = {

src/app/components/autocomplete/autocomplete.interface.ts

@@ -32,6 +32,36 @@ export interface AutoCompleteDropdownClickEvent {
      */
     query: string;
 }
+/**
+ * Custom select event.
+ * @see {@link AutoComplete.onSelect}
+ * @group Events
+ */
+export interface AutoCompleteOnSelectEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: Event;
+    /**
+     * Selected value.
+     */
+    value: any;
+}
+/**
+ * Custom unselect event.
+ * @see {@link AutoComplete.onUnSelect}
+ * @group Events
+ */
+export interface AutoCompleteUnselectEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: Event;
+    /**
+     * Removed value.
+     */
+    value: any;
+}
 /**
  * Custom lazy load event.
  * @see {@link AutoComplete.onLazyLoad}