Fixes #16865 | Add ImageCompare Component

apps/showcase/assets/data/menu.json

@@ -372,6 +372,11 @@
                         {
                             "name": "Image",
                             "routerLink": "/image"
+                        },
+                        {
+                            "name": "ImageCompare",
+                            "routerLink": "/imagecompare",
+                            "badge":"NEW"
                         }
                     ]
                 },

apps/showcase/doc/imagecompare/accessibilitydoc.ts

@@ -0,0 +1,76 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'image-compare-accessibility-doc',
+    template: ` <div>
+        <app-docsectiontext id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>ImageComponent component uses a native range <i>slider</i> internally. Value to describe the component can be defined using <i>aria-labelledby</i> and <i>aria-label</i> props.</p>
+            <app-code [code]="code" [hideToggleCode]="true"></app-code>
+            <h3>Keyboard Support</h3>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><i>tab</i></td>
+                            <td>Moves focus to the component.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span class="inline-flex flex-col">
+                                    <i class="mb-1">left arrow</i>
+                                    <i>up arrow</i>
+                                </span>
+                            </td>
+                            <td>Decrements the value.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span class="inline-flex flex-col">
+                                    <i class="mb-1">right arrow</i>
+                                    <i>down arrow</i>
+                                </span>
+                            </td>
+                            <td>Increments the value.</td>
+                        </tr>
+                        <tr>
+                            <td><i>home</i></td>
+                            <td>Set the minimum value.</td>
+                        </tr>
+                        <tr>
+                            <td><i>end</i></td>
+                            <td>Set the maximum value.</td>
+                        </tr>
+                        <tr>
+                            <td><i>page up</i></td>
+                            <td>Increments the value by 10 steps.</td>
+                        </tr>
+                        <tr>
+                            <td><i>page down</i></td>
+                            <td>Decrements the value by 10 steps.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </app-docsectiontext>
+    </div>`
+})
+export class AccessibilityDoc {
+    code: Code = {
+        html: `<span id="image_label">Compare Images</span>
+<p-imagecompare class="shadow-lg rounded-2xl" aria-labelledby="image-label">
+    ...
+</p-imagecompare>
+
+<p-imagecompare class="shadow-lg rounded-2xl" aria-label="Compare Images">
+    ...
+</p-imagecompare>`
+    };
+}

apps/showcase/doc/imagecompare/basicdoc.ts

@@ -0,0 +1,57 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'basic-doc',
+    template: `
+        <app-docsectiontext>
+            <p>Images are defined using templating with <i>left</i> and <i>right</i> templates. Use the <i>style</i> or <i>class</i> properties to define the size of the container.</p>
+        </app-docsectiontext>
+        <div class="card flex justify-center">
+            <p-imagecompare class="shadow-lg rounded-2xl">
+                <ng-template #left>
+                    <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+                </ng-template>
+                <ng-template #right>
+                    <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+                </ng-template>
+            </p-imagecompare>
+        </div>
+        <app-code [code]="code" selector="image-compare-basic-demo"></app-code>
+    `
+})
+export class BasicDoc {
+    code: Code = {
+        basic: `<p-imagecompare class="shadow-lg rounded-2xl">
+    <ng-template #left>
+        <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+    </ng-template>
+    <ng-template #right>
+        <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+    </ng-template>
+</p-imagecompare>`,
+
+        html: `<div class="card flex justify-center">
+    <p-imagecompare class="shadow-lg rounded-2xl">
+        <ng-template #left>
+            <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+        </ng-template>
+        <ng-template #right>
+            <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+        </ng-template>
+    </p-imagecompare>
+</div>`,
+
+        typescript: `import { Component } from '@angular/core';
+import { ImageCompareModule } from 'primeng/imagecompare';
+
+@Component({
+    selector: 'image-compare-basic-demo',
+    templateUrl: './image-compare-basic-demo.html',
+    standalone: true,
+    imports: [ImageCompareModule]
+})
+export class ImageCompareBasicDemo {
+}`
+    };
+}

apps/showcase/doc/imagecompare/imagecomparedoc.module.ts

