diff --git a/package-lock.json b/package-lock.json index 2d2912363aa..aa9c1ec2db6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,9 +42,9 @@ "esbuild": "^0.19.8", "eslint": "^8.39.0", "eslint-config-prettier": "^8.8.0", - "eslint-plugin-import": "latest", - "eslint-plugin-jsdoc": "latest", - "eslint-plugin-prefer-arrow": "latest", + "eslint-plugin-import": "*", + "eslint-plugin-jsdoc": "*", + "eslint-plugin-prefer-arrow": "*", "express": "^4.19.2", "file-saver": "^2.0.5", "gulp": "^4.0.2", @@ -9423,9 +9423,9 @@ "dev": true }, "node_modules/ejs": { - "version": "3.1.9", - "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz", - "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==", + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz", + "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==", "dev": true, "dependencies": { "jake": "^10.8.5" diff --git a/src/app/components/checkbox/checkbox.spec.ts b/src/app/components/checkbox/checkbox.spec.ts index 8e63ad2f64b..76a8770d86e 100755 --- a/src/app/components/checkbox/checkbox.spec.ts +++ b/src/app/components/checkbox/checkbox.spec.ts @@ -123,8 +123,8 @@ describe('Checkbox', () => { const input = fixture.nativeElement.querySelector('input'); const boxEl = fixture.nativeElement.querySelector('.p-checkbox-box'); const labelEl = fixture.nativeElement.querySelector('.p-checkbox-label'); - const onBlurSpy = spyOn(checkbox, 'onBlur').and.callThrough(); - const onFocusSpy = spyOn(checkbox, 'onFocus').and.callThrough(); + const onBlurSpy = spyOn(checkbox, 'onInputBlur').and.callThrough(); + const onFocusSpy = spyOn(checkbox, 'onInputFocus').and.callThrough(); input.dispatchEvent(new Event('focus')); fixture.detectChanges(); diff --git a/src/app/components/menu/menu.ts b/src/app/components/menu/menu.ts index dc864d5ab81..bc764ea4a30 100755 --- a/src/app/components/menu/menu.ts +++ b/src/app/components/menu/menu.ts @@ -581,6 +581,10 @@ export class Menu implements OnDestroy { this.onEnterKey(event); break; + case 'NumpadEnter': + this.onEnterKey(event); + break; + case 'Space': this.onSpaceKey(event); break; diff --git a/src/app/components/menubar/menubar.interface.ts b/src/app/components/menubar/menubar.interface.ts index 22e3a2f8b22..5016db86b6c 100644 --- a/src/app/components/menubar/menubar.interface.ts +++ b/src/app/components/menubar/menubar.interface.ts @@ -6,16 +6,19 @@ import { MenuItem } from 'primeng/api'; * @group Templates */ export interface MenubarTemplates { - /** + /** * Custom item template. */ - item(context: { + item(context: { /** * Item instance. */ - $implicit: MenuItem - - }): TemplateRef<{ $implicit: MenuItem }>; + $implicit: MenuItem; + /** + * Whether root or not + */ + root: boolean; + }): TemplateRef<{ $implicit: MenuItem; root: boolean }>; /** * Custom template of start. */ diff --git a/src/app/components/menubar/menubar.spec.ts b/src/app/components/menubar/menubar.spec.ts index 9e906633579..46c55e6d05c 100755 --- a/src/app/components/menubar/menubar.spec.ts +++ b/src/app/components/menubar/menubar.spec.ts @@ -1,8 +1,8 @@ import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { RouterTestingModule } from '@angular/router/testing'; import { Menubar, MenubarModule, MenubarService, MenubarSub } from './menubar'; +import { RouterModule } from '@angular/router'; describe('Menubar', () => { let menubar: Menubar; @@ -10,7 +10,7 @@ describe('Menubar', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, RouterTestingModule.withRoutes([{ path: 'test', component: Menubar }]), MenubarModule], + imports: [NoopAnimationsModule, RouterModule.forRoot([{ path: 'test', component: Menubar }]), MenubarModule], providers: [MenubarService] }); @@ -45,7 +45,7 @@ describe('Menubar', () => { const subMenu = fixture.debugElement.query(By.css('.p-menubar-root-list')).componentInstance as MenubarSub; expect(subMenu.baseZIndex).toEqual(20); expect(subMenu.autoZIndex).toEqual(false); - expect(subMenu.autoDisplay).toBeUndefined(); + expect(subMenu.autoDisplay).toBeDefined(); expect(subMenu.autoDisplay).toEqual(menubar.autoDisplay); expect(subMenu.autoZIndex).toEqual(menubar.autoZIndex); expect(subMenu.baseZIndex).toEqual(menubar.baseZIndex); @@ -121,53 +121,11 @@ describe('Menubar', () => { const parentEl = fixture.debugElement.query(By.css('.p-menubar-root-list')); const firstParentEl = parentEl.query(By.css('.p-menuitem-link')); const secondParentEl = parentEl.queryAll(By.css('.p-menuitem-link'))[1]; - firstParentEl.nativeElement.dispatchEvent(new Event('click')); - fixture.detectChanges(); - - expect(firstParentEl.parent.nativeElement.classList.contains('p-menuitem-active')).toBe(true); - expect(secondParentEl.parent.nativeElement.classList.contains('p-menuitem-active')).toBe(false); - }); - - it('should call itemClick', () => { - menubar.model = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus' - }, - { label: 'Open' }, - { separator: true }, - { label: 'Quit' } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { label: 'Delete', icon: 'pi pi-fw pi-trash' }, - { label: 'Refresh', icon: 'pi pi-fw pi-refresh' } - ] - } - ]; - fixture.detectChanges(); - - const parentEl = fixture.debugElement.query(By.css('.p-menubar-root-list')); - const firstParentEl = parentEl.query(By.css('.p-menuitem-link')); - const secondParentEl = parentEl.queryAll(By.css('.p-menuitem-link'))[1]; - firstParentEl.nativeElement.dispatchEvent(new Event('click')); - fixture.detectChanges(); - - const firstSubmenuList = fixture.debugElement.query(By.css('.p-submenu-list')); - const firstSubItem = firstSubmenuList.query(By.css('.p-menuitem-link')); - firstSubItem.nativeElement.click(); + firstParentEl.nativeElement.click(); fixture.detectChanges(); - expect(firstParentEl.componentInstance.activeItem).toEqual(null); - expect(secondParentEl.componentInstance.activeItem).toEqual(null); - expect(firstParentEl.parent.nativeElement.className).not.toContain('p-menuitem-active'); + expect(firstParentEl?.parent?.parent?.nativeElement.classList.contains('p-menuitem-active')).toBe(true); + expect(secondParentEl?.parent?.parent?.nativeElement.classList.contains('p-menuitem-active')).toBe(false); }); it('should call onItemMouseEnter and not show firstParentMenu', () => { @@ -241,11 +199,11 @@ describe('Menubar', () => { firstParentEl.nativeElement.dispatchEvent(new Event('mouseleave')); tick(300); fixture.detectChanges(); - expect(firstParentEl.parent.nativeElement.classList.contains('p-menuitem-active')).toBe(true); + expect(firstParentEl?.parent?.parent?.nativeElement.classList.contains('p-menuitem-active')).toBe(true); flush(); })); - it('should call itemClick and bindEventListener', () => { + it('should call itemClick', () => { menubar.model = [ { label: 'File', @@ -273,7 +231,7 @@ describe('Menubar', () => { const parentEl = fixture.debugElement.query(By.css('.p-menubar-root-list')); const firstParentEl = parentEl.query(By.css('.p-menuitem-link')); - const bindEventListenerSpy = spyOn(firstParentEl.componentInstance, 'bindDocumentClickListener').and.callThrough(); + const secondParentEl = parentEl.queryAll(By.css('.p-menuitem-link'))[1]; firstParentEl.nativeElement.click(); fixture.detectChanges(); @@ -282,8 +240,9 @@ describe('Menubar', () => { firstSubItem.nativeElement.dispatchEvent(new Event('mouseenter')); fixture.detectChanges(); - expect(bindEventListenerSpy).toHaveBeenCalled(); - expect(firstParentEl.parent.nativeElement.className).toContain('p-menuitem-active'); + expect(firstParentEl?.parent?.parent?.nativeElement.className).toContain('p-menuitem-active'); + expect(secondParentEl?.parent?.parent?.nativeElement.className).not.toContain('p-menuitem-active'); + }); it('should show router items', () => { @@ -315,10 +274,9 @@ describe('Menubar', () => { const parentEl = fixture.debugElement.query(By.css('.p-menubar-root-list')); const firstParentEl = parentEl.query(By.css('.p-menuitem-link')); - firstParentEl.nativeElement.dispatchEvent(new Event('click')); + firstParentEl.nativeElement.click(); fixture.detectChanges(); - - expect(firstParentEl.componentInstance.activeItem.label).toEqual(firstParentEl.nativeElement.textContent); + expect(firstParentEl?.componentInstance.activeItemPath[0].item.label).toEqual(firstParentEl.nativeElement.textContent); }); it('should call itemClick', () => { diff --git a/src/app/components/paginator/paginator.ts b/src/app/components/paginator/paginator.ts index 328718139c8..adc75e2310d 100755 --- a/src/app/components/paginator/paginator.ts +++ b/src/app/components/paginator/paginator.ts @@ -41,159 +41,121 @@ import { PaginatorState } from './paginator.interface';
- - + {{ currentPageReport }} + + + - - - - - - - {{ currentPageReport }} - - - - - - - - - - {{ currentPageReport }} - - - - - - - + + {{ currentPageReport }} + + + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + - - + + + + +
@@ -335,22 +297,6 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { @ContentChildren(PrimeTemplate) templates: Nullable>; - firstPageLinkTemplate: Nullable>; - - prevPageLinkTemplate: Nullable>; - - pageLinksTemplate: Nullable>; - - nextPageLinkTemplate: Nullable>; - - lastPageLinkTemplate: Nullable>; - - rowsPerPageDropdownTemplate: Nullable>; - - jumpToPageDropdownTemplate: Nullable>; - - jumpToPageInputTemplate: Nullable>; - dropdownIconTemplate: Nullable>; firstPageLinkIconTemplate: Nullable>; @@ -401,38 +347,6 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { ngAfterContentInit(): void { (this.templates as QueryList).forEach((item) => { switch (item.getType()) { - case 'firstpagelink': - this.firstPageLinkTemplate = item.template; - break; - - case 'prevpagelink': - this.prevPageLinkTemplate = item.template; - break; - - case 'pagelinks': - this.pageLinksTemplate = item.template; - break; - - case 'nextpagelink': - this.nextPageLinkTemplate = item.template; - break; - - case 'lastpagelink': - this.lastPageLinkTemplate = item.template; - break; - - case 'rowsperpagedropdown': - this.rowsPerPageDropdownTemplate = item.template; - break; - - case 'jumptopagedropdown': - this.jumpToPageDropdownTemplate = item.template; - break; - - case 'jumptopageinput': - this.jumpToPageInputTemplate = item.template; - break; - case 'dropdownicon': this.dropdownIconTemplate = item.template; break; @@ -571,14 +485,6 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { return Math.floor(this.first / this.rows); } - getFirst(): number { - return this.totalRecords > 0 ? this._first + 1 : 0; - } - - getLast(): number { - return Math.min(this._first + this.rows, this.totalRecords); - } - changePageToFirst(event: Event) { if (!this.isFirstPage()) { this.changePage(0); @@ -645,8 +551,6 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { .replace('{rows}', String(this.rows)) .replace('{totalRecords}', String(this.totalRecords)); } - - } @NgModule({ @@ -654,4 +558,4 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { exports: [Paginator, DropdownModule, InputNumberModule, FormsModule, SharedModule], declarations: [Paginator] }) -export class PaginatorModule {} +export class PaginatorModule {} \ No newline at end of file diff --git a/src/app/components/picklist/picklist.spec.ts b/src/app/components/picklist/picklist.spec.ts index 4db1f5c6d8e..e2109887883 100755 --- a/src/app/components/picklist/picklist.spec.ts +++ b/src/app/components/picklist/picklist.spec.ts @@ -1,6 +1,6 @@ import { TestBed, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { PickListModule, PickList } from 'primeng/picklist'; +import { PickListModule, PickList } from './picklist'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Component, EventEmitter } from '@angular/core'; @@ -106,6 +106,7 @@ describe('PickList', () => { fixture.detectChanges(); const sourceListItems = fixture.debugElement.query(By.css('.p-picklist-source-wrapper')).queryAll(By.css('.p-picklist-item')); + //expect(picklist.visibleOptionsSource).toBeDefined(); expect(picklist.visibleOptionsSource.length).toEqual(2); expect(picklist.visibleOptionsSource[0].brand).toEqual('VW'); expect(picklist.visibleOptionsSource[1].brand).toEqual('Volvo'); @@ -250,7 +251,7 @@ describe('PickList', () => { let event = { ctrlKey: true }; let callback = new EventEmitter(); - picklist.onItemClick(event, picklist.source[0], picklist.selectedItemsSource, callback); + picklist.onItemClick(event, picklist.source, picklist.selectedItemsSource, picklist.SOURCE_LIST, callback); fixture.detectChanges(); picklist.cd.detectChanges(); diff --git a/src/app/components/progressbar/progressbar.spec.ts b/src/app/components/progressbar/progressbar.spec.ts index f676069b478..c9c6dc9823a 100755 --- a/src/app/components/progressbar/progressbar.spec.ts +++ b/src/app/components/progressbar/progressbar.spec.ts @@ -27,7 +27,7 @@ describe('ProgressBar', () => { expect(progressbarLabelEl.textContent).toEqual('50%'); }); - it('should not show value', () => { + it('should not show value when showValue is set to false', () => { progressbar.value = 50; progressbar.showValue = false; fixture.detectChanges(); @@ -35,7 +35,7 @@ describe('ProgressBar', () => { const progressbarValueEl = fixture.debugElement.query(By.css('.p-progressbar-value')).nativeElement; const progressbarLabelEl = fixture.debugElement.query(By.css('.p-progressbar-label')); expect(progressbarValueEl.style.width).toEqual('50%'); - expect(progressbarLabelEl).toBeFalsy(); + expect(progressbarLabelEl.children.length).toBe(0); }); it('should change style and styleClass', () => { diff --git a/src/app/showcase/doc/overlaypanel/basicdoc.ts b/src/app/showcase/doc/overlaypanel/basicdoc.ts index 71fca32f4c3..806f61d5559 100644 --- a/src/app/showcase/doc/overlaypanel/basicdoc.ts +++ b/src/app/showcase/doc/overlaypanel/basicdoc.ts @@ -22,10 +22,10 @@ import { Code } from '@domain/code';
Invite Member - - - - +
+ + +
Team Members @@ -57,26 +57,105 @@ export class BasicDoc { ]; code: Code = { - basic: ` - product - -`, + basic: ` + +
+
+ Share this document + + + + + + +
+
+ Invite Member +
+ + +
+
+
+ Team Members +
    +
  • + +
    + {{ member.name }} +
    {{ member.email }}
    +
    +
    + {{ member.role }} + +
    +
    • +
+
+
+ `, - html: ` -
+ html: `
+ - product +
+
+ Share this document + + + + + + +
+
+ Invite Member +
+ + +
+
+
+ Team Members +
    +
  • + +
    + {{ member.name }} +
    {{ member.email }}
    +
    +
    + {{ member.role }} + +
    +
    • +
+
+
-
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { OverlayPanelModule } from 'primeng/overlaypanel'; +import { InputGroupModule } from 'primeng/inputgroup'; +import { InputGroupAddonModule } from 'primeng/inputgroupaddon'; +import { ButtonModule } from 'primeng/button'; +import { InputTextModule } from 'primeng/inputtext'; +import { ChipsModule } from 'primeng/chips'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'overlay-panel-basic-demo', - templateUrl: './overlay-panel-basic-demo.html' + templateUrl: './overlay-panel-basic-demo.html', + standalone: true, + imports: [OverlayPanelModule, InputGroupModule, InputGroupAddonModule, ButtonModule, InputTextModule, ChipsModule, CommonModule] }) -export class OverlayPanelBasicDemo {}` +export class OverlayPanelBasicDemo { + members = [ + { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' }, + { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' }, + { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' } + ]; +}` }; } diff --git a/src/app/showcase/doc/paginator/templatedoc.ts b/src/app/showcase/doc/paginator/templatedoc.ts index cd30fe3a876..3e0b0944988 100644 --- a/src/app/showcase/doc/paginator/templatedoc.ts +++ b/src/app/showcase/doc/paginator/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '@domain/code'; +import { Code } from '../../domain/code'; interface PageEvent { first: number; @@ -12,28 +12,67 @@ interface PageEvent { selector: 'template-doc', template: ` -

- Paginator elements can be customized using the pTemplate property. -

+

Templating allows overriding the default content of the UI elements by defining callbacks using the element name.

 -
- - - ({{ currentPage }} of {{ totalPages }}) - - -
- +
+
+
+ +
+
+ +
+
+ +
+
+ +
+ Items per page: + + +
+ +
+
+ Items per page: + +
+
- -
+ ` }) export class TemplateDoc { - first: number = 0; + first1: number = 0; + + rows1: number = 10; + + first2: number = 0; + + rows2: number = 10; - rows: number = 1; + first3: number = 0; + + rows3: number = 10; totalRecords: number = 120; @@ -44,27 +83,37 @@ export class TemplateDoc { { label: 120, value: 120 } ]; - onPageChange(event: PageEvent) { - this.first = event.first; - this.rows = event.rows; + onPageChange1(event: PageEvent) { + this.first1 = event.first; + this.rows1 = event.rows; + } + + onPageChange2(event: PageEvent) { + this.first2 = event.first; + this.rows2 = event.rows; + } + + onPageChange3(event: PageEvent) { + this.first3 = event.first; + this.rows3 = event.rows; } code: Code = { basic: `
- +
- +
- +
Items per page: - +
@@ -72,46 +121,49 @@ export class TemplateDoc {
Items per page: - +
`, - html: ` -
+ html: `
- +
- +
- +
- +
Items per page: - +
- +
Items per page: - +
`, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { PaginatorModule } from 'primeng/paginator'; +import { ButtonModule } from 'primeng/button'; +import { DividerModule } from 'primeng/divider'; +import { SliderModule } from 'primeng/slider'; +import { FormsModule } from '@angular/forms'; + interface PageEvent { first: number; rows: number; @@ -121,7 +173,9 @@ interface PageEvent { @Component({ selector: 'paginator-template-demo', - templateUrl: './paginator-template-demo.html' + templateUrl: './paginator-template-demo.html', + standalone: true, + imports: [PaginatorModule, ButtonModule, DividerModule, SliderModule, FormsModule] }) export class PaginatorTemplateDemo { first1: number = 0;