From d31a7e6440a516eb25d6228cd2de3b97e7bb20d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Mon, 20 Nov 2023 19:32:25 +0300
Subject: [PATCH] Merge branch 'master' into accessibility

---
 src/app/components/panel/panel.ts             |   1 +
 src/app/showcase/data/news.json               |   8 +-
 .../doc/contextmenu/contextmenudoc.module.ts  |   3 +-
 .../doc/contextmenu/triggereventdoc.ts        | 318 ------------------
 .../galleria/fullscreen/customcontentdoc.ts   |  12 +-
 src/app/showcase/doc/multiselect/basicdoc.ts  |   3 +-
 src/app/showcase/doc/table/columntoggledoc.ts |  42 +--
 .../pages/contextmenu/contextmenudemo.ts      |   1 -
 src/app/showcase/pages/lts/lts.component.html |   6 +-
 .../showcase/pages/uikit/uikit.component.html |   6 +-
 10 files changed, 42 insertions(+), 358 deletions(-)
 delete mode 100644 src/app/showcase/doc/contextmenu/triggereventdoc.ts

diff --git a/src/app/components/panel/panel.ts b/src/app/components/panel/panel.ts
index a8b790d64cf..7c848f64a05 100755
--- a/src/app/components/panel/panel.ts
+++ b/src/app/components/panel/panel.ts
@@ -58,6 +58,7 @@ import { PanelAfterToggleEvent, PanelBeforeToggleEvent } from './panel.interface
                 role="region"
                 [attr.aria-labelledby]="id + '_header'"
                 [attr.aria-hidden]="collapsed"
+                [attr.tabindex]="collapsed ? '-1' : undefined"
                 [@panelContent]="
                     collapsed
                         ? { value: 'hidden', params: { transitionParams: animating ? transitionOptions : '0ms', height: '0', opacity: '0' } }
