Add alternative selectors to the components.

primefaces · Nov 7, 2024 · 961e20a · 961e20a
2 parents c3dd420 + c77ea02
commit 961e20a
Show file tree

Hide file tree

Showing 34 changed files with 108 additions and 109 deletions.
diff --git a/src/app/components/basecomponent/basecomponent.ts b/src/app/components/basecomponent/basecomponent.ts
@@ -94,10 +94,7 @@ export class BaseComponent {
         this.templates?.forEach((item) => {
             const type = item.getType();
             const template = `${type}Template`;
-
-            if (this[template]) {
-                this[template] = item.template;
-            }
+            this[template] = item.template;
         });
     }
 

diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts
@@ -1866,6 +1866,7 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo
         if (this.media && !this.mediaChangeListener) {
             this.mediaChangeListener = this.renderer.listen(this.media, 'change', (event) => {
                 this.viewChanged = event.matches;
+
                 this.cd.markForCheck();
             });
         }
@@ -1888,11 +1889,11 @@ export class PickList extends BaseComponent implements AfterViewChecked, AfterCo
 
                 let innerHTML = `
                 @media screen and (max-width: ${this.breakpoint}) {
-                    .p-picklist[${this.attrSelector}] {
+                    .p-picklist[${this.id}] {
                         flex-direction: column;
                     }
 
-                    .p-picklist[${this.attrSelector}] .p-picklist-controls {
+                    .p-picklist[${this.id}] .p-picklist-controls {
                         flex-direction: row;
                     }
                 }`;

