@spicainternational/ngx-sds-components 5.25.1 → 5.25.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/esm2020/src/lib/table-actions/table-actions.component.mjs +10 -18
  2. package/fesm2015/spicainternational-ngx-sds-components-src-lib-table-actions.mjs +9 -18
  3. package/fesm2015/spicainternational-ngx-sds-components-src-lib-table-actions.mjs.map +1 -1
  4. package/fesm2020/spicainternational-ngx-sds-components-src-lib-table-actions.mjs +9 -17
  5. package/fesm2020/spicainternational-ngx-sds-components-src-lib-table-actions.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/src/lib/table-actions/table-actions.component.d.ts +3 -8
  8. package/esm2020/src/lib/table-actions/table-actions.model.mjs +0 -2
  9. package/src/lib/table-actions/table-actions.model.d.ts +0 -13
package/esm2020/src/lib/table-actions/table-actions.component.mjs CHANGED
@@ -1,32 +1,24 @@
1
1
  import { Component, Input } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  import * as i1 from "@fortawesome/angular-fontawesome";
4
- import * as i2 from "@angular/common";
5
4
  export class SdsTableActionsComponent {
5
+ // @ViewChild('dropdownButton', { static: true }) private _dropdownButton: ElementRef | undefined;
6
6
  constructor() {
7
- this.actions = [];
8
- this.optionsIcon = ['far', 'ellipsis'];
9
- this.showIcons = true;
10
- this.optionsButtonUUID = `sds-ta-${Math.ceil(Math.random() * 1000000)}`;
11
- this.showDropdown = false;
7
+ this.dropdownIcon = ['far', 'ellipsis'];
12
8
  }
13
- executeAction(action) {
14
- if (action.type = 'action') {
15
- action.callback?.();
16
- }
9
+ closeDropdown() {
10
+ // if (this._dropdownButton?.nativeElement) {
11
+ // this._renderer.removeClass(this._dropdownButton.nativeElement, 'show');
12
+ // }
17
13
  }
18
14
  ngOnInit() { }
19
15
  }
20
16
  SdsTableActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
21
- 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"] }] });
17
+ 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 \n class=\"btn-group sds-actions-wrapper\" \n role=\"group\" \n aria-label=\"Basic example\"\n (click)=\"$event.stopPropagation()\"\n >\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 >\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"] }] });
22
18
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTableActionsComponent, decorators: [{
23
19
  type: Component,
24
- 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"] }]
25
- }], ctorParameters: function () { return []; }, propDecorators: { actions: [{
26
- type: Input
27
- }], optionsIcon: [{
28
- type: Input
29
- }], showIcons: [{
20
+ args: [{ selector: 'sds-table-actions', template: "\n<div class=\"sds-actions-container me-2\">\n\n <div \n class=\"btn-group sds-actions-wrapper\" \n role=\"group\" \n aria-label=\"Basic example\"\n (click)=\"$event.stopPropagation()\"\n >\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 >\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: [""] }]
21
+ }], ctorParameters: function () { return []; }, propDecorators: { dropdownIcon: [{
30
22
  type: Input
31
23
  }] } });
32
- //# 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=
24
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtYWN0aW9ucy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi90YWJsZS1hY3Rpb25zL3RhYmxlLWFjdGlvbnMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvdGFibGUtYWN0aW9ucy90YWJsZS1hY3Rpb25zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsS0FBSyxFQUEwRCxNQUFNLGVBQWUsQ0FBQzs7O0FBUXJILE1BQU0sT0FBTyx3QkFBd0I7SUFHakMsa0dBQWtHO0lBRWxHO1FBSFMsaUJBQVksR0FBYSxDQUFDLEtBQUssRUFBRSxVQUFVLENBQUMsQ0FBQztJQUtuRCxDQUFDO0lBRUcsYUFBYTtRQUNoQiw2Q0FBNkM7UUFDN0MsOEVBQThFO1FBQzlFLElBQUk7SUFDUixDQUFDO0lBRUQsUUFBUSxLQUFVLENBQUM7O3FIQWZWLHdCQUF3Qjt5R0FBeEIsd0JBQXdCLG1HQ1JyQyxzK0JBK0JNOzJGRHZCTyx3QkFBd0I7a0JBTHBDLFNBQVM7K0JBQ0ksbUJBQW1COzBFQU1wQixZQUFZO3NCQUFwQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIFJlbmRlcmVyMiwgU2ltcGxlQ2hhbmdlcywgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJY29uUHJvcCB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mb250YXdlc29tZS1zdmctY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnc2RzLXRhYmxlLWFjdGlvbnMnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi90YWJsZS1hY3Rpb25zLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90YWJsZS1hY3Rpb25zLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFNkc1RhYmxlQWN0aW9uc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgICBASW5wdXQoKSBkcm9wZG93bkljb246IEljb25Qcm9wID0gWydmYXInLCAnZWxsaXBzaXMnXTtcbiAgICAvLyBAVmlld0NoaWxkKCdkcm9wZG93bkJ1dHRvbicsIHsgc3RhdGljOiB0cnVlIH0pIHByaXZhdGUgX2Ryb3Bkb3duQnV0dG9uOiBFbGVtZW50UmVmIHwgdW5kZWZpbmVkO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIC8vIHByaXZhdGUgX3JlbmRlcmVyOiBSZW5kZXJlcjJcbiAgICApIHt9XG5cbiAgICBwdWJsaWMgY2xvc2VEcm9wZG93bigpOiB2b2lkIHtcbiAgICAgICAgLy8gaWYgKHRoaXMuX2Ryb3Bkb3duQnV0dG9uPy5uYXRpdmVFbGVtZW50KSB7XG4gICAgICAgIC8vICAgICB0aGlzLl9yZW5kZXJlci5yZW1vdmVDbGFzcyh0aGlzLl9kcm9wZG93bkJ1dHRvbi5uYXRpdmVFbGVtZW50LCAnc2hvdycpO1xuICAgICAgICAvLyB9XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7fVxufVxuIiwiXG48ZGl2IGNsYXNzPVwic2RzLWFjdGlvbnMtY29udGFpbmVyIG1lLTJcIj5cblxuICAgIDxkaXYgXG4gICAgICAgIGNsYXNzPVwiYnRuLWdyb3VwIHNkcy1hY3Rpb25zLXdyYXBwZXJcIiBcbiAgICAgICAgcm9sZT1cImdyb3VwXCIgXG4gICAgICAgIGFyaWEtbGFiZWw9XCJCYXNpYyBleGFtcGxlXCJcbiAgICAgICAgKGNsaWNrKT1cIiRldmVudC5zdG9wUHJvcGFnYXRpb24oKVwiXG4gICAgICAgID5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PSdxdWlja0FjdGlvbnMnPjwvbmctY29udGVudD5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiYnRuLWdyb3VwXCIgcm9sZT1cImdyb3VwXCI+XG4gICAgICAgICAgICA8YnV0dG9uIFxuICAgICAgICAgICAgICAgICNkcm9wZG93bkJ1dHRvblxuICAgICAgICAgICAgICAgIGNsYXNzPVwic2RzLWFjdGlvbnMtZHJvcGRvd24tYnV0dG9uIGJ0biBidG4tb3V0bGluZS1zZWNvbmRhcnkgYnRuLXNtXCJcbiAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCIgXG4gICAgICAgICAgICAgICAgZGF0YS1icy10b2dnbGU9XCJkcm9wZG93blwiIFxuICAgICAgICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9XCJmYWxzZVwiXG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxmYS1pY29uIFxuICAgICAgICAgICAgICAgICAgICBbaWNvbl09XCJkcm9wZG93bkljb25cIiBcbiAgICAgICAgICAgICAgICAgICAgW2ZpeGVkV2lkdGhdPVwidHJ1ZVwiIFxuICAgICAgICAgICAgICAgICAgICBbc2l6ZV09XCInc20nXCI+XG4gICAgICAgICAgICAgICAgPC9mYS1pY29uPlxuICAgICAgICAgICAgPC9idXR0b24+XG5cbiAgICAgICAgICAgIDx1bCBjbGFzcz1cImRyb3Bkb3duLW1lbnUgc2RzLXRhYmxlLWRyb3Bkb3duLW1lbnUgcHktMlwiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICAgICAgICAgIDwvdWw+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9kaXY+Il19
package/fesm2015/spicainternational-ngx-sds-components-src-lib-table-actions.mjs CHANGED
@@ -1,37 +1,28 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Component, Input, NgModule } from '@angular/core';
3
- import * as i2 from '@angular/common';
4
3
  import { CommonModule } from '@angular/common';
