Skip to content

Commit

Permalink
Fixed #15045 -SpeedDial | Add item template
Browse files Browse the repository at this point in the history
  • Loading branch information
@mehmetcetin01140
mehmetcetin01140 committed Mar 29, 2024
1 parent 2d0fbe8 commit eacf3a2
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 39 deletions.
14 changes: 14 additions & 0 deletions src/app/components/speeddial/speeddial.interface.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,24 @@
import { TemplateRef } from '@angular/core';
import { MenuItem } from '../api/menuitem';

/**
* Defines valid templates in SpeedDial.
* @group Templates
*/
export interface SpeedDialTemplates {
/**
* Custom template of item.
*/
item(context: {
/**
* Data of the item.
*/
$implicit: MenuItem[];
/**
* Index of the item.
*/
index: number;
}): TemplateRef<{ $implicit: MenuItem[]; index: number }>;
/**
* Custom template of button.
*/
Expand Down
74 changes: 42 additions & 32 deletions src/app/components/speeddial/speeddial.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,48 +85,53 @@ import { asapScheduler } from 'rxjs';
role="menuitem"
[attr.data-pc-section]="'menuitem'"
>
<a
*ngIf="_visible && isClickableRouterLink(item); else elseBlock"
pRipple
[routerLink]="item.routerLink"
[queryParams]="item.queryParams"
class="p-speeddial-action"
[ngClass]="{ 'p-disabled': item.disabled }"
role="menuitem"
[routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
(click)="onItemClick($event, item)"
(keydown.enter)="onItemClick($event, item, i)"
[attr.target]="item.target"
[attr.tabindex]="item.disabled || readonly || !visible ? null : item.tabindex ? item.tabindex : '0'"
[fragment]="item.fragment"
[queryParamsHandling]="item.queryParamsHandling"
[preserveFragment]="item.preserveFragment"
[skipLocationChange]="item.skipLocationChange"
[replaceUrl]="item.replaceUrl"
[state]="item.state"
[attr.aria-label]="item.label"
[attr.data-pc-section]="'action'"
>
<span class="p-speeddial-action-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
</a>
<ng-template #elseBlock>
<ng-container *ngIf="itemTemplate">
<ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: i }"></ng-container>
</ng-container>
<ng-container *ngIf="!itemTemplate">
<a
*ngIf="_visible"
[attr.href]="item.url || null"
*ngIf="_visible && isClickableRouterLink(item); else elseBlock"
pRipple
[routerLink]="item.routerLink"
[queryParams]="item.queryParams"
class="p-speeddial-action"
[ngClass]="{ 'p-disabled': item.disabled }"
role="menuitem"
pRipple
[routerLinkActiveOptions]="item.routerLinkActiveOptions || { exact: false }"
(click)="onItemClick($event, item)"
[ngClass]="{ 'p-disabled': item.disabled }"
(keydown.enter)="onItemClick($event, item, i)"
[attr.target]="item.target"
[attr.data-pc-section]="'action'"
[attr.tabindex]="item.disabled || readonly || !visible ? null : item.tabindex ? item.tabindex : '0'"
[fragment]="item.fragment"
[queryParamsHandling]="item.queryParamsHandling"
[preserveFragment]="item.preserveFragment"
[skipLocationChange]="item.skipLocationChange"
[replaceUrl]="item.replaceUrl"
[state]="item.state"
[attr.aria-label]="item.label"
[attr.tabindex]="item.disabled || (i !== activeIndex && readonly) || !visible ? null : item.tabindex ? item.tabindex : '0'"
[attr.data-pc-section]="'action'"
>
<span class="p-speeddial-action-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
</a>
</ng-template>
<ng-template #elseBlock>
<a
*ngIf="_visible"
[attr.href]="item.url || null"
class="p-speeddial-action"
role="menuitem"
pRipple
(click)="onItemClick($event, item)"
[ngClass]="{ 'p-disabled': item.disabled }"
(keydown.enter)="onItemClick($event, item, i)"
[attr.target]="item.target"
[attr.data-pc-section]="'action'"
[attr.aria-label]="item.label"
[attr.tabindex]="item.disabled || (i !== activeIndex && readonly) || !visible ? null : item.tabindex ? item.tabindex : '0'"
>
<span class="p-speeddial-action-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
</a>
</ng-template>
</ng-container>
</li>
</ul>
</div>
Expand Down Expand Up @@ -296,6 +301,8 @@ export class SpeedDial implements AfterViewInit, AfterContentInit, OnDestroy {

buttonTemplate: TemplateRef<any> | undefined;

itemTemplate: TemplateRef<any> | undefined;

isItemClicked: boolean = false;

_visible: boolean = false;
Expand Down Expand Up @@ -338,6 +345,9 @@ export class SpeedDial implements AfterViewInit, AfterContentInit, OnDestroy {
case 'button':
this.buttonTemplate = item.template;
break;
case 'item':
this.itemTemplate = item.template;
break;
}
});
}
Expand Down
65 changes: 58 additions & 7 deletions src/app/showcase/doc/apidoc/index.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1425,7 +1425,7 @@
}
],
"returnType": "void",
"description": "Inserts new messages."
"description": "Insterts new messages."
},
{
"name": "clear",
Expand Down Expand Up @@ -3126,12 +3126,6 @@
"optional": true,
"readonly": false,
"type": "string"
},
{
"name": "maximizeLabel",
"optional": true,
"readonly": false,
"type": "string"
}
]
}
Expand Down Expand Up @@ -5240,6 +5234,14 @@
"default": "false",
"description": "When enabled, calendar will start week numbers from first day of the year."
},
{
"name": "startWeekFromFirstDayOfYear",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "When enabled, calendar will start week numbers from first day of the year."
},
{
"name": "showClear",
"optional": false,
Expand Down Expand Up @@ -10309,6 +10311,7 @@
{
"name": "componentType",
"type": "Type<T>",
"type": "Type<T>",
"description": "Dynamic component for content template."
},
{
Expand All @@ -10318,6 +10321,7 @@
}
],
"returnType": "DynamicDialogRef<T>",
"returnType": "DynamicDialogRef<T>",
"description": "Displays the dialog using the dynamic dialog object options."
},
{
Expand All @@ -10326,6 +10330,7 @@
{
"name": "ref",
"type": "DynamicDialogRef<any>"
"type": "DynamicDialogRef<any>"
}
],
"returnType": "DynamicDialogComponent",
Expand Down Expand Up @@ -10763,6 +10768,10 @@
"name": "onMaximize",
"description": "Event triggered on dialog is maximized."
},
{
"name": "onChildComponentLoaded",
"description": "Event triggered on child component load."
},
{
"name": "onChildComponentLoaded",
"description": "Event triggered on child component load."
Expand Down Expand Up @@ -15900,6 +15909,7 @@
"type": "boolean",
"default": "false",
"description": "Indicates whether to focus on options when hovering over them, defaults to optionLabel."
"description": "Indicates whether to focus on options when hovering over them, defaults to optionLabel."
},
{
"name": "filterFields",
Expand Down Expand Up @@ -17520,6 +17530,13 @@
"type": "TemplateRef<Object>",
"description": "Template instance to inject into the jump to page dropdown item inside in the paginator."
},
{
"name": "jumpToPageItemTemplate",
"optional": false,
"readonly": false,
"type": "TemplateRef<Object>",
"description": "Template instance to inject into the jump to page dropdown item inside in the paginator."
},
{
"name": "showPageLinks",
"optional": false,
Expand All @@ -17541,6 +17558,7 @@
"readonly": false,
"type": "TemplateRef<Object>",
"description": "Template instance to inject into the rows per page dropdown item inside in the paginator."
"description": "Template instance to inject into the rows per page dropdown item inside in the paginator."
},
{
"name": "first",
Expand Down Expand Up @@ -21365,6 +21383,17 @@
"templates": {
"description": "Defines the templates used by the component.",
"values": [
{
"parent": "speeddial",
"name": "item",
"parameters": [
{
"name": "context",
"type": "{\n \t $implicit: MenuItem, // Data of the item.\n \t index: number, // Index of the item.\n }"
}
],
"description": "Custom template of item."
},
{
"parent": "speeddial",
"name": "button",
Expand Down Expand Up @@ -26569,6 +26598,28 @@
"type": "ScrollerOptions",
"description": "Whether to use the scroller feature. The properties of scroller component can be used like an object in it."
},
{
"name": "virtualScroll",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Whether the data should be loaded on demand during scroll."
},
{
"name": "virtualScrollItemSize",
"optional": false,
"readonly": false,
"type": "number",
"description": "Height of an item in the list for VirtualScrolling."
},
{
"name": "virtualScrollOptions",
"optional": false,
"readonly": false,
"type": "ScrollerOptions",
"description": "Whether to use the scroller feature. The properties of scroller component can be used like an object in it."
},
{
"name": "options",
"optional": false,
Expand Down

0 comments on commit eacf3a2

Please sign in to comment.