Fixed #10413 Dock component

src/app/components/dock/dock.css

@@ -0,0 +1,101 @@
+.p-dock {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+}
+
+.p-dock-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: auto;
+}
+
+.p-dock-item {
+    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform;
+}
+
+.p-dock-action {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    cursor: default;
+}
+
+.p-dock-item-second-prev,
+.p-dock-item-second-next {
+    transform: scale(1.2);
+}
+
+.p-dock-item-prev,
+.p-dock-item-next {
+    transform: scale(1.4);
+}
+
+.p-dock-item-current {
+    transform: scale(1.6);
+    z-index: 1;
+}
+
+/* Position */
+/* top */
+.p-dock-top {
+    left: 0;
+    top: 0;
+    width: 100%;
+}
+
+.p-dock-top .p-dock-item {
+    transform-origin: center top;
+}
+
+/* bottom */
+.p-dock-bottom {
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+.p-dock-bottom .p-dock-item {
+    transform-origin: center bottom;
+}
+
+/* right */
+.p-dock-right {
+    right: 0;
+    top: 0;
+    height: 100%;
+}
+
+.p-dock-right .p-dock-item {
+    transform-origin: center right;
+}
+
+.p-dock-right .p-dock-list {
+    flex-direction: column;
+}
+
+/* left */
+.p-dock-left {
+    left: 0;
+    top: 0;
+    height: 100%;
+}
+
+.p-dock-left .p-dock-item {
+    transform-origin: center left;
+}
+
+.p-dock-left .p-dock-list {
+    flex-direction: column;
+}

src/app/components/dock/dock.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { DockModule, Dock } from './dock';
+
+describe('Dock', () => {
+
+	let dock: Dock;
+	let fixture: ComponentFixture<Dock>;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [
+				NoopAnimationsModule
+			],
+			declarations: [
+				DockModule
+			]
+		});
+
+		fixture = TestBed.createComponent(Dock);
+		dock = fixture.componentInstance;
+	});
+});

src/app/components/dock/dock.ts

@@ -0,0 +1,121 @@
+import { NgModule, Component, Input, ElementRef, ContentChild, ChangeDetectionStrategy, ViewEncapsulation, TemplateRef, AfterContentInit, ContentChildren, QueryList, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PrimeTemplate, SharedModule } from 'primeng/api';
+import { RouterModule } from '@angular/router';
+import { RippleModule } from 'primeng/ripple';
+import { TooltipModule } from 'primeng/tooltip';
+
+@Component({
+    selector: 'p-dock',
+    template: `
+        <div [attr.id]="id" [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass">
+            <ul #list class="p-dock-list" role="menu" (mouseleave)="onListMouseLeave()">
+                <li *ngFor="let item of model; let i = index" [ngClass]="itemClass(i)" (mouseenter)="onItemMouseEnter(i)" >
+                    <a *ngIf="isClickableRouterLink(item); else elseBlock" pRipple [routerLink]="item.routerLink" [queryParams]="item.queryParams"
+                        [ngClass]="{'p-disabled':item.disabled}" class="p-dock-action"  role="menuitem" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" (click)="onItemClick($event, item)" (keydown.enter)="onItemClick($event, item, i)"
+                        [attr.target]="item.target" [attr.id]="item.id" [attr.tabindex]="item.disabled || readonly ? null : (item.tabindex ? item.tabindex : '0')"
+                        [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
+                            <span class="p-dock-action-icon" *ngIf="item.icon && !itemTemplate" [ngClass]="item.icon"></span>
+                            <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
+                    </a>
+                    <ng-template #elseBlock>
+                        <a pTooltip [tooltipOptions]="item.tooltipOptions" [showDelay]="1000" [tooltipPosition]="item.tooltipPosition" [attr.href]="item.url||null" class="p-dock-action"  role="menuitem" pRipple (click)="onItemClick($event, item)"
+                            [ngClass]="{'p-disabled':item.disabled}" (keydown.enter)="onItemClick($event, item, i)" [attr.target]="item.target" [attr.id]="item.id" [attr.tabindex]="item.disabled||(i !== activeIndex && readonly) ? null : (item.tabindex ? item.tabindex : '0')">
+                            <span class="p-dock-action-icon" *ngIf="item.icon && !itemTemplate" [ngClass]="item.icon"></span>
+                            <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
+                        </a>
+                    </ng-template>
+                </li>
+            </ul>
+        </div>
+    `,
+   changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./dock.css']
+})
+export class Dock implements AfterContentInit {
+
+    @Input() id: string;
+
+    @Input() style: any;
+
+    @Input() styleClass: string;
+
+    @Input() model: any[] = null;
+
+    @Input() position: string = "bottom";
+
+    @ContentChildren(PrimeTemplate) templates: QueryList<any>;
+
+    itemTemplate: TemplateRef<any>;
+
+    currentIndex: number;
+
+    constructor(private el: ElementRef, public cd: ChangeDetectorRef) {
+        this.currentIndex = -3;
+    }
+
+    ngAfterContentInit() {
+        this.templates.forEach((item) => {
+            switch(item.getType()) {
+                case 'item':
+                    this.itemTemplate = item.template;
+                break;
+
+                default:
+                    this.itemTemplate = item.template;
+                break;
+            }
+        });
+    }
+
+    onListMouseLeave() {
+        this.currentIndex = -3;
+        this.cd.markForCheck();
+    }
+
+    onItemMouseEnter(index) {
+        this.currentIndex = index;
+
+        if (index === 1) {
+
+        }
+
+        this.cd.markForCheck();
+    }
+
+    onItemClick(e, item) {
+        if (item.command) {
+            item.command({ originalEvent: e, item });
+        }
+    }
+
+    get containerClass() {
+        return {
+            ['p-dock p-component ' + ` p-dock-${this.position}`]: true
+        };
+    }
+
+    isClickableRouterLink(item: any) {
+        return item.routerLink && !item.disabled;
+    }
+
+    itemClass(index) {
+        return {
+            'p-dock-item': true,
+            'p-dock-item-second-prev': (this.currentIndex - 2) === index,
+            'p-dock-item-prev': (this.currentIndex - 1) === index,
+            'p-dock-item-current': this.currentIndex === index,
+            'p-dock-item-next': (this.currentIndex + 1) === index,
+            'p-dock-item-second-next': (this.currentIndex + 2) === index
+        }
+    }
+
+}
+
+@NgModule({
+    imports: [CommonModule, RouterModule, RippleModule, TooltipModule],
+    exports: [Dock, SharedModule, TooltipModule, RouterModule],
+    declarations: [Dock]
+})
+export class DockModule { }

src/app/components/dock/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }

src/app/components/dock/public_api.ts

@@ -0,0 +1 @@
+export * from './dock';