primeng 20.1.2 → 20.3.0-rc.1

package/fesm2022/primeng-speeddial.mjs

@@ -1,16 +1,19 @@
-import * as i1 from '@angular/common';
+export * from 'primeng/types/speeddial';
+import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, signal, inject, booleanAttribute, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, inject, EventEmitter, signal, booleanAttribute, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { uuid, findSingle, find, focus, hasClass } from '@primeuix/utils';
 import { SharedModule, PrimeTemplate } from 'primeng/api';
-import { BaseComponent } from 'primeng/basecomponent';
-import * as i2 from 'primeng/button';
+import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
+import * as i1 from 'primeng/bind';
+import { Bind } from 'primeng/bind';
+import * as i3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { PlusIcon } from 'primeng/icons';
 import { Ripple } from 'primeng/ripple';
-import * as i3 from 'primeng/tooltip';
+import * as i4 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import { asapScheduler } from 'rxjs';
 import { style } from '@primeuix/styles/speeddial';
@@ -55,13 +58,13 @@ const classes = {
 };
 class SpeedDialStyle extends BaseStyle {
     name = 'speeddial';
-    theme = style;
+    style = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SpeedDialStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SpeedDialStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SpeedDialStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SpeedDialStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SpeedDialStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SpeedDialStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -105,11 +108,17 @@ var SpeedDialClasses;
     SpeedDialClasses["mask"] = "p-speeddial-mask";
 })(SpeedDialClasses || (SpeedDialClasses = {}));
 
