@quadrel-enterprise-ui/qdc-cards 19.0.5-beta.0 → 19.1.0
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.
|
@@ -33,14 +33,14 @@ export class QdcCardComponent {
|
|
|
33
33
|
return value instanceof TemplateRef;
|
|
34
34
|
}
|
|
35
35
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdcCardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: QdcCardComponent, isStandalone: false, selector: "qdc-card", inputs: { cardConfig: "cardConfig", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "testId", "class.mobile": "this.isMobile" }, classAttribute: "qdc-card" }, usesOnChanges: true, ngImport: i0, template: "<article class=\"qdc-card\" (click)=\"cardConfig?.onCardClick()\">\n @if (cardConfig) {\n <!-- Header -->\n @if (cardConfig.icon || cardConfig.title || cardConfig.subTitle || cardConfig.chip) {\n <header class=\"qdc-card__header\">\n <div class=\"qdc-card__header-left\">\n @if (cardConfig.icon) {\n <qd-icon class=\"qdc-card__icon\" [icon]=\"cardConfig.icon\"></qd-icon>\n }\n <div class=\"qdc-card__header-main\">\n @if (cardConfig.title) {\n <span class=\"qdc-card__title\">{{ cardConfig.title }}</span>\n } @if (cardConfig.subTitle) {\n <span class=\"qdc-card__subtitle\">{{ cardConfig.subTitle }}</span>\n }\n </div>\n </div>\n\n <div class=\"qdc-card__header-right\">\n @if (cardConfig.chip) {\n <qd-chip [state]=\"cardConfig.chip!.state\" data-test-id=\"test-chip\">\n {{ cardConfig.chip!.label.i18n | translate }}\n </qd-chip>\n } @if (cardConfig.menuActions) {\n <div class=\"qdc-card__header-actions\">\n <qdc-card-menu [actions]=\"cardConfig.menuActions\"></qdc-card-menu>\n </div>\n }\n </div>\n </header>\n }\n\n <!-- Body -->\n @if (cardConfig.bodyPairs) {\n <div class=\"qdc-card__body\">\n <div class=\"qdc-card__body-grid\">\n @for (item of cardConfig.bodyPairs; track item) {\n <div class=\"qdc-card__body-row\">\n <div class=\"qdc-card__body-label\">\n <span>{{ item.i18n | translate }}</span>\n </div>\n <div class=\"qdc-card__body-content\">\n @if (item.value) {\n <span class=\"qdc-card__body-value\">{{ item.value }}</span>\n } @if (item.status) {\n <qd-status-indicator [type]=\"item.status.type\" [level]=\"item.status.level\"></qd-status-indicator>\n } @if (item.icon) {\n <qd-icon [icon]=\"item.icon\"></qd-icon>\n } @if (item.chips) {\n <div class=\"qdc-card__body-chips\">\n @for (chip of item.chips; track chip) {\n <qd-chip [state]=\"chip.state\" class=\"qdc-card__body-chip\">\n {{ chip.label.i18n | translate }}\n </qd-chip>\n }\n </div>\n } @if (item.booleanValue !== undefined) {\n <qd-icon [icon]=\"item.booleanValue ? 'checkmark' : 'timesLarge'\"></qd-icon>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Footer -->\n @if (cardConfig.footer) {\n <footer class=\"qdc-card__footer\">\n @if (cardConfig.footer.icon || cardConfig.footer.text) {\n <div class=\"qdc-card__footer-start\">\n <qd-icon class=\"qdc-card__footer-icon\" [icon]=\"cardConfig.footer.icon\"></qd-icon>\n <span class=\"qdc-card__footer-text\">{{ cardConfig.footer.text | translate }}</span>\n </div>\n } @if (cardConfig.footer.action) {\n <div class=\"qdc-card__footer-end\">\n <button\n qdButton\n qdButtonGhost\n [disabled]=\"cardConfig.footer.action?.isDisabled\"\n (click)=\"cardConfig.footer.action?.handler()\"\n [icon]=\"cardConfig.footer.action?.icon\"\n data-test-id=\"test-footer-button\"\n >\n {{ cardConfig.footer.action?.label.i18n | translate }}\n </button>\n </div>\n }\n </footer>\n } } @else {\n <div class=\"qdc-card__empty\">\n <span class=\"qdc-card__empty-text\">No card configuration provided.</span>\n </div>\n }\n</article>\n", styles: ["@charset \"UTF-8\";:root{--border-col: #e0e0e0;--text: #222;--muted: #666;--chip-bg: #fff;--chip-bd: #bdbdbd;--chip-prio: #ff9800;--chip-status: #11a35d;--btn-bg: #fff;--btn-bd: #0067b8;--btn-tx: #0067b8;--row-gap: .6rem}.qdc-card{font-family:Roboto,sans-serif;display:flex;overflow:hidden;width:100%;flex-direction:column;border:1px solid var(--border-col);border-radius:4px;background:#fff}.qdc-card+.qdc-card{margin-top:clamp(.25rem,1vw,.5rem)}.row{display:flex;align-items:center;gap:.5rem}.wrap{flex-wrap:wrap}.ml-auto{margin-left:auto}.text-muted{color:var(--muted);font-size:.875rem}.fw-bold{font-weight:600}.chip{display:inline-flex;height:1.5rem;align-items:center;justify-content:center;padding:0 .6rem;border:1px solid var(--chip-bd);border-radius:16px;background:var(--chip-bg);font-size:.75rem;line-height:1;white-space:nowrap}.chip.prio{border-color:var(--chip-prio);color:var(--chip-prio)}.chip.status{border-color:var(--chip-status);color:var(--chip-status)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.4rem 1.2rem;border:2px solid var(--btn-bd);border-radius:2px;background:var(--btn-bg);color:var(--btn-tx);cursor:pointer;font-size:.875rem;font-weight:600;gap:.4rem;text-decoration:none}.btn:hover{background:#f0f8ff}.qdc-card__header{display:flex;align-items:center;padding:1rem;border-bottom:1px solid var(--border-col);gap:.8rem}.qdc-card__header-left{display:flex;align-items:center;gap:.5rem}.qdc-card__header-main{display:grid}.qdc-card__title{font-weight:700}.qdc-card__icon{font-size:1.4rem;line-height:1}.qdc-card__subtitle{color:var(--muted);font-size:.875rem}.qdc-card__header-right{display:flex;align-items:center;margin-left:auto;gap:.5rem}.qdc-card__menu{cursor:pointer;font-size:1.4rem;line-height:1}.qdc-card__body{display:grid;padding:1rem;column-gap:.5rem;grid-template-columns:1fr auto;row-gap:var(--row-gap)}.qdc-card__body>*{margin:0}.qdc-card__body-value{color:var(--text);font-size:.8rem}.qdc-card__body-chips{display:flex;flex-wrap:wrap;gap:.5rem}.qdc-card__footer{display:flex;justify-content:space-between;padding:.7rem 1rem;border-top:1px solid var(--border-col);gap:.8rem}.qdc-card__footer-start{display:flex;flex:1;align-items:center;justify-content:start;gap:.5rem}.qdc-card__footer-start qd-icon{font-size:1.5rem;line-height:1}.qdc-card__footer-end{display:flex;flex:2;justify-content:end;gap:.5rem}.qdc-card__footer-text{font-size:.7rem}.qdc-card__body-grid{display:flex;flex-direction:column;gap:14px}.qdc-card__body-row{display:grid;grid-template-columns:33% 66
|
|
36
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: QdcCardComponent, isStandalone: false, selector: "qdc-card", inputs: { cardConfig: "cardConfig", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "testId", "class.mobile": "this.isMobile" }, classAttribute: "qdc-card" }, usesOnChanges: true, ngImport: i0, template: "<article class=\"qdc-card\" (click)=\"cardConfig?.onCardClick()\">\n @if (cardConfig) {\n <!-- Header -->\n @if (cardConfig.icon || cardConfig.title || cardConfig.subTitle || cardConfig.chip) {\n <header class=\"qdc-card__header\">\n <div class=\"qdc-card__header-left\">\n @if (cardConfig.icon) {\n <qd-icon class=\"qdc-card__icon\" [icon]=\"cardConfig.icon\"></qd-icon>\n }\n <div class=\"qdc-card__header-main\">\n @if (cardConfig.title) {\n <span class=\"qdc-card__title\">{{ cardConfig.title }}</span>\n } @if (cardConfig.subTitle) {\n <span class=\"qdc-card__subtitle\">{{ cardConfig.subTitle }}</span>\n }\n </div>\n </div>\n\n <div class=\"qdc-card__header-right\">\n @if (cardConfig.chip) {\n <qd-chip [state]=\"cardConfig.chip!.state\" data-test-id=\"test-chip\">\n {{ cardConfig.chip!.label.i18n | translate }}\n </qd-chip>\n } @if (cardConfig.menuActions) {\n <div class=\"qdc-card__header-actions\">\n <qdc-card-menu [actions]=\"cardConfig.menuActions\"></qdc-card-menu>\n </div>\n }\n </div>\n </header>\n }\n\n <!-- Body -->\n @if (cardConfig.bodyPairs) {\n <div class=\"qdc-card__body\">\n <div class=\"qdc-card__body-grid\">\n @for (item of cardConfig.bodyPairs; track item) {\n <div class=\"qdc-card__body-row\">\n <div class=\"qdc-card__body-label\">\n <span>{{ item.i18n | translate }}</span>\n </div>\n <div class=\"qdc-card__body-content\">\n @if (item.value) {\n <span class=\"qdc-card__body-value\">{{ item.value }}</span>\n } @if (item.status) {\n <qd-status-indicator [type]=\"item.status.type\" [level]=\"item.status.level\"></qd-status-indicator>\n } @if (item.icon) {\n <qd-icon [icon]=\"item.icon\"></qd-icon>\n } @if (item.chips) {\n <div class=\"qdc-card__body-chips\">\n @for (chip of item.chips; track chip) {\n <qd-chip [state]=\"chip.state\" class=\"qdc-card__body-chip\">\n {{ chip.label.i18n | translate }}\n </qd-chip>\n }\n </div>\n } @if (item.booleanValue !== undefined) {\n <qd-icon [icon]=\"item.booleanValue ? 'checkmark' : 'timesLarge'\"></qd-icon>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Footer -->\n @if (cardConfig.footer) {\n <footer class=\"qdc-card__footer\">\n @if (cardConfig.footer.icon || cardConfig.footer.text) {\n <div class=\"qdc-card__footer-start\">\n <qd-icon class=\"qdc-card__footer-icon\" [icon]=\"cardConfig.footer.icon\"></qd-icon>\n <span class=\"qdc-card__footer-text\">{{ cardConfig.footer.text | translate }}</span>\n </div>\n } @if (cardConfig.footer.action) {\n <div class=\"qdc-card__footer-end\">\n <button\n qdButton\n qdButtonGhost\n [disabled]=\"cardConfig.footer.action?.isDisabled\"\n (click)=\"cardConfig.footer.action?.handler()\"\n [icon]=\"cardConfig.footer.action?.icon\"\n data-test-id=\"test-footer-button\"\n >\n {{ cardConfig.footer.action?.label.i18n | translate }}\n </button>\n </div>\n }\n </footer>\n } } @else {\n <div class=\"qdc-card__empty\">\n <span class=\"qdc-card__empty-text\">No card configuration provided.</span>\n </div>\n }\n</article>\n", styles: ["@charset \"UTF-8\";:root{--border-col: #e0e0e0;--text: #222;--muted: #666;--chip-bg: #fff;--chip-bd: #bdbdbd;--chip-prio: #ff9800;--chip-status: #11a35d;--btn-bg: #fff;--btn-bd: #0067b8;--btn-tx: #0067b8;--row-gap: .6rem}.qdc-card{font-family:Roboto,sans-serif;display:flex;overflow:hidden;width:100%;flex-direction:column;border:1px solid var(--border-col);border-radius:4px;background:#fff}.qdc-card+.qdc-card{margin-top:clamp(.25rem,1vw,.5rem)}.row{display:flex;align-items:center;gap:.5rem}.wrap{flex-wrap:wrap}.ml-auto{margin-left:auto}.text-muted{color:var(--muted);font-size:.875rem}.fw-bold{font-weight:600}.chip{display:inline-flex;height:1.5rem;align-items:center;justify-content:center;padding:0 .6rem;border:1px solid var(--chip-bd);border-radius:16px;background:var(--chip-bg);font-size:.75rem;line-height:1;white-space:nowrap}.chip.prio{border-color:var(--chip-prio);color:var(--chip-prio)}.chip.status{border-color:var(--chip-status);color:var(--chip-status)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.4rem 1.2rem;border:2px solid var(--btn-bd);border-radius:2px;background:var(--btn-bg);color:var(--btn-tx);cursor:pointer;font-size:.875rem;font-weight:600;gap:.4rem;text-decoration:none}.btn:hover{background:#f0f8ff}.qdc-card__header{display:flex;align-items:center;padding:1rem;border-bottom:1px solid var(--border-col);gap:.8rem}.qdc-card__header-left{display:flex;align-items:center;gap:.5rem}.qdc-card__header-main{display:grid}.qdc-card__title{font-weight:700}.qdc-card__icon{font-size:1.4rem;line-height:1}.qdc-card__subtitle{color:var(--muted);font-size:.875rem}.qdc-card__header-right{display:flex;align-items:center;margin-left:auto;gap:.5rem}.qdc-card__menu{cursor:pointer;font-size:1.4rem;line-height:1}.qdc-card__body{display:grid;padding:1rem;column-gap:.5rem;grid-template-columns:1fr auto;row-gap:var(--row-gap)}.qdc-card__body>*{margin:0}.qdc-card__body-value{color:var(--text);font-size:.8rem}.qdc-card__body-chips{display:flex;flex-wrap:wrap;gap:.5rem}.qdc-card__footer{display:flex;justify-content:space-between;padding:.7rem 1rem;border-top:1px solid var(--border-col);gap:.8rem}.qdc-card__footer-start{display:flex;flex:1;align-items:center;justify-content:start;gap:.5rem}.qdc-card__footer-start qd-icon{font-size:1.5rem;line-height:1}.qdc-card__footer-end{display:flex;flex:2;justify-content:end;gap:.5rem}.qdc-card__footer-text{font-size:.7rem}.qdc-card__body-grid{display:flex;flex-direction:column;gap:14px}.qdc-card__body-row{display:grid;grid-template-columns:33% 66%;gap:5px}.qdc-card__body-label{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qdc-card__body-content{color:var(--text);font-size:.8rem}.qdc-card__body-content qd-icon{color:var(--text);font-size:1.4rem;line-height:1}@media (max-width: 480px){.qdc-card{max-width:100%}.qdc-card__body{grid-template-columns:1fr}.qdc-card__header-right{margin-left:0}.qdc-card__footer .btn{width:100%;justify-content:center}}\n"], dependencies: [{ kind: "component", type: i1.QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: i1.QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: i1.QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: i1.QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: i1.QdStatusIndicatorComponent, selector: "qd-status-indicator", inputs: ["type", "level", "caption", "data-test-id"] }, { kind: "component", type: i2.QdcCardMenuComponent, selector: "qdc-card-menu", inputs: ["actions", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
37
37
|
}
|
|
38
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdcCardComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
40
40
|
args: [{ selector: 'qdc-card', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
41
41
|
class: 'qdc-card',
|
|
42
42
|
'[attr.data-test-id]': 'testId'
|
|
43
|
-
}, standalone: false, template: "<article class=\"qdc-card\" (click)=\"cardConfig?.onCardClick()\">\n @if (cardConfig) {\n <!-- Header -->\n @if (cardConfig.icon || cardConfig.title || cardConfig.subTitle || cardConfig.chip) {\n <header class=\"qdc-card__header\">\n <div class=\"qdc-card__header-left\">\n @if (cardConfig.icon) {\n <qd-icon class=\"qdc-card__icon\" [icon]=\"cardConfig.icon\"></qd-icon>\n }\n <div class=\"qdc-card__header-main\">\n @if (cardConfig.title) {\n <span class=\"qdc-card__title\">{{ cardConfig.title }}</span>\n } @if (cardConfig.subTitle) {\n <span class=\"qdc-card__subtitle\">{{ cardConfig.subTitle }}</span>\n }\n </div>\n </div>\n\n <div class=\"qdc-card__header-right\">\n @if (cardConfig.chip) {\n <qd-chip [state]=\"cardConfig.chip!.state\" data-test-id=\"test-chip\">\n {{ cardConfig.chip!.label.i18n | translate }}\n </qd-chip>\n } @if (cardConfig.menuActions) {\n <div class=\"qdc-card__header-actions\">\n <qdc-card-menu [actions]=\"cardConfig.menuActions\"></qdc-card-menu>\n </div>\n }\n </div>\n </header>\n }\n\n <!-- Body -->\n @if (cardConfig.bodyPairs) {\n <div class=\"qdc-card__body\">\n <div class=\"qdc-card__body-grid\">\n @for (item of cardConfig.bodyPairs; track item) {\n <div class=\"qdc-card__body-row\">\n <div class=\"qdc-card__body-label\">\n <span>{{ item.i18n | translate }}</span>\n </div>\n <div class=\"qdc-card__body-content\">\n @if (item.value) {\n <span class=\"qdc-card__body-value\">{{ item.value }}</span>\n } @if (item.status) {\n <qd-status-indicator [type]=\"item.status.type\" [level]=\"item.status.level\"></qd-status-indicator>\n } @if (item.icon) {\n <qd-icon [icon]=\"item.icon\"></qd-icon>\n } @if (item.chips) {\n <div class=\"qdc-card__body-chips\">\n @for (chip of item.chips; track chip) {\n <qd-chip [state]=\"chip.state\" class=\"qdc-card__body-chip\">\n {{ chip.label.i18n | translate }}\n </qd-chip>\n }\n </div>\n } @if (item.booleanValue !== undefined) {\n <qd-icon [icon]=\"item.booleanValue ? 'checkmark' : 'timesLarge'\"></qd-icon>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Footer -->\n @if (cardConfig.footer) {\n <footer class=\"qdc-card__footer\">\n @if (cardConfig.footer.icon || cardConfig.footer.text) {\n <div class=\"qdc-card__footer-start\">\n <qd-icon class=\"qdc-card__footer-icon\" [icon]=\"cardConfig.footer.icon\"></qd-icon>\n <span class=\"qdc-card__footer-text\">{{ cardConfig.footer.text | translate }}</span>\n </div>\n } @if (cardConfig.footer.action) {\n <div class=\"qdc-card__footer-end\">\n <button\n qdButton\n qdButtonGhost\n [disabled]=\"cardConfig.footer.action?.isDisabled\"\n (click)=\"cardConfig.footer.action?.handler()\"\n [icon]=\"cardConfig.footer.action?.icon\"\n data-test-id=\"test-footer-button\"\n >\n {{ cardConfig.footer.action?.label.i18n | translate }}\n </button>\n </div>\n }\n </footer>\n } } @else {\n <div class=\"qdc-card__empty\">\n <span class=\"qdc-card__empty-text\">No card configuration provided.</span>\n </div>\n }\n</article>\n", styles: ["@charset \"UTF-8\";:root{--border-col: #e0e0e0;--text: #222;--muted: #666;--chip-bg: #fff;--chip-bd: #bdbdbd;--chip-prio: #ff9800;--chip-status: #11a35d;--btn-bg: #fff;--btn-bd: #0067b8;--btn-tx: #0067b8;--row-gap: .6rem}.qdc-card{font-family:Roboto,sans-serif;display:flex;overflow:hidden;width:100%;flex-direction:column;border:1px solid var(--border-col);border-radius:4px;background:#fff}.qdc-card+.qdc-card{margin-top:clamp(.25rem,1vw,.5rem)}.row{display:flex;align-items:center;gap:.5rem}.wrap{flex-wrap:wrap}.ml-auto{margin-left:auto}.text-muted{color:var(--muted);font-size:.875rem}.fw-bold{font-weight:600}.chip{display:inline-flex;height:1.5rem;align-items:center;justify-content:center;padding:0 .6rem;border:1px solid var(--chip-bd);border-radius:16px;background:var(--chip-bg);font-size:.75rem;line-height:1;white-space:nowrap}.chip.prio{border-color:var(--chip-prio);color:var(--chip-prio)}.chip.status{border-color:var(--chip-status);color:var(--chip-status)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.4rem 1.2rem;border:2px solid var(--btn-bd);border-radius:2px;background:var(--btn-bg);color:var(--btn-tx);cursor:pointer;font-size:.875rem;font-weight:600;gap:.4rem;text-decoration:none}.btn:hover{background:#f0f8ff}.qdc-card__header{display:flex;align-items:center;padding:1rem;border-bottom:1px solid var(--border-col);gap:.8rem}.qdc-card__header-left{display:flex;align-items:center;gap:.5rem}.qdc-card__header-main{display:grid}.qdc-card__title{font-weight:700}.qdc-card__icon{font-size:1.4rem;line-height:1}.qdc-card__subtitle{color:var(--muted);font-size:.875rem}.qdc-card__header-right{display:flex;align-items:center;margin-left:auto;gap:.5rem}.qdc-card__menu{cursor:pointer;font-size:1.4rem;line-height:1}.qdc-card__body{display:grid;padding:1rem;column-gap:.5rem;grid-template-columns:1fr auto;row-gap:var(--row-gap)}.qdc-card__body>*{margin:0}.qdc-card__body-value{color:var(--text);font-size:.8rem}.qdc-card__body-chips{display:flex;flex-wrap:wrap;gap:.5rem}.qdc-card__footer{display:flex;justify-content:space-between;padding:.7rem 1rem;border-top:1px solid var(--border-col);gap:.8rem}.qdc-card__footer-start{display:flex;flex:1;align-items:center;justify-content:start;gap:.5rem}.qdc-card__footer-start qd-icon{font-size:1.5rem;line-height:1}.qdc-card__footer-end{display:flex;flex:2;justify-content:end;gap:.5rem}.qdc-card__footer-text{font-size:.7rem}.qdc-card__body-grid{display:flex;flex-direction:column;gap:14px}.qdc-card__body-row{display:grid;grid-template-columns:33% 66
|
|
43
|
+
}, standalone: false, template: "<article class=\"qdc-card\" (click)=\"cardConfig?.onCardClick()\">\n @if (cardConfig) {\n <!-- Header -->\n @if (cardConfig.icon || cardConfig.title || cardConfig.subTitle || cardConfig.chip) {\n <header class=\"qdc-card__header\">\n <div class=\"qdc-card__header-left\">\n @if (cardConfig.icon) {\n <qd-icon class=\"qdc-card__icon\" [icon]=\"cardConfig.icon\"></qd-icon>\n }\n <div class=\"qdc-card__header-main\">\n @if (cardConfig.title) {\n <span class=\"qdc-card__title\">{{ cardConfig.title }}</span>\n } @if (cardConfig.subTitle) {\n <span class=\"qdc-card__subtitle\">{{ cardConfig.subTitle }}</span>\n }\n </div>\n </div>\n\n <div class=\"qdc-card__header-right\">\n @if (cardConfig.chip) {\n <qd-chip [state]=\"cardConfig.chip!.state\" data-test-id=\"test-chip\">\n {{ cardConfig.chip!.label.i18n | translate }}\n </qd-chip>\n } @if (cardConfig.menuActions) {\n <div class=\"qdc-card__header-actions\">\n <qdc-card-menu [actions]=\"cardConfig.menuActions\"></qdc-card-menu>\n </div>\n }\n </div>\n </header>\n }\n\n <!-- Body -->\n @if (cardConfig.bodyPairs) {\n <div class=\"qdc-card__body\">\n <div class=\"qdc-card__body-grid\">\n @for (item of cardConfig.bodyPairs; track item) {\n <div class=\"qdc-card__body-row\">\n <div class=\"qdc-card__body-label\">\n <span>{{ item.i18n | translate }}</span>\n </div>\n <div class=\"qdc-card__body-content\">\n @if (item.value) {\n <span class=\"qdc-card__body-value\">{{ item.value }}</span>\n } @if (item.status) {\n <qd-status-indicator [type]=\"item.status.type\" [level]=\"item.status.level\"></qd-status-indicator>\n } @if (item.icon) {\n <qd-icon [icon]=\"item.icon\"></qd-icon>\n } @if (item.chips) {\n <div class=\"qdc-card__body-chips\">\n @for (chip of item.chips; track chip) {\n <qd-chip [state]=\"chip.state\" class=\"qdc-card__body-chip\">\n {{ chip.label.i18n | translate }}\n </qd-chip>\n }\n </div>\n } @if (item.booleanValue !== undefined) {\n <qd-icon [icon]=\"item.booleanValue ? 'checkmark' : 'timesLarge'\"></qd-icon>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Footer -->\n @if (cardConfig.footer) {\n <footer class=\"qdc-card__footer\">\n @if (cardConfig.footer.icon || cardConfig.footer.text) {\n <div class=\"qdc-card__footer-start\">\n <qd-icon class=\"qdc-card__footer-icon\" [icon]=\"cardConfig.footer.icon\"></qd-icon>\n <span class=\"qdc-card__footer-text\">{{ cardConfig.footer.text | translate }}</span>\n </div>\n } @if (cardConfig.footer.action) {\n <div class=\"qdc-card__footer-end\">\n <button\n qdButton\n qdButtonGhost\n [disabled]=\"cardConfig.footer.action?.isDisabled\"\n (click)=\"cardConfig.footer.action?.handler()\"\n [icon]=\"cardConfig.footer.action?.icon\"\n data-test-id=\"test-footer-button\"\n >\n {{ cardConfig.footer.action?.label.i18n | translate }}\n </button>\n </div>\n }\n </footer>\n } } @else {\n <div class=\"qdc-card__empty\">\n <span class=\"qdc-card__empty-text\">No card configuration provided.</span>\n </div>\n }\n</article>\n", styles: ["@charset \"UTF-8\";:root{--border-col: #e0e0e0;--text: #222;--muted: #666;--chip-bg: #fff;--chip-bd: #bdbdbd;--chip-prio: #ff9800;--chip-status: #11a35d;--btn-bg: #fff;--btn-bd: #0067b8;--btn-tx: #0067b8;--row-gap: .6rem}.qdc-card{font-family:Roboto,sans-serif;display:flex;overflow:hidden;width:100%;flex-direction:column;border:1px solid var(--border-col);border-radius:4px;background:#fff}.qdc-card+.qdc-card{margin-top:clamp(.25rem,1vw,.5rem)}.row{display:flex;align-items:center;gap:.5rem}.wrap{flex-wrap:wrap}.ml-auto{margin-left:auto}.text-muted{color:var(--muted);font-size:.875rem}.fw-bold{font-weight:600}.chip{display:inline-flex;height:1.5rem;align-items:center;justify-content:center;padding:0 .6rem;border:1px solid var(--chip-bd);border-radius:16px;background:var(--chip-bg);font-size:.75rem;line-height:1;white-space:nowrap}.chip.prio{border-color:var(--chip-prio);color:var(--chip-prio)}.chip.status{border-color:var(--chip-status);color:var(--chip-status)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.4rem 1.2rem;border:2px solid var(--btn-bd);border-radius:2px;background:var(--btn-bg);color:var(--btn-tx);cursor:pointer;font-size:.875rem;font-weight:600;gap:.4rem;text-decoration:none}.btn:hover{background:#f0f8ff}.qdc-card__header{display:flex;align-items:center;padding:1rem;border-bottom:1px solid var(--border-col);gap:.8rem}.qdc-card__header-left{display:flex;align-items:center;gap:.5rem}.qdc-card__header-main{display:grid}.qdc-card__title{font-weight:700}.qdc-card__icon{font-size:1.4rem;line-height:1}.qdc-card__subtitle{color:var(--muted);font-size:.875rem}.qdc-card__header-right{display:flex;align-items:center;margin-left:auto;gap:.5rem}.qdc-card__menu{cursor:pointer;font-size:1.4rem;line-height:1}.qdc-card__body{display:grid;padding:1rem;column-gap:.5rem;grid-template-columns:1fr auto;row-gap:var(--row-gap)}.qdc-card__body>*{margin:0}.qdc-card__body-value{color:var(--text);font-size:.8rem}.qdc-card__body-chips{display:flex;flex-wrap:wrap;gap:.5rem}.qdc-card__footer{display:flex;justify-content:space-between;padding:.7rem 1rem;border-top:1px solid var(--border-col);gap:.8rem}.qdc-card__footer-start{display:flex;flex:1;align-items:center;justify-content:start;gap:.5rem}.qdc-card__footer-start qd-icon{font-size:1.5rem;line-height:1}.qdc-card__footer-end{display:flex;flex:2;justify-content:end;gap:.5rem}.qdc-card__footer-text{font-size:.7rem}.qdc-card__body-grid{display:flex;flex-direction:column;gap:14px}.qdc-card__body-row{display:grid;grid-template-columns:33% 66%;gap:5px}.qdc-card__body-label{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qdc-card__body-content{color:var(--text);font-size:.8rem}.qdc-card__body-content qd-icon{color:var(--text);font-size:1.4rem;line-height:1}@media (max-width: 480px){.qdc-card{max-width:100%}.qdc-card__body{grid-template-columns:1fr}.qdc-card__header-right{margin-left:0}.qdc-card__footer .btn{width:100%;justify-content:center}}\n"] }]
|
|
44
44
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { cardConfig: [{
|
|
45
45
|
type: Input
|
|
46
46
|
}], testId: [{
|