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

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

@@ -37,7 +37,7 @@ export interface AutoCompleteDropdownClickEvent {
  * @see {@link AutoComplete.onSelect}
  * @group Events
  */
-export interface AutoCompleteOnSelectEvent {
+export interface AutoCompleteSelectEvent {
     /**
      * Browser event.
      */

src/app/components/autocomplete/autocomplete.ts

@@ -40,7 +40,7 @@ import { SpinnerIcon } from 'primeng/icons/spinner';
 import { TimesIcon } from 'primeng/icons/times';
 import { ChevronDownIcon } from 'primeng/icons/chevrondown';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
-import { AutoCompleteCompleteEvent, AutoCompleteDropdownClickEvent, AutoCompleteLazyLoadEvent, AutoCompleteOnSelectEvent, AutoCompleteUnselectEvent } from './autocomplete.interface';
+import { AutoCompleteCompleteEvent, AutoCompleteDropdownClickEvent, AutoCompleteLazyLoadEvent, AutoCompleteSelectEvent, AutoCompleteUnselectEvent } from './autocomplete.interface';
 
 export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -611,10 +611,10 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
     @Output() completeMethod: EventEmitter<AutoCompleteCompleteEvent> = new EventEmitter<AutoCompleteCompleteEvent>();
     /**
      * Callback to invoke when a suggestion is selected.
-     * @param {AutoCompleteOnSelectEvent} event - custom select event.
+     * @param {AutoCompleteSelectEvent} event - custom select event.
      * @group Emits
      */
-    @Output() onSelect: EventEmitter<AutoCompleteOnSelectEvent> = new EventEmitter<AutoCompleteOnSelectEvent>();
+    @Output() onSelect: EventEmitter<AutoCompleteSelectEvent> = new EventEmitter<AutoCompleteSelectEvent>();
     /**
      * Callback to invoke when a selected value is removed.
      * @param {AutoCompleteUnselectEvent} event - custom unselect event.

src/app/components/dataview/dataview.ts

@@ -72,18 +72,16 @@ import { DataViewLayoutChangeEvent, DataViewLazyLoadEvent, DataViewPageEvent, Da
                 [showPageLinks]="showPageLinks"
                 [styleClass]="paginatorStyleClass"
             ></p-paginator>
+
             <div class="p-dataview-content">
-                <div class="p-grid p-nogutter grid grid-nogutter" [ngClass]="gridStyleClass">
-                    <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="paginator ? (filteredValue || value | slice : (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value" [ngForTrackBy]="trackBy">
-                        <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: rowData, rowIndex: rowIndex }"></ng-container>
-                    </ng-template>
-                    <div *ngIf="isEmpty() && !loading" class="p-col col">
-                        <div class="p-dataview-emptymessage">
-                            <ng-container *ngIf="!emptyMessageTemplate; else emptyFilter">
-                                {{ emptyMessageLabel }}
-                            </ng-container>
-                            <ng-container #emptyFilter *ngTemplateOutlet="emptyMessageTemplate"></ng-container>
-                        </div>
+                <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: paginator ? (filteredValue || value | slice : (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value }"></ng-container>
+
+                <div *ngIf="isEmpty() && !loading">
+                    <div class="p-dataview-emptymessage">
+                        <ng-container *ngIf="!emptyMessageTemplate; else empty">
+                            {{ emptyMessageLabel }}
+                        </ng-container>
+                        <ng-container #empty *ngTemplateOutlet="emptyMessageTemplate"></ng-container>
                     </div>
                 </div>
             </div>
@@ -320,9 +318,9 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU
 
     _value: Nullable<any[]>;
 
-    listItemTemplate: Nullable<TemplateRef<any>>;
+    listTemplate: Nullable<TemplateRef<any>>;
 
-    gridItemTemplate: Nullable<TemplateRef<any>>;
+    gridTemplate: Nullable<TemplateRef<any>>;
 
     itemTemplate: Nullable<TemplateRef<any>>;
 
@@ -393,11 +391,13 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU
         (this.templates as QueryList<PrimeTemplate>).forEach((item) => {
             switch (item.getType()) {
                 case 'listItem':
-                    this.listItemTemplate = item.template;
+                case 'list':
+                    this.listTemplate = item.template;
                     break;
 
                 case 'gridItem':
-                    this.gridItemTemplate = item.template;
+                case 'grid':
+                    this.gridTemplate = item.template;
                     break;
 
                 case 'paginatorleft':
@@ -444,11 +444,11 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU
     updateItemTemplate() {
         switch (this.layout) {
             case 'list':
-                this.itemTemplate = this.listItemTemplate;
+                this.itemTemplate = this.listTemplate;
                 break;
 
             case 'grid':
-                this.itemTemplate = this.gridItemTemplate;
+                this.itemTemplate = this.gridTemplate;
                 break;
         }
     }

src/app/components/inputswitch/inputswitch.interface.ts

@@ -4,7 +4,7 @@ import { InputSwitch } from './inputswitch';
  * @see {@link InputSwitch.onChange}
  * @group Events
  */
-export interface InputSwitchOnChangeEvent {
+export interface InputSwitchChangeEvent {
     /**
      * Browser event.
      */

src/app/components/inputswitch/inputswitch.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgModule, Output, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { InputSwitchOnChangeEvent } from './inputswitch.interface';
+import { InputSwitchChangeEvent } from './inputswitch.interface';
 
 export const INPUTSWITCH_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -110,10 +110,10 @@ export class InputSwitch {
     @Input() ariaLabelledBy: string | undefined;
     /**
      * Callback to invoke when the on value change.
-     * @param {InputSwitchOnChangeEvent} event - Custom change event.
+     * @param {InputSwitchChangeEvent} event - Custom change event.
      * @group Emits
      */
-    @Output() onChange: EventEmitter<InputSwitchOnChangeEvent> = new EventEmitter<InputSwitchOnChangeEvent>();
+    @Output() onChange: EventEmitter<InputSwitchChangeEvent> = new EventEmitter<InputSwitchChangeEvent>();
 
     @ViewChild('input') input!: ElementRef;
 

src/app/components/multiselect/multiselect.ts

@@ -501,10 +501,10 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
      * @group Props
      * @defaultValue 3
      */
-    @Input() set maxSelectedLabels(val: number) {
+    @Input() set maxSelectedLabels(val: number | null | undefined) {
         this._maxSelectedLabels = val;
     }
-    get maxSelectedLabels(): number {
+    get maxSelectedLabels(): number | null | undefined {
         return this._maxSelectedLabels;
     }
     /**
@@ -1958,7 +1958,11 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
         let value = this.modelValue().filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey()));
 
         this.updateModel(value, event);
-
+        this.onChange.emit({
+            originalEvent: event,
+            value: value,
+            itemValue: optionValue
+        });
         event && event.stopPropagation();
     }
 

src/app/components/tree/tree.css

@@ -90,67 +90,6 @@
         border: 0 none;
     }
 
-    .p-tree-horizontal {
-        width: auto;
-        padding-left: 0;
-        padding-right: 0;
-        overflow: auto;
-    }
-
-    .p-tree.p-tree-horizontal table,
-    .p-tree.p-tree-horizontal tr,
-    .p-tree.p-tree-horizontal td {
-        border-collapse: collapse;
-        margin: 0;
-        padding: 0;
-        vertical-align: middle;
-    }
-
-    .p-tree-horizontal .p-treenode-content {
-        font-weight: normal;
-        padding: 0.4em 1em 0.4em 0.2em;
-        display: flex;
-        align-items: center;
-    }
-
-    .p-tree-horizontal .p-treenode-parent .p-treenode-content {
-        font-weight: normal;
-        white-space: nowrap;
-    }
-
-    .p-tree.p-tree-horizontal .p-treenode {
-        background: url('./images/line.gif') repeat-x scroll center center transparent;
-        padding: 0.25rem 2.5rem;
-    }
-
-    .p-tree.p-tree-horizontal .p-treenode.p-treenode-leaf,
-    .p-tree.p-tree-horizontal .p-treenode.p-treenode-collapsed {
-        padding-right: 0;
-    }
-
-    .p-tree.p-tree-horizontal .p-treenode-children {
-        padding: 0;
-        margin: 0;
-    }
-
-    .p-tree.p-tree-horizontal .p-treenode-connector {
-        width: 1px;
-    }
-
-    .p-tree.p-tree-horizontal .p-treenode-connector-table {
-        height: 100%;
-        width: 1px;
-    }
-
-    .p-tree.p-tree-horizontal .p-treenode-connector-line {
-        background: url('./images/line.gif') repeat-y scroll 0 0 transparent;
-        width: 1px;
-    }
-
-    .p-tree.p-tree-horizontal table {
-        height: 0;
-    }
-
     /* Virtual Scroll */
     .p-scroller .p-tree-container {
         overflow: visible;

src/app/showcase/doc/accessibility/formcontrolsdoc.ts

@@ -10,9 +10,9 @@ import { Code } from '../../domain/code';
                 with space key as well to trigger.
             </p>
             <app-code [code]="code1" [hideToggleCode]="true"></app-code>
-            <p class="doc-section-description">On the other hand, a fancy css based button using a div has no keyboard or screen reader support.</p>
+            <p class="doc-section-description mt-3">On the other hand, a fancy css based button using a div has no keyboard or screen reader support.</p>
             <app-code [code]="code2" [hideToggleCode]="true"></app-code>
-            <p class="doc-section-description">
+            <p class="doc-section-description mt-3">
                 <i>tabindex</i> is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form
                 controls should be preferred.
             </p>

src/app/showcase/doc/accessibility/semantichtmldoc.ts

@@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
                 <i>div</i> elements with classes are used. Consider the following example that do not mean too much for readers.
             </p>
             <app-code [code]="code1" [hideToggleCode]="true"></app-code>
-            <p class="doc-section-description">Same layout can be achieved using the semantic elements with screen reader support built-in.</p>
+            <p class="doc-section-description mt-3">Same layout can be achieved using the semantic elements with screen reader support built-in.</p>
             <app-code [code]="code2" [hideToggleCode]="true"></app-code>
         </app-docsectiontext>
     `

src/app/showcase/doc/accessibility/waiariadoc.ts

@@ -16,23 +16,23 @@ import { Code } from '../../domain/code';
             </p>
             <p>Consider the following case of a native checkbox. It has built-in keyboard and screen reader support.</p>
             <app-code [code]="code1" [hideToggleCode]="true"></app-code>
-            <p class="doc-section-description">
+            <p class="doc-section-description mt-3">
                 A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot
                 be read by a reader.
             </p>
             <app-code [code]="code2" [hideToggleCode]="true"></app-code>
-            <p class="doc-section-description">One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of <i>aria-labelledby</i> as a replacement of the <i>label</i> tag with htmlFor.</p>
+            <p class="doc-section-description mt-3">One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of <i>aria-labelledby</i> as a replacement of the <i>label</i> tag with htmlFor.</p>
             <app-code [code]="code3" [hideToggleCode]="true"></app-code>
-            <p class="doc-section-description">
+            <p class="doc-section-description mt-3">
                 However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the
                 usage of
                 <i>p-sr-only</i>
                 that hides the elements from the user but not from the screen reader.
             </p>
             <app-code [code]="code4" [hideToggleCode]="true"></app-code>
-            <p class="doc-section-description">A working sample is the PrimeNG checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.</p>
+            <p class="doc-section-description mt-3">A working sample is the PrimeNG checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.</p>
             <div class="card flex align-items-center">
-                <label htmlFor="binary" class="mr-2">Remember Me</label>
+                <label for="binary" class="mr-2">Remember Me</label>
                 <p-checkbox inputId="binary" [binary]="true"></p-checkbox>
             </div>
         </app-docsectiontext>