@quadrel-enterprise-ui/qdc-cards 20.0.0-beta.3.1 → 20.0.1
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/esm2022/lib/card/card.component.js +2 -2
- package/esm2022/lib/card/card.component.js.map +1 -1
- package/esm2022/lib/card/menu/card-menu.component.js +1 -1
- package/esm2022/lib/card/model/card-actions-config.interface.js.map +1 -1
- package/esm2022/lib/card-layout/card-layout.component.js +2 -2
- package/esm2022/lib/card-layout/card-layout.component.js.map +1 -1
- package/esm2022/lib/card-layout/card-status/card-status.component.js +2 -2
- package/esm2022/lib/card-layout/card-status/card-status.component.js.map +1 -1
- package/lib/card/model/card-actions-config.interface.d.ts +12 -2
- package/package.json +1 -1
|
@@ -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: "20.3.17", ngImport: i0, type: QdcCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", 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
|
|
36
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", 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 $index) {\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 $index) {\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?.icon\" [status]=\"cardConfig.footer.icon?.status\"></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", "status"] }, { 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: "20.3.17", 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
|
|
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 $index) {\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 $index) {\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?.icon\" [status]=\"cardConfig.footer.icon?.status\"></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
|
}], propDecorators: { cardConfig: [{
|
|
45
45
|
type: Input
|
|
46
46
|
}], testId: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.component.js","sourceRoot":"","sources":["../../../../../../libs/qdc-cards/src/lib/card/card.component.ts","../../../../../../libs/qdc-cards/src/lib/card/card.component.html"],"names":[],"mappings":"AAAA,OAAO,EAEL,uBAAuB,EACvB,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,MAAM,EACN,KAAK,EAEL,WAAW,EACX,iBAAiB,EAClB,MAAM,eAAe,CAAC;;;;;AAevB,MAAM,OAAO,gBAAgB;IAZ7B;QAaE,oEAAoE;QAC3D,eAAU,GAAkB,EAAE,CAAC;QAExC,oDAAoD;QAC7B,WAAM,GAAG,MAAM,CAAC;QAEvC,cAAS,GAAG,KAAK,CAAC;QAClB,cAAS,GAAG,KAAK,CAAC;QASV,QAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;KAkBzC;IAzBC,IAAiC,QAAQ;QACvC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,OAAO,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC;QACzD,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAID,kBAAkB;QAChB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,WAAW;QACT,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAClG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;IAC1B,CAAC;IAED,UAAU,CAAC,KAAc;QACvB,OAAO,KAAK,YAAY,WAAW,CAAC;IACtC,CAAC;+GAlCU,gBAAgB;mGAAhB,gBAAgB,0RC1B7B,
|
|
1
|
+
{"version":3,"file":"card.component.js","sourceRoot":"","sources":["../../../../../../libs/qdc-cards/src/lib/card/card.component.ts","../../../../../../libs/qdc-cards/src/lib/card/card.component.html"],"names":[],"mappings":"AAAA,OAAO,EAEL,uBAAuB,EACvB,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,MAAM,EACN,KAAK,EAEL,WAAW,EACX,iBAAiB,EAClB,MAAM,eAAe,CAAC;;;;;AAevB,MAAM,OAAO,gBAAgB;IAZ7B;QAaE,oEAAoE;QAC3D,eAAU,GAAkB,EAAE,CAAC;QAExC,oDAAoD;QAC7B,WAAM,GAAG,MAAM,CAAC;QAEvC,cAAS,GAAG,KAAK,CAAC;QAClB,cAAS,GAAG,KAAK,CAAC;QASV,QAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;KAkBzC;IAzBC,IAAiC,QAAQ;QACvC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,OAAO,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC;QACzD,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAID,kBAAkB;QAChB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,WAAW;QACT,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAClG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;IAC1B,CAAC;IAED,UAAU,CAAC,KAAc;QACvB,OAAO,KAAK,YAAY,WAAW,CAAC;IACtC,CAAC;+GAlCU,gBAAgB;mGAAhB,gBAAgB,0RC1B7B,65GA+FA;;4FDrEa,gBAAgB;kBAZ5B,SAAS;+BACE,UAAU,iBAGL,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QACzC;wBACJ,KAAK,EAAE,UAAU;wBACjB,qBAAqB,EAAE,QAAQ;qBAChC,cACW,KAAK;;sBAIhB,KAAK;;sBAGL,KAAK;uBAAC,cAAc;;sBAKpB,WAAW;uBAAC,cAAc","sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n HostBinding,\n inject,\n Input,\n OnChanges,\n TemplateRef,\n ViewEncapsulation\n} from '@angular/core';\nimport { QdcCardConfig } from './card.model';\n\n@Component({\n selector: 'qdc-card',\n templateUrl: './card.component.html',\n styleUrls: ['./card.component.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'qdc-card',\n '[attr.data-test-id]': 'testId'\n },\n standalone: false\n})\nexport class QdcCardComponent implements AfterContentInit, OnChanges {\n /** JSON configuration driving the visual appearance of the card. */\n @Input() cardConfig: QdcCardConfig = {};\n\n /** Optional test-id for E2E / integration tests. */\n @Input('data-test-id') testId = 'card';\n\n hasHeader = false;\n hasFooter = false;\n\n @HostBinding('class.mobile') get isMobile(): boolean {\n if (typeof window !== 'undefined') {\n return window.matchMedia('(max-width: 599px)').matches;\n }\n return false;\n }\n\n private cdr = inject(ChangeDetectorRef);\n\n ngAfterContentInit(): void {\n this.evaluateVisibility();\n }\n\n ngOnChanges(): void {\n this.evaluateVisibility();\n }\n\n private evaluateVisibility(): void {\n this.hasHeader = !!(this.cardConfig?.icon || this.cardConfig?.title || this.cardConfig?.subTitle);\n this.cdr.markForCheck();\n }\n\n isTemplate(value: unknown): value is TemplateRef<unknown> {\n return value instanceof TemplateRef;\n }\n}\n","<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 $index) {\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 $index) {\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?.icon\" [status]=\"cardConfig.footer.icon?.status\"></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"]}
|
|
@@ -23,7 +23,7 @@ export class QdcCardMenuComponent {
|
|
|
23
23
|
this._destroyed$.complete();
|
|
24
24
|
}
|
|
25
25
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QdcCardMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: QdcCardMenuComponent, isStandalone: false, selector: "qdc-card-menu", inputs: { actions: "actions", testId: ["data-test-id", "testId"] }, ngImport: i0, template: "<ng-container *ngIf=\"actions$ | async as actions\">\n <qd-icon\n *ngIf=\"actions.length > 0\"\n icon=\"overflowMenuVertical\"\n class=\"menu-opener\"\n [attr.data-test-id]=\"testId + '-opener'\"\n [qdcCardsPopoverOnClick]=\"menu\"\n ></qd-icon>\n\n <ng-template #menu>\n <ng-container *ngFor=\"let action of actions$ | async\">\n <button\n class=\"menu-entry\"\n (click)=\"action.handler()\"\n [disabled]=\"action.isDisabled\"\n [attr.data-test-id]=\"testId + '-action'\"\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [":host{font-family:Roboto,sans-serif}:host .menu-opener{position:sticky;top:1.5625rem;right:1.5rem;cursor:pointer;font-size:1.5rem;font-weight:700}button.menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.menu-entry:hover{background-color:#f2f7fa}button.menu-entry:hover[disabled]{background:#fff0;cursor:default}button.menu-entry[disabled]{color:#b4b4b4;cursor:default}button.menu-entry[disabled]:hover{background-color:#fff0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: i3.QdcCardsPopoverOnClickDirective, selector: "[qdcCardsPopoverOnClick]", inputs: ["qdcCardsPopoverOnClick", "popoverWidth", "positionStrategy", "popoverCloseStrategy"], outputs: ["opened", "closed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: QdcCardMenuComponent, isStandalone: false, selector: "qdc-card-menu", inputs: { actions: "actions", testId: ["data-test-id", "testId"] }, ngImport: i0, template: "<ng-container *ngIf=\"actions$ | async as actions\">\n <qd-icon\n *ngIf=\"actions.length > 0\"\n icon=\"overflowMenuVertical\"\n class=\"menu-opener\"\n [attr.data-test-id]=\"testId + '-opener'\"\n [qdcCardsPopoverOnClick]=\"menu\"\n ></qd-icon>\n\n <ng-template #menu>\n <ng-container *ngFor=\"let action of actions$ | async\">\n <button\n class=\"menu-entry\"\n (click)=\"action.handler()\"\n [disabled]=\"action.isDisabled\"\n [attr.data-test-id]=\"testId + '-action'\"\n >\n {{ action.label.i18n | translate }}\n </button>\n </ng-container>\n </ng-template>\n</ng-container>\n", styles: [":host{font-family:Roboto,sans-serif}:host .menu-opener{position:sticky;top:1.5625rem;right:1.5rem;cursor:pointer;font-size:1.5rem;font-weight:700}button.menu-entry{display:block;overflow:hidden;width:100%;min-height:2.25rem;padding:0 1rem;background:#fff0;text-align:left;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:.875rem;font-weight:400;line-height:1.3125rem}button.menu-entry:hover{background-color:#f2f7fa}button.menu-entry:hover[disabled]{background:#fff0;cursor:default}button.menu-entry[disabled]{color:#b4b4b4;cursor:default}button.menu-entry[disabled]:hover{background-color:#fff0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "directive", type: i3.QdcCardsPopoverOnClickDirective, selector: "[qdcCardsPopoverOnClick]", inputs: ["qdcCardsPopoverOnClick", "popoverWidth", "positionStrategy", "popoverCloseStrategy"], outputs: ["opened", "closed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
27
27
|
}
|
|
28
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QdcCardMenuComponent, decorators: [{
|
|
29
29
|
type: Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-actions-config.interface.js","sourceRoot":"","sources":["../../../../../../../libs/qdc-cards/src/lib/card/model/card-actions-config.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { QdChipColor } from '@quadrel-enterprise-ui/framework';\nimport type { QdStatusIndicator } from '@quadrel-enterprise-ui/framework';\n\nexport interface QdcCardActionConfig {\n /**\n * The label is shown as text in the UI for this action.\n */\n label: {\n /** This i18n key is translated directly inside the QdCardMenu component. */\n i18n: string;\n };\n\n /**\n * The handler to execute when the action is clicked.\n */\n handler: () => void;\n\n /**\n * Whether the action is disabled or not\n *\n * * @default false\n */\n isDisabled?: boolean;\n\n /**\n * Optional icon to display in the action.\n */\n icon?: string | null;\n}\n\nexport interface QdcCardBodyPair {\n /**\n * Translatable label text.\n * */\n i18n: string;\n\n /**\n * Value to display next to the label.\n * */\n value?: string | number | boolean | null;\n\n /**\n * Optional Qd-Status-Indicator\n * */\n status?: Pick<QdStatusIndicator, 'type' | 'level'> | null;\n\n icon?: string | null;\n\n booleanValue?: boolean | null;\n\n chips?: QdcCardChip[] | null;\n}\n\nexport interface QdcCardFooter {\n icon?:
|
|
1
|
+
{"version":3,"file":"card-actions-config.interface.js","sourceRoot":"","sources":["../../../../../../../libs/qdc-cards/src/lib/card/model/card-actions-config.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { QdChipColor } from '@quadrel-enterprise-ui/framework';\nimport type { QdStatus, QdStatusIndicator } from '@quadrel-enterprise-ui/framework';\n\nexport interface QdcCardActionConfig {\n /**\n * The label is shown as text in the UI for this action.\n */\n label: {\n /** This i18n key is translated directly inside the QdCardMenu component. */\n i18n: string;\n };\n\n /**\n * The handler to execute when the action is clicked.\n */\n handler: () => void;\n\n /**\n * Whether the action is disabled or not\n *\n * * @default false\n */\n isDisabled?: boolean;\n\n /**\n * Optional icon to display in the action.\n */\n icon?: string | null;\n}\n\nexport interface QdcCardBodyPair {\n /**\n * Translatable label text.\n * */\n i18n: string;\n\n /**\n * Value to display next to the label.\n * */\n value?: string | number | boolean | null;\n\n /**\n * Optional Qd-Status-Indicator\n * */\n status?: Pick<QdStatusIndicator, 'type' | 'level'> | null;\n\n icon?: string | null;\n\n booleanValue?: boolean | null;\n\n chips?: QdcCardChip[] | null;\n}\n\nexport interface QdcCardFooter {\n icon?: QdcCardIcon | null;\n text?: string | null;\n action?: QdcCardActionConfig | null;\n}\n\nexport interface QdcCardChip {\n /**\n * Color of the chip. Defaults to 'primary'.\n * */\n state: QdChipColor;\n\n /**\n * Text shown inside the chip.\n * */\n label: {\n /**\n * Translatable label text.\n * */\n i18n: string;\n };\n /**\n * Optional icon to display inside the chip.\n * */\n}\n\nexport interface QdcCardIcon {\n /**\n * Icon name.\n * */\n icon: string;\n\n /**\n * Optional status for definition of color\n */\n status: QdStatus\n}\n"]}
|
|
@@ -100,11 +100,11 @@ export class QdcCardLayoutComponent {
|
|
|
100
100
|
});
|
|
101
101
|
}
|
|
102
102
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QdcCardLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
103
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: QdcCardLayoutComponent, isStandalone: false, selector: "qdc-card-layout", inputs: { config: "config" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "cardStatusHeightDirective", first: true, predicate: QdcCardStatusSameHeightDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"qdc-card-layout__wrapper\">\n <div class=\"qdc-card-layout__container\">\n <div class=\"qdc-card-layout__layout-header\">\n <h1>{{ config.layoutTitle }}</h1>\n </div>\n\n @if (isMobile) {\n <form [formGroup]=\"dropDownForm\">\n <div class=\"qdc-card-layout__mobile-filter-grid\">\n <div class=\"cell\">\n <qd-dropdown formControlName=\"statusTitle\" [config]=\"dropDownConfig | async\"> </qd-dropdown>\n </div>\n </div>\n </form>\n }\n\n <div class=\"qdc-card-layout__layout\" qdcCardStatusSameHeight>\n @if (!isMobile) {\n @for (status of config.cardStatusConfig; track
|
|
103
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: QdcCardLayoutComponent, isStandalone: false, selector: "qdc-card-layout", inputs: { config: "config" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "cardStatusHeightDirective", first: true, predicate: QdcCardStatusSameHeightDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"qdc-card-layout__wrapper\">\n <div class=\"qdc-card-layout__container\">\n <div class=\"qdc-card-layout__layout-header\">\n <h1>{{ config.layoutTitle }}</h1>\n </div>\n\n @if (isMobile) {\n <form [formGroup]=\"dropDownForm\">\n <div class=\"qdc-card-layout__mobile-filter-grid\">\n <div class=\"cell\">\n <qd-dropdown formControlName=\"statusTitle\" [config]=\"dropDownConfig | async\"> </qd-dropdown>\n </div>\n </div>\n </form>\n }\n\n <div class=\"qdc-card-layout__layout\" qdcCardStatusSameHeight>\n @if (!isMobile) {\n @for (status of config.cardStatusConfig; track $index) {\n <qdc-card-status [config]=\"status\" class=\"qdc-card-status-item\" (paginationChanged)=\"onPaginationChanged()\">\n </qdc-card-status>\n }\n } @else {\n @if (selectedStatusTitle | async; as status) {\n <qdc-card-status [config]=\"status\" class=\"qdc-card-status-item\">\n </qdc-card-status>\n }\n }\n\n </div>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.qdc-card-layout__wrapper{font-family:Roboto,sans-serif;width:100%;box-sizing:border-box;justify-content:center;padding:1rem 0;background-color:#efefef;overflow-x:auto}.qdc-card-layout__container{box-sizing:border-box;flex-direction:column;gap:1rem}@media (max-width: 959.98px){.qdc-card-layout__container{width:100%}}.qdc-card-layout__layout-header{align-items:center}.qdc-card-layout__layout-header h1{margin:0;font-family:Roboto,sans-serif;font-size:16px;font-weight:500;letter-spacing:.15px;line-height:100%;vertical-align:middle}.qdc-card-layout__layout{display:flex;box-sizing:border-box;padding:10px 25px 25px;gap:1rem}@media (max-width: 959.98px){.qdc-card-layout__layout{flex-direction:column;gap:6px}}.qdc-card-status-item{min-width:400px;max-width:100%;flex:1 1 0}@media (max-width: 959.98px){.qdc-card-status-item{width:100%!important;min-width:0}}@media (max-width: 959.98px){.qdc-card-layout__mobile-filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;padding-left:10px}.qdc-card-layout__mobile-filter-grid .cell{grid-column:2}}@media (max-width: 599.98px){.qdc-card-layout__mobile-filter-grid .cell{grid-column:1}}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly", "optionsResolved"] }, { kind: "component", type: i3.QdcCardStatusComponent, selector: "qdc-card-status", inputs: ["config"], outputs: ["paginationChanged"] }, { kind: "directive", type: i4.QdcCardStatusSameHeightDirective, selector: "[qdcCardStatusSameHeight]" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
|
|
104
104
|
}
|
|
105
105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QdcCardLayoutComponent, decorators: [{
|
|
106
106
|
type: Component,
|
|
107
|
-
args: [{ selector: 'qdc-card-layout', standalone: false, template: "<div class=\"qdc-card-layout__wrapper\">\n <div class=\"qdc-card-layout__container\">\n <div class=\"qdc-card-layout__layout-header\">\n <h1>{{ config.layoutTitle }}</h1>\n </div>\n\n @if (isMobile) {\n <form [formGroup]=\"dropDownForm\">\n <div class=\"qdc-card-layout__mobile-filter-grid\">\n <div class=\"cell\">\n <qd-dropdown formControlName=\"statusTitle\" [config]=\"dropDownConfig | async\"> </qd-dropdown>\n </div>\n </div>\n </form>\n }\n\n <div class=\"qdc-card-layout__layout\" qdcCardStatusSameHeight>\n @if (!isMobile) {\n @for (status of config.cardStatusConfig; track
|
|
107
|
+
args: [{ selector: 'qdc-card-layout', standalone: false, template: "<div class=\"qdc-card-layout__wrapper\">\n <div class=\"qdc-card-layout__container\">\n <div class=\"qdc-card-layout__layout-header\">\n <h1>{{ config.layoutTitle }}</h1>\n </div>\n\n @if (isMobile) {\n <form [formGroup]=\"dropDownForm\">\n <div class=\"qdc-card-layout__mobile-filter-grid\">\n <div class=\"cell\">\n <qd-dropdown formControlName=\"statusTitle\" [config]=\"dropDownConfig | async\"> </qd-dropdown>\n </div>\n </div>\n </form>\n }\n\n <div class=\"qdc-card-layout__layout\" qdcCardStatusSameHeight>\n @if (!isMobile) {\n @for (status of config.cardStatusConfig; track $index) {\n <qdc-card-status [config]=\"status\" class=\"qdc-card-status-item\" (paginationChanged)=\"onPaginationChanged()\">\n </qdc-card-status>\n }\n } @else {\n @if (selectedStatusTitle | async; as status) {\n <qdc-card-status [config]=\"status\" class=\"qdc-card-status-item\">\n </qdc-card-status>\n }\n }\n\n </div>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.qdc-card-layout__wrapper{font-family:Roboto,sans-serif;width:100%;box-sizing:border-box;justify-content:center;padding:1rem 0;background-color:#efefef;overflow-x:auto}.qdc-card-layout__container{box-sizing:border-box;flex-direction:column;gap:1rem}@media (max-width: 959.98px){.qdc-card-layout__container{width:100%}}.qdc-card-layout__layout-header{align-items:center}.qdc-card-layout__layout-header h1{margin:0;font-family:Roboto,sans-serif;font-size:16px;font-weight:500;letter-spacing:.15px;line-height:100%;vertical-align:middle}.qdc-card-layout__layout{display:flex;box-sizing:border-box;padding:10px 25px 25px;gap:1rem}@media (max-width: 959.98px){.qdc-card-layout__layout{flex-direction:column;gap:6px}}.qdc-card-status-item{min-width:400px;max-width:100%;flex:1 1 0}@media (max-width: 959.98px){.qdc-card-status-item{width:100%!important;min-width:0}}@media (max-width: 959.98px){.qdc-card-layout__mobile-filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;padding-left:10px}.qdc-card-layout__mobile-filter-grid .cell{grid-column:2}}@media (max-width: 599.98px){.qdc-card-layout__mobile-filter-grid .cell{grid-column:1}}\n"] }]
|
|
108
108
|
}], propDecorators: { config: [{
|
|
109
109
|
type: Input
|
|
110
110
|
}], cardStatusHeightDirective: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-layout.component.js","sourceRoot":"","sources":["../../../../../../libs/qdc-cards/src/lib/card-layout/card-layout.component.ts","../../../../../../libs/qdc-cards/src/lib/card-layout/card-layout.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, HostListener, inject, Input, OnInit, OnChanges, SimpleChanges, ViewChild, NgZone } from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { BehaviorSubject } from 'rxjs';\nimport { startWith } from 'rxjs/operators';\nimport { QdFormControl, QdFormDropdownConfiguration } from '@quadrel-enterprise-ui/framework';\n\nimport { QdcCardLayoutConfig } from './card-layout.model';\nimport { QdcCardStatusSameHeightDirective } from './card-status/card-status-height.directive';\nimport { QdcCardStatusConfig } from './card-status/card-status.model';\n\n@Component({\n selector: 'qdc-card-layout',\n templateUrl: './card-layout.component.html',\n styleUrl: './card-layout.component.scss',\n standalone: false\n})\nexport class QdcCardLayoutComponent implements OnInit, OnChanges {\n @Input() config!: QdcCardLayoutConfig;\n\n @ViewChild(QdcCardStatusSameHeightDirective)\n cardStatusHeightDirective?: QdcCardStatusSameHeightDirective;\n\n isMobile = false;\n readonly MAX_COLUMNS = 5;\n\n dropDownForm!: FormGroup;\n\n private statusTitlesDropDownConfig: QdFormDropdownConfiguration = {\n label: { i18n: 'i18n.qdc-card.layout.mobile.dropdown.status.label' },\n options: []\n };\n\n dropDownConfig = new BehaviorSubject<QdFormDropdownConfiguration>(this.statusTitlesDropDownConfig);\n\n selectedStatusTitle = new BehaviorSubject<QdcCardStatusConfig | null>(null);\n\n private ngZone = inject(NgZone);\n\n ngOnInit(): void {\n this.checkColumnLimit();\n this.updateLayoutState();\n this.initializeDropDown();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['config']?.currentValue) {\n this.checkColumnLimit();\n\n const defaultStatusLabel = this.config.cardStatusConfig[0]?.title.i18n ?? null;\n if (defaultStatusLabel) {\n this.updateSelectedStatus(defaultStatusLabel);\n }\n\n this.setDropDownConfig();\n }\n }\n\n onPaginationChanged(): void {\n this.ngZone.runOutsideAngular(() => {\n requestAnimationFrame(() => {\n queueMicrotask(() => this.cardStatusHeightDirective?.triggerUpdate());\n });\n });\n }\n\n @HostListener('window:resize')\n onResize(): void {\n const wasMobile = this.isMobile;\n this.updateLayoutState();\n if (!wasMobile && this.isMobile) {\n this.initializeDropDown();\n }\n }\n\n private checkColumnLimit(): void {\n if (this.config.cardStatusConfig.length > this.MAX_COLUMNS) {\n throw new Error(`Too many columns. Max allowed is ${this.MAX_COLUMNS}.`);\n }\n }\n\n private updateLayoutState(): void {\n this.isMobile = window.innerWidth <= 480;\n }\n\n private initializeDropDown(): void {\n const defaultStatusLabel = this.config.cardStatusConfig[0]?.title.i18n ?? null;\n\n this.dropDownForm = new FormGroup({\n statusTitle: new QdFormControl(defaultStatusLabel)\n });\n\n this.setDropDownConfig();\n\n this.dropDownForm\n .get('statusTitle')\n ?.valueChanges.pipe(startWith(this.dropDownForm.get('statusTitle')?.value))\n .subscribe(title => {\n this.updateSelectedStatus(title);\n });\n }\n\n private updateSelectedStatus(title: string | null): void {\n if (!title) {\n this.selectedStatusTitle.next(null);\n return;\n }\n\n const statusConfig = this.config.cardStatusConfig.find(s => s.title.i18n === title);\n\n if (statusConfig) {\n this.selectedStatusTitle.next({\n ...statusConfig,\n title: { ...statusConfig.title },\n cards: [...(statusConfig.cards ?? [])]\n });\n } else {\n this.selectedStatusTitle.next(null);\n }\n }\n\n private setDropDownConfig(): void {\n const options = this.config.cardStatusConfig.map(status => ({\n i18n: status.title.i18n,\n value: status.title.i18n\n }));\n\n this.dropDownConfig.next({\n ...this.dropDownConfig.value,\n options\n });\n }\n}\n","<div class=\"qdc-card-layout__wrapper\">\n <div class=\"qdc-card-layout__container\">\n <div class=\"qdc-card-layout__layout-header\">\n <h1>{{ config.layoutTitle }}</h1>\n </div>\n\n @if (isMobile) {\n <form [formGroup]=\"dropDownForm\">\n <div class=\"qdc-card-layout__mobile-filter-grid\">\n <div class=\"cell\">\n <qd-dropdown formControlName=\"statusTitle\" [config]=\"dropDownConfig | async\"> </qd-dropdown>\n </div>\n </div>\n </form>\n }\n\n <div class=\"qdc-card-layout__layout\" qdcCardStatusSameHeight>\n @if (!isMobile) {\n @for (status of config.cardStatusConfig; track
|
|
1
|
+
{"version":3,"file":"card-layout.component.js","sourceRoot":"","sources":["../../../../../../libs/qdc-cards/src/lib/card-layout/card-layout.component.ts","../../../../../../libs/qdc-cards/src/lib/card-layout/card-layout.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, HostListener, inject, Input, OnInit, OnChanges, SimpleChanges, ViewChild, NgZone } from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { BehaviorSubject } from 'rxjs';\nimport { startWith } from 'rxjs/operators';\nimport { QdFormControl, QdFormDropdownConfiguration } from '@quadrel-enterprise-ui/framework';\n\nimport { QdcCardLayoutConfig } from './card-layout.model';\nimport { QdcCardStatusSameHeightDirective } from './card-status/card-status-height.directive';\nimport { QdcCardStatusConfig } from './card-status/card-status.model';\n\n@Component({\n selector: 'qdc-card-layout',\n templateUrl: './card-layout.component.html',\n styleUrl: './card-layout.component.scss',\n standalone: false\n})\nexport class QdcCardLayoutComponent implements OnInit, OnChanges {\n @Input() config!: QdcCardLayoutConfig;\n\n @ViewChild(QdcCardStatusSameHeightDirective)\n cardStatusHeightDirective?: QdcCardStatusSameHeightDirective;\n\n isMobile = false;\n readonly MAX_COLUMNS = 5;\n\n dropDownForm!: FormGroup;\n\n private statusTitlesDropDownConfig: QdFormDropdownConfiguration = {\n label: { i18n: 'i18n.qdc-card.layout.mobile.dropdown.status.label' },\n options: []\n };\n\n dropDownConfig = new BehaviorSubject<QdFormDropdownConfiguration>(this.statusTitlesDropDownConfig);\n\n selectedStatusTitle = new BehaviorSubject<QdcCardStatusConfig | null>(null);\n\n private ngZone = inject(NgZone);\n\n ngOnInit(): void {\n this.checkColumnLimit();\n this.updateLayoutState();\n this.initializeDropDown();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['config']?.currentValue) {\n this.checkColumnLimit();\n\n const defaultStatusLabel = this.config.cardStatusConfig[0]?.title.i18n ?? null;\n if (defaultStatusLabel) {\n this.updateSelectedStatus(defaultStatusLabel);\n }\n\n this.setDropDownConfig();\n }\n }\n\n onPaginationChanged(): void {\n this.ngZone.runOutsideAngular(() => {\n requestAnimationFrame(() => {\n queueMicrotask(() => this.cardStatusHeightDirective?.triggerUpdate());\n });\n });\n }\n\n @HostListener('window:resize')\n onResize(): void {\n const wasMobile = this.isMobile;\n this.updateLayoutState();\n if (!wasMobile && this.isMobile) {\n this.initializeDropDown();\n }\n }\n\n private checkColumnLimit(): void {\n if (this.config.cardStatusConfig.length > this.MAX_COLUMNS) {\n throw new Error(`Too many columns. Max allowed is ${this.MAX_COLUMNS}.`);\n }\n }\n\n private updateLayoutState(): void {\n this.isMobile = window.innerWidth <= 480;\n }\n\n private initializeDropDown(): void {\n const defaultStatusLabel = this.config.cardStatusConfig[0]?.title.i18n ?? null;\n\n this.dropDownForm = new FormGroup({\n statusTitle: new QdFormControl(defaultStatusLabel)\n });\n\n this.setDropDownConfig();\n\n this.dropDownForm\n .get('statusTitle')\n ?.valueChanges.pipe(startWith(this.dropDownForm.get('statusTitle')?.value))\n .subscribe(title => {\n this.updateSelectedStatus(title);\n });\n }\n\n private updateSelectedStatus(title: string | null): void {\n if (!title) {\n this.selectedStatusTitle.next(null);\n return;\n }\n\n const statusConfig = this.config.cardStatusConfig.find(s => s.title.i18n === title);\n\n if (statusConfig) {\n this.selectedStatusTitle.next({\n ...statusConfig,\n title: { ...statusConfig.title },\n cards: [...(statusConfig.cards ?? [])]\n });\n } else {\n this.selectedStatusTitle.next(null);\n }\n }\n\n private setDropDownConfig(): void {\n const options = this.config.cardStatusConfig.map(status => ({\n i18n: status.title.i18n,\n value: status.title.i18n\n }));\n\n this.dropDownConfig.next({\n ...this.dropDownConfig.value,\n options\n });\n }\n}\n","<div class=\"qdc-card-layout__wrapper\">\n <div class=\"qdc-card-layout__container\">\n <div class=\"qdc-card-layout__layout-header\">\n <h1>{{ config.layoutTitle }}</h1>\n </div>\n\n @if (isMobile) {\n <form [formGroup]=\"dropDownForm\">\n <div class=\"qdc-card-layout__mobile-filter-grid\">\n <div class=\"cell\">\n <qd-dropdown formControlName=\"statusTitle\" [config]=\"dropDownConfig | async\"> </qd-dropdown>\n </div>\n </div>\n </form>\n }\n\n <div class=\"qdc-card-layout__layout\" qdcCardStatusSameHeight>\n @if (!isMobile) {\n @for (status of config.cardStatusConfig; track $index) {\n <qdc-card-status [config]=\"status\" class=\"qdc-card-status-item\" (paginationChanged)=\"onPaginationChanged()\">\n </qdc-card-status>\n }\n } @else {\n @if (selectedStatusTitle | async; as status) {\n <qdc-card-status [config]=\"status\" class=\"qdc-card-status-item\">\n </qdc-card-status>\n }\n }\n\n </div>\n </div>\n</div>\n"]}
|
|
@@ -93,11 +93,11 @@ export class QdcCardStatusComponent {
|
|
|
93
93
|
});
|
|
94
94
|
}
|
|
95
95
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QdcCardStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
96
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: QdcCardStatusComponent, isStandalone: false, selector: "qdc-card-status", inputs: { config: "config" }, outputs: { paginationChanged: "paginationChanged" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "cardsContainer", first: true, predicate: ["cardsContainer"], descendants: true }], ngImport: i0, template: "<div class=\"qdc-status__container\">\n <div class=\"qdc-status__header\">\n {{ config.title.i18n | translate }}\n </div>\n\n <div class=\"qdc-status__cards\" #cardsContainer [ngClass]=\"{ empty: !config.cards || config.cards.length === 0 }\">\n @if (!config.cards || config.cards.length === 0) {\n <div class=\"qdc-status_no-cards-message\">\n {{ \"i18n.qdc-cards.status.noCards.label\" | translate | placeholder : \"title\" : (config.title.i18n | translate) }}\n </div>\n } @else { @for (card of pagedCards; track
|
|
96
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: QdcCardStatusComponent, isStandalone: false, selector: "qdc-card-status", inputs: { config: "config" }, outputs: { paginationChanged: "paginationChanged" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "cardsContainer", first: true, predicate: ["cardsContainer"], descendants: true }], ngImport: i0, template: "<div class=\"qdc-status__container\">\n <div class=\"qdc-status__header\">\n {{ config.title.i18n | translate }}\n </div>\n\n <div class=\"qdc-status__cards\" #cardsContainer [ngClass]=\"{ empty: !config.cards || config.cards.length === 0 }\">\n @if (!config.cards || config.cards.length === 0) {\n <div class=\"qdc-status_no-cards-message\">\n {{ \"i18n.qdc-cards.status.noCards.label\" | translate | placeholder : \"title\" : (config.title.i18n | translate) }}\n </div>\n } @else { @for (card of pagedCards; track $index) {\n <qdc-card [cardConfig]=\"card\"></qdc-card>\n } @if (config.pagination) {\n <div class=\"qdc-status__pagination-row\">\n <div>\n @if (!hideEntriesLabel) {\n <span>\n {{ \"i18n.qdc-card.status.pagination.service.entries.label\" | translate }}\n </span>\n }\n\n <select\n style=\"\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n border: 0;\n outline: 0;\n box-shadow: none;\n background: transparent;\n padding-left: 5px;\n font-family: Roboto, Arial, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n color: rgb(69, 69, 69);\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.3125rem;\n \"\n [(ngModel)]=\"config.pagination.pageSize\"\n (ngModelChange)=\"onPageSizeChange()\"\n (click)=\"toggleDropdownIcon()\"\n >\n @for (size of pagination?.pageSizes; track $index) {\n <option [ngValue]=\"size\">{{ size }}</option>\n }\n </select>\n\n <qd-icon [icon]=\"isDropdownOpen ? 'ctrlTop' : 'ctrlDown'\"></qd-icon>\n </div>\n\n <div class=\"qdc-status__pagination-info\">\n <span class=\"qdc-status__pagination-info__text\">\n {{ getPaginationInfo() }}\n </span>\n </div>\n\n <div>\n <button qdIconButton [disabled]=\"pagination?.currentPage === 0\" (click)=\"goToFirstPage()\">\n <qd-icon icon=\"pageFirst1\"></qd-icon>\n </button>\n <button qdIconButton [disabled]=\"pagination?.currentPage === 0\" (click)=\"goToPage(-1)\">\n <qd-icon icon=\"triangleLeftSolid\"></qd-icon>\n </button>\n <button\n qdIconButton\n [disabled]=\"pagination?.currentPage >= (pagination?.totalPages ?? 1) - 1\"\n (click)=\"goToPage(1)\"\n >\n <qd-icon icon=\"triangleRightSolid\"></qd-icon>\n </button>\n <button\n qdIconButton\n [disabled]=\"pagination?.currentPage >= (pagination?.totalPages ?? 1) - 1\"\n (click)=\"goToLastPage()\"\n >\n <qd-icon icon=\"pageLast\"></qd-icon>\n </button>\n </div>\n </div>\n } }\n </div>\n </div>\n", styles: [".qdc-status__container{font-family:Roboto,sans-serif;display:flex;width:100%;max-width:906px;box-sizing:border-box;flex-direction:column;padding:0;border-radius:8px;background-color:#efefef}.qdc-status__header{display:flex;width:100%;height:50px;box-sizing:border-box;align-items:center;padding:0 24px;background-color:#e5e5e5;font-family:Roboto,sans-serif;font-size:16px;font-weight:500;letter-spacing:.15px;line-height:100%;vertical-align:middle}.qdc-status__cards{min-height:265px;box-sizing:border-box;flex-direction:row;flex-wrap:wrap;padding:1rem 1.5rem;border:1px solid #e5e5e5;scrollbar-width:none}@media screen and (min-width: 480px){.qdc-status__cards{max-height:700px;overflow-y:scroll;overflow-x:hidden}}.qdc-status__cards.empty{min-height:265px;align-items:center;justify-content:center;padding:0}.qdc-status_no-cards-message{padding:40px 0;color:#979797;font-family:Roboto,sans-serif;font-size:12px;font-weight:400;line-height:14px;text-align:center}.qdc-status__pagination-row{border-top:1px solid rgba(0,0,0,.1);margin-top:1rem;color:#454545;font-size:.875rem;font-weight:400;line-height:1.3125rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding-left:.75rem;flex-wrap:nowrap;white-space:nowrap;min-height:clamp(36px,5.5vw,44px);padding-block-end:2.8125rem}button.qd-icon-button{border:none;border-left:.0625rem solid rgb(229,229,229);border-radius:unset}@media (max-width: 480px){.qdc-status__container{padding:0}.qdc-status__cards{flex-direction:column;padding:0}.qdc-status__header{padding:0}.qdc-status__pagination-info{min-width:0;overflow:hidden}.qdc-status__pagination-info__text{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}@media (max-width: 480px) and (max-width: 480px){.qdc-status__pagination-info__text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;word-break:break-word}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: i3.QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "component", type: i4.QdcCardComponent, selector: "qdc-card", inputs: ["cardConfig", "data-test-id"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i3.QdPlaceholderPipe, name: "placeholder" }] }); }
|
|
97
97
|
}
|
|
98
98
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: QdcCardStatusComponent, decorators: [{
|
|
99
99
|
type: Component,
|
|
100
|
-
args: [{ selector: 'qdc-card-status', standalone: false, template: "<div class=\"qdc-status__container\">\n <div class=\"qdc-status__header\">\n {{ config.title.i18n | translate }}\n </div>\n\n <div class=\"qdc-status__cards\" #cardsContainer [ngClass]=\"{ empty: !config.cards || config.cards.length === 0 }\">\n @if (!config.cards || config.cards.length === 0) {\n <div class=\"qdc-status_no-cards-message\">\n {{ \"i18n.qdc-cards.status.noCards.label\" | translate | placeholder : \"title\" : (config.title.i18n | translate) }}\n </div>\n } @else { @for (card of pagedCards; track
|
|
100
|
+
args: [{ selector: 'qdc-card-status', standalone: false, template: "<div class=\"qdc-status__container\">\n <div class=\"qdc-status__header\">\n {{ config.title.i18n | translate }}\n </div>\n\n <div class=\"qdc-status__cards\" #cardsContainer [ngClass]=\"{ empty: !config.cards || config.cards.length === 0 }\">\n @if (!config.cards || config.cards.length === 0) {\n <div class=\"qdc-status_no-cards-message\">\n {{ \"i18n.qdc-cards.status.noCards.label\" | translate | placeholder : \"title\" : (config.title.i18n | translate) }}\n </div>\n } @else { @for (card of pagedCards; track $index) {\n <qdc-card [cardConfig]=\"card\"></qdc-card>\n } @if (config.pagination) {\n <div class=\"qdc-status__pagination-row\">\n <div>\n @if (!hideEntriesLabel) {\n <span>\n {{ \"i18n.qdc-card.status.pagination.service.entries.label\" | translate }}\n </span>\n }\n\n <select\n style=\"\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n border: 0;\n outline: 0;\n box-shadow: none;\n background: transparent;\n padding-left: 5px;\n font-family: Roboto, Arial, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n color: rgb(69, 69, 69);\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.3125rem;\n \"\n [(ngModel)]=\"config.pagination.pageSize\"\n (ngModelChange)=\"onPageSizeChange()\"\n (click)=\"toggleDropdownIcon()\"\n >\n @for (size of pagination?.pageSizes; track $index) {\n <option [ngValue]=\"size\">{{ size }}</option>\n }\n </select>\n\n <qd-icon [icon]=\"isDropdownOpen ? 'ctrlTop' : 'ctrlDown'\"></qd-icon>\n </div>\n\n <div class=\"qdc-status__pagination-info\">\n <span class=\"qdc-status__pagination-info__text\">\n {{ getPaginationInfo() }}\n </span>\n </div>\n\n <div>\n <button qdIconButton [disabled]=\"pagination?.currentPage === 0\" (click)=\"goToFirstPage()\">\n <qd-icon icon=\"pageFirst1\"></qd-icon>\n </button>\n <button qdIconButton [disabled]=\"pagination?.currentPage === 0\" (click)=\"goToPage(-1)\">\n <qd-icon icon=\"triangleLeftSolid\"></qd-icon>\n </button>\n <button\n qdIconButton\n [disabled]=\"pagination?.currentPage >= (pagination?.totalPages ?? 1) - 1\"\n (click)=\"goToPage(1)\"\n >\n <qd-icon icon=\"triangleRightSolid\"></qd-icon>\n </button>\n <button\n qdIconButton\n [disabled]=\"pagination?.currentPage >= (pagination?.totalPages ?? 1) - 1\"\n (click)=\"goToLastPage()\"\n >\n <qd-icon icon=\"pageLast\"></qd-icon>\n </button>\n </div>\n </div>\n } }\n </div>\n </div>\n", styles: [".qdc-status__container{font-family:Roboto,sans-serif;display:flex;width:100%;max-width:906px;box-sizing:border-box;flex-direction:column;padding:0;border-radius:8px;background-color:#efefef}.qdc-status__header{display:flex;width:100%;height:50px;box-sizing:border-box;align-items:center;padding:0 24px;background-color:#e5e5e5;font-family:Roboto,sans-serif;font-size:16px;font-weight:500;letter-spacing:.15px;line-height:100%;vertical-align:middle}.qdc-status__cards{min-height:265px;box-sizing:border-box;flex-direction:row;flex-wrap:wrap;padding:1rem 1.5rem;border:1px solid #e5e5e5;scrollbar-width:none}@media screen and (min-width: 480px){.qdc-status__cards{max-height:700px;overflow-y:scroll;overflow-x:hidden}}.qdc-status__cards.empty{min-height:265px;align-items:center;justify-content:center;padding:0}.qdc-status_no-cards-message{padding:40px 0;color:#979797;font-family:Roboto,sans-serif;font-size:12px;font-weight:400;line-height:14px;text-align:center}.qdc-status__pagination-row{border-top:1px solid rgba(0,0,0,.1);margin-top:1rem;color:#454545;font-size:.875rem;font-weight:400;line-height:1.3125rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding-left:.75rem;flex-wrap:nowrap;white-space:nowrap;min-height:clamp(36px,5.5vw,44px);padding-block-end:2.8125rem}button.qd-icon-button{border:none;border-left:.0625rem solid rgb(229,229,229);border-radius:unset}@media (max-width: 480px){.qdc-status__container{padding:0}.qdc-status__cards{flex-direction:column;padding:0}.qdc-status__header{padding:0}.qdc-status__pagination-info{min-width:0;overflow:hidden}.qdc-status__pagination-info__text{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}@media (max-width: 480px) and (max-width: 480px){.qdc-status__pagination-info__text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;word-break:break-word}}\n"] }]
|
|
101
101
|
}], propDecorators: { paginationChanged: [{
|
|
102
102
|
type: Output
|
|
103
103
|
}], config: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-status.component.js","sourceRoot":"","sources":["../../../../../../../libs/qdc-cards/src/lib/card-layout/card-status/card-status.component.ts","../../../../../../../libs/qdc-cards/src/lib/card-layout/card-status/card-status.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n EventEmitter,\n HostListener,\n Input,\n Output,\n ViewChild,\n ElementRef,\n inject,\n OnInit\n} from '@angular/core';\nimport { QdcCardStatusConfig } from './card-status.model';\nimport { QdcCardConfig } from '../../card/card.model';\nimport { TranslateService } from '@ngx-translate/core';\n\n@Component({\n selector: 'qdc-card-status',\n templateUrl: 'card-status.component.html',\n styleUrls: ['card-status.component.scss'],\n standalone: false\n})\nexport class QdcCardStatusComponent implements OnInit {\n @Output() paginationChanged = new EventEmitter<void>();\n @Input() config!: QdcCardStatusConfig;\n\n @ViewChild('cardsContainer', { static: false }) cardsContainer?: ElementRef<HTMLElement>;\n\n private readonly translate = inject(TranslateService);\n\n isDropdownOpen = false;\n hideEntriesLabel = window.innerWidth <= 1600;\n defaultPageSizes: number[] = [5, 10, 20, 50];\n\n ngOnInit(): void {\n if (this.config?.pagination) {\n if (!this.config.pagination.pageSizes || this.config.pagination.pageSizes.length === 0) {\n this.config.pagination.pageSizes = this.defaultPageSizes;\n }\n if (!this.config.pagination.pageSize) {\n this.config.pagination.pageSize = this.config.pagination.pageSizes[0];\n }\n if (this.config.pagination.currentPage == null) {\n this.config.pagination.currentPage = 0;\n }\n }\n }\n\n get pagedCards(): QdcCardConfig[] {\n return this.config.cards;\n }\n\n get pagination() {\n return this.config.pagination;\n }\n\n goToPage(delta: number): void {\n if (!this.pagination) return;\n const newPage = this.pagination.currentPage + delta;\n if (newPage >= 0 && newPage < this.pagination.totalPages) {\n this.pagination.currentPage = newPage; // update current page\n this.pagination.handler(newPage, this.pagination.pageSize!);\n this.paginationChanged.emit();\n }\n }\n\n goToFirstPage(): void {\n if (this.pagination && this.pagination.currentPage !== 0) {\n this.pagination.currentPage = 0;\n this.pagination.handler(0, this.pagination.pageSize!);\n this.paginationChanged.emit();\n }\n }\n\n goToLastPage(): void {\n if (!this.pagination) return;\n const last = this.pagination.totalPages - 1;\n if (last >= 0 && this.pagination.currentPage !== last) {\n this.pagination.currentPage = last;\n this.pagination.handler(last, this.pagination.pageSize!);\n this.paginationChanged.emit();\n }\n }\n\n onPageSizeChange(): void {\n if (this.pagination) {\n // ngModel has already updated pageSize here\n const totalPages = Math.ceil(this.pagination.totalElements / this.pagination.pageSize!);\n\n // If the current page is out of range, snap it to the last page\n if (this.pagination.currentPage >= totalPages) {\n this.pagination.currentPage = Math.max(0, totalPages - 1);\n }\n this.pagination.handler(this.pagination.currentPage, this.pagination.pageSize!);\n this.paginationChanged.emit();\n }\n }\n\n toggleDropdownIcon(): void {\n this.isDropdownOpen = !this.isDropdownOpen;\n }\n\n @HostListener('window:resize')\n onResize(): void {\n this.hideEntriesLabel = window.innerWidth <= 1600;\n }\n\n getPaginationInfo(): string {\n if (!this.pagination) return '';\n\n const total = this.pagination.totalElements;\n const pageSize = this.pagination.pageSize;\n const currentPage = this.pagination.currentPage;\n\n const start = total === 0 ? 0 : currentPage * pageSize! + 1;\n const end = Math.min(start + pageSize! - 1, total);\n\n return this.translate.instant('i18n.qdc-card.status.pagination.service.from.label', {\n start,\n end,\n total\n });\n }\n}\n","<div class=\"qdc-status__container\">\n <div class=\"qdc-status__header\">\n {{ config.title.i18n | translate }}\n </div>\n\n <div class=\"qdc-status__cards\" #cardsContainer [ngClass]=\"{ empty: !config.cards || config.cards.length === 0 }\">\n @if (!config.cards || config.cards.length === 0) {\n <div class=\"qdc-status_no-cards-message\">\n {{ \"i18n.qdc-cards.status.noCards.label\" | translate | placeholder : \"title\" : (config.title.i18n | translate) }}\n </div>\n } @else { @for (card of pagedCards; track card) {\n <qdc-card [cardConfig]=\"card\"></qdc-card>\n } @if (config.pagination) {\n <div class=\"qdc-status__pagination-row\">\n <div>\n @if (!hideEntriesLabel) {\n <span>\n {{ \"i18n.qdc-card.status.pagination.service.entries.label\" | translate }}\n </span>\n }\n\n <select\n style=\"\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n border: 0;\n outline: 0;\n box-shadow: none;\n background: transparent;\n padding-left: 5px;\n font-family: Roboto, Arial, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n color: rgb(69, 69, 69);\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.3125rem;\n \"\n [(ngModel)]=\"config.pagination.pageSize\"\n (ngModelChange)=\"onPageSizeChange()\"\n (click)=\"toggleDropdownIcon()\"\n >\n @for (size of pagination?.pageSizes; track size) {\n <option [ngValue]=\"size\">{{ size }}</option>\n }\n </select>\n\n <qd-icon [icon]=\"isDropdownOpen ? 'ctrlTop' : 'ctrlDown'\"></qd-icon>\n </div>\n\n <div class=\"qdc-status__pagination-info\">\n <span class=\"qdc-status__pagination-info__text\">\n {{ getPaginationInfo() }}\n </span>\n </div>\n\n <div>\n <button qdIconButton [disabled]=\"pagination?.currentPage === 0\" (click)=\"goToFirstPage()\">\n <qd-icon icon=\"pageFirst1\"></qd-icon>\n </button>\n <button qdIconButton [disabled]=\"pagination?.currentPage === 0\" (click)=\"goToPage(-1)\">\n <qd-icon icon=\"triangleLeftSolid\"></qd-icon>\n </button>\n <button\n qdIconButton\n [disabled]=\"pagination?.currentPage >= (pagination?.totalPages ?? 1) - 1\"\n (click)=\"goToPage(1)\"\n >\n <qd-icon icon=\"triangleRightSolid\"></qd-icon>\n </button>\n <button\n qdIconButton\n [disabled]=\"pagination?.currentPage >= (pagination?.totalPages ?? 1) - 1\"\n (click)=\"goToLastPage()\"\n >\n <qd-icon icon=\"pageLast\"></qd-icon>\n </button>\n </div>\n </div>\n } }\n </div>\n </div>\n"]}
|
|
1
|
+
{"version":3,"file":"card-status.component.js","sourceRoot":"","sources":["../../../../../../../libs/qdc-cards/src/lib/card-layout/card-status/card-status.component.ts","../../../../../../../libs/qdc-cards/src/lib/card-layout/card-status/card-status.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n EventEmitter,\n HostListener,\n Input,\n Output,\n ViewChild,\n ElementRef,\n inject,\n OnInit\n} from '@angular/core';\nimport { QdcCardStatusConfig } from './card-status.model';\nimport { QdcCardConfig } from '../../card/card.model';\nimport { TranslateService } from '@ngx-translate/core';\n\n@Component({\n selector: 'qdc-card-status',\n templateUrl: 'card-status.component.html',\n styleUrls: ['card-status.component.scss'],\n standalone: false\n})\nexport class QdcCardStatusComponent implements OnInit {\n @Output() paginationChanged = new EventEmitter<void>();\n @Input() config!: QdcCardStatusConfig;\n\n @ViewChild('cardsContainer', { static: false }) cardsContainer?: ElementRef<HTMLElement>;\n\n private readonly translate = inject(TranslateService);\n\n isDropdownOpen = false;\n hideEntriesLabel = window.innerWidth <= 1600;\n defaultPageSizes: number[] = [5, 10, 20, 50];\n\n ngOnInit(): void {\n if (this.config?.pagination) {\n if (!this.config.pagination.pageSizes || this.config.pagination.pageSizes.length === 0) {\n this.config.pagination.pageSizes = this.defaultPageSizes;\n }\n if (!this.config.pagination.pageSize) {\n this.config.pagination.pageSize = this.config.pagination.pageSizes[0];\n }\n if (this.config.pagination.currentPage == null) {\n this.config.pagination.currentPage = 0;\n }\n }\n }\n\n get pagedCards(): QdcCardConfig[] {\n return this.config.cards;\n }\n\n get pagination() {\n return this.config.pagination;\n }\n\n goToPage(delta: number): void {\n if (!this.pagination) return;\n const newPage = this.pagination.currentPage + delta;\n if (newPage >= 0 && newPage < this.pagination.totalPages) {\n this.pagination.currentPage = newPage; // update current page\n this.pagination.handler(newPage, this.pagination.pageSize!);\n this.paginationChanged.emit();\n }\n }\n\n goToFirstPage(): void {\n if (this.pagination && this.pagination.currentPage !== 0) {\n this.pagination.currentPage = 0;\n this.pagination.handler(0, this.pagination.pageSize!);\n this.paginationChanged.emit();\n }\n }\n\n goToLastPage(): void {\n if (!this.pagination) return;\n const last = this.pagination.totalPages - 1;\n if (last >= 0 && this.pagination.currentPage !== last) {\n this.pagination.currentPage = last;\n this.pagination.handler(last, this.pagination.pageSize!);\n this.paginationChanged.emit();\n }\n }\n\n onPageSizeChange(): void {\n if (this.pagination) {\n // ngModel has already updated pageSize here\n const totalPages = Math.ceil(this.pagination.totalElements / this.pagination.pageSize!);\n\n // If the current page is out of range, snap it to the last page\n if (this.pagination.currentPage >= totalPages) {\n this.pagination.currentPage = Math.max(0, totalPages - 1);\n }\n this.pagination.handler(this.pagination.currentPage, this.pagination.pageSize!);\n this.paginationChanged.emit();\n }\n }\n\n toggleDropdownIcon(): void {\n this.isDropdownOpen = !this.isDropdownOpen;\n }\n\n @HostListener('window:resize')\n onResize(): void {\n this.hideEntriesLabel = window.innerWidth <= 1600;\n }\n\n getPaginationInfo(): string {\n if (!this.pagination) return '';\n\n const total = this.pagination.totalElements;\n const pageSize = this.pagination.pageSize;\n const currentPage = this.pagination.currentPage;\n\n const start = total === 0 ? 0 : currentPage * pageSize! + 1;\n const end = Math.min(start + pageSize! - 1, total);\n\n return this.translate.instant('i18n.qdc-card.status.pagination.service.from.label', {\n start,\n end,\n total\n });\n }\n}\n","<div class=\"qdc-status__container\">\n <div class=\"qdc-status__header\">\n {{ config.title.i18n | translate }}\n </div>\n\n <div class=\"qdc-status__cards\" #cardsContainer [ngClass]=\"{ empty: !config.cards || config.cards.length === 0 }\">\n @if (!config.cards || config.cards.length === 0) {\n <div class=\"qdc-status_no-cards-message\">\n {{ \"i18n.qdc-cards.status.noCards.label\" | translate | placeholder : \"title\" : (config.title.i18n | translate) }}\n </div>\n } @else { @for (card of pagedCards; track $index) {\n <qdc-card [cardConfig]=\"card\"></qdc-card>\n } @if (config.pagination) {\n <div class=\"qdc-status__pagination-row\">\n <div>\n @if (!hideEntriesLabel) {\n <span>\n {{ \"i18n.qdc-card.status.pagination.service.entries.label\" | translate }}\n </span>\n }\n\n <select\n style=\"\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n border: 0;\n outline: 0;\n box-shadow: none;\n background: transparent;\n padding-left: 5px;\n font-family: Roboto, Arial, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n color: rgb(69, 69, 69);\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.3125rem;\n \"\n [(ngModel)]=\"config.pagination.pageSize\"\n (ngModelChange)=\"onPageSizeChange()\"\n (click)=\"toggleDropdownIcon()\"\n >\n @for (size of pagination?.pageSizes; track $index) {\n <option [ngValue]=\"size\">{{ size }}</option>\n }\n </select>\n\n <qd-icon [icon]=\"isDropdownOpen ? 'ctrlTop' : 'ctrlDown'\"></qd-icon>\n </div>\n\n <div class=\"qdc-status__pagination-info\">\n <span class=\"qdc-status__pagination-info__text\">\n {{ getPaginationInfo() }}\n </span>\n </div>\n\n <div>\n <button qdIconButton [disabled]=\"pagination?.currentPage === 0\" (click)=\"goToFirstPage()\">\n <qd-icon icon=\"pageFirst1\"></qd-icon>\n </button>\n <button qdIconButton [disabled]=\"pagination?.currentPage === 0\" (click)=\"goToPage(-1)\">\n <qd-icon icon=\"triangleLeftSolid\"></qd-icon>\n </button>\n <button\n qdIconButton\n [disabled]=\"pagination?.currentPage >= (pagination?.totalPages ?? 1) - 1\"\n (click)=\"goToPage(1)\"\n >\n <qd-icon icon=\"triangleRightSolid\"></qd-icon>\n </button>\n <button\n qdIconButton\n [disabled]=\"pagination?.currentPage >= (pagination?.totalPages ?? 1) - 1\"\n (click)=\"goToLastPage()\"\n >\n <qd-icon icon=\"pageLast\"></qd-icon>\n </button>\n </div>\n </div>\n } }\n </div>\n </div>\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { QdChipColor } from '@quadrel-enterprise-ui/framework';
|
|
2
|
-
import type { QdStatusIndicator } from '@quadrel-enterprise-ui/framework';
|
|
2
|
+
import type { QdStatus, QdStatusIndicator } from '@quadrel-enterprise-ui/framework';
|
|
3
3
|
export interface QdcCardActionConfig {
|
|
4
4
|
/**
|
|
5
5
|
* The label is shown as text in the UI for this action.
|
|
@@ -41,7 +41,7 @@ export interface QdcCardBodyPair {
|
|
|
41
41
|
chips?: QdcCardChip[] | null;
|
|
42
42
|
}
|
|
43
43
|
export interface QdcCardFooter {
|
|
44
|
-
icon?:
|
|
44
|
+
icon?: QdcCardIcon | null;
|
|
45
45
|
text?: string | null;
|
|
46
46
|
action?: QdcCardActionConfig | null;
|
|
47
47
|
}
|
|
@@ -60,3 +60,13 @@ export interface QdcCardChip {
|
|
|
60
60
|
i18n: string;
|
|
61
61
|
};
|
|
62
62
|
}
|
|
63
|
+
export interface QdcCardIcon {
|
|
64
|
+
/**
|
|
65
|
+
* Icon name.
|
|
66
|
+
* */
|
|
67
|
+
icon: string;
|
|
68
|
+
/**
|
|
69
|
+
* Optional status for definition of color
|
|
70
|
+
*/
|
|
71
|
+
status: QdStatus;
|
|
72
|
+
}
|