+const SPEED_DIAL_INSTANCE = new InjectionToken('SPEED_DIAL_INSTANCE');
 /**
  * When pressed, a floating action button can display multiple primary actions that can be performed on a page.
  * @group Components
  */
 class SpeedDial extends BaseComponent {
+    $pcSpeedDial = inject(SPEED_DIAL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('host'));
+    }
     /**
      * List of items id.
      * @group Props
@@ -300,12 +309,21 @@ class SpeedDial extends BaseComponent {
     getTooltipOptions(item) {
         return { ...this.tooltipOptions, tooltipLabel: item.label, disabled: !this.tooltipOptions };
     }
-    ngOnInit() {
-        super.ngOnInit();
+    getPTOptions(id, key) {
+        return this.ptm(key, {
+            context: {
+                active: this.isItemActive(id),
+                hidden: !this.visible
+            }
+        });
+    }
+    isItemActive(id) {
+        return id === this.focusedOptionId;
+    }
+    onInit() {
         this.id = this.id || uuid('pn_id_');
     }
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
+    onAfterViewInit() {
         if (isPlatformBrowser(this.platformId)) {
             if (this.type !== 'linear') {
                 const button = findSingle(this.container?.nativeElement, '.p-speeddial-button');
@@ -319,7 +337,7 @@ class SpeedDial extends BaseComponent {
             }
         }
     }
-    ngAfterContentInit() {
+    onAfterContentInit() {
         this.templates?.forEach((item) => {
             switch (item.getType()) {
                 case 'button':
@@ -425,10 +443,10 @@ class SpeedDial extends BaseComponent {
     onArrowLeft(event) {
         const leftValidDirections = ['left', 'up-right', 'down-left'];
         const rightValidDirections = ['right', 'up-left', 'down-right'];
-        if (leftValidDirections.includes(this.direction)) {
+        if (leftValidDirections.includes(this.direction || '')) {
             this.navigateNextItem(event);
         }
-        else if (rightValidDirections.includes(this.direction)) {
+        else if (rightValidDirections.includes(this.direction || '')) {
             this.navigatePrevItem(event);
         }
         else {
@@ -438,10 +456,10 @@ class SpeedDial extends BaseComponent {
     onArrowRight(event) {
         const leftValidDirections = ['left', 'up-right', 'down-left'];
         const rightValidDirections = ['right', 'up-left', 'down-right'];
-        if (leftValidDirections.includes(this.direction)) {
+        if (leftValidDirections.includes(this.direction || '')) {
             this.navigatePrevItem(event);
         }
-        else if (rightValidDirections.includes(this.direction)) {
+        else if (rightValidDirections.includes(this.direction || '')) {
             this.navigateNextItem(event);
         }
         else {
@@ -459,16 +477,18 @@ class SpeedDial extends BaseComponent {
         this.navigateNextItem(event);
     }
     onEnterKey(event) {
-        const items = find(this.container.nativeElement, '[data-pc-section="menuitem"]');
+        const items = find(this.container?.nativeElement, '[data-pc-section="item"]');
         const itemIndex = [...items].findIndex((item) => item.id === this.focusedOptionIndex());
-        this.onItemClick(event, this.model[itemIndex]);
+        if (itemIndex !== -1 && this.model && this.model[itemIndex]) {
+            this.onItemClick(event, this.model[itemIndex]);
+        }
         this.onBlur(event);
-        const buttonEl = findSingle(this.container.nativeElement, 'button');
+        const buttonEl = findSingle(this.container?.nativeElement, 'button');
         buttonEl && focus(buttonEl);
     }
     onEscapeKey(event) {
         this.hide();
-        const buttonEl = findSingle(this.container.nativeElement, 'button');
+        const buttonEl = findSingle(this.container?.nativeElement, 'button');
         buttonEl && focus(buttonEl);
     }
     onTogglerKeydown(event) {
@@ -490,14 +510,14 @@ class SpeedDial extends BaseComponent {
     }
     onTogglerArrowUp(event) {
         this.focused = true;
-        focus(this.list.nativeElement);
+        focus(this.list?.nativeElement);
         this.show();
         this.navigatePrevItem(event);
         event.preventDefault();
     }
     onTogglerArrowDown(event) {
         this.focused = true;
-        focus(this.list.nativeElement);
+        focus(this.list?.nativeElement);
         this.show();
         this.navigateNextItem(event);
         event.preventDefault();
@@ -513,7 +533,7 @@ class SpeedDial extends BaseComponent {
         event.preventDefault();
     }
     findPrevOptionIndex(index) {
-        const items = find(this.container.nativeElement, '[data-pc-section="menuitem"]');
+        const items = find(this.container?.nativeElement, '[data-pc-section="item"]');
         const filteredItems = [...items].filter((item) => !hasClass(findSingle(item, 'a'), 'p-disabled'));
         const newIndex = index === -1 ? filteredItems[filteredItems.length - 1].id : index;
         let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
@@ -521,7 +541,7 @@ class SpeedDial extends BaseComponent {
         return matchedOptionIndex;
     }
     findNextOptionIndex(index) {
-        const items = find(this.container.nativeElement, '[data-pc-section="menuitem"]');
+        const items = find(this.container?.nativeElement, '[data-pc-section="item"]');
         const filteredItems = [...items].filter((item) => !hasClass(findSingle(item, 'a'), 'p-disabled'));
         const newIndex = index === -1 ? filteredItems[0].id : index;
         let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
@@ -529,7 +549,7 @@ class SpeedDial extends BaseComponent {
         return matchedOptionIndex;
     }
     changeFocusedOptionIndex(index) {
-        const items = find(this.container.nativeElement, '[data-pc-section="menuitem"]');
+        const items = find(this.container?.nativeElement, '[data-pc-section="item"]');
         const filteredItems = [...items].filter((item) => !hasClass(findSingle(item, 'a'), 'p-disabled'));
         if (filteredItems[index]) {
             this.focusedOptionIndex.set(filteredItems[index].getAttribute('id'));
@@ -591,7 +611,13 @@ class SpeedDial extends BaseComponent {
         return (this.visible ? index : length - index - 1) * this.transitionDelay;
     }
     get buttonIconClass() {
-        return (!this.visible && this.showIcon) || !this.hideIcon ? this.showIcon : this.hideIcon;
+        if (!this.visible && this.showIcon) {
+            return this.showIcon;
+        }
+        if (this.visible && this.hideIcon) {
+            return this.hideIcon;
+        }
+        return this.showIcon;
     }
     getItemStyle(index) {
         const transitionDelay = this.calculateTransitionDelay(index);
@@ -625,13 +651,12 @@ class SpeedDial extends BaseComponent {
             this.documentClickListener = null;
         }
     }
-    ngOnDestroy() {
+    onDestroy() {
         this.unbindDocumentClickListener();
-        super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SpeedDial, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.0", type: SpeedDial, isStandalone: true, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: { id: "id", model: "model", visible: "visible", style: "style", className: "className", direction: "direction", transitionDelay: ["transitionDelay", "transitionDelay", numberAttribute], type: "type", radius: ["radius", "radius", numberAttribute], mask: ["mask", "mask", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], hideOnClickOutside: ["hideOnClickOutside", "hideOnClickOutside", booleanAttribute], buttonStyle: "buttonStyle", buttonClassName: "buttonClassName", maskStyle: "maskStyle", maskClassName: "maskClassName", showIcon: "showIcon", hideIcon: "hideIcon", rotateAnimation: ["rotateAnimation", "rotateAnimation", booleanAttribute], ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", tooltipOptions: "tooltipOptions", buttonProps: "buttonProps" }, outputs: { onVisibleChange: "onVisibleChange", visibleChange: "visibleChange", onClick: "onClick", onShow: "onShow", onHide: "onHide" }, providers: [SpeedDialStyle], queries: [{ propertyName: "buttonTemplate", first: true, predicate: ["button"] }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "iconTemplate", first: true, predicate: ["icon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div #container [class]="cn(cx('root'), className)" [style]="style" [ngStyle]="sx('root')" [attr.data-pc-name]="'speeddial'" [attr.data-pc-section]="'root'">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SpeedDial, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: SpeedDial, isStandalone: true, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: { id: "id", model: "model", visible: "visible", style: "style", className: "className", direction: "direction", transitionDelay: ["transitionDelay", "transitionDelay", numberAttribute], type: "type", radius: ["radius", "radius", numberAttribute], mask: ["mask", "mask", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], hideOnClickOutside: ["hideOnClickOutside", "hideOnClickOutside", booleanAttribute], buttonStyle: "buttonStyle", buttonClassName: "buttonClassName", maskStyle: "maskStyle", maskClassName: "maskClassName", showIcon: "showIcon", hideIcon: "hideIcon", rotateAnimation: ["rotateAnimation", "rotateAnimation", booleanAttribute], ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", tooltipOptions: "tooltipOptions", buttonProps: "buttonProps" }, outputs: { onVisibleChange: "onVisibleChange", visibleChange: "visibleChange", onClick: "onClick", onShow: "onShow", onHide: "onHide" }, providers: [SpeedDialStyle, { provide: SPEED_DIAL_INSTANCE, useExisting: SpeedDial }, { provide: PARENT_INSTANCE, useExisting: SpeedDial }], queries: [{ propertyName: "buttonTemplate", first: true, predicate: ["button"] }, { propertyName: "itemTemplate", first: true, predicate: ["item"] }, { propertyName: "iconTemplate", first: true, predicate: ["icon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <div #container [pBind]="ptm('root')" [class]="cn(cx('root'), className)" [style]="style" [ngStyle]="sx('root')">
             <ng-container *ngIf="!buttonTemplate && !_buttonTemplate">
                 <button
                     type="button"
@@ -648,10 +673,10 @@ class SpeedDial extends BaseComponent {
                     [attr.aria-labelledby]="ariaLabelledBy"
                     (click)="onButtonClick($event)"
                     (keydown)="onTogglerKeydown($event)"
-                    [attr.data-pc-name]="'button'"
                     [buttonProps]="buttonProps"
+                    [pt]="ptm('pcButton')"
                 >
-                    <svg data-p-icon="plus" pButtonIcon *ngIf="!buttonIconClass && !iconTemplate && !_iconTemplate" />
+                    <svg data-p-icon="plus" pButtonIcon [pt]="ptm('pcButton')['icon']" *ngIf="!buttonIconClass && !iconTemplate && !_iconTemplate" />
                     <ng-container *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-container>
                 </button>
             </ng-container>
@@ -660,6 +685,7 @@ class SpeedDial extends BaseComponent {
             </ng-container>
             <ul
                 #list
+                [pBind]="ptm('list')"
                 [class]="cx('list')"
                 role="menu"
                 [id]="id + '_list'"
@@ -668,11 +694,11 @@ class SpeedDial extends BaseComponent {
                 (keydown)="onKeyDown($event)"
                 [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
                 [tabindex]="-1"
-                [attr.data-pc-section]="'menu'"
                 [ngStyle]="sx('list')"
             >
                 <li
                     *ngFor="let item of model; let i = index"
+                    [pBind]="getPTOptions(id + '_' + i, 'item')"
                     [ngStyle]="getItemStyle(i)"
                     [class]="cx('item', { item, i })"
                     pTooltip
@@ -680,7 +706,7 @@ class SpeedDial extends BaseComponent {
                     [id]="id + '_' + i"
                     [attr.aria-controls]="id + '_item'"
                     role="menuitem"
-                    [attr.data-pc-section]="'menuitem'"
+                    [attr.data-p-active]="isItemActive(id + '_' + i)"
                 >
                     <ng-container *ngIf="itemTemplate || _itemTemplate">
                         <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item, index: i, toggleCallback: onItemClick.bind(this) }"></ng-container>
@@ -699,25 +725,27 @@ class SpeedDial extends BaseComponent {
                             (click)="onItemClick($event, item)"
                             [disabled]="item?.disabled"
                             (keydown.enter)="onItemClick($event, item)"
-                            [attr.data-pc-section]="'action'"
                             [attr.aria-label]="item.label"
                             [attr.tabindex]="item.disabled || !visible ? null : item.tabindex ? item.tabindex : '0'"
-                        ></button>
+                            [pt]="getPTOptions(id + '_' + i, 'pcAction')"
+                        >
+                            <span *ngIf="item.icon" pButtonIcon [pt]="getPTOptions(id + '_' + i, 'actionIcon')" [class]="item.icon"></span>
+                        </button>
                     </ng-container>
                 </li>
             </ul>
         </div>
-        <div *ngIf="mask && visible" [class]="cn(cx('mask'), maskClassName)" [ngStyle]="maskStyle"></div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i2.ButtonIcon, selector: "[pButtonIcon]" }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: PlusIcon, selector: "[data-p-icon=\"plus\"]" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        <div *ngIf="mask && visible" [pBind]="ptm('mask')" [class]="cn(cx('mask'), maskClassName)" [ngStyle]="maskStyle"></div>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "directive", type: i3.ButtonIcon, selector: "[pButtonIcon]", inputs: ["ptButtonIcon"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: PlusIcon, selector: "[data-p-icon=\"plus\"]" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SpeedDial, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SpeedDial, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-speeddial, p-speedDial, p-speed-dial',
                     standalone: true,
-                    imports: [CommonModule, ButtonModule, Ripple, TooltipModule, RouterModule, PlusIcon, SharedModule],
+                    imports: [CommonModule, ButtonModule, Ripple, TooltipModule, RouterModule, PlusIcon, SharedModule, Bind],
                     template: `
-        <div #container [class]="cn(cx('root'), className)" [style]="style" [ngStyle]="sx('root')" [attr.data-pc-name]="'speeddial'" [attr.data-pc-section]="'root'">
+        <div #container [pBind]="ptm('root')" [class]="cn(cx('root'), className)" [style]="style" [ngStyle]="sx('root')">
             <ng-container *ngIf="!buttonTemplate && !_buttonTemplate">
                 <button
                     type="button"
@@ -734,10 +762,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     [attr.aria-labelledby]="ariaLabelledBy"
                     (click)="onButtonClick($event)"
                     (keydown)="onTogglerKeydown($event)"
-                    [attr.data-pc-name]="'button'"
                     [buttonProps]="buttonProps"
+                    [pt]="ptm('pcButton')"
                 >
-                    <svg data-p-icon="plus" pButtonIcon *ngIf="!buttonIconClass && !iconTemplate && !_iconTemplate" />
+                    <svg data-p-icon="plus" pButtonIcon [pt]="ptm('pcButton')['icon']" *ngIf="!buttonIconClass && !iconTemplate && !_iconTemplate" />
                     <ng-container *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-container>
                 </button>
             </ng-container>
@@ -746,6 +774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             </ng-container>
             <ul
                 #list
+                [pBind]="ptm('list')"
                 [class]="cx('list')"
                 role="menu"
                 [id]="id + '_list'"
@@ -754,11 +783,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 (keydown)="onKeyDown($event)"
                 [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
                 [tabindex]="-1"
-                [attr.data-pc-section]="'menu'"
                 [ngStyle]="sx('list')"
             >
                 <li
                     *ngFor="let item of model; let i = index"
+                    [pBind]="getPTOptions(id + '_' + i, 'item')"
                     [ngStyle]="getItemStyle(i)"
                     [class]="cx('item', { item, i })"
                     pTooltip
@@ -766,7 +795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     [id]="id + '_' + i"
                     [attr.aria-controls]="id + '_item'"
                     role="menuitem"
-                    [attr.data-pc-section]="'menuitem'"
+                    [attr.data-p-active]="isItemActive(id + '_' + i)"
                 >
                     <ng-container *ngIf="itemTemplate || _itemTemplate">
                         <ng-container *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: item, index: i, toggleCallback: onItemClick.bind(this) }"></ng-container>
@@ -785,19 +814,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                             (click)="onItemClick($event, item)"
                             [disabled]="item?.disabled"
                             (keydown.enter)="onItemClick($event, item)"
-                            [attr.data-pc-section]="'action'"
                             [attr.aria-label]="item.label"
                             [attr.tabindex]="item.disabled || !visible ? null : item.tabindex ? item.tabindex : '0'"
-                        ></button>
+                            [pt]="getPTOptions(id + '_' + i, 'pcAction')"
+                        >
+                            <span *ngIf="item.icon" pButtonIcon [pt]="getPTOptions(id + '_' + i, 'actionIcon')" [class]="item.icon"></span>
+                        </button>
                     </ng-container>
                 </li>
             </ul>
         </div>
-        <div *ngIf="mask && visible" [class]="cn(cx('mask'), maskClassName)" [ngStyle]="maskStyle"></div>
+        <div *ngIf="mask && visible" [pBind]="ptm('mask')" [class]="cn(cx('mask'), maskClassName)" [ngStyle]="maskStyle"></div>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [SpeedDialStyle]
+                    providers: [SpeedDialStyle, { provide: SPEED_DIAL_INSTANCE, useExisting: SpeedDial }, { provide: PARENT_INSTANCE, useExisting: SpeedDial }],
+                    hostDirectives: [Bind]
                 }]
         }], propDecorators: { id: [{
                 type: Input
@@ -881,11 +913,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class SpeedDialModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SpeedDialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SpeedDialModule, imports: [SpeedDial, SharedModule], exports: [SpeedDial, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SpeedDialModule, imports: [SpeedDial, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SpeedDialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: SpeedDialModule, imports: [SpeedDial, SharedModule], exports: [SpeedDial, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SpeedDialModule, imports: [SpeedDial, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SpeedDialModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SpeedDialModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SpeedDial, SharedModule],