@cqa-lib/cqa-ui 1.1.418 → 1.1.419
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.
- package/esm2020/lib/table-action-toolbar/table-action-toolbar.component.mjs +14 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs +13 -2
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +13 -2
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/table-action-toolbar/table-action-toolbar.component.d.ts +4 -0
- package/package.json +1 -1
|
@@ -3791,6 +3791,17 @@ class TableActionToolbarComponent {
|
|
|
3791
3791
|
const ctx = { selected: this.selectedItems || [] };
|
|
3792
3792
|
return action.disabled ? !!action.disabled(ctx) : false;
|
|
3793
3793
|
}
|
|
3794
|
+
/**
|
|
3795
|
+
* Keep first click actionable by preventing pointer down from being used only for focus transfer.
|
|
3796
|
+
*/
|
|
3797
|
+
onActionMouseDown(event, action) {
|
|
3798
|
+
if (this.isDisabled(action) || event.button !== 0) {
|
|
3799
|
+
return;
|
|
3800
|
+
}
|
|
3801
|
+
event.preventDefault();
|
|
3802
|
+
event.stopPropagation();
|
|
3803
|
+
this.onAction(action);
|
|
3804
|
+
}
|
|
3794
3805
|
onAction(action) {
|
|
3795
3806
|
if (this.isDisabled(action)) {
|
|
3796
3807
|
return;
|
|
@@ -3820,10 +3831,10 @@ class TableActionToolbarComponent {
|
|
|
3820
3831
|
}
|
|
3821
3832
|
TableActionToolbarComponent.ACTION_COOLDOWN_MS = 500;
|
|
3822
3833
|
TableActionToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableActionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3823
|
-
TableActionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: { selectedItems: "selectedItems", actions: "actions", showSelectAll: "showSelectAll", allSelected: "allSelected", showDismiss: "showDismiss" }, outputs: { actionClick: "actionClick", selectAllChange: "selectAllChange", dismiss: "dismiss" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-center xl:cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n *ngIf=\"hasSelection\">\n <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n <ng-container *ngIf=\"showSelectAll\">\n <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n class=\"select-all cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent hover:cqa-bg-transparent cqa-accent-primary\" />\n <span>Select all</span>\n </label>\n <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n </ng-container>\n <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n </div>\n <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n <ng-container *ngFor=\"let action of visibleActions()\">\n <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\"
|
|
3834
|
+
TableActionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: { selectedItems: "selectedItems", actions: "actions", showSelectAll: "showSelectAll", allSelected: "allSelected", showDismiss: "showDismiss" }, outputs: { actionClick: "actionClick", selectAllChange: "selectAllChange", dismiss: "dismiss" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-center xl:cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n *ngIf=\"hasSelection\">\n <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n <ng-container *ngIf=\"showSelectAll\">\n <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n class=\"select-all cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent hover:cqa-bg-transparent cqa-accent-primary\" />\n <span>Select all</span>\n </label>\n <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n </ng-container>\n <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n </div>\n <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n <ng-container *ngFor=\"let action of visibleActions()\">\n <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\"\n (mousedown)=\"onActionMouseDown($event, action)\"\n class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium hover:cqa-bg-white/10 cqa-rounded\">\n <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n </div>\n </ng-container>\n <button *ngIf=\"showDismiss\" type=\"button\" (click)=\"onDismiss()\" class=\"cqa-p-1 cqa-rounded hover:cqa-bg-white/10 cqa-flex cqa-items-center cqa-justify-center\"\n title=\"Dismiss\" aria-label=\"Dismiss\">\n <mat-icon class=\"!cqa-w-[20px] !cqa-h-[20px] !cqa-text-[20px]\">close</mat-icon>\n </button>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3824
3835
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableActionToolbarComponent, decorators: [{
|
|
3825
3836
|
type: Component,
|
|
3826
|
-
args: [{ selector: 'cqa-table-action-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-center xl:cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n *ngIf=\"hasSelection\">\n <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n <ng-container *ngIf=\"showSelectAll\">\n <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n class=\"select-all cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent hover:cqa-bg-transparent cqa-accent-primary\" />\n <span>Select all</span>\n </label>\n <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n </ng-container>\n <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n </div>\n <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n <ng-container *ngFor=\"let action of visibleActions()\">\n <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\"
|
|
3837
|
+
args: [{ selector: 'cqa-table-action-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-center xl:cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n *ngIf=\"hasSelection\">\n <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n <ng-container *ngIf=\"showSelectAll\">\n <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n class=\"select-all cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent hover:cqa-bg-transparent cqa-accent-primary\" />\n <span>Select all</span>\n </label>\n <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n </ng-container>\n <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n </div>\n <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n <ng-container *ngFor=\"let action of visibleActions()\">\n <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\"\n (mousedown)=\"onActionMouseDown($event, action)\"\n class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium hover:cqa-bg-white/10 cqa-rounded\">\n <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n </div>\n </ng-container>\n <button *ngIf=\"showDismiss\" type=\"button\" (click)=\"onDismiss()\" class=\"cqa-p-1 cqa-rounded hover:cqa-bg-white/10 cqa-flex cqa-items-center cqa-justify-center\"\n title=\"Dismiss\" aria-label=\"Dismiss\">\n <mat-icon class=\"!cqa-w-[20px] !cqa-h-[20px] !cqa-text-[20px]\">close</mat-icon>\n </button>\n </div>\n </div>\n</div>", styles: [] }]
|
|
3827
3838
|
}], propDecorators: { selectedItems: [{
|
|
3828
3839
|
type: Input
|
|
3829
3840
|
}], actions: [{
|