diff --git a/src/app/components/tabs/tab.ts b/src/app/components/tabs/tab.ts
@@ -33,6 +33,7 @@ import { SharedModule } from 'primeng/api';
     encapsulation: ViewEncapsulation.None,
     host: {
         '[class.p-tab]': 'true',
+        '[class.p-tab-active]': 'active()',
         '[class.p-component]': 'true',
         '[attr.data-pc-name]': '"tab"',
         '[attr.id]': 'id()',

diff --git a/src/app/components/treetable/treetable.spec.ts b/src/app/components/treetable/treetable.spec.ts
@@ -21,7 +21,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -46,7 +46,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -64,7 +64,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -82,7 +82,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -106,7 +106,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -130,7 +130,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode" [ttSelectableRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -159,7 +159,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         <p-treetableCheckbox [value]="rowNode" *ngIf="i == 0"></p-treetableCheckbox>
                         {{ rowData[col.field] }}
                     </td>
@@ -177,7 +177,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index" ttEditableColumn [ngClass]="{ 'p-toggler-column': i === 0 }">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                         <p-treetableCellEditor>
                             <ng-template pTemplate="input">
                                 <input
@@ -204,7 +204,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -221,7 +221,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -238,7 +238,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr>
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -262,7 +262,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttContextMenuRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>
@@ -301,7 +301,7 @@ import { MinusIcon } from 'primeng/icons/minus';
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                 <tr>
                     <td *ngFor="let col of cols; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treetableToggler>
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                         {{ rowData[col.field] }}
                     </td>
                 </tr>

diff --git a/src/app/showcase/doc/treetable/basicdoc.ts b/src/app/showcase/doc/treetable/basicdoc.ts
@@ -24,7 +24,7 @@ import { NodeService } from '@service/nodeservice';
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                         <tr [ttRow]="rowNode">
                             <td>
-                                <p-treetableToggler [rowNode]="rowNode" />
+                                <p-treeTableToggler [rowNode]="rowNode" />
                                 {{ rowData.name }}
                             </td>
                             <td>{{ rowData.size }}</td>
@@ -64,7 +64,7 @@ export class BasicDoc {
     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
         <tr [ttRow]="rowNode">
             <td>
-                <p-treetableToggler [rowNode]="rowNode" />
+                <p-treeTableToggler [rowNode]="rowNode" />
                 {{ rowData.name }}
             </td>
             <td>{{ rowData.size }}</td>
@@ -85,7 +85,7 @@ export class BasicDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
             <tr [ttRow]="rowNode">
                 <td>
-                    <p-treetableToggler [rowNode]="rowNode" />
+                    <p-treeTableToggler [rowNode]="rowNode" />
                     {{ rowData.name }}
                 </td>
                 <td>{{ rowData.size }}</td>

diff --git a/src/app/showcase/doc/treetable/columngroupdoc.ts b/src/app/showcase/doc/treetable/columngroupdoc.ts
@@ -27,7 +27,7 @@ import { Code } from '@domain/code';
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                         <tr [ttRow]="rowNode">
                             <td>
-                                <p-treetableToggler [rowNode]="rowNode" />
+                                <p-treeTableToggler [rowNode]="rowNode" />
                                 {{ rowData.brand }}
                             </td>
                             <td>{{ rowData.lastYearSale }}</td>
@@ -328,7 +328,7 @@ export class ColumnGroupDoc {
     <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
         <tr>
             <td>
-                <p-treetableToggler [rowNode]="rowNode" />
+                <p-treeTableToggler [rowNode]="rowNode" />
                 {{ rowData.brand }}
             </td>
             <td>{{ rowData.lastYearSale }}</td>
@@ -367,7 +367,7 @@ export class ColumnGroupDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
             <tr [ttRow]="rowNode">
                 <td>
-                    <p-treetableToggler [rowNode]="rowNode" />
+                    <p-treeTableToggler [rowNode]="rowNode" />
                     {{ rowData.brand }}
                 </td>
                 <td>{{ rowData.lastYearSale }}</td>

diff --git a/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts b/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts
@@ -27,7 +27,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -71,7 +71,7 @@ export class ResizeExpandDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -94,7 +94,7 @@ export class ResizeExpandDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>

diff --git a/src/app/showcase/doc/treetable/columnresizefitdoc.ts b/src/app/showcase/doc/treetable/columnresizefitdoc.ts
@@ -30,7 +30,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -74,7 +74,7 @@ export class ResizeFitDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -97,7 +97,7 @@ export class ResizeFitDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>

diff --git a/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts b/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts
@@ -42,7 +42,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -92,7 +92,7 @@ export class ResizeScrollableDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -121,7 +121,7 @@ export class ResizeScrollableDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>

diff --git a/src/app/showcase/doc/treetable/columntoggledoc.ts b/src/app/showcase/doc/treetable/columntoggledoc.ts
@@ -43,7 +43,7 @@ interface Column {
                     <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                         <tr [ttRow]="rowNode">
                             <td *ngFor="let col of columns; let i = index">
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -103,7 +103,7 @@ export class ColumnToggleDoc {
         <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
             <tr [ttRow]="rowNode">
                 <td *ngFor="let col of columns; let i = index">
-                    <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                     {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -138,7 +138,7 @@ export class ColumnToggleDoc {
             <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                 <tr [ttRow]="rowNode">
                     <td *ngFor="let col of columns; let i = index">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                     </td>
                 </tr>

diff --git a/src/app/showcase/doc/treetable/conditionalstyledoc.ts b/src/app/showcase/doc/treetable/conditionalstyledoc.ts
@@ -33,7 +33,7 @@ interface Column {
                                 *ngFor="let col of columns; let i = index"
                                 [ngClass]="{ 'font-bold': col.field === 'size' && rowData.size.endsWith('kb') }"
                             >
-                                <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                                 {{ rowData[col.field] }}
                             </td>
                         </tr>
@@ -79,7 +79,7 @@ export class ConditionalStyleDoc {
                 <td 
                     *ngFor="let col of columns; let i = index" 
                     [ngClass]="{ 'font-bold': col.field === 'size' && rowData.size.endsWith('kb') }">
-                        <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                         {{ rowData[col.field] }}
                 </td>
             </tr>
@@ -104,7 +104,7 @@ export class ConditionalStyleDoc {
                     <td 
                         *ngFor="let col of columns; let i = index" 
                         [ngClass]="{ 'font-bold': col.field === 'size' && rowData.size.endsWith('kb') }">
-                            <p-treetableToggler [rowNode]="rowNode" *ngIf="i === 0" />
+                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0" />
                             {{ rowData[col.field] }}
                     </td>
                 </tr>