@@ -0,0 +1,18 @@
+import { AppCodeModule } from '@/components/doc/app.code.component';
+import { AppDocModule } from '@/components/doc/app.doc.module';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { AccessibilityDoc } from './accessibilitydoc';
+import { BasicDoc } from './basicdoc';
+import { ResponsiveDoc } from './responsivedoc';
+import { ImportDoc } from './importdoc';
+import { ImageCompareModule } from 'primeng/imagecompare';
+
+@NgModule({
+    imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, ImageCompareModule],
+    declarations: [ImportDoc, BasicDoc, AccessibilityDoc, ResponsiveDoc],
+    exports: [AppDocModule]
+})
+export class ImageCompareDocModule {}

apps/showcase/doc/imagecompare/importdoc.ts

@@ -0,0 +1,12 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'image-compare-import-doc',
+    template: ` <app-code [code]="code" [hideToggleCode]="true"></app-code> `
+})
+export class ImportDoc {
+    code: Code = {
+        typescript: `import { ImageCompareModule } from 'primeng/imagecompare';`
+    };
+}

apps/showcase/doc/imagecompare/responsivedoc.ts

@@ -0,0 +1,57 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'responsive-doc',
+    template: `
+        <app-docsectiontext>
+            <p>Apply responsive styles to the container element to optimize display per screen size.</p>
+        </app-docsectiontext>
+        <div class="card flex justify-center">
+            <p-imagecompare class="sm:!w-96 shadow-lg rounded-2xl">
+                <ng-template #left>
+                    <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+                </ng-template>
+                <ng-template #right>
+                    <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+                </ng-template>
+            </p-imagecompare>
+        </div>
+        <app-code [code]="code" selector="image-compare-basic-demo"></app-code>
+    `
+})
+export class ResponsiveDoc {
+    code: Code = {
+        basic: `<p-imagecompare class="sm:!w-96 shadow-lg rounded-2xl">
+    <ng-template #left>
+        <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+    </ng-template>
+    <ng-template #right>
+        <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+    </ng-template>
+</p-imagecompare>`,
+
+        html: `<div class="card flex justify-center">
+    <p-imagecompare class="sm:!w-96 shadow-lg rounded-2xl">
+        <ng-template #left>
+            <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+        </ng-template>
+        <ng-template #right>
+            <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+        </ng-template>
+    </p-imagecompare>
+</div>`,
+
+        typescript: `import { Component } from '@angular/core';
+import { ImageCompareModule } from 'primeng/imagecompare';
+
+@Component({
+    selector: 'image-compare-responsive-demo',
+    templateUrl: './image-compare-responsive-demo.html',
+    standalone: true,
+    imports: [ImageCompareModule]
+})
+export class ImageCompareResponsiveDemo {
+}`
+    };
+}

apps/showcase/pages/imagecompare/index.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+import { ImportDoc } from '../../doc/imagecompare/importdoc';
+import { ImageCompareDocModule } from '../../doc/imagecompare/imagecomparedoc.module';
+import { BasicDoc } from '../../doc/imagecompare/basicdoc';
+import { AccessibilityDoc } from '../../doc/imagecompare/accessibilitydoc';
+import { ResponsiveDoc } from '@/doc/imagecompare/responsivedoc';
+
+@Component({
+    template: `<app-doc docTitle="Angular ImageCompare Component" header="ImageCompare" description="Compare two images side by side with a slider." [docs]="docs" [apiDocs]="['ImageCompare']" themeDocs="imagecompare"></app-doc> `,
+    standalone: true,
+    imports: [ImageCompareDocModule]
+})
+export class ImageCompareDemo {
+    docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'responsive',
+            label: 'Responsive',
+            component: ResponsiveDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+}

apps/showcase/pages/imagecompare/routes.ts

@@ -0,0 +1,8 @@
+import { ImageCompareDemo } from './';
+
+export default [
+    {
+        path: '',
+        component: ImageCompareDemo
+    }
+];

apps/showcase/router/app.routes.ts

@@ -119,6 +119,7 @@ export const routes: Routes = [
                 loadChildren: () => import('@/pages/galleria/routes')
             },
             { path: 'image', loadChildren: () => import('@/pages/image/routes') },
+            { path: 'imagecompare', loadChildren: () => import('@/pages/imagecompare/routes') },
             { path: 'inplace', loadChildren: () => import('@/pages/inplace/routes') },
             { path: 'fluid', loadChildren: () => import('@/pages/fluid/routes') },
             {