diff --git a/src/app/showcase/data/news.json b/src/app/showcase/data/news.json
index c815bb169a9..8284142bd57 100644
--- a/src/app/showcase/data/news.json
+++ b/src/app/showcase/data/news.json
@@ -1,8 +1,8 @@
 {
-    "id": 58,
-    "content": "Sakai Free Admin Template",
-    "linkText": "Learn More",
-    "linkHref": "https://primefaces.org/sakai-ng",
+    "id": 59,
+    "content": "🎉 Black Friday Sale! Up to 50% Off",
+    "linkText": "Buy Now",
+    "linkHref": "https://www.primefaces.org/store",
     "backgroundStyle": "background-color:#3B82F6",
     "textStyle": "color:#ffffff;font-weight:500",
     "linkStyle": "color:#ffffff;font-weight:700",
diff --git a/src/app/showcase/doc/contextmenu/contextmenudoc.module.ts b/src/app/showcase/doc/contextmenu/contextmenudoc.module.ts
index cef9b48ab6e..dd1e3755407 100644
--- a/src/app/showcase/doc/contextmenu/contextmenudoc.module.ts
+++ b/src/app/showcase/doc/contextmenu/contextmenudoc.module.ts
@@ -9,11 +9,10 @@ import { BasicDoc } from './basicdoc';
 import { DocumentDoc } from './documentdoc';
 import { ImportDoc } from './importdoc';
 import { StyleDoc } from './styledoc';
-import { TriggerEventDoc } from './triggereventdoc';
 
 @NgModule({
     imports: [CommonModule, AppCodeModule, RouterModule, ContextMenuModule, AppDocModule],
-    declarations: [BasicDoc, ImportDoc, DocumentDoc, StyleDoc, TriggerEventDoc, AccessibilityDoc],
+    declarations: [BasicDoc, ImportDoc, DocumentDoc, StyleDoc, AccessibilityDoc],
     exports: [AppDocModule]
 })
 export class ContextMenuDocModule {}
diff --git a/src/app/showcase/doc/contextmenu/triggereventdoc.ts b/src/app/showcase/doc/contextmenu/triggereventdoc.ts
deleted file mode 100644
index d5ac1838c93..00000000000
--- a/src/app/showcase/doc/contextmenu/triggereventdoc.ts
+++ /dev/null
@@ -1,318 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-import { Code } from '../../domain/code';
-
-@Component({
-    selector: 'context-menu-trigger-event-demo',
-    template: ` <section class="py-4">
-        <app-docsectiontext [title]="title" [id]="id">
-            <p>Trigger event of context menu can be replaced by a different event with <i>triggerEvent</i> property. Default value of <i>triggerEvent</i> is <i>contextmenu</i>.</p>
-        </app-docsectiontext>
-        <div class="card flex justify-content-center">
-            <img #img src="https://primefaces.org/cdn/primeng/images/demo/nature/nature3.jpg" alt="Logo" aria-haspopup="true" class="max-w-full" />
-            <p-contextMenu [target]="img" [model]="items" triggerEvent="click"></p-contextMenu>
-        </div>
-        <app-code [code]="code" selector="context-menu-trigger-event-demo"></app-code>
-    </section>`
-})
-export class TriggerEventDoc implements OnInit {
-    @Input() id: string;
-
-    @Input() title: string;
-
-    items: MenuItem[] | undefined;
-
-    ngOnInit() {
-        this.items = [
-            {
-                label: 'File',
-                icon: 'pi pi-fw pi-file',
-                items: [
-                    {
-                        label: 'New',
-                        icon: 'pi pi-fw pi-plus',
-                        items: [
-                            {
-                                label: 'Bookmark',
-                                icon: 'pi pi-fw pi-bookmark'
-                            },
-                            {
-                                label: 'Video',
-                                icon: 'pi pi-fw pi-video'
-                            }
-                        ]
-                    },
-                    {
-                        label: 'Delete',
-                        icon: 'pi pi-fw pi-trash'
-                    },
-                    {
-                        separator: true
-                    },
-                    {
-                        label: 'Export',
-                        icon: 'pi pi-fw pi-external-link'
-                    }
-                ]
-            },
-            {
-                label: 'Edit',
-                icon: 'pi pi-fw pi-pencil',
-                items: [
-                    {
-                        label: 'Left',
-                        icon: 'pi pi-fw pi-align-left'
-                    },
-                    {
-                        label: 'Right',
-                        icon: 'pi pi-fw pi-align-right'
-                    },
-                    {
-                        label: 'Center',
-                        icon: 'pi pi-fw pi-align-center'
-                    },
-                    {
-                        label: 'Justify',
-                        icon: 'pi pi-fw pi-align-justify'
-                    }
-                ]
-            },
-            {
-                label: 'Users',
-                icon: 'pi pi-fw pi-user',
-                items: [
-                    {
-                        label: 'New',
-                        icon: 'pi pi-fw pi-user-plus'
-                    },
-                    {
-                        label: 'Delete',
-                        icon: 'pi pi-fw pi-user-minus'
-                    },
-                    {
-                        label: 'Search',
-                        icon: 'pi pi-fw pi-users',
-                        items: [
-                            {
-                                label: 'Filter',
-                                icon: 'pi pi-fw pi-filter',
-                                items: [
-                                    {
-                                        label: 'Print',
-                                        icon: 'pi pi-fw pi-print'
-                                    }
-                                ]
-                            },
-                            {
-                                icon: 'pi pi-fw pi-bars',
-                                label: 'List'
-                            }
-                        ]
-                    }
-                ]
-            },
-            {
-                label: 'Events',
-                icon: 'pi pi-fw pi-calendar',
-                items: [
-                    {
-                        label: 'Edit',
-                        icon: 'pi pi-fw pi-pencil',
-                        items: [
-                            {
-                                label: 'Save',
-                                icon: 'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                                label: 'Delete',
-                                icon: 'pi pi-fw pi-calendar-minus'
-                            }
-                        ]
-                    },
-                    {
-                        label: 'Archieve',
-                        icon: 'pi pi-fw pi-calendar-times',
-                        items: [
-                            {
-                                label: 'Remove',
-                                icon: 'pi pi-fw pi-calendar-minus'
-                            }
-                        ]
-                    }
-                ]
-            },
-            {
-                separator: true
-            },
-            {
-                label: 'Quit',
-                icon: 'pi pi-fw pi-power-off'
-            }
-        ];
-    }
-
-    code: Code = {
-        basic: `
-<img #img src="https://primefaces.org/cdn/primeng/images/demo/nature/nature3.jpg" alt="Logo" aria-haspopup="true" class="max-w-full">
-<p-contextMenu [target]="img" [model]="items" [triggerEvent]="click"></p-contextMenu>`,
-
-        html: `
-<div class="card flex justify-content-center">
-    <img #img src="https://primefaces.org/cdn/primeng/images/demo/nature/nature3.jpg" alt="Logo" aria-haspopup="true" class="max-w-full">
-    <p-contextMenu [target]="img" [model]="items" triggerEvent="click"></p-contextMenu>
-</div>`,
-
-        typescript: `
-import { Component, OnInit } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-
-@Component({
-    selector: 'context-menu-trigger-event-demo',
-    templateUrl: './context-menu-trigger-event-demo.html'
-})
-export class ContextMenuTriggerEventDemo implements OnInit {
-    items: MenuItem[] | undefined;
-
-    ngOnInit() {
-        this.items = [
-            {
-                label: 'File',
-                icon: 'pi pi-fw pi-file',
-                items: [
-                    {
-                        label: 'New',
-                        icon: 'pi pi-fw pi-plus',
-                        items: [
-                            {
-                                label: 'Bookmark',
-                                icon: 'pi pi-fw pi-bookmark'
-                            },
-                            {
-                                label: 'Video',
-                                icon: 'pi pi-fw pi-video'
-                            }
-                        ]
-                    },
-                    {
-                        label: 'Delete',
-                        icon: 'pi pi-fw pi-trash'
-                    },
-                    {
-                        separator: true
-                    },
-                    {
-                        label: 'Export',
-                        icon: 'pi pi-fw pi-external-link'
-                    }
-                ]
-            },
-            {
-                label: 'Edit',
-                icon: 'pi pi-fw pi-pencil',
-                items: [
-                    {
-                        label: 'Left',
-                        icon: 'pi pi-fw pi-align-left'
-                    },
-                    {
-                        label: 'Right',
-                        icon: 'pi pi-fw pi-align-right'
-                    },
-                    {
-                        label: 'Center',
-                        icon: 'pi pi-fw pi-align-center'
-                    },
-                    {
-                        label: 'Justify',
-                        icon: 'pi pi-fw pi-align-justify'
-                    }
-                ]
-            },
-            {
-                label: 'Users',
-                icon: 'pi pi-fw pi-user',
-                items: [
-                    {
-                        label: 'New',
-                        icon: 'pi pi-fw pi-user-plus'
-                    },
-                    {
-                        label: 'Delete',
-                        icon: 'pi pi-fw pi-user-minus'
-                    },
-                    {
-                        label: 'Search',
-                        icon: 'pi pi-fw pi-users',
-                        items: [
-                            {
-                                label: 'Filter',
-                                icon: 'pi pi-fw pi-filter',
-                                items: [
-                                    {
-                                        label: 'Print',
-                                        icon: 'pi pi-fw pi-print'
-                                    }
-                                ]
-                            },
-                            {
-                                icon: 'pi pi-fw pi-bars',
-                                label: 'List'
-                            }
-                        ]
-                    }
-                ]
-            },
-            {
-                label: 'Events',
-                icon: 'pi pi-fw pi-calendar',
-                items: [
-                    {
-                        label: 'Edit',
-                        icon: 'pi pi-fw pi-pencil',
-                        items: [
-                            {
-                                label: 'Save',
-                                icon: 'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                                label: 'Delete',
-                                icon: 'pi pi-fw pi-calendar-minus'
-                            }
-                        ]
-                    },
-                    {
-                        label: 'Archieve',
-                        icon: 'pi pi-fw pi-calendar-times',
-                        items: [
-                            {
-                                label: 'Remove',
-                                icon: 'pi pi-fw pi-calendar-minus'
-                            }
-                        ]
-                    }
-                ]
-            },
-            {
-                separator: true
-            },
-            {
-                label: 'Quit',
-                icon: 'pi pi-fw pi-power-off'
-            }
-        ];
-    }
-}`,
-
-        module: `
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { ContextMenuModule } from 'primeng/contextmenu';
-import { ContextMenuDemo } from './contextmenudemo';
-
-@NgModule({
-    imports: [CommonModule, ContextMenuModule],
-    declarations: [ContextMenuDemo]
-})
-export class ContextMenuDemoModule {}`
-    };
-}
diff --git a/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts b/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts
index 5ec49291bcf..6c3230fbb89 100644
--- a/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts
+++ b/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts
@@ -9,9 +9,9 @@ import { PhotoService } from '../../../service/photoservice';
         <app-docsectiontext [title]="title" [id]="id" [level]="3" #docsectiontext>
             <p>Using <i>activeIndex</i>, Galleria is displayed with a specific initial image.</p>
         </app-docsectiontext>
-        <div class="card md:flex md:justify-content-center">
-            <div *ngIf="images" class="grid" style="max-width: 400px;">
-                <div *ngFor="let image of images; let index = index" class="col-4" key="index">
+        <div class="card">
+            <div *ngIf="images" class="grid" style="max-width: 800px;">
+                <div *ngFor="let image of images; let index = index" class="col-3" key="index">
                     <img [src]="image.thumbnailImageSrc" [alt]="image.alt" style="cursor: pointer" (click)="imageClick(index)" />
                 </div>
             </div>
@@ -98,9 +98,9 @@ export class FullScreenTemplateDoc implements OnInit {
 </p-galleria>
         `,
         html: `
- <div class="card md:flex md:justify-content-center">
-    <div *ngIf="images" class="grid" style="max-width: 400px;">
-        <div *ngFor="let image of images; let index = index" class="col-4" key="index">
+ <div class="card">
+    <div *ngIf="images" class="grid" style="max-width: 800px;">
+        <div *ngFor="let image of images; let index = index" class="col-3" key="index">
             <img [src]="image.thumbnailImageSrc" [alt]="image.alt" style="cursor: pointer" (click)="imageClick(index)" />
         </div>
     </div>
diff --git a/src/app/showcase/doc/multiselect/basicdoc.ts b/src/app/showcase/doc/multiselect/basicdoc.ts
index 6a4996018cf..a2c63063ec6 100644
--- a/src/app/showcase/doc/multiselect/basicdoc.ts
+++ b/src/app/showcase/doc/multiselect/basicdoc.ts
@@ -1,6 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Code } from '../../domain/code';
-import { FormGroup, FormControl } from '@angular/forms';
 
 interface City {
     name: string;
@@ -18,7 +17,7 @@ interface City {
             </p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-multiSelect [options]="cities" [(ngModel)]="selectedCities" optionLabel="name" placeholder="Select Cities"></p-multiSelect>
+            <p-multiSelect [options]="cities" [(ngModel)]="selectedCities" optionLabel="name" [showClear]="true" placeholder="Select Cities"></p-multiSelect>
         </div>
         <app-code [code]="code" selector="multi-select-basic-demo"></app-code>
     </section>`
diff --git a/src/app/showcase/doc/table/columntoggledoc.ts b/src/app/showcase/doc/table/columntoggledoc.ts
index 882cb2bae86..5c6a49407b8 100644
--- a/src/app/showcase/doc/table/columntoggledoc.ts
+++ b/src/app/showcase/doc/table/columntoggledoc.ts
@@ -14,27 +14,27 @@ interface Column {
             <p>This demo uses a multiselect component to implement toggleable columns.</p>
         </app-docsectiontext>
         <div class="card">
-            <p-table [columns]="selectedColumns" [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="caption">
-                    <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header" selectedItemsLabel="{0} columns selected" [style]="{ 'min-width': '200px' }" placeholder="Choose Columns"></p-multiSelect>
-                </ng-template>
-                <ng-template pTemplate="header" let-columns>
-                    <tr>
-                        <th>Code</th>
-                        <th *ngFor="let col of columns">
-                            {{ col.header }}
-                        </th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product let-columns="columns">
-                    <tr>
-                        <td>{{ product.code }}</td>
-                        <td *ngFor="let col of columns">
-                            {{ product[col.field] }}
-                        </td>
-                    </tr>
-                </ng-template>
-            </p-table>
+        <p-table [columns]="selectedColumns" [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
+        <ng-template pTemplate="caption">
+            <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header" selectedItemsLabel="{0} columns selected" [style]="{ 'min-width': '200px' }" placeholder="Choose Columns"></p-multiSelect>
+        </ng-template>
+        <ng-template pTemplate="header" let-columns>
+            <tr>
+                <th>Code</th>
+                <th *ngFor="let col of columns">
+                    {{ col.header }}
+                </th>
+            </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-product let-columns="columns">
+            <tr>
+                <td>{{ product.code }}</td>
+                <td *ngFor="let col of columns">
+                    {{ product[col.field] }}
+                </td>
+            </tr>
+        </ng-template>
+    </p-table>
         </div>
         <app-code [code]="code" selector="table-column-toggle-demo" [extFiles]="extFiles"></app-code>
     </section>`,
diff --git a/src/app/showcase/pages/contextmenu/contextmenudemo.ts b/src/app/showcase/pages/contextmenu/contextmenudemo.ts
index dc02fae806f..2d52556bd18 100755
--- a/src/app/showcase/pages/contextmenu/contextmenudemo.ts
+++ b/src/app/showcase/pages/contextmenu/contextmenudemo.ts
@@ -4,7 +4,6 @@ import { BasicDoc } from '../../doc/contextmenu/basicdoc';
 import { DocumentDoc } from '../../doc/contextmenu/documentdoc';
 import { ImportDoc } from '../../doc/contextmenu/importdoc';
 import { StyleDoc } from '../../doc/contextmenu/styledoc';
-import { TriggerEventDoc } from '../../doc/contextmenu/triggereventdoc';
 
 @Component({
     templateUrl: './contextmenudemo.html'
diff --git a/src/app/showcase/pages/lts/lts.component.html b/src/app/showcase/pages/lts/lts.component.html
index 7ea16fd754d..804077217d3 100755
--- a/src/app/showcase/pages/lts/lts.component.html
+++ b/src/app/showcase/pages/lts/lts.component.html
@@ -140,7 +140,8 @@
                         <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                         <div class="flex gap-3 flex-wrap">
                             <div class="flex gap-3 flex-wrap">
-                                <span class="text-2xl font-bold text-900">$249</span>
+                                <span class="text-2xl font-medium text-600 line-through">$249</span>
+                            <span class="text-2xl font-bold text-900">$149</span>
                             </div>
                         </div>
                         <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
@@ -180,7 +181,8 @@
                         <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                         <div class="flex gap-3 flex-wrap">
                             <div class="flex gap-3 flex-wrap">
-                                <span class="text-2xl font-bold text-900">$990</span>
+                                <span class="text-2xl font-medium text-600 line-through">$990</span>
+                            <span class="text-2xl font-bold text-900">$490</span>
                             </div>
                         </div>
                         <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
diff --git a/src/app/showcase/pages/uikit/uikit.component.html b/src/app/showcase/pages/uikit/uikit.component.html
index 0b1d938d99a..151fdb2d2d5 100755
--- a/src/app/showcase/pages/uikit/uikit.component.html
+++ b/src/app/showcase/pages/uikit/uikit.component.html
@@ -143,7 +143,8 @@
                         <div class="text-600 font-medium">For individual designers</div>
                         <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                         <div class="flex gap-3 flex-wrap">
-                            <span class="text-2xl font-bold text-900">$99</span>
+                            <span class="text-2xl font-medium text-600 line-through">$99</span>
+                            <span class="text-2xl font-bold text-900">$49</span>
                         </div>
                         <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                         <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
@@ -186,7 +187,8 @@
                         <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
                         <div class="flex gap-3 flex-wrap">
                             <div class="flex gap-3 flex-wrap">
-                                <span class="text-2xl font-bold text-900">$249</span>
+                                <span class="text-2xl font-medium text-600 line-through">$249</span>
+                            <span class="text-2xl font-bold text-900">$149</span>
                             </div>
                         </div>
                         <hr class="my-3 mx-0 border-top-1 border-none surface-border" />