@spicainternational/ngx-sds-components 5.25.1 → 5.25.2

package/esm2020/src/lib/table-actions/table-actions.component.mjs

@@ -1,32 +1,24 @@
 import { Component, Input } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@fortawesome/angular-fontawesome";
-import * as i2 from "@angular/common";
 export class SdsTableActionsComponent {
+    // @ViewChild('dropdownButton', { static: true }) private _dropdownButton: ElementRef | undefined;
     constructor() {
-        this.actions = [];
-        this.optionsIcon = ['far', 'ellipsis'];
-        this.showIcons = true;
-        this.optionsButtonUUID = `sds-ta-${Math.ceil(Math.random() * 1000000)}`;
-        this.showDropdown = false;
+        this.dropdownIcon = ['far', 'ellipsis'];
     }
-    executeAction(action) {
-        if (action.type = 'action') {
-            action.callback?.();
-        }
+    closeDropdown() {
+        // if (this._dropdownButton?.nativeElement) {
+        //     this._renderer.removeClass(this._dropdownButton.nativeElement, 'show');
+        // }
     }
     ngOnInit() { }
 }
 SdsTableActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsTableActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsTableActionsComponent, selector: "sds-table-actions", inputs: { actions: "actions", optionsIcon: "optionsIcon", showIcons: "showIcons" }, ngImport: i0, template: "\n<div class=\"sds-row-actions-container me-2\">\n    <div class=\"dropdown\">\n\n        <div class=\"sds-row-actions btn-group shadow-sm\">\n            <ng-container *ngFor=\"let spotlightAction of actions\">\n                <ng-container \n                    *ngIf=\"spotlightAction.type === 'action' && spotlightAction.spotlight\"\n                    [ngTemplateOutlet]=\"spotlightButtonTemplate\"\n                    [ngTemplateOutletContext]=\"{ action: spotlightAction }\">\n                </ng-container>\n            </ng-container>\n\n\n            <button \n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu py-2\">\n                <li *ngFor=\"let action of actions\">\n\n                    <ng-container \n                        *ngIf=\"action.type === 'action'\"\n                        [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                        [ngTemplateOutletContext]=\"{ action: action }\">\n                    </ng-container>\n\n                    <ng-container \n                        *ngIf=\"action.type === 'divider'\"\n                        [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                    >\n                    </ng-container>\n                </li>\n            </ul>\n\n\n            <!-- <button \n                [id]=\"optionsButtonUUID\"\n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\"\n                (click)=\"showDropdown = !showDropdown\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            \n            <dx-popover\n                target=\"#{{optionsButtonUUID}}\"\n                [(visible)]=\"showDropdown\"\n                [wrapperAttr]=\"{ class: 'sds-table-actions-popover' }\"\n                >\n                    <ul class=\"dropdown-menu py-2\">\n                        <li *ngFor=\"let action of actions\">\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'action'\"\n                                [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                                [ngTemplateOutletContext]=\"{ action: action }\">\n                            </ng-container>\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'divider'\"\n                                [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                            >\n                            </ng-container>\n                        </li>\n                    </ul> \n            </dx-popover> -->\n\n\n        </div>\n\n\n        <button \n            class=\"btn sds-row-actions-placeholder\"\n            type=\"button\">\n            <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\"></fa-icon>\n        </button>\n\n    </div>\n</div>\n\n\n<ng-template #spotlightButtonTemplate let-action=\"action\">\n\n    <button \n        type=\"button\" \n        class=\"btn sds-row-quick-action\"                    \n        rel=\"tooltip\"\n        (click)=\"executeAction(action)\"\n        title=\"{{action.name}}\"\n    >\n        <fa-icon \n            *ngIf=\"action.icon\"\n            [icon]=\"action.icon\" \n            [size]=\"'sm'\"\n            [fixedWidth]=\"true\">\n        </fa-icon>\n        <!-- <fa-icon [icon]=\"ICON_DELETE\" [fixedWidth]=\"true\"> </fa-icon> -->\n    </button>  \n\n    \n</ng-template>\n\n\n<ng-template #dropdownActionTemplate let-action=\"action\">\n    <button \n        class=\"dropdown-item\"        \n        [class.dropdown-item-danger] = \"action.style === 'danger'\"                       \n        type=\"button\" \n        (click)=\"executeAction(action)\"\n    >\n        <div class=\"sds-flex-row-center gap-2\">\n            <div \n                *ngIf=\"showIcons\"\n                class=\"action-button-icon\"\n            >\n                <fa-icon \n                    *ngIf=\"action.icon\"\n                    [icon]=\"action.icon\" \n                    [size]=\"'sm'\"\n                    [fixedWidth]=\"true\">\n                </fa-icon>\n            </div>\n            <span>{{action.name}}</span>\n        </div>\n    </button>\n</ng-template>\n\n<ng-template #dropdownDividerTemplate >\n    <hr class=\"dropdown-divider\">\n</ng-template>", styles: [".dropdown-item-danger{color:#cc5252}.dropdown-item-danger:active{background-color:#cc5252;color:#f8f9fa}.action-button-icon{width:1.2rem}.sds-row-actions{right:0}.sds-row-actions-button{border-top-right-radius:.266rem!important;border-bottom-right-radius:.266rem!important}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+SdsTableActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsTableActionsComponent, selector: "sds-table-actions", inputs: { dropdownIcon: "dropdownIcon" }, ngImport: i0, template: "\n<div class=\"sds-actions-container me-2\">\n\n    <div class=\"btn-group sds-actions-wrapper\" role=\"group\" aria-label=\"Basic example\">\n        <ng-content select='quickActions'></ng-content>\n\n        <div class=\"btn-group\" role=\"group\">\n            <button \n                #dropdownButton\n                class=\"sds-actions-dropdown-button btn btn-outline-secondary btn-sm\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon \n                    [icon]=\"dropdownIcon\" \n                    [fixedWidth]=\"true\" \n                    [size]=\"'sm'\">\n                </fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu sds-table-dropdown-menu py-2\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </div>\n</div>", styles: [""], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTableActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-table-actions', template: "\n<div class=\"sds-row-actions-container me-2\">\n    <div class=\"dropdown\">\n\n        <div class=\"sds-row-actions btn-group shadow-sm\">\n            <ng-container *ngFor=\"let spotlightAction of actions\">\n                <ng-container \n                    *ngIf=\"spotlightAction.type === 'action' && spotlightAction.spotlight\"\n                    [ngTemplateOutlet]=\"spotlightButtonTemplate\"\n                    [ngTemplateOutletContext]=\"{ action: spotlightAction }\">\n                </ng-container>\n            </ng-container>\n\n\n            <button \n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu py-2\">\n                <li *ngFor=\"let action of actions\">\n\n                    <ng-container \n                        *ngIf=\"action.type === 'action'\"\n                        [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                        [ngTemplateOutletContext]=\"{ action: action }\">\n                    </ng-container>\n\n                    <ng-container \n                        *ngIf=\"action.type === 'divider'\"\n                        [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                    >\n                    </ng-container>\n                </li>\n            </ul>\n\n\n            <!-- <button \n                [id]=\"optionsButtonUUID\"\n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\"\n                (click)=\"showDropdown = !showDropdown\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            \n            <dx-popover\n                target=\"#{{optionsButtonUUID}}\"\n                [(visible)]=\"showDropdown\"\n                [wrapperAttr]=\"{ class: 'sds-table-actions-popover' }\"\n                >\n                    <ul class=\"dropdown-menu py-2\">\n                        <li *ngFor=\"let action of actions\">\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'action'\"\n                                [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                                [ngTemplateOutletContext]=\"{ action: action }\">\n                            </ng-container>\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'divider'\"\n                                [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                            >\n                            </ng-container>\n                        </li>\n                    </ul> \n            </dx-popover> -->\n\n\n        </div>\n\n\n        <button \n            class=\"btn sds-row-actions-placeholder\"\n            type=\"button\">\n            <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\"></fa-icon>\n        </button>\n\n    </div>\n</div>\n\n\n<ng-template #spotlightButtonTemplate let-action=\"action\">\n\n    <button \n        type=\"button\" \n        class=\"btn sds-row-quick-action\"                    \n        rel=\"tooltip\"\n        (click)=\"executeAction(action)\"\n        title=\"{{action.name}}\"\n    >\n        <fa-icon \n            *ngIf=\"action.icon\"\n            [icon]=\"action.icon\" \n            [size]=\"'sm'\"\n            [fixedWidth]=\"true\">\n        </fa-icon>\n        <!-- <fa-icon [icon]=\"ICON_DELETE\" [fixedWidth]=\"true\"> </fa-icon> -->\n    </button>  \n\n    \n</ng-template>\n\n\n<ng-template #dropdownActionTemplate let-action=\"action\">\n    <button \n        class=\"dropdown-item\"        \n        [class.dropdown-item-danger] = \"action.style === 'danger'\"                       \n        type=\"button\" \n        (click)=\"executeAction(action)\"\n    >\n        <div class=\"sds-flex-row-center gap-2\">\n            <div \n                *ngIf=\"showIcons\"\n                class=\"action-button-icon\"\n            >\n                <fa-icon \n                    *ngIf=\"action.icon\"\n                    [icon]=\"action.icon\" \n                    [size]=\"'sm'\"\n                    [fixedWidth]=\"true\">\n                </fa-icon>\n            </div>\n            <span>{{action.name}}</span>\n        </div>\n    </button>\n</ng-template>\n\n<ng-template #dropdownDividerTemplate >\n    <hr class=\"dropdown-divider\">\n</ng-template>", styles: [".dropdown-item-danger{color:#cc5252}.dropdown-item-danger:active{background-color:#cc5252;color:#f8f9fa}.action-button-icon{width:1.2rem}.sds-row-actions{right:0}.sds-row-actions-button{border-top-right-radius:.266rem!important;border-bottom-right-radius:.266rem!important}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { actions: [{
-                type: Input
-            }], optionsIcon: [{
-                type: Input
-            }], showIcons: [{
+            args: [{ selector: 'sds-table-actions', template: "\n<div class=\"sds-actions-container me-2\">\n\n    <div class=\"btn-group sds-actions-wrapper\" role=\"group\" aria-label=\"Basic example\">\n        <ng-content select='quickActions'></ng-content>\n\n        <div class=\"btn-group\" role=\"group\">\n            <button \n                #dropdownButton\n                class=\"sds-actions-dropdown-button btn btn-outline-secondary btn-sm\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon \n                    [icon]=\"dropdownIcon\" \n                    [fixedWidth]=\"true\" \n                    [size]=\"'sm'\">\n                </fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu sds-table-dropdown-menu py-2\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </div>\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { dropdownIcon: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtYWN0aW9ucy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi90YWJsZS1hY3Rpb25zL3RhYmxlLWFjdGlvbnMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvdGFibGUtYWN0aW9ucy90YWJsZS1hY3Rpb25zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7O0FBU3pELE1BQU0sT0FBTyx3QkFBd0I7SUFVakM7UUFSUyxZQUFPLEdBQXlDLEVBQUUsQ0FBQztRQUVuRCxnQkFBVyxHQUFhLENBQUMsS0FBSyxFQUFFLFVBQVUsQ0FBQyxDQUFDO1FBQzVDLGNBQVMsR0FBWSxJQUFJLENBQUM7UUFFNUIsc0JBQWlCLEdBQUcsVUFBVSxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsR0FBRyxPQUFPLENBQUMsRUFBRSxDQUFDO1FBQ25FLGlCQUFZLEdBQUcsS0FBSyxDQUFDO0lBRWIsQ0FBQztJQUVULGFBQWEsQ0FBQyxNQUFXO1FBQzVCLElBQUksTUFBTSxDQUFDLElBQUksR0FBRyxRQUFRLEVBQUU7WUFDeEIsTUFBTSxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUM7U0FDdkI7SUFDTCxDQUFDO0lBRUQsUUFBUSxLQUFVLENBQUM7O3FIQWxCVix3QkFBd0I7eUdBQXhCLHdCQUF3Qiw2SUNUckMsb2tKQXNJYzsyRkQ3SEQsd0JBQXdCO2tCQUxwQyxTQUFTOytCQUNJLG1CQUFtQjswRUFNcEIsT0FBTztzQkFBZixLQUFLO2dCQUVHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGFibGVBY3Rpb24sIFRhYmxlQWN0aW9uRGl2aWRlciB9IGZyb20gJy4vdGFibGUtYWN0aW9ucy5tb2RlbCc7XG5pbXBvcnQgeyBJY29uUHJvcCB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mb250YXdlc29tZS1zdmctY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnc2RzLXRhYmxlLWFjdGlvbnMnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi90YWJsZS1hY3Rpb25zLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90YWJsZS1hY3Rpb25zLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFNkc1RhYmxlQWN0aW9uc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgICBASW5wdXQoKSBhY3Rpb25zOiAoVGFibGVBY3Rpb24gfCBUYWJsZUFjdGlvbkRpdmlkZXIpW10gPSBbXTtcblxuICAgIEBJbnB1dCgpIG9wdGlvbnNJY29uOiBJY29uUHJvcCA9IFsnZmFyJywgJ2VsbGlwc2lzJ107XG4gICAgQElucHV0KCkgc2hvd0ljb25zOiBib29sZWFuID0gdHJ1ZTtcblxuICAgIHB1YmxpYyBvcHRpb25zQnV0dG9uVVVJRCA9IGBzZHMtdGEtJHtNYXRoLmNlaWwoTWF0aC5yYW5kb20oKSAqIDEwMDAwMDApfWA7XG4gICAgcHVibGljIHNob3dEcm9wZG93biA9IGZhbHNlO1xuXG4gICAgY29uc3RydWN0b3IoKSB7fVxuXG4gICAgcHVibGljIGV4ZWN1dGVBY3Rpb24oYWN0aW9uOiBhbnkpOiB2b2lkIHtcbiAgICAgICAgaWYgKGFjdGlvbi50eXBlID0gJ2FjdGlvbicpIHtcbiAgICAgICAgICAgIGFjdGlvbi5jYWxsYmFjaz8uKCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHt9XG59XG4iLCJcbjxkaXYgY2xhc3M9XCJzZHMtcm93LWFjdGlvbnMtY29udGFpbmVyIG1lLTJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZHJvcGRvd25cIj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwic2RzLXJvdy1hY3Rpb25zIGJ0bi1ncm91cCBzaGFkb3ctc21cIj5cbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IHNwb3RsaWdodEFjdGlvbiBvZiBhY3Rpb25zXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBcbiAgICAgICAgICAgICAgICAgICAgKm5nSWY9XCJzcG90bGlnaHRBY3Rpb24udHlwZSA9PT0gJ2FjdGlvbicgJiYgc3BvdGxpZ2h0QWN0aW9uLnNwb3RsaWdodFwiXG4gICAgICAgICAgICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInNwb3RsaWdodEJ1dHRvblRlbXBsYXRlXCJcbiAgICAgICAgICAgICAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cInsgYWN0aW9uOiBzcG90bGlnaHRBY3Rpb24gfVwiPlxuICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG5cblxuICAgICAgICAgICAgPGJ1dHRvbiBcbiAgICAgICAgICAgICAgICBjbGFzcz1cImJ0biBzZHMtcm93LXF1aWNrLWFjdGlvbiBzZHMtcm93LWFjdGlvbnMtYnV0dG9uXCJcbiAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCIgXG4gICAgICAgICAgICAgICAgZGF0YS1icy10b2dnbGU9XCJkcm9wZG93blwiIFxuICAgICAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9XCJmYWxzZVwiPlxuICAgICAgICAgICAgICAgIDxmYS1pY29uIFtpY29uXT1cIm9wdGlvbnNJY29uXCIgW2ZpeGVkV2lkdGhdPVwidHJ1ZVwiIFtzaXplXT1cIidzbSdcIj48L2ZhLWljb24+XG4gICAgICAgICAgICA8L2J1dHRvbj5cblxuICAgICAgICAgICAgPHVsIGNsYXNzPVwiZHJvcGRvd24tbWVudSBweS0yXCI+XG4gICAgICAgICAgICAgICAgPGxpICpuZ0Zvcj1cImxldCBhY3Rpb24gb2YgYWN0aW9uc1wiPlxuXG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgXG4gICAgICAgICAgICAgICAgICAgICAgICAqbmdJZj1cImFjdGlvbi50eXBlID09PSAnYWN0aW9uJ1wiXG4gICAgICAgICAgICAgICAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCJkcm9wZG93bkFjdGlvblRlbXBsYXRlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7IGFjdGlvbjogYWN0aW9uIH1cIj5cbiAgICAgICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG5cbiAgICAgICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBcbiAgICAgICAgICAgICAgICAgICAgICAgICpuZ0lmPVwiYWN0aW9uLnR5cGUgPT09ICdkaXZpZGVyJ1wiXG4gICAgICAgICAgICAgICAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCJkcm9wZG93bkRpdmlkZXJUZW1wbGF0ZVwiXG4gICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICAgIDwvdWw+XG5cblxuICAgICAgICAgICAgPCEtLSA8YnV0dG9uIFxuICAgICAgICAgICAgICAgIFtpZF09XCJvcHRpb25zQnV0dG9uVVVJRFwiXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJidG4gc2RzLXJvdy1xdWljay1hY3Rpb24gc2RzLXJvdy1hY3Rpb25zLWJ1dHRvblwiXG4gICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICAgICAgKGNsaWNrKT1cInNob3dEcm9wZG93biA9ICFzaG93RHJvcGRvd25cIj5cbiAgICAgICAgICAgICAgICA8ZmEtaWNvbiBbaWNvbl09XCJvcHRpb25zSWNvblwiIFtmaXhlZFdpZHRoXT1cInRydWVcIiBbc2l6ZV09XCInc20nXCI+PC9mYS1pY29uPlxuICAgICAgICAgICAgPC9idXR0b24+XG5cbiAgICAgICAgICAgIFxuICAgICAgICAgICAgPGR4LXBvcG92ZXJcbiAgICAgICAgICAgICAgICB0YXJnZXQ9XCIje3tvcHRpb25zQnV0dG9uVVVJRH19XCJcbiAgICAgICAgICAgICAgICBbKHZpc2libGUpXT1cInNob3dEcm9wZG93blwiXG4gICAgICAgICAgICAgICAgW3dyYXBwZXJBdHRyXT1cInsgY2xhc3M6ICdzZHMtdGFibGUtYWN0aW9ucy1wb3BvdmVyJyB9XCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDx1bCBjbGFzcz1cImRyb3Bkb3duLW1lbnUgcHktMlwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPGxpICpuZ0Zvcj1cImxldCBhY3Rpb24gb2YgYWN0aW9uc1wiPlxuICAgICAgICBcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyIFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAqbmdJZj1cImFjdGlvbi50eXBlID09PSAnYWN0aW9uJ1wiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImRyb3Bkb3duQWN0aW9uVGVtcGxhdGVcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwieyBhY3Rpb246IGFjdGlvbiB9XCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICpuZ0lmPVwiYWN0aW9uLnR5cGUgPT09ICdkaXZpZGVyJ1wiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImRyb3Bkb3duRGl2aWRlclRlbXBsYXRlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L2xpPlxuICAgICAgICAgICAgICAgICAgICA8L3VsPiBcbiAgICAgICAgICAgIDwvZHgtcG9wb3Zlcj4gLS0+XG5cblxuICAgICAgICA8L2Rpdj5cblxuXG4gICAgICAgIDxidXR0b24gXG4gICAgICAgICAgICBjbGFzcz1cImJ0biBzZHMtcm93LWFjdGlvbnMtcGxhY2Vob2xkZXJcIlxuICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiPlxuICAgICAgICAgICAgPGZhLWljb24gW2ljb25dPVwib3B0aW9uc0ljb25cIiBbZml4ZWRXaWR0aF09XCJ0cnVlXCI+PC9mYS1pY29uPlxuICAgICAgICA8L2J1dHRvbj5cblxuICAgIDwvZGl2PlxuPC9kaXY+XG5cblxuPG5nLXRlbXBsYXRlICNzcG90bGlnaHRCdXR0b25UZW1wbGF0ZSBsZXQtYWN0aW9uPVwiYWN0aW9uXCI+XG5cbiAgICA8YnV0dG9uIFxuICAgICAgICB0eXBlPVwiYnV0dG9uXCIgXG4gICAgICAgIGNsYXNzPVwiYnRuIHNkcy1yb3ctcXVpY2stYWN0aW9uXCIgICAgICAgICAgICAgICAgICAgIFxuICAgICAgICByZWw9XCJ0b29sdGlwXCJcbiAgICAgICAgKGNsaWNrKT1cImV4ZWN1dGVBY3Rpb24oYWN0aW9uKVwiXG4gICAgICAgIHRpdGxlPVwie3thY3Rpb24ubmFtZX19XCJcbiAgICA+XG4gICAgICAgIDxmYS1pY29uIFxuICAgICAgICAgICAgKm5nSWY9XCJhY3Rpb24uaWNvblwiXG4gICAgICAgICAgICBbaWNvbl09XCJhY3Rpb24uaWNvblwiIFxuICAgICAgICAgICAgW3NpemVdPVwiJ3NtJ1wiXG4gICAgICAgICAgICBbZml4ZWRXaWR0aF09XCJ0cnVlXCI+XG4gICAgICAgIDwvZmEtaWNvbj5cbiAgICAgICAgPCEtLSA8ZmEtaWNvbiBbaWNvbl09XCJJQ09OX0RFTEVURVwiIFtmaXhlZFdpZHRoXT1cInRydWVcIj4gPC9mYS1pY29uPiAtLT5cbiAgICA8L2J1dHRvbj4gIFxuXG4gICAgXG48L25nLXRlbXBsYXRlPlxuXG5cbjxuZy10ZW1wbGF0ZSAjZHJvcGRvd25BY3Rpb25UZW1wbGF0ZSBsZXQtYWN0aW9uPVwiYWN0aW9uXCI+XG4gICAgPGJ1dHRvbiBcbiAgICAgICAgY2xhc3M9XCJkcm9wZG93bi1pdGVtXCIgICAgICAgIFxuICAgICAgICBbY2xhc3MuZHJvcGRvd24taXRlbS1kYW5nZXJdID0gXCJhY3Rpb24uc3R5bGUgPT09ICdkYW5nZXInXCIgICAgICAgICAgICAgICAgICAgICAgIFxuICAgICAgICB0eXBlPVwiYnV0dG9uXCIgXG4gICAgICAgIChjbGljayk9XCJleGVjdXRlQWN0aW9uKGFjdGlvbilcIlxuICAgID5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNkcy1mbGV4LXJvdy1jZW50ZXIgZ2FwLTJcIj5cbiAgICAgICAgICAgIDxkaXYgXG4gICAgICAgICAgICAgICAgKm5nSWY9XCJzaG93SWNvbnNcIlxuICAgICAgICAgICAgICAgIGNsYXNzPVwiYWN0aW9uLWJ1dHRvbi1pY29uXCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8ZmEtaWNvbiBcbiAgICAgICAgICAgICAgICAgICAgKm5nSWY9XCJhY3Rpb24uaWNvblwiXG4gICAgICAgICAgICAgICAgICAgIFtpY29uXT1cImFjdGlvbi5pY29uXCIgXG4gICAgICAgICAgICAgICAgICAgIFtzaXplXT1cIidzbSdcIlxuICAgICAgICAgICAgICAgICAgICBbZml4ZWRXaWR0aF09XCJ0cnVlXCI+XG4gICAgICAgICAgICAgICAgPC9mYS1pY29uPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8c3Bhbj57e2FjdGlvbi5uYW1lfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvYnV0dG9uPlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNkcm9wZG93bkRpdmlkZXJUZW1wbGF0ZSA+XG4gICAgPGhyIGNsYXNzPVwiZHJvcGRvd24tZGl2aWRlclwiPlxuPC9uZy10ZW1wbGF0ZT4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtYWN0aW9ucy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi90YWJsZS1hY3Rpb25zL3RhYmxlLWFjdGlvbnMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvdGFibGUtYWN0aW9ucy90YWJsZS1hY3Rpb25zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsS0FBSyxFQUEwRCxNQUFNLGVBQWUsQ0FBQzs7O0FBUXJILE1BQU0sT0FBTyx3QkFBd0I7SUFHakMsa0dBQWtHO0lBRWxHO1FBSFMsaUJBQVksR0FBYSxDQUFDLEtBQUssRUFBRSxVQUFVLENBQUMsQ0FBQztJQUtuRCxDQUFDO0lBRUcsYUFBYTtRQUNoQiw2Q0FBNkM7UUFDN0MsOEVBQThFO1FBQzlFLElBQUk7SUFDUixDQUFDO0lBRUQsUUFBUSxLQUFVLENBQUM7O3FIQWZWLHdCQUF3Qjt5R0FBeEIsd0JBQXdCLG1HQ1JyQyw4M0JBeUJNOzJGRGpCTyx3QkFBd0I7a0JBTHBDLFNBQVM7K0JBQ0ksbUJBQW1COzBFQU1wQixZQUFZO3NCQUFwQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIFJlbmRlcmVyMiwgU2ltcGxlQ2hhbmdlcywgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJY29uUHJvcCB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mb250YXdlc29tZS1zdmctY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnc2RzLXRhYmxlLWFjdGlvbnMnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi90YWJsZS1hY3Rpb25zLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90YWJsZS1hY3Rpb25zLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFNkc1RhYmxlQWN0aW9uc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgICBASW5wdXQoKSBkcm9wZG93bkljb246IEljb25Qcm9wID0gWydmYXInLCAnZWxsaXBzaXMnXTtcbiAgICAvLyBAVmlld0NoaWxkKCdkcm9wZG93bkJ1dHRvbicsIHsgc3RhdGljOiB0cnVlIH0pIHByaXZhdGUgX2Ryb3Bkb3duQnV0dG9uOiBFbGVtZW50UmVmIHwgdW5kZWZpbmVkO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIC8vIHByaXZhdGUgX3JlbmRlcmVyOiBSZW5kZXJlcjJcbiAgICApIHt9XG5cbiAgICBwdWJsaWMgY2xvc2VEcm9wZG93bigpOiB2b2lkIHtcbiAgICAgICAgLy8gaWYgKHRoaXMuX2Ryb3Bkb3duQnV0dG9uPy5uYXRpdmVFbGVtZW50KSB7XG4gICAgICAgIC8vICAgICB0aGlzLl9yZW5kZXJlci5yZW1vdmVDbGFzcyh0aGlzLl9kcm9wZG93bkJ1dHRvbi5uYXRpdmVFbGVtZW50LCAnc2hvdycpO1xuICAgICAgICAvLyB9XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7fVxufVxuIiwiXG48ZGl2IGNsYXNzPVwic2RzLWFjdGlvbnMtY29udGFpbmVyIG1lLTJcIj5cblxuICAgIDxkaXYgY2xhc3M9XCJidG4tZ3JvdXAgc2RzLWFjdGlvbnMtd3JhcHBlclwiIHJvbGU9XCJncm91cFwiIGFyaWEtbGFiZWw9XCJCYXNpYyBleGFtcGxlXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD0ncXVpY2tBY3Rpb25zJz48L25nLWNvbnRlbnQ+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cImJ0bi1ncm91cFwiIHJvbGU9XCJncm91cFwiPlxuICAgICAgICAgICAgPGJ1dHRvbiBcbiAgICAgICAgICAgICAgICAjZHJvcGRvd25CdXR0b25cbiAgICAgICAgICAgICAgICBjbGFzcz1cInNkcy1hY3Rpb25zLWRyb3Bkb3duLWJ1dHRvbiBidG4gYnRuLW91dGxpbmUtc2Vjb25kYXJ5IGJ0bi1zbVwiXG4gICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiIFxuICAgICAgICAgICAgICAgIGRhdGEtYnMtdG9nZ2xlPVwiZHJvcGRvd25cIiBcbiAgICAgICAgICAgICAgICBhcmlhLWV4cGFuZGVkPVwiZmFsc2VcIj5cbiAgICAgICAgICAgICAgICA8ZmEtaWNvbiBcbiAgICAgICAgICAgICAgICAgICAgW2ljb25dPVwiZHJvcGRvd25JY29uXCIgXG4gICAgICAgICAgICAgICAgICAgIFtmaXhlZFdpZHRoXT1cInRydWVcIiBcbiAgICAgICAgICAgICAgICAgICAgW3NpemVdPVwiJ3NtJ1wiPlxuICAgICAgICAgICAgICAgIDwvZmEtaWNvbj5cbiAgICAgICAgICAgIDwvYnV0dG9uPlxuXG4gICAgICAgICAgICA8dWwgY2xhc3M9XCJkcm9wZG93bi1tZW51IHNkcy10YWJsZS1kcm9wZG93bi1tZW51IHB5LTJcIj5cbiAgICAgICAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICAgICAgICA8L3VsPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==

package/fesm2015/spicainternational-ngx-sds-components-src-lib-table-actions.mjs

@@ -1,37 +1,28 @@
 import * as i0 from '@angular/core';
 import { Component, Input, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { DxPopoverModule } from 'devextreme-angular';
 
 class SdsTableActionsComponent {
+    // @ViewChild('dropdownButton', { static: true }) private _dropdownButton: ElementRef | undefined;
     constructor() {
-        this.actions = [];
-        this.optionsIcon = ['far', 'ellipsis'];
-        this.showIcons = true;
-        this.optionsButtonUUID = `sds-ta-${Math.ceil(Math.random() * 1000000)}`;
-        this.showDropdown = false;
+        this.dropdownIcon = ['far', 'ellipsis'];
     }
-    executeAction(action) {
-        var _a;
-        if (action.type = 'action') {
-            (_a = action.callback) === null || _a === void 0 ? void 0 : _a.call(action);
-        }
+    closeDropdown() {
+        // if (this._dropdownButton?.nativeElement) {
+        //     this._renderer.removeClass(this._dropdownButton.nativeElement, 'show');
+        // }
     }
     ngOnInit() { }
 }
 SdsTableActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsTableActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsTableActionsComponent, selector: "sds-table-actions", inputs: { actions: "actions", optionsIcon: "optionsIcon", showIcons: "showIcons" }, ngImport: i0, template: "\n<div class=\"sds-row-actions-container me-2\">\n    <div class=\"dropdown\">\n\n        <div class=\"sds-row-actions btn-group shadow-sm\">\n            <ng-container *ngFor=\"let spotlightAction of actions\">\n                <ng-container \n                    *ngIf=\"spotlightAction.type === 'action' && spotlightAction.spotlight\"\n                    [ngTemplateOutlet]=\"spotlightButtonTemplate\"\n                    [ngTemplateOutletContext]=\"{ action: spotlightAction }\">\n                </ng-container>\n            </ng-container>\n\n\n            <button \n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu py-2\">\n                <li *ngFor=\"let action of actions\">\n\n                    <ng-container \n                        *ngIf=\"action.type === 'action'\"\n                        [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                        [ngTemplateOutletContext]=\"{ action: action }\">\n                    </ng-container>\n\n                    <ng-container \n                        *ngIf=\"action.type === 'divider'\"\n                        [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                    >\n                    </ng-container>\n                </li>\n            </ul>\n\n\n            <!-- <button \n                [id]=\"optionsButtonUUID\"\n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\"\n                (click)=\"showDropdown = !showDropdown\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            \n            <dx-popover\n                target=\"#{{optionsButtonUUID}}\"\n                [(visible)]=\"showDropdown\"\n                [wrapperAttr]=\"{ class: 'sds-table-actions-popover' }\"\n                >\n                    <ul class=\"dropdown-menu py-2\">\n                        <li *ngFor=\"let action of actions\">\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'action'\"\n                                [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                                [ngTemplateOutletContext]=\"{ action: action }\">\n                            </ng-container>\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'divider'\"\n                                [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                            >\n                            </ng-container>\n                        </li>\n                    </ul> \n            </dx-popover> -->\n\n\n        </div>\n\n\n        <button \n            class=\"btn sds-row-actions-placeholder\"\n            type=\"button\">\n            <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\"></fa-icon>\n        </button>\n\n    </div>\n</div>\n\n\n<ng-template #spotlightButtonTemplate let-action=\"action\">\n\n    <button \n        type=\"button\" \n        class=\"btn sds-row-quick-action\"                    \n        rel=\"tooltip\"\n        (click)=\"executeAction(action)\"\n        title=\"{{action.name}}\"\n    >\n        <fa-icon \n            *ngIf=\"action.icon\"\n            [icon]=\"action.icon\" \n            [size]=\"'sm'\"\n            [fixedWidth]=\"true\">\n        </fa-icon>\n        <!-- <fa-icon [icon]=\"ICON_DELETE\" [fixedWidth]=\"true\"> </fa-icon> -->\n    </button>  \n\n    \n</ng-template>\n\n\n<ng-template #dropdownActionTemplate let-action=\"action\">\n    <button \n        class=\"dropdown-item\"        \n        [class.dropdown-item-danger] = \"action.style === 'danger'\"                       \n        type=\"button\" \n        (click)=\"executeAction(action)\"\n    >\n        <div class=\"sds-flex-row-center gap-2\">\n            <div \n                *ngIf=\"showIcons\"\n                class=\"action-button-icon\"\n            >\n                <fa-icon \n                    *ngIf=\"action.icon\"\n                    [icon]=\"action.icon\" \n                    [size]=\"'sm'\"\n                    [fixedWidth]=\"true\">\n                </fa-icon>\n            </div>\n            <span>{{action.name}}</span>\n        </div>\n    </button>\n</ng-template>\n\n<ng-template #dropdownDividerTemplate >\n    <hr class=\"dropdown-divider\">\n</ng-template>", styles: [".dropdown-item-danger{color:#cc5252}.dropdown-item-danger:active{background-color:#cc5252;color:#f8f9fa}.action-button-icon{width:1.2rem}.sds-row-actions{right:0}.sds-row-actions-button{border-top-right-radius:.266rem!important;border-bottom-right-radius:.266rem!important}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+SdsTableActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsTableActionsComponent, selector: "sds-table-actions", inputs: { dropdownIcon: "dropdownIcon" }, ngImport: i0, template: "\n<div class=\"sds-actions-container me-2\">\n\n    <div class=\"btn-group sds-actions-wrapper\" role=\"group\" aria-label=\"Basic example\">\n        <ng-content select='quickActions'></ng-content>\n\n        <div class=\"btn-group\" role=\"group\">\n            <button \n                #dropdownButton\n                class=\"sds-actions-dropdown-button btn btn-outline-secondary btn-sm\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon \n                    [icon]=\"dropdownIcon\" \n                    [fixedWidth]=\"true\" \n                    [size]=\"'sm'\">\n                </fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu sds-table-dropdown-menu py-2\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </div>\n</div>", styles: [""], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTableActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-table-actions', template: "\n<div class=\"sds-row-actions-container me-2\">\n    <div class=\"dropdown\">\n\n        <div class=\"sds-row-actions btn-group shadow-sm\">\n            <ng-container *ngFor=\"let spotlightAction of actions\">\n                <ng-container \n                    *ngIf=\"spotlightAction.type === 'action' && spotlightAction.spotlight\"\n                    [ngTemplateOutlet]=\"spotlightButtonTemplate\"\n                    [ngTemplateOutletContext]=\"{ action: spotlightAction }\">\n                </ng-container>\n            </ng-container>\n\n\n            <button \n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu py-2\">\n                <li *ngFor=\"let action of actions\">\n\n                    <ng-container \n                        *ngIf=\"action.type === 'action'\"\n                        [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                        [ngTemplateOutletContext]=\"{ action: action }\">\n                    </ng-container>\n\n                    <ng-container \n                        *ngIf=\"action.type === 'divider'\"\n                        [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                    >\n                    </ng-container>\n                </li>\n            </ul>\n\n\n            <!-- <button \n                [id]=\"optionsButtonUUID\"\n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\"\n                (click)=\"showDropdown = !showDropdown\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            \n            <dx-popover\n                target=\"#{{optionsButtonUUID}}\"\n                [(visible)]=\"showDropdown\"\n                [wrapperAttr]=\"{ class: 'sds-table-actions-popover' }\"\n                >\n                    <ul class=\"dropdown-menu py-2\">\n                        <li *ngFor=\"let action of actions\">\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'action'\"\n                                [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                                [ngTemplateOutletContext]=\"{ action: action }\">\n                            </ng-container>\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'divider'\"\n                                [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                            >\n                            </ng-container>\n                        </li>\n                    </ul> \n            </dx-popover> -->\n\n\n        </div>\n\n\n        <button \n            class=\"btn sds-row-actions-placeholder\"\n            type=\"button\">\n            <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\"></fa-icon>\n        </button>\n\n    </div>\n</div>\n\n\n<ng-template #spotlightButtonTemplate let-action=\"action\">\n\n    <button \n        type=\"button\" \n        class=\"btn sds-row-quick-action\"                    \n        rel=\"tooltip\"\n        (click)=\"executeAction(action)\"\n        title=\"{{action.name}}\"\n    >\n        <fa-icon \n            *ngIf=\"action.icon\"\n            [icon]=\"action.icon\" \n            [size]=\"'sm'\"\n            [fixedWidth]=\"true\">\n        </fa-icon>\n        <!-- <fa-icon [icon]=\"ICON_DELETE\" [fixedWidth]=\"true\"> </fa-icon> -->\n    </button>  \n\n    \n</ng-template>\n\n\n<ng-template #dropdownActionTemplate let-action=\"action\">\n    <button \n        class=\"dropdown-item\"        \n        [class.dropdown-item-danger] = \"action.style === 'danger'\"                       \n        type=\"button\" \n        (click)=\"executeAction(action)\"\n    >\n        <div class=\"sds-flex-row-center gap-2\">\n            <div \n                *ngIf=\"showIcons\"\n                class=\"action-button-icon\"\n            >\n                <fa-icon \n                    *ngIf=\"action.icon\"\n                    [icon]=\"action.icon\" \n                    [size]=\"'sm'\"\n                    [fixedWidth]=\"true\">\n                </fa-icon>\n            </div>\n            <span>{{action.name}}</span>\n        </div>\n    </button>\n</ng-template>\n\n<ng-template #dropdownDividerTemplate >\n    <hr class=\"dropdown-divider\">\n</ng-template>", styles: [".dropdown-item-danger{color:#cc5252}.dropdown-item-danger:active{background-color:#cc5252;color:#f8f9fa}.action-button-icon{width:1.2rem}.sds-row-actions{right:0}.sds-row-actions-button{border-top-right-radius:.266rem!important;border-bottom-right-radius:.266rem!important}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { actions: [{
-                type: Input
-            }], optionsIcon: [{
-                type: Input
-            }], showIcons: [{
+            args: [{ selector: 'sds-table-actions', template: "\n<div class=\"sds-actions-container me-2\">\n\n    <div class=\"btn-group sds-actions-wrapper\" role=\"group\" aria-label=\"Basic example\">\n        <ng-content select='quickActions'></ng-content>\n\n        <div class=\"btn-group\" role=\"group\">\n            <button \n                #dropdownButton\n                class=\"sds-actions-dropdown-button btn btn-outline-secondary btn-sm\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon \n                    [icon]=\"dropdownIcon\" \n                    [fixedWidth]=\"true\" \n                    [size]=\"'sm'\">\n                </fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu sds-table-dropdown-menu py-2\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </div>\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { dropdownIcon: [{
                 type: Input
             }] } });
 

package/fesm2015/spicainternational-ngx-sds-components-src-lib-table-actions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-table-actions.mjs","sources":["../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.ts","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.html","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.module.ts","../../../projects/ngx-sds-components/src/lib/table-actions/spicainternational-ngx-sds-components-src-lib-table-actions.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { TableAction, TableActionDivider } from './table-actions.model';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n    selector: 'sds-table-actions',\n    templateUrl: './table-actions.component.html',\n    styleUrls: ['./table-actions.component.scss'],\n})\nexport class SdsTableActionsComponent implements OnInit {\n\n    @Input() actions: (TableAction | TableActionDivider)[] = [];\n\n    @Input() optionsIcon: IconProp = ['far', 'ellipsis'];\n    @Input() showIcons: boolean = true;\n\n    public optionsButtonUUID = `sds-ta-${Math.ceil(Math.random() * 1000000)}`;\n    public showDropdown = false;\n\n    constructor() {}\n\n    public executeAction(action: any): void {\n        if (action.type = 'action') {\n            action.callback?.();\n        }\n    }\n\n    ngOnInit(): void {}\n}\n","\n<div class=\"sds-row-actions-container me-2\">\n    <div class=\"dropdown\">\n\n        <div class=\"sds-row-actions btn-group shadow-sm\">\n            <ng-container *ngFor=\"let spotlightAction of actions\">\n                <ng-container \n                    *ngIf=\"spotlightAction.type === 'action' && spotlightAction.spotlight\"\n                    [ngTemplateOutlet]=\"spotlightButtonTemplate\"\n                    [ngTemplateOutletContext]=\"{ action: spotlightAction }\">\n                </ng-container>\n            </ng-container>\n\n\n            <button \n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu py-2\">\n                <li *ngFor=\"let action of actions\">\n\n                    <ng-container \n                        *ngIf=\"action.type === 'action'\"\n                        [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                        [ngTemplateOutletContext]=\"{ action: action }\">\n                    </ng-container>\n\n                    <ng-container \n                        *ngIf=\"action.type === 'divider'\"\n                        [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                    >\n                    </ng-container>\n                </li>\n            </ul>\n\n\n            <!-- <button \n                [id]=\"optionsButtonUUID\"\n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\"\n                (click)=\"showDropdown = !showDropdown\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            \n            <dx-popover\n                target=\"#{{optionsButtonUUID}}\"\n                [(visible)]=\"showDropdown\"\n                [wrapperAttr]=\"{ class: 'sds-table-actions-popover' }\"\n                >\n                    <ul class=\"dropdown-menu py-2\">\n                        <li *ngFor=\"let action of actions\">\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'action'\"\n                                [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                                [ngTemplateOutletContext]=\"{ action: action }\">\n                            </ng-container>\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'divider'\"\n                                [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                            >\n                            </ng-container>\n                        </li>\n                    </ul> \n            </dx-popover> -->\n\n\n        </div>\n\n\n        <button \n            class=\"btn sds-row-actions-placeholder\"\n            type=\"button\">\n            <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\"></fa-icon>\n        </button>\n\n    </div>\n</div>\n\n\n<ng-template #spotlightButtonTemplate let-action=\"action\">\n\n    <button \n        type=\"button\" \n        class=\"btn sds-row-quick-action\"                    \n        rel=\"tooltip\"\n        (click)=\"executeAction(action)\"\n        title=\"{{action.name}}\"\n    >\n        <fa-icon \n            *ngIf=\"action.icon\"\n            [icon]=\"action.icon\" \n            [size]=\"'sm'\"\n            [fixedWidth]=\"true\">\n        </fa-icon>\n        <!-- <fa-icon [icon]=\"ICON_DELETE\" [fixedWidth]=\"true\"> </fa-icon> -->\n    </button>  \n\n    \n</ng-template>\n\n\n<ng-template #dropdownActionTemplate let-action=\"action\">\n    <button \n        class=\"dropdown-item\"        \n        [class.dropdown-item-danger] = \"action.style === 'danger'\"                       \n        type=\"button\" \n        (click)=\"executeAction(action)\"\n    >\n        <div class=\"sds-flex-row-center gap-2\">\n            <div \n                *ngIf=\"showIcons\"\n                class=\"action-button-icon\"\n            >\n                <fa-icon \n                    *ngIf=\"action.icon\"\n                    [icon]=\"action.icon\" \n                    [size]=\"'sm'\"\n                    [fixedWidth]=\"true\">\n                </fa-icon>\n            </div>\n            <span>{{action.name}}</span>\n        </div>\n    </button>\n</ng-template>\n\n<ng-template #dropdownDividerTemplate >\n    <hr class=\"dropdown-divider\">\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsTableActionsComponent } from './table-actions.component';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { DxPopoverModule } from 'devextreme-angular';\n\n\n\n@NgModule({\n  declarations: [\n    SdsTableActionsComponent\n  ],\n  imports: [\n    CommonModule,\n    FontAwesomeModule,\n    DxPopoverModule\n  ],\n  exports: [\n    SdsTableActionsComponent\n  ]\n})\nexport class SdsTableActionsModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-table-actions.mjs","sources":["../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.ts","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.html","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.module.ts","../../../projects/ngx-sds-components/src/lib/table-actions/spicainternational-ngx-sds-components-src-lib-table-actions.ts"],"sourcesContent":["import { Component, ElementRef, Input, OnChanges, OnInit, Renderer2, SimpleChanges, ViewChild } from '@angular/core';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n    selector: 'sds-table-actions',\n    templateUrl: './table-actions.component.html',\n    styleUrls: ['./table-actions.component.scss'],\n})\nexport class SdsTableActionsComponent implements OnInit {\n\n    @Input() dropdownIcon: IconProp = ['far', 'ellipsis'];\n    // @ViewChild('dropdownButton', { static: true }) private _dropdownButton: ElementRef | undefined;\n\n    constructor(\n        // private _renderer: Renderer2\n    ) {}\n\n    public closeDropdown(): void {\n        // if (this._dropdownButton?.nativeElement) {\n        //     this._renderer.removeClass(this._dropdownButton.nativeElement, 'show');\n        // }\n    }\n\n    ngOnInit(): void {}\n}\n","\n<div class=\"sds-actions-container me-2\">\n\n    <div class=\"btn-group sds-actions-wrapper\" role=\"group\" aria-label=\"Basic example\">\n        <ng-content select='quickActions'></ng-content>\n\n        <div class=\"btn-group\" role=\"group\">\n            <button \n                #dropdownButton\n                class=\"sds-actions-dropdown-button btn btn-outline-secondary btn-sm\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon \n                    [icon]=\"dropdownIcon\" \n                    [fixedWidth]=\"true\" \n                    [size]=\"'sm'\">\n                </fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu sds-table-dropdown-menu py-2\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsTableActionsComponent } from './table-actions.component';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { DxPopoverModule } from 'devextreme-angular';\n\n\n\n@NgModule({\n  declarations: [\n    SdsTableActionsComponent\n  ],\n  imports: [\n    CommonModule,\n    FontAwesomeModule,\n    DxPopoverModule\n  ],\n  exports: [\n    SdsTableActionsComponent\n  ]\n})\nexport class SdsTableActionsModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAQa,wBAAwB,CAAA;;AAKjC,IAAA,WAAA,GAAA;QAHS,IAAA,CAAA,YAAY,GAAa,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;KAKlD;IAEG,aAAa,GAAA;;;;KAInB;AAED,IAAA,QAAQ,MAAW;;qHAfV,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,wBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,mGCRrC,83BAyBM,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDjBO,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBALpC,SAAS;+BACI,mBAAmB,EAAA,QAAA,EAAA,83BAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;0EAMpB,YAAY,EAAA,CAAA;sBAApB,KAAK;;;MEWG,qBAAqB,CAAA;;kHAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;mHAArB,qBAAqB,EAAA,YAAA,EAAA,CAX9B,wBAAwB,CAAA,EAAA,OAAA,EAAA,CAGxB,YAAY;QACZ,iBAAiB;QACjB,eAAe,aAGf,wBAAwB,CAAA,EAAA,CAAA,CAAA;AAGf,qBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,EATvB,OAAA,EAAA,CAAA;YACP,YAAY;YACZ,iBAAiB;YACjB,eAAe;SAChB,CAAA,EAAA,CAAA,CAAA;2FAKU,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAbjC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ,wBAAwB;AACzB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,iBAAiB;wBACjB,eAAe;AAChB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,wBAAwB;AACzB,qBAAA;iBACF,CAAA;;;ACpBD;;AAEG;;;;"}

package/fesm2020/spicainternational-ngx-sds-components-src-lib-table-actions.mjs

@@ -1,36 +1,28 @@
 import * as i0 from '@angular/core';
 import { Component, Input, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { DxPopoverModule } from 'devextreme-angular';
 
 class SdsTableActionsComponent {
+    // @ViewChild('dropdownButton', { static: true }) private _dropdownButton: ElementRef | undefined;
     constructor() {
-        this.actions = [];
-        this.optionsIcon = ['far', 'ellipsis'];
-        this.showIcons = true;
-        this.optionsButtonUUID = `sds-ta-${Math.ceil(Math.random() * 1000000)}`;
-        this.showDropdown = false;
+        this.dropdownIcon = ['far', 'ellipsis'];
     }
-    executeAction(action) {
-        if (action.type = 'action') {
-            action.callback?.();
-        }
+    closeDropdown() {
+        // if (this._dropdownButton?.nativeElement) {
+        //     this._renderer.removeClass(this._dropdownButton.nativeElement, 'show');
+        // }
     }
     ngOnInit() { }
 }
 SdsTableActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsTableActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsTableActionsComponent, selector: "sds-table-actions", inputs: { actions: "actions", optionsIcon: "optionsIcon", showIcons: "showIcons" }, ngImport: i0, template: "\n<div class=\"sds-row-actions-container me-2\">\n    <div class=\"dropdown\">\n\n        <div class=\"sds-row-actions btn-group shadow-sm\">\n            <ng-container *ngFor=\"let spotlightAction of actions\">\n                <ng-container \n                    *ngIf=\"spotlightAction.type === 'action' && spotlightAction.spotlight\"\n                    [ngTemplateOutlet]=\"spotlightButtonTemplate\"\n                    [ngTemplateOutletContext]=\"{ action: spotlightAction }\">\n                </ng-container>\n            </ng-container>\n\n\n            <button \n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu py-2\">\n                <li *ngFor=\"let action of actions\">\n\n                    <ng-container \n                        *ngIf=\"action.type === 'action'\"\n                        [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                        [ngTemplateOutletContext]=\"{ action: action }\">\n                    </ng-container>\n\n                    <ng-container \n                        *ngIf=\"action.type === 'divider'\"\n                        [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                    >\n                    </ng-container>\n                </li>\n            </ul>\n\n\n            <!-- <button \n                [id]=\"optionsButtonUUID\"\n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\"\n                (click)=\"showDropdown = !showDropdown\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            \n            <dx-popover\n                target=\"#{{optionsButtonUUID}}\"\n                [(visible)]=\"showDropdown\"\n                [wrapperAttr]=\"{ class: 'sds-table-actions-popover' }\"\n                >\n                    <ul class=\"dropdown-menu py-2\">\n                        <li *ngFor=\"let action of actions\">\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'action'\"\n                                [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                                [ngTemplateOutletContext]=\"{ action: action }\">\n                            </ng-container>\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'divider'\"\n                                [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                            >\n                            </ng-container>\n                        </li>\n                    </ul> \n            </dx-popover> -->\n\n\n        </div>\n\n\n        <button \n            class=\"btn sds-row-actions-placeholder\"\n            type=\"button\">\n            <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\"></fa-icon>\n        </button>\n\n    </div>\n</div>\n\n\n<ng-template #spotlightButtonTemplate let-action=\"action\">\n\n    <button \n        type=\"button\" \n        class=\"btn sds-row-quick-action\"                    \n        rel=\"tooltip\"\n        (click)=\"executeAction(action)\"\n        title=\"{{action.name}}\"\n    >\n        <fa-icon \n            *ngIf=\"action.icon\"\n            [icon]=\"action.icon\" \n            [size]=\"'sm'\"\n            [fixedWidth]=\"true\">\n        </fa-icon>\n        <!-- <fa-icon [icon]=\"ICON_DELETE\" [fixedWidth]=\"true\"> </fa-icon> -->\n    </button>  \n\n    \n</ng-template>\n\n\n<ng-template #dropdownActionTemplate let-action=\"action\">\n    <button \n        class=\"dropdown-item\"        \n        [class.dropdown-item-danger] = \"action.style === 'danger'\"                       \n        type=\"button\" \n        (click)=\"executeAction(action)\"\n    >\n        <div class=\"sds-flex-row-center gap-2\">\n            <div \n                *ngIf=\"showIcons\"\n                class=\"action-button-icon\"\n            >\n                <fa-icon \n                    *ngIf=\"action.icon\"\n                    [icon]=\"action.icon\" \n                    [size]=\"'sm'\"\n                    [fixedWidth]=\"true\">\n                </fa-icon>\n            </div>\n            <span>{{action.name}}</span>\n        </div>\n    </button>\n</ng-template>\n\n<ng-template #dropdownDividerTemplate >\n    <hr class=\"dropdown-divider\">\n</ng-template>", styles: [".dropdown-item-danger{color:#cc5252}.dropdown-item-danger:active{background-color:#cc5252;color:#f8f9fa}.action-button-icon{width:1.2rem}.sds-row-actions{right:0}.sds-row-actions-button{border-top-right-radius:.266rem!important;border-bottom-right-radius:.266rem!important}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+SdsTableActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsTableActionsComponent, selector: "sds-table-actions", inputs: { dropdownIcon: "dropdownIcon" }, ngImport: i0, template: "\n<div class=\"sds-actions-container me-2\">\n\n    <div class=\"btn-group sds-actions-wrapper\" role=\"group\" aria-label=\"Basic example\">\n        <ng-content select='quickActions'></ng-content>\n\n        <div class=\"btn-group\" role=\"group\">\n            <button \n                #dropdownButton\n                class=\"sds-actions-dropdown-button btn btn-outline-secondary btn-sm\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon \n                    [icon]=\"dropdownIcon\" \n                    [fixedWidth]=\"true\" \n                    [size]=\"'sm'\">\n                </fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu sds-table-dropdown-menu py-2\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </div>\n</div>", styles: [""], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTableActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-table-actions', template: "\n<div class=\"sds-row-actions-container me-2\">\n    <div class=\"dropdown\">\n\n        <div class=\"sds-row-actions btn-group shadow-sm\">\n            <ng-container *ngFor=\"let spotlightAction of actions\">\n                <ng-container \n                    *ngIf=\"spotlightAction.type === 'action' && spotlightAction.spotlight\"\n                    [ngTemplateOutlet]=\"spotlightButtonTemplate\"\n                    [ngTemplateOutletContext]=\"{ action: spotlightAction }\">\n                </ng-container>\n            </ng-container>\n\n\n            <button \n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu py-2\">\n                <li *ngFor=\"let action of actions\">\n\n                    <ng-container \n                        *ngIf=\"action.type === 'action'\"\n                        [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                        [ngTemplateOutletContext]=\"{ action: action }\">\n                    </ng-container>\n\n                    <ng-container \n                        *ngIf=\"action.type === 'divider'\"\n                        [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                    >\n                    </ng-container>\n                </li>\n            </ul>\n\n\n            <!-- <button \n                [id]=\"optionsButtonUUID\"\n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\"\n                (click)=\"showDropdown = !showDropdown\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            \n            <dx-popover\n                target=\"#{{optionsButtonUUID}}\"\n                [(visible)]=\"showDropdown\"\n                [wrapperAttr]=\"{ class: 'sds-table-actions-popover' }\"\n                >\n                    <ul class=\"dropdown-menu py-2\">\n                        <li *ngFor=\"let action of actions\">\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'action'\"\n                                [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                                [ngTemplateOutletContext]=\"{ action: action }\">\n                            </ng-container>\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'divider'\"\n                                [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                            >\n                            </ng-container>\n                        </li>\n                    </ul> \n            </dx-popover> -->\n\n\n        </div>\n\n\n        <button \n            class=\"btn sds-row-actions-placeholder\"\n            type=\"button\">\n            <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\"></fa-icon>\n        </button>\n\n    </div>\n</div>\n\n\n<ng-template #spotlightButtonTemplate let-action=\"action\">\n\n    <button \n        type=\"button\" \n        class=\"btn sds-row-quick-action\"                    \n        rel=\"tooltip\"\n        (click)=\"executeAction(action)\"\n        title=\"{{action.name}}\"\n    >\n        <fa-icon \n            *ngIf=\"action.icon\"\n            [icon]=\"action.icon\" \n            [size]=\"'sm'\"\n            [fixedWidth]=\"true\">\n        </fa-icon>\n        <!-- <fa-icon [icon]=\"ICON_DELETE\" [fixedWidth]=\"true\"> </fa-icon> -->\n    </button>  \n\n    \n</ng-template>\n\n\n<ng-template #dropdownActionTemplate let-action=\"action\">\n    <button \n        class=\"dropdown-item\"        \n        [class.dropdown-item-danger] = \"action.style === 'danger'\"                       \n        type=\"button\" \n        (click)=\"executeAction(action)\"\n    >\n        <div class=\"sds-flex-row-center gap-2\">\n            <div \n                *ngIf=\"showIcons\"\n                class=\"action-button-icon\"\n            >\n                <fa-icon \n                    *ngIf=\"action.icon\"\n                    [icon]=\"action.icon\" \n                    [size]=\"'sm'\"\n                    [fixedWidth]=\"true\">\n                </fa-icon>\n            </div>\n            <span>{{action.name}}</span>\n        </div>\n    </button>\n</ng-template>\n\n<ng-template #dropdownDividerTemplate >\n    <hr class=\"dropdown-divider\">\n</ng-template>", styles: [".dropdown-item-danger{color:#cc5252}.dropdown-item-danger:active{background-color:#cc5252;color:#f8f9fa}.action-button-icon{width:1.2rem}.sds-row-actions{right:0}.sds-row-actions-button{border-top-right-radius:.266rem!important;border-bottom-right-radius:.266rem!important}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { actions: [{
-                type: Input
-            }], optionsIcon: [{
-                type: Input
-            }], showIcons: [{
+            args: [{ selector: 'sds-table-actions', template: "\n<div class=\"sds-actions-container me-2\">\n\n    <div class=\"btn-group sds-actions-wrapper\" role=\"group\" aria-label=\"Basic example\">\n        <ng-content select='quickActions'></ng-content>\n\n        <div class=\"btn-group\" role=\"group\">\n            <button \n                #dropdownButton\n                class=\"sds-actions-dropdown-button btn btn-outline-secondary btn-sm\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon \n                    [icon]=\"dropdownIcon\" \n                    [fixedWidth]=\"true\" \n                    [size]=\"'sm'\">\n                </fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu sds-table-dropdown-menu py-2\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </div>\n</div>", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { dropdownIcon: [{
                 type: Input
             }] } });
 

package/fesm2020/spicainternational-ngx-sds-components-src-lib-table-actions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-table-actions.mjs","sources":["../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.ts","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.html","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.module.ts","../../../projects/ngx-sds-components/src/lib/table-actions/spicainternational-ngx-sds-components-src-lib-table-actions.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { TableAction, TableActionDivider } from './table-actions.model';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n    selector: 'sds-table-actions',\n    templateUrl: './table-actions.component.html',\n    styleUrls: ['./table-actions.component.scss'],\n})\nexport class SdsTableActionsComponent implements OnInit {\n\n    @Input() actions: (TableAction | TableActionDivider)[] = [];\n\n    @Input() optionsIcon: IconProp = ['far', 'ellipsis'];\n    @Input() showIcons: boolean = true;\n\n    public optionsButtonUUID = `sds-ta-${Math.ceil(Math.random() * 1000000)}`;\n    public showDropdown = false;\n\n    constructor() {}\n\n    public executeAction(action: any): void {\n        if (action.type = 'action') {\n            action.callback?.();\n        }\n    }\n\n    ngOnInit(): void {}\n}\n","\n<div class=\"sds-row-actions-container me-2\">\n    <div class=\"dropdown\">\n\n        <div class=\"sds-row-actions btn-group shadow-sm\">\n            <ng-container *ngFor=\"let spotlightAction of actions\">\n                <ng-container \n                    *ngIf=\"spotlightAction.type === 'action' && spotlightAction.spotlight\"\n                    [ngTemplateOutlet]=\"spotlightButtonTemplate\"\n                    [ngTemplateOutletContext]=\"{ action: spotlightAction }\">\n                </ng-container>\n            </ng-container>\n\n\n            <button \n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu py-2\">\n                <li *ngFor=\"let action of actions\">\n\n                    <ng-container \n                        *ngIf=\"action.type === 'action'\"\n                        [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                        [ngTemplateOutletContext]=\"{ action: action }\">\n                    </ng-container>\n\n                    <ng-container \n                        *ngIf=\"action.type === 'divider'\"\n                        [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                    >\n                    </ng-container>\n                </li>\n            </ul>\n\n\n            <!-- <button \n                [id]=\"optionsButtonUUID\"\n                class=\"btn sds-row-quick-action sds-row-actions-button\"\n                type=\"button\"\n                (click)=\"showDropdown = !showDropdown\">\n                <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\"></fa-icon>\n            </button>\n\n            \n            <dx-popover\n                target=\"#{{optionsButtonUUID}}\"\n                [(visible)]=\"showDropdown\"\n                [wrapperAttr]=\"{ class: 'sds-table-actions-popover' }\"\n                >\n                    <ul class=\"dropdown-menu py-2\">\n                        <li *ngFor=\"let action of actions\">\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'action'\"\n                                [ngTemplateOutlet]=\"dropdownActionTemplate\"\n                                [ngTemplateOutletContext]=\"{ action: action }\">\n                            </ng-container>\n        \n                            <ng-container \n                                *ngIf=\"action.type === 'divider'\"\n                                [ngTemplateOutlet]=\"dropdownDividerTemplate\"\n                            >\n                            </ng-container>\n                        </li>\n                    </ul> \n            </dx-popover> -->\n\n\n        </div>\n\n\n        <button \n            class=\"btn sds-row-actions-placeholder\"\n            type=\"button\">\n            <fa-icon [icon]=\"optionsIcon\" [fixedWidth]=\"true\"></fa-icon>\n        </button>\n\n    </div>\n</div>\n\n\n<ng-template #spotlightButtonTemplate let-action=\"action\">\n\n    <button \n        type=\"button\" \n        class=\"btn sds-row-quick-action\"                    \n        rel=\"tooltip\"\n        (click)=\"executeAction(action)\"\n        title=\"{{action.name}}\"\n    >\n        <fa-icon \n            *ngIf=\"action.icon\"\n            [icon]=\"action.icon\" \n            [size]=\"'sm'\"\n            [fixedWidth]=\"true\">\n        </fa-icon>\n        <!-- <fa-icon [icon]=\"ICON_DELETE\" [fixedWidth]=\"true\"> </fa-icon> -->\n    </button>  \n\n    \n</ng-template>\n\n\n<ng-template #dropdownActionTemplate let-action=\"action\">\n    <button \n        class=\"dropdown-item\"        \n        [class.dropdown-item-danger] = \"action.style === 'danger'\"                       \n        type=\"button\" \n        (click)=\"executeAction(action)\"\n    >\n        <div class=\"sds-flex-row-center gap-2\">\n            <div \n                *ngIf=\"showIcons\"\n                class=\"action-button-icon\"\n            >\n                <fa-icon \n                    *ngIf=\"action.icon\"\n                    [icon]=\"action.icon\" \n                    [size]=\"'sm'\"\n                    [fixedWidth]=\"true\">\n                </fa-icon>\n            </div>\n            <span>{{action.name}}</span>\n        </div>\n    </button>\n</ng-template>\n\n<ng-template #dropdownDividerTemplate >\n    <hr class=\"dropdown-divider\">\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsTableActionsComponent } from './table-actions.component';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { DxPopoverModule } from 'devextreme-angular';\n\n\n\n@NgModule({\n  declarations: [\n    SdsTableActionsComponent\n  ],\n  imports: [\n    CommonModule,\n    FontAwesomeModule,\n    DxPopoverModule\n  ],\n  exports: [\n    SdsTableActionsComponent\n  ]\n})\nexport class SdsTableActionsModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-table-actions.mjs","sources":["../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.ts","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.html","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.module.ts","../../../projects/ngx-sds-components/src/lib/table-actions/spicainternational-ngx-sds-components-src-lib-table-actions.ts"],"sourcesContent":["import { Component, ElementRef, Input, OnChanges, OnInit, Renderer2, SimpleChanges, ViewChild } from '@angular/core';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\n\n@Component({\n    selector: 'sds-table-actions',\n    templateUrl: './table-actions.component.html',\n    styleUrls: ['./table-actions.component.scss'],\n})\nexport class SdsTableActionsComponent implements OnInit {\n\n    @Input() dropdownIcon: IconProp = ['far', 'ellipsis'];\n    // @ViewChild('dropdownButton', { static: true }) private _dropdownButton: ElementRef | undefined;\n\n    constructor(\n        // private _renderer: Renderer2\n    ) {}\n\n    public closeDropdown(): void {\n        // if (this._dropdownButton?.nativeElement) {\n        //     this._renderer.removeClass(this._dropdownButton.nativeElement, 'show');\n        // }\n    }\n\n    ngOnInit(): void {}\n}\n","\n<div class=\"sds-actions-container me-2\">\n\n    <div class=\"btn-group sds-actions-wrapper\" role=\"group\" aria-label=\"Basic example\">\n        <ng-content select='quickActions'></ng-content>\n\n        <div class=\"btn-group\" role=\"group\">\n            <button \n                #dropdownButton\n                class=\"sds-actions-dropdown-button btn btn-outline-secondary btn-sm\"\n                type=\"button\" \n                data-bs-toggle=\"dropdown\" \n                aria-expanded=\"false\">\n                <fa-icon \n                    [icon]=\"dropdownIcon\" \n                    [fixedWidth]=\"true\" \n                    [size]=\"'sm'\">\n                </fa-icon>\n            </button>\n\n            <ul class=\"dropdown-menu sds-table-dropdown-menu py-2\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SdsTableActionsComponent } from './table-actions.component';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { DxPopoverModule } from 'devextreme-angular';\n\n\n\n@NgModule({\n  declarations: [\n    SdsTableActionsComponent\n  ],\n  imports: [\n    CommonModule,\n    FontAwesomeModule,\n    DxPopoverModule\n  ],\n  exports: [\n    SdsTableActionsComponent\n  ]\n})\nexport class SdsTableActionsModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;MAQa,wBAAwB,CAAA;;AAKjC,IAAA,WAAA,GAAA;AAHS,QAAA,IAAA,CAAA,YAAY,GAAa,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;KAKlD;IAEG,aAAa,GAAA;;;;KAInB;AAED,IAAA,QAAQ,MAAW;;qHAfV,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,wBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,mGCRrC,83BAyBM,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDjBO,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBALpC,SAAS;+BACI,mBAAmB,EAAA,QAAA,EAAA,83BAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;0EAMpB,YAAY,EAAA,CAAA;sBAApB,KAAK;;;MEWG,qBAAqB,CAAA;;kHAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;mHAArB,qBAAqB,EAAA,YAAA,EAAA,CAX9B,wBAAwB,CAAA,EAAA,OAAA,EAAA,CAGxB,YAAY;QACZ,iBAAiB;AACjB,QAAA,eAAe,aAGf,wBAAwB,CAAA,EAAA,CAAA,CAAA;AAGf,qBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,EATvB,OAAA,EAAA,CAAA;YACP,YAAY;YACZ,iBAAiB;YACjB,eAAe;AAChB,SAAA,CAAA,EAAA,CAAA,CAAA;2FAKU,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAbjC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ,wBAAwB;AACzB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,iBAAiB;wBACjB,eAAe;AAChB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,wBAAwB;AACzB,qBAAA;AACF,iBAAA,CAAA;;;ACpBD;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spicainternational/ngx-sds-components",
-  "version": "5.25.1",
+  "version": "5.25.2",
   "license": "MIT",
   "description": "Spica design system angular components.",
   "peerDependencies": {

package/src/lib/table-actions/table-actions.component.d.ts

@@ -1,16 +1,11 @@
 import { OnInit } from '@angular/core';
-import { TableAction, TableActionDivider } from './table-actions.model';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import * as i0 from "@angular/core";
 export declare class SdsTableActionsComponent implements OnInit {
-    actions: (TableAction | TableActionDivider)[];
-    optionsIcon: IconProp;
-    showIcons: boolean;
-    optionsButtonUUID: string;
-    showDropdown: boolean;
+    dropdownIcon: IconProp;
     constructor();
-    executeAction(action: any): void;
+    closeDropdown(): void;
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdsTableActionsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdsTableActionsComponent, "sds-table-actions", never, { "actions": "actions"; "optionsIcon": "optionsIcon"; "showIcons": "showIcons"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdsTableActionsComponent, "sds-table-actions", never, { "dropdownIcon": "dropdownIcon"; }, {}, never, ["quickActions", "*"]>;
 }

package/esm2020/src/lib/table-actions/table-actions.model.mjs

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtYWN0aW9ucy5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL3RhYmxlLWFjdGlvbnMvdGFibGUtYWN0aW9ucy5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSWNvblByb3AgfSBmcm9tIFwiQGZvcnRhd2Vzb21lL2ZvbnRhd2Vzb21lLXN2Zy1jb3JlXCI7XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIFRhYmxlQWN0aW9uIHtcclxuICAgIHR5cGU6ICdhY3Rpb24nO1xyXG4gICAgbmFtZTogc3RyaW5nO1xyXG4gICAgaWNvbjogSWNvblByb3AgfCB1bmRlZmluZWQ7XHJcbiAgICBkaXNhYmxlZDogYm9vbGVhbjtcclxuICAgIGNhbGxiYWNrPzogRnVuY3Rpb247XHJcbiAgICBzcG90bGlnaHQ6IGJvb2xlYW47XHJcbiAgICBzdHlsZTogJ2RlZmF1bHQnIHwgJ2Rhbmdlcic7XHJcbn1cclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgVGFibGVBY3Rpb25EaXZpZGVyIHtcclxuICAgIHR5cGU6ICdkaXZpZGVyJztcclxufSJdfQ==

package/src/lib/table-actions/table-actions.model.d.ts

@@ -1,13 +0,0 @@
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-export interface TableAction {
-    type: 'action';
-    name: string;
-    icon: IconProp | undefined;
-    disabled: boolean;
-    callback?: Function;
-    spotlight: boolean;
-    style: 'default' | 'danger';
-}
-export interface TableActionDivider {
-    type: 'divider';
-}