5
4
  import * as i1 from '@fortawesome/angular-fontawesome';
6
5
  import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
7
6
  import { DxPopoverModule } from 'devextreme-angular';
8
7
 
9
8
  class SdsTableActionsComponent {
9
+ // @ViewChild('dropdownButton', { static: true }) private _dropdownButton: ElementRef | undefined;
10
10
  constructor() {
11
- this.actions = [];
12
- this.optionsIcon = ['far', 'ellipsis'];
13
- this.showIcons = true;
14
- this.optionsButtonUUID = `sds-ta-${Math.ceil(Math.random() * 1000000)}`;
15
- this.showDropdown = false;
11
+ this.dropdownIcon = ['far', 'ellipsis'];
16
12
  }
17
- executeAction(action) {
18
- var _a;
19
- if (action.type = 'action') {
20
- (_a = action.callback) === null || _a === void 0 ? void 0 : _a.call(action);
21
- }
13
+ closeDropdown() {
14
+ // if (this._dropdownButton?.nativeElement) {
15
+ // this._renderer.removeClass(this._dropdownButton.nativeElement, 'show');
16
+ // }
22
17
  }
23
18
  ngOnInit() { }
24
19
  }
25
20
  SdsTableActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
26
- 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"] }] });
21
+ 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 \n class=\"btn-group sds-actions-wrapper\" \n role=\"group\" \n aria-label=\"Basic example\"\n (click)=\"$event.stopPropagation()\"\n >\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 >\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"] }] });
27
22
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTableActionsComponent, decorators: [{
28
23
  type: Component,
29
- 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"] }]
30
- }], ctorParameters: function () { return []; }, propDecorators: { actions: [{
31
- type: Input
32
- }], optionsIcon: [{
33
- type: Input
34
- }], showIcons: [{
24
+ args: [{ selector: 'sds-table-actions', template: "\n<div class=\"sds-actions-container me-2\">\n\n <div \n class=\"btn-group sds-actions-wrapper\" \n role=\"group\" \n aria-label=\"Basic example\"\n (click)=\"$event.stopPropagation()\"\n >\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 >\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: [""] }]
25
+ }], ctorParameters: function () { return []; }, propDecorators: { dropdownIcon: [{
35
26
  type: Input
36
27
  }] } });
37
28
 
package/fesm2015/spicainternational-ngx-sds-components-src-lib-table-actions.mjs.map CHANGED
@@ -1 +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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"}
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, 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 \n class=\"btn-group sds-actions-wrapper\" \n role=\"group\" \n aria-label=\"Basic example\"\n (click)=\"$event.stopPropagation()\"\n >\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 >\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,s+BA+BM,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;2FDvBO,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBALpC,SAAS;+BACI,mBAAmB,EAAA,QAAA,EAAA,s+BAAA,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 CHANGED
@@ -1,36 +1,28 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Component, Input, NgModule } from '@angular/core';
3
- import * as i2 from '@angular/common';
4
3
  import { CommonModule } from '@angular/common';
