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 26, 2024
1 parent 7e17d57 commit c6f18e3
Show file tree
Hide file tree
Showing 3 changed files with 121 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
72 changes: 65 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 @@ -3120,6 +3120,12 @@
"optional": true,
"readonly": false,
"type": "string"
},
{
"name": "browseFiles",
"optional": true,
"readonly": false,
"type": "string"
}
]
}
Expand Down Expand Up @@ -5220,6 +5226,14 @@
"default": "false",
"description": "When enabled, calendar will show week numbers."
},
{
"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 @@ -10284,7 +10298,7 @@
"parameters": [
{
"name": "componentType",
"type": "Type<any>",
"type": "Type<T>",
"description": "Dynamic component for content template."
},
{
Expand All @@ -10293,15 +10307,15 @@
"description": "DynamicDialog object."
}
],
"returnType": "DynamicDialogRef",
"returnType": "DynamicDialogRef<T>",
"description": "Displays the dialog using the dynamic dialog object options."
},
{
"name": "getInstance",
"parameters": [
{
"name": "ref",
"type": "DynamicDialogRef"
"type": "DynamicDialogRef<any>"
}
],
"returnType": "DynamicDialogComponent",
Expand Down Expand Up @@ -10738,6 +10752,10 @@
{
"name": "onMaximize",
"description": "Event triggered on dialog is maximized."
},
{
"name": "onChildComponentLoaded",
"description": "Event triggered on child component load."
}
]
}
Expand Down Expand Up @@ -15855,7 +15873,7 @@
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Fields used when filtering the options, defaults to optionLabel."
"description": "Indicates whether to focus on options when hovering over them, defaults to optionLabel."
},
{
"name": "filterFields",
Expand Down Expand Up @@ -17467,6 +17485,13 @@
"default": "false",
"description": "Whether to display a input to navigate to any page."
},
{
"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 @@ -17487,7 +17512,7 @@
"optional": false,
"readonly": false,
"type": "TemplateRef<Object>",
"description": "Template instance to inject into the 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 @@ -21310,6 +21335,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 @@ -26485,6 +26521,28 @@
"default": "true",
"description": "Clears the filter value when hiding the dropdown."
},
{
"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 Expand Up @@ -28512,4 +28570,4 @@
}
}
}
}
}

0 comments on commit c6f18e3

Please sign in to comment.