@cqa-lib/cqa-ui 1.0.51 → 1.0.53
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/dashboards/chart-card/chart-card.component.mjs +3 -3
- package/esm2020/lib/utils/tw-overlay-container.mjs +40 -15
- package/fesm2015/cqa-lib-cqa-ui.mjs +41 -16
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +41 -16
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/utils/tw-overlay-container.d.ts +1 -0
- package/package.json +1 -1
|
@@ -2480,10 +2480,10 @@ class ChartCardComponent {
|
|
|
2480
2480
|
}
|
|
2481
2481
|
}
|
|
2482
2482
|
ChartCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ChartCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2483
|
-
ChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ChartCardComponent, selector: "cqa-chart-card", inputs: { title: "title", subtitle: "subtitle", cardClass: "cardClass", height: "height", info: "info", isEmpty: "isEmpty", emptyStateConfig: "emptyStateConfig" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"cqa-border cqa-border-solid cqa-border-border-default cqa-rounded-[8px] cqa-shadow-card cqa-h-full\"\n [ngClass]=\"cardClass\">\n <!-- Header -->\n <div class=\"cqa-px-[16px] cqa-py-4\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3 cqa-flex-wrap\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <div class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-font-medium\">{{ title }}</div>\n <mat-icon \n *ngIf=\"info\" \n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-cursor-help cqa-flex-shrink-0\"\n [matTooltip]=\"info\"\n matTooltipPosition=\"above\"\n style=\"color: #64748B;\">\n info_outline\n </mat-icon>\n </div>\n <!-- Chart actions slot (segments) -->\n <ng-content select=\"[chart-actions]\"></ng-content>\n </div>\n <div *ngIf=\"subtitle\" class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-mt-0.5\">{{ subtitle }}</div>\n </div>\n\n <!-- Chart/content area -->\n <div class=\"cqa-px-[13px]\">\n <div class=\"cqa-w-full cqa-chart-card-area\"
|
|
2483
|
+
ChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ChartCardComponent, selector: "cqa-chart-card", inputs: { title: "title", subtitle: "subtitle", cardClass: "cardClass", height: "height", info: "info", isEmpty: "isEmpty", emptyStateConfig: "emptyStateConfig" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"cqa-border cqa-border-solid cqa-border-border-default cqa-rounded-[8px] cqa-shadow-card cqa-h-full\"\n [ngClass]=\"cardClass\">\n <!-- Header -->\n <div class=\"cqa-px-[16px] cqa-py-4\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3 cqa-flex-wrap\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <div class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-font-medium\">{{ title }}</div>\n <mat-icon \n *ngIf=\"info\" \n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-cursor-help cqa-flex-shrink-0\"\n [matTooltip]=\"info\"\n matTooltipPosition=\"above\"\n style=\"color: #64748B;\">\n info_outline\n </mat-icon>\n </div>\n <!-- Chart actions slot (segments) -->\n <ng-content select=\"[chart-actions]\"></ng-content>\n </div>\n <div *ngIf=\"subtitle\" class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-mt-0.5\">{{ subtitle }}</div>\n </div>\n\n <!-- Chart/content area -->\n <div class=\"cqa-px-[13px]\">\n <div class=\"cqa-w-full cqa-chart-card-area\">\n <!-- Empty State -->\n <ng-container *ngIf=\"isEmpty\">\n <cqa-empty-state\n [title]=\"emptyStateConfig.title\"\n [description]=\"emptyStateConfig.description\"\n [imageUrl]=\"emptyStateConfig.imageUrl\"\n [actions]=\"emptyStateConfig.actions\"\n (actionClick)=\"$event.onClick?.()\"\n ></cqa-empty-state>\n </ng-container>\n \n <!-- Default Content -->\n <ng-container *ngIf=\"!isEmpty\">\n <div class=\"cqa-w-full cqa-h-full\">\n <ng-content></ng-content>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2484
2484
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ChartCardComponent, decorators: [{
|
|
2485
2485
|
type: Component,
|
|
2486
|
-
args: [{ selector: 'cqa-chart-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"cqa-border cqa-border-solid cqa-border-border-default cqa-rounded-[8px] cqa-shadow-card cqa-h-full\"\n [ngClass]=\"cardClass\">\n <!-- Header -->\n <div class=\"cqa-px-[16px] cqa-py-4\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3 cqa-flex-wrap\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <div class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-font-medium\">{{ title }}</div>\n <mat-icon \n *ngIf=\"info\" \n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-cursor-help cqa-flex-shrink-0\"\n [matTooltip]=\"info\"\n matTooltipPosition=\"above\"\n style=\"color: #64748B;\">\n info_outline\n </mat-icon>\n </div>\n <!-- Chart actions slot (segments) -->\n <ng-content select=\"[chart-actions]\"></ng-content>\n </div>\n <div *ngIf=\"subtitle\" class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-mt-0.5\">{{ subtitle }}</div>\n </div>\n\n <!-- Chart/content area -->\n <div class=\"cqa-px-[13px]\">\n <div class=\"cqa-w-full cqa-chart-card-area\"
|
|
2486
|
+
args: [{ selector: 'cqa-chart-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"cqa-border cqa-border-solid cqa-border-border-default cqa-rounded-[8px] cqa-shadow-card cqa-h-full\"\n [ngClass]=\"cardClass\">\n <!-- Header -->\n <div class=\"cqa-px-[16px] cqa-py-4\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3 cqa-flex-wrap\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <div class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-font-medium\">{{ title }}</div>\n <mat-icon \n *ngIf=\"info\" \n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-cursor-help cqa-flex-shrink-0\"\n [matTooltip]=\"info\"\n matTooltipPosition=\"above\"\n style=\"color: #64748B;\">\n info_outline\n </mat-icon>\n </div>\n <!-- Chart actions slot (segments) -->\n <ng-content select=\"[chart-actions]\"></ng-content>\n </div>\n <div *ngIf=\"subtitle\" class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-mt-0.5\">{{ subtitle }}</div>\n </div>\n\n <!-- Chart/content area -->\n <div class=\"cqa-px-[13px]\">\n <div class=\"cqa-w-full cqa-chart-card-area\">\n <!-- Empty State -->\n <ng-container *ngIf=\"isEmpty\">\n <cqa-empty-state\n [title]=\"emptyStateConfig.title\"\n [description]=\"emptyStateConfig.description\"\n [imageUrl]=\"emptyStateConfig.imageUrl\"\n [actions]=\"emptyStateConfig.actions\"\n (actionClick)=\"$event.onClick?.()\"\n ></cqa-empty-state>\n </ng-container>\n \n <!-- Default Content -->\n <ng-container *ngIf=\"!isEmpty\">\n <div class=\"cqa-w-full cqa-h-full\">\n <ng-content></ng-content>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
2487
2487
|
}], propDecorators: { title: [{
|
|
2488
2488
|
type: Input
|
|
2489
2489
|
}], subtitle: [{
|
|
@@ -4207,34 +4207,59 @@ class TailwindOverlayContainer extends OverlayContainer {
|
|
|
4207
4207
|
// Also check immediately in case overlays already exist
|
|
4208
4208
|
requestAnimationFrame(() => this.updateContainerClass());
|
|
4209
4209
|
}
|
|
4210
|
+
isElementVisible(element) {
|
|
4211
|
+
const style = window.getComputedStyle(element);
|
|
4212
|
+
// Check if element is visible (not display: none, not opacity: 0, not visibility: hidden)
|
|
4213
|
+
const isDisplayed = style.display !== 'none';
|
|
4214
|
+
const isOpaque = parseFloat(style.opacity) > 0.01; // Allow for very small opacity values during animations
|
|
4215
|
+
const isVisible = style.visibility !== 'hidden';
|
|
4216
|
+
// Also check if element has dimensions (width/height > 0)
|
|
4217
|
+
const rect = element.getBoundingClientRect();
|
|
4218
|
+
const hasSize = rect.width > 0 && rect.height > 0;
|
|
4219
|
+
return isDisplayed && isOpaque && isVisible && hasSize;
|
|
4220
|
+
}
|
|
4210
4221
|
updateContainerClass() {
|
|
4211
4222
|
if (!this._containerElement)
|
|
4212
4223
|
return;
|
|
4213
4224
|
// Count library overlays (dialogs, select panels, datepicker panels)
|
|
4214
|
-
//
|
|
4215
|
-
//
|
|
4216
|
-
const libraryDialogs = this._containerElement.querySelectorAll('.cqa-dialog-panel')
|
|
4217
|
-
const
|
|
4218
|
-
|
|
4219
|
-
const
|
|
4220
|
-
const
|
|
4225
|
+
// Only count overlays that are actually visible/active (not hidden or closing)
|
|
4226
|
+
// Library dialogs - check visibility
|
|
4227
|
+
const libraryDialogs = Array.from(this._containerElement.querySelectorAll('.cqa-dialog-panel'));
|
|
4228
|
+
const visibleLibraryDialogs = libraryDialogs.filter(dialog => this.isElementVisible(dialog)).length;
|
|
4229
|
+
// Library backdrops - check visibility (backdrops can be transparent but still present)
|
|
4230
|
+
const libraryBackdrops = Array.from(this._containerElement.querySelectorAll('.cqa-dialog-backdrop'));
|
|
4231
|
+
const visibleLibraryBackdrops = libraryBackdrops.filter(backdrop => {
|
|
4232
|
+
// Backdrops might have low opacity but should still be considered if they're showing
|
|
4233
|
+
const style = window.getComputedStyle(backdrop);
|
|
4234
|
+
return style.display !== 'none' && backdrop.classList.contains('cdk-overlay-backdrop-showing');
|
|
4235
|
+
}).length;
|
|
4236
|
+
// Select panels - check visibility
|
|
4237
|
+
const selectPanels = Array.from(this._containerElement.querySelectorAll('.ctc-select-panel'));
|
|
4238
|
+
const visibleSelectPanels = selectPanels.filter(panel => this.isElementVisible(panel)).length;
|
|
4239
|
+
// Date panels - check visibility
|
|
4240
|
+
const datePanels = Array.from(this._containerElement.querySelectorAll('.ctc-date-range-panel'));
|
|
4241
|
+
const visibleDatePanels = datePanels.filter(panel => this.isElementVisible(panel)).length;
|
|
4242
|
+
const totalLibraryOverlays = visibleLibraryDialogs + visibleLibraryBackdrops + visibleSelectPanels + visibleDatePanels;
|
|
4221
4243
|
// Check for portal Material dialogs (those without .cqa-dialog-panel class)
|
|
4222
4244
|
// Portal dialogs use .mat-dialog-container but NOT .cqa-dialog-panel
|
|
4223
|
-
const portalDialogs = this._containerElement.querySelectorAll('.mat-dialog-container:not(.cqa-dialog-panel)')
|
|
4224
|
-
|
|
4245
|
+
const portalDialogs = Array.from(this._containerElement.querySelectorAll('.mat-dialog-container:not(.cqa-dialog-panel)'));
|
|
4246
|
+
const visiblePortalDialogs = portalDialogs.filter(dialog => this.isElementVisible(dialog)).length;
|
|
4247
|
+
// Decision logic: Only add cqa-ui-root when VISIBLE library overlays are present
|
|
4225
4248
|
// This ensures portal Material dialogs don't get affected by library CSS
|
|
4249
|
+
// even if library overlays are in the DOM but closing/hidden
|
|
4226
4250
|
if (totalLibraryOverlays > 0) {
|
|
4227
|
-
//
|
|
4251
|
+
// Visible library overlays exist - add the class (they need Tailwind styles scoped to .cqa-ui-root)
|
|
4228
4252
|
this._containerElement.classList.add('cqa-ui-root');
|
|
4229
4253
|
}
|
|
4230
4254
|
else {
|
|
4231
|
-
// No library overlays exist - remove the class
|
|
4232
|
-
// This handles
|
|
4255
|
+
// No visible library overlays exist - remove the class
|
|
4256
|
+
// This handles:
|
|
4233
4257
|
// 1. Only portal dialogs exist (should not have cqa-ui-root)
|
|
4234
|
-
// 2.
|
|
4258
|
+
// 2. Library overlays are closing/hidden (should not have cqa-ui-root)
|
|
4259
|
+
// 3. No overlays exist at all (clean state)
|
|
4235
4260
|
this._containerElement.classList.remove('cqa-ui-root');
|
|
4236
4261
|
}
|
|
4237
|
-
// Note: If both library overlays and portal dialogs exist simultaneously,
|
|
4262
|
+
// Note: If both library overlays and portal dialogs exist simultaneously and are visible,
|
|
4238
4263
|
// the class will be present because library overlays need it. In this case,
|
|
4239
4264
|
// portal dialogs may be affected by library CSS. To avoid this, ensure library
|
|
4240
4265
|
// overlays are closed before opening portal dialogs, or use CSS specificity
|