5
4
  import * as i1 from '@fortawesome/angular-fontawesome';
6
5
  import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
7
6
  import { DxPopoverModule } from 'devextreme-angular';
8
7
 
9
8
  class SdsTableActionsComponent {
9
+ // @ViewChild('dropdownButton', { static: true }) private _dropdownButton: ElementRef | undefined;
10
10
  constructor() {
11
- this.actions = [];
12
- this.optionsIcon = ['far', 'ellipsis'];
13
- this.showIcons = true;
14
- this.optionsButtonUUID = `sds-ta-${Math.ceil(Math.random() * 1000000)}`;
15
- this.showDropdown = false;
11
+ this.dropdownIcon = ['far', 'ellipsis'];
16
12
  }
17
- executeAction(action) {
18
- if (action.type = 'action') {
19
- action.callback?.();
20
- }
13
+ closeDropdown() {
14
+ // if (this._dropdownButton?.nativeElement) {
15
+ // this._renderer.removeClass(this._dropdownButton.nativeElement, 'show');
16
+ // }
21
17
  }
22
18
  ngOnInit() { }
23
19
  }
24
20
  SdsTableActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
25
- 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"] }] });
21
+ 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 \n class=\"btn-group sds-actions-wrapper\" \n role=\"group\" \n aria-label=\"Basic example\"\n (click)=\"$event.stopPropagation()\"\n >\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 >\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"] }] });
26
22
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTableActionsComponent, decorators: [{
27
23
  type: Component,
28
- 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"] }]
29
- }], ctorParameters: function () { return []; }, propDecorators: { actions: [{
30
- type: Input
31
- }], optionsIcon: [{
32
- type: Input
33
- }], showIcons: [{
24
+ args: [{ selector: 'sds-table-actions', template: "\n<div class=\"sds-actions-container me-2\">\n\n <div \n class=\"btn-group sds-actions-wrapper\" \n role=\"group\" \n aria-label=\"Basic example\"\n (click)=\"$event.stopPropagation()\"\n >\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 >\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: [""] }]
25
+ }], ctorParameters: function () { return []; }, propDecorators: { dropdownIcon: [{
34
26
  type: Input
35
27
  }] } });
36
28
 
package/fesm2020/spicainternational-ngx-sds-components-src-lib-table-actions.mjs.map CHANGED
@@ -1 +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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"}
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, 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 \n class=\"btn-group sds-actions-wrapper\" \n role=\"group\" \n aria-label=\"Basic example\"\n (click)=\"$event.stopPropagation()\"\n >\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 >\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,s+BA+BM,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;2FDvBO,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBALpC,SAAS;+BACI,mBAAmB,EAAA,QAAA,EAAA,s+BAAA,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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spicainternational/ngx-sds-components",
3
- "version": "5.25.1",
3
+ "version": "5.25.3",
4
4
  "license": "MIT",
5
5
  "description": "Spica design system angular components.",
6
6
  "peerDependencies": {
package/src/lib/table-actions/table-actions.component.d.ts CHANGED
@@ -1,16 +1,11 @@
1
1
  import { OnInit } from '@angular/core';
2
- import { TableAction, TableActionDivider } from './table-actions.model';
3
2
  import { IconProp } from '@fortawesome/fontawesome-svg-core';
4
3
  import * as i0 from "@angular/core";
5
4
  export declare class SdsTableActionsComponent implements OnInit {
6
- actions: (TableAction | TableActionDivider)[];
7
- optionsIcon: IconProp;
8
- showIcons: boolean;
9
- optionsButtonUUID: string;
10
- showDropdown: boolean;
5
+ dropdownIcon: IconProp;
11
6
  constructor();
12
- executeAction(action: any): void;
7
+ closeDropdown(): void;
13
8
  ngOnInit(): void;
14
9
  static ɵfac: i0.ɵɵFactoryDeclaration<SdsTableActionsComponent, never>;
15
- static ɵcmp: i0.ɵɵComponentDeclaration<SdsTableActionsComponent, "sds-table-actions", never, { "actions": "actions"; "optionsIcon": "optionsIcon"; "showIcons": "showIcons"; }, {}, never, never>;
10
+ static ɵcmp: i0.ɵɵComponentDeclaration<SdsTableActionsComponent, "sds-table-actions", never, { "dropdownIcon": "dropdownIcon"; }, {}, never, ["quickActions", "*"]>;
16
11
  }
package/esm2020/src/lib/table-actions/table-actions.model.mjs DELETED
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtYWN0aW9ucy5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL3RhYmxlLWFjdGlvbnMvdGFibGUtYWN0aW9ucy5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSWNvblByb3AgfSBmcm9tIFwiQGZvcnRhd2Vzb21lL2ZvbnRhd2Vzb21lLXN2Zy1jb3JlXCI7XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIFRhYmxlQWN0aW9uIHtcclxuICAgIHR5cGU6ICdhY3Rpb24nO1xyXG4gICAgbmFtZTogc3RyaW5nO1xyXG4gICAgaWNvbjogSWNvblByb3AgfCB1bmRlZmluZWQ7XHJcbiAgICBkaXNhYmxlZDogYm9vbGVhbjtcclxuICAgIGNhbGxiYWNrPzogRnVuY3Rpb247XHJcbiAgICBzcG90bGlnaHQ6IGJvb2xlYW47XHJcbiAgICBzdHlsZTogJ2RlZmF1bHQnIHwgJ2Rhbmdlcic7XHJcbn1cclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgVGFibGVBY3Rpb25EaXZpZGVyIHtcclxuICAgIHR5cGU6ICdkaXZpZGVyJztcclxufSJdfQ==
package/src/lib/table-actions/table-actions.model.d.ts DELETED
@@ -1,13 +0,0 @@
1
- import { IconProp } from "@fortawesome/fontawesome-svg-core";
2
- export interface TableAction {
3
- type: 'action';
4
- name: string;
5
- icon: IconProp | undefined;
6
- disabled: boolean;
7
- callback?: Function;
8
- spotlight: boolean;
9
- style: 'default' | 'danger';
10
- }
11
- export interface TableActionDivider {
12
- type: 'divider';
13
- }