b2b-tools 0.1.4 → 0.1.5
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/fesm2022/b2b-tools.mjs +29 -20
- package/fesm2022/b2b-tools.mjs.map +1 -1
- package/package.json +1 -1
- package/types/b2b-tools.d.ts +2 -2
package/fesm2022/b2b-tools.mjs
CHANGED
|
@@ -30,11 +30,11 @@ class CardCompactComponent {
|
|
|
30
30
|
this.expand.emit();
|
|
31
31
|
}
|
|
32
32
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardCompactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CardCompactComponent, isStandalone: true, selector: "lib-card-compact", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: true, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expand: "expand" }, ngImport: i0, template: "@let config = configuration();\r\n\r\n<section\r\n class=\"ac ac--compact\"\r\n [class.ac--hidden]=\"expanded()\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n (click)=\"onExpand()\"\r\n (keydown.enter)=\"onExpand()\"\r\n>\r\n <header class=\"ac__header\">\r\n <div class=\"ac__title-wrap\">\r\n <h3 class=\"ac__title\">{{ config.title }}</h3>\r\n\r\n @if (config.subtitle) {\r\n <p class=\"ac__subtitle\">{{ config.subtitle }}</p>\r\n }\r\n </div>\r\n\r\n @if (config.badge) {\r\n <span [class]=\"badgeClass()(config.badge.tone)\">\r\n {{ config.badge.label }}\r\n </span>\r\n }\r\n </header>\r\n\r\n @if (hasHighlights()) {\r\n @let highlightList = config.highlights;\r\n\r\n <div class=\"ac__highlights\">\r\n @for (highlight of highlightList; track highlight.label) {\r\n <div class=\"ac__hl\">\r\n <div class=\"ac__hl-value\">{{ highlight.value }}</div>\r\n <div class=\"ac__hl-label\">\r\n {{ highlight.label }}\r\n @if (highlight.hint) {\r\n <span class=\"ac__hl-hint\">\u00B7 {{ highlight.hint }}</span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <footer class=\"ac__footer\">\r\n <button type=\"button\" class=\"btn btn--primary\" (click)=\"onExpand(); $event.stopPropagation()\">\r\n {{ config.primaryCta?.label ?? 'Ver detalle' }}\r\n <span class=\"btn__chev\">\u203A</span>\r\n </button>\r\n </footer>\r\n</section>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.
|
|
33
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CardCompactComponent, isStandalone: true, selector: "lib-card-compact", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: true, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expand: "expand" }, ngImport: i0, template: "@let config = configuration();\r\n\r\n<section\r\n class=\"ac ac--compact\"\r\n [class.ac--hidden]=\"expanded()\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n (click)=\"onExpand()\"\r\n (keydown.enter)=\"onExpand()\"\r\n>\r\n <header class=\"ac__header\">\r\n <div class=\"ac__title-wrap\">\r\n <h3 class=\"ac__title\">{{ config.title }}</h3>\r\n\r\n @if (config.subtitle) {\r\n <p class=\"ac__subtitle\">{{ config.subtitle }}</p>\r\n }\r\n </div>\r\n\r\n @if (config.badge) {\r\n <span [class]=\"badgeClass()(config.badge.tone)\">\r\n {{ config.badge.label }}\r\n </span>\r\n }\r\n </header>\r\n\r\n @if (hasHighlights()) {\r\n @let highlightList = config.highlights;\r\n\r\n <div class=\"ac__highlights\">\r\n @for (highlight of highlightList; track highlight.label) {\r\n <div class=\"ac__hl\">\r\n <div class=\"ac__hl-value\">{{ highlight.value }}</div>\r\n <div class=\"ac__hl-label\">\r\n {{ highlight.label }}\r\n @if (highlight.hint) {\r\n <span class=\"ac__hl-hint\">\u00B7 {{ highlight.hint }}</span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <footer class=\"ac__footer\">\r\n <button type=\"button\" class=\"btn btn--primary\" (click)=\"onExpand(); $event.stopPropagation()\">\r\n {{ config.primaryCta?.label ?? 'Ver detalle' }}\r\n <span class=\"btn__chev\">\u203A</span>\r\n </button>\r\n </footer>\r\n</section>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"] });
|
|
34
34
|
}
|
|
35
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardCompactComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
|
-
args: [{ selector: 'lib-card-compact', imports: [], template: "@let config = configuration();\r\n\r\n<section\r\n class=\"ac ac--compact\"\r\n [class.ac--hidden]=\"expanded()\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n (click)=\"onExpand()\"\r\n (keydown.enter)=\"onExpand()\"\r\n>\r\n <header class=\"ac__header\">\r\n <div class=\"ac__title-wrap\">\r\n <h3 class=\"ac__title\">{{ config.title }}</h3>\r\n\r\n @if (config.subtitle) {\r\n <p class=\"ac__subtitle\">{{ config.subtitle }}</p>\r\n }\r\n </div>\r\n\r\n @if (config.badge) {\r\n <span [class]=\"badgeClass()(config.badge.tone)\">\r\n {{ config.badge.label }}\r\n </span>\r\n }\r\n </header>\r\n\r\n @if (hasHighlights()) {\r\n @let highlightList = config.highlights;\r\n\r\n <div class=\"ac__highlights\">\r\n @for (highlight of highlightList; track highlight.label) {\r\n <div class=\"ac__hl\">\r\n <div class=\"ac__hl-value\">{{ highlight.value }}</div>\r\n <div class=\"ac__hl-label\">\r\n {{ highlight.label }}\r\n @if (highlight.hint) {\r\n <span class=\"ac__hl-hint\">\u00B7 {{ highlight.hint }}</span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <footer class=\"ac__footer\">\r\n <button type=\"button\" class=\"btn btn--primary\" (click)=\"onExpand(); $event.stopPropagation()\">\r\n {{ config.primaryCta?.label ?? 'Ver detalle' }}\r\n <span class=\"btn__chev\">\u203A</span>\r\n </button>\r\n </footer>\r\n</section>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.
|
|
37
|
+
args: [{ selector: 'lib-card-compact', imports: [], template: "@let config = configuration();\r\n\r\n<section\r\n class=\"ac ac--compact\"\r\n [class.ac--hidden]=\"expanded()\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n (click)=\"onExpand()\"\r\n (keydown.enter)=\"onExpand()\"\r\n>\r\n <header class=\"ac__header\">\r\n <div class=\"ac__title-wrap\">\r\n <h3 class=\"ac__title\">{{ config.title }}</h3>\r\n\r\n @if (config.subtitle) {\r\n <p class=\"ac__subtitle\">{{ config.subtitle }}</p>\r\n }\r\n </div>\r\n\r\n @if (config.badge) {\r\n <span [class]=\"badgeClass()(config.badge.tone)\">\r\n {{ config.badge.label }}\r\n </span>\r\n }\r\n </header>\r\n\r\n @if (hasHighlights()) {\r\n @let highlightList = config.highlights;\r\n\r\n <div class=\"ac__highlights\">\r\n @for (highlight of highlightList; track highlight.label) {\r\n <div class=\"ac__hl\">\r\n <div class=\"ac__hl-value\">{{ highlight.value }}</div>\r\n <div class=\"ac__hl-label\">\r\n {{ highlight.label }}\r\n @if (highlight.hint) {\r\n <span class=\"ac__hl-hint\">\u00B7 {{ highlight.hint }}</span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <footer class=\"ac__footer\">\r\n <button type=\"button\" class=\"btn btn--primary\" (click)=\"onExpand(); $event.stopPropagation()\">\r\n {{ config.primaryCta?.label ?? 'Ver detalle' }}\r\n <span class=\"btn__chev\">\u203A</span>\r\n </button>\r\n </footer>\r\n</section>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"] }]
|
|
38
38
|
}], propDecorators: { configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: true }] }], badgeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeClass", required: true }] }], expand: [{ type: i0.Output, args: ["expand"] }] } });
|
|
39
39
|
|
|
40
40
|
class CardHeaderComponent {
|
|
@@ -55,23 +55,31 @@ class CardHeaderComponent {
|
|
|
55
55
|
this.close.emit();
|
|
56
56
|
}
|
|
57
57
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
58
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CardHeaderComponent, isStandalone: true, selector: "ac-card-header", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClick: "actionClick", close: "close" }, ngImport: i0, template: "<header\r\n [class.acx__header]=\"variant() === 'inline'\"\r\n [class.acx__header--sticky]=\"variant() === 'inline' && sticky()\"\r\n [class.panel__header]=\"variant() === 'panel'\"\r\n>\r\n <div [class.acx__title]=\"variant() === 'inline'\" [class.panel__title]=\"variant() === 'panel'\">\r\n <h3\r\n [class.acx__title-text]=\"variant() === 'inline'\"\r\n [class.panel__title-text]=\"variant() === 'panel'\"\r\n >\r\n {{ title() }}\r\n </h3>\r\n\r\n @if (badge()) {\r\n <span [class]=\"badgeClass()(badge()?.tone)\">\r\n {{ badge()?.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div [class.acx__actions]=\"variant() === 'inline'\" [class.panel__actions]=\"variant() === 'panel'\">\r\n @let headerActions = actions();\r\n @if (headerActions?.length) {\r\n @for (headerAction of headerActions; track headerAction.id) {\r\n <button\r\n type=\"button\"\r\n class=\"btn\"\r\n [class.btn--primary]=\"headerAction.tone === 'primary'\"\r\n [class.btn--danger]=\"headerAction.tone === 'danger'\"\r\n [class.btn--secondary]=\"!headerAction.tone || headerAction.tone === 'secondary'\"\r\n [disabled]=\"headerAction.disabled\"\r\n (click)=\"onAction(headerAction)\"\r\n >\r\n {{ headerAction.label }}\r\n </button>\r\n }\r\n }\r\n\r\n <button type=\"button\" class=\"icon-btn\" (click)=\"onClose()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n <rect width=\"24\" height=\"24\" fill=\"none\" />\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n</header>\r\n", styles: [":host{display:block}.panel__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.
|
|
58
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CardHeaderComponent, isStandalone: true, selector: "ac-card-header", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClick: "actionClick", close: "close" }, ngImport: i0, template: "<header\r\n [class.acx__header]=\"variant() === 'inline'\"\r\n [class.acx__header--sticky]=\"variant() === 'inline' && sticky()\"\r\n [class.panel__header]=\"variant() === 'panel'\"\r\n>\r\n <div [class.acx__title]=\"variant() === 'inline'\" [class.panel__title]=\"variant() === 'panel'\">\r\n <h3\r\n [class.acx__title-text]=\"variant() === 'inline'\"\r\n [class.panel__title-text]=\"variant() === 'panel'\"\r\n >\r\n {{ title() }}\r\n </h3>\r\n\r\n @if (badge()) {\r\n <span [class]=\"badgeClass()(badge()?.tone)\">\r\n {{ badge()?.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div [class.acx__actions]=\"variant() === 'inline'\" [class.panel__actions]=\"variant() === 'panel'\">\r\n @let headerActions = actions();\r\n @if (headerActions?.length) {\r\n @for (headerAction of headerActions; track headerAction.id) {\r\n <button\r\n type=\"button\"\r\n class=\"btn\"\r\n [class.btn--primary]=\"headerAction.tone === 'primary'\"\r\n [class.btn--danger]=\"headerAction.tone === 'danger'\"\r\n [class.btn--secondary]=\"!headerAction.tone || headerAction.tone === 'secondary'\"\r\n [disabled]=\"headerAction.disabled\"\r\n (click)=\"onAction(headerAction)\"\r\n >\r\n {{ headerAction.label }}\r\n </button>\r\n }\r\n }\r\n\r\n <button type=\"button\" class=\"icon-btn\" (click)=\"onClose()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n <rect width=\"24\" height=\"24\" fill=\"none\" />\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n</header>\r\n", styles: [":host{display:block}.panel__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"] });
|
|
59
59
|
}
|
|
60
60
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardHeaderComponent, decorators: [{
|
|
61
61
|
type: Component,
|
|
62
|
-
args: [{ selector: 'ac-card-header', imports: [], template: "<header\r\n [class.acx__header]=\"variant() === 'inline'\"\r\n [class.acx__header--sticky]=\"variant() === 'inline' && sticky()\"\r\n [class.panel__header]=\"variant() === 'panel'\"\r\n>\r\n <div [class.acx__title]=\"variant() === 'inline'\" [class.panel__title]=\"variant() === 'panel'\">\r\n <h3\r\n [class.acx__title-text]=\"variant() === 'inline'\"\r\n [class.panel__title-text]=\"variant() === 'panel'\"\r\n >\r\n {{ title() }}\r\n </h3>\r\n\r\n @if (badge()) {\r\n <span [class]=\"badgeClass()(badge()?.tone)\">\r\n {{ badge()?.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div [class.acx__actions]=\"variant() === 'inline'\" [class.panel__actions]=\"variant() === 'panel'\">\r\n @let headerActions = actions();\r\n @if (headerActions?.length) {\r\n @for (headerAction of headerActions; track headerAction.id) {\r\n <button\r\n type=\"button\"\r\n class=\"btn\"\r\n [class.btn--primary]=\"headerAction.tone === 'primary'\"\r\n [class.btn--danger]=\"headerAction.tone === 'danger'\"\r\n [class.btn--secondary]=\"!headerAction.tone || headerAction.tone === 'secondary'\"\r\n [disabled]=\"headerAction.disabled\"\r\n (click)=\"onAction(headerAction)\"\r\n >\r\n {{ headerAction.label }}\r\n </button>\r\n }\r\n }\r\n\r\n <button type=\"button\" class=\"icon-btn\" (click)=\"onClose()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n <rect width=\"24\" height=\"24\" fill=\"none\" />\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n</header>\r\n", styles: [":host{display:block}.panel__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.
|
|
62
|
+
args: [{ selector: 'ac-card-header', imports: [], template: "<header\r\n [class.acx__header]=\"variant() === 'inline'\"\r\n [class.acx__header--sticky]=\"variant() === 'inline' && sticky()\"\r\n [class.panel__header]=\"variant() === 'panel'\"\r\n>\r\n <div [class.acx__title]=\"variant() === 'inline'\" [class.panel__title]=\"variant() === 'panel'\">\r\n <h3\r\n [class.acx__title-text]=\"variant() === 'inline'\"\r\n [class.panel__title-text]=\"variant() === 'panel'\"\r\n >\r\n {{ title() }}\r\n </h3>\r\n\r\n @if (badge()) {\r\n <span [class]=\"badgeClass()(badge()?.tone)\">\r\n {{ badge()?.label }}\r\n </span>\r\n }\r\n </div>\r\n\r\n <div [class.acx__actions]=\"variant() === 'inline'\" [class.panel__actions]=\"variant() === 'panel'\">\r\n @let headerActions = actions();\r\n @if (headerActions?.length) {\r\n @for (headerAction of headerActions; track headerAction.id) {\r\n <button\r\n type=\"button\"\r\n class=\"btn\"\r\n [class.btn--primary]=\"headerAction.tone === 'primary'\"\r\n [class.btn--danger]=\"headerAction.tone === 'danger'\"\r\n [class.btn--secondary]=\"!headerAction.tone || headerAction.tone === 'secondary'\"\r\n [disabled]=\"headerAction.disabled\"\r\n (click)=\"onAction(headerAction)\"\r\n >\r\n {{ headerAction.label }}\r\n </button>\r\n }\r\n }\r\n\r\n <button type=\"button\" class=\"icon-btn\" (click)=\"onClose()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\r\n <rect width=\"24\" height=\"24\" fill=\"none\" />\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n</header>\r\n", styles: [":host{display:block}.panel__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"] }]
|
|
63
63
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], badgeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeClass", required: true }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], close: [{ type: i0.Output, args: ["close"] }] } });
|
|
64
64
|
|
|
65
65
|
class CardSummaryComponent {
|
|
66
66
|
blocks = input(undefined, ...(ngDevMode ? [{ debugName: "blocks" }] : []));
|
|
67
|
-
|
|
67
|
+
layout = input('stacked', ...(ngDevMode ? [{ debugName: "layout" }] : []));
|
|
68
|
+
columnMax = 4;
|
|
69
|
+
numBlocks = computed(() => this.blocks()?.length ?? 0, ...(ngDevMode ? [{ debugName: "numBlocks" }] : []));
|
|
70
|
+
templateStyle = computed(() => {
|
|
71
|
+
if (this.layout() === 'inline') {
|
|
72
|
+
return 'repeat(1, 1fr)';
|
|
73
|
+
}
|
|
74
|
+
return `repeat(${Math.min(this.numBlocks(), this.columnMax)}, 1fr)`;
|
|
75
|
+
}, ...(ngDevMode ? [{ debugName: "templateStyle" }] : []));
|
|
68
76
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
69
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CardSummaryComponent, isStandalone: true, selector: "ac-card-summary", inputs: { blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (
|
|
77
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CardSummaryComponent, isStandalone: true, selector: "ac-card-summary", inputs: { blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (numBlocks() > 0) {\r\n @let list = blocks();\r\n\r\n <div\r\n class=\"acx__summary\"\r\n [class.scrollbar-y]=\"this.layout() === 'inline'\"\r\n [style.grid-template-columns]=\"templateStyle()\"\r\n >\r\n @for (block of list; track block.title) {\r\n <div class=\"block\">\r\n <div class=\"block__title\">{{ block.title }}</div>\r\n\r\n @for (row of block.rows; track row.label) {\r\n <div class=\"block__row\">\r\n <span class=\"block__label\">{{ row.label }}</span>\r\n <span class=\"block__value\">{{ row.value }}</span>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"] });
|
|
70
78
|
}
|
|
71
79
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardSummaryComponent, decorators: [{
|
|
72
80
|
type: Component,
|
|
73
|
-
args: [{ selector: 'ac-card-summary', imports: [], template: "@if (
|
|
74
|
-
}], propDecorators: { blocks: [{ type: i0.Input, args: [{ isSignal: true, alias: "blocks", required: false }] }] } });
|
|
81
|
+
args: [{ selector: 'ac-card-summary', imports: [], template: "@if (numBlocks() > 0) {\r\n @let list = blocks();\r\n\r\n <div\r\n class=\"acx__summary\"\r\n [class.scrollbar-y]=\"this.layout() === 'inline'\"\r\n [style.grid-template-columns]=\"templateStyle()\"\r\n >\r\n @for (block of list; track block.title) {\r\n <div class=\"block\">\r\n <div class=\"block__title\">{{ block.title }}</div>\r\n\r\n @for (row of block.rows; track row.label) {\r\n <div class=\"block__row\">\r\n <span class=\"block__label\">{{ row.label }}</span>\r\n <span class=\"block__value\">{{ row.value }}</span>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"] }]
|
|
82
|
+
}], propDecorators: { blocks: [{ type: i0.Input, args: [{ isSignal: true, alias: "blocks", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }] } });
|
|
75
83
|
|
|
76
84
|
class CardTabContentComponent {
|
|
77
85
|
activeTab = input.required(...(ngDevMode ? [{ debugName: "activeTab" }] : []));
|
|
@@ -82,11 +90,11 @@ class CardTabContentComponent {
|
|
|
82
90
|
*/
|
|
83
91
|
templateRef = input(null, ...(ngDevMode ? [{ debugName: "templateRef" }] : []));
|
|
84
92
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardTabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
85
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CardTabContentComponent, isStandalone: true, selector: "ac-card-tab-content", inputs: { activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, cardId: { classPropertyName: "cardId", publicName: "cardId", isSignal: true, isRequired: true, transformFunction: null }, templateRef: { classPropertyName: "templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let tab = activeTab();\r\n@let template = templateRef();\r\n\r\n<div class=\"tabs__content\">\r\n @if (tab) {\r\n @switch (tab.kind) {\r\n @case ('text') {\r\n <div class=\"tab-text\">\r\n {{ tab.text ?? '' }}\r\n </div>\r\n }\r\n\r\n @case ('empty') {\r\n <div class=\"empty\">Sin contenido.</div>\r\n }\r\n\r\n @case ('template') {\r\n @if (template) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{\r\n cardId: cardId(),\r\n tabId: tab.id,\r\n }\"\r\n />\r\n } @else {\r\n <div class=\"empty\">Template no encontrado para \"{{ tab.templateId }}\"</div>\r\n }\r\n }\r\n }\r\n } @else {\r\n <div class=\"empty\">Sin tabs configurados.</div>\r\n }\r\n</div>\r\n", styles: ["", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.
|
|
93
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CardTabContentComponent, isStandalone: true, selector: "ac-card-tab-content", inputs: { activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: true, transformFunction: null }, cardId: { classPropertyName: "cardId", publicName: "cardId", isSignal: true, isRequired: true, transformFunction: null }, templateRef: { classPropertyName: "templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let tab = activeTab();\r\n@let template = templateRef();\r\n\r\n<div class=\"tabs__content\">\r\n @if (tab) {\r\n @switch (tab.kind) {\r\n @case ('text') {\r\n <div class=\"tab-text\">\r\n {{ tab.text ?? '' }}\r\n </div>\r\n }\r\n\r\n @case ('empty') {\r\n <div class=\"empty\">Sin contenido.</div>\r\n }\r\n\r\n @case ('template') {\r\n @if (template) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{\r\n cardId: cardId(),\r\n tabId: tab.id,\r\n }\"\r\n />\r\n } @else {\r\n <div class=\"empty\">Template no encontrado para \"{{ tab.templateId }}\"</div>\r\n }\r\n }\r\n }\r\n } @else {\r\n <div class=\"empty\">Sin tabs configurados.</div>\r\n }\r\n</div>\r\n", styles: ["", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
86
94
|
}
|
|
87
95
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardTabContentComponent, decorators: [{
|
|
88
96
|
type: Component,
|
|
89
|
-
args: [{ selector: 'ac-card-tab-content', imports: [NgTemplateOutlet], template: "@let tab = activeTab();\r\n@let template = templateRef();\r\n\r\n<div class=\"tabs__content\">\r\n @if (tab) {\r\n @switch (tab.kind) {\r\n @case ('text') {\r\n <div class=\"tab-text\">\r\n {{ tab.text ?? '' }}\r\n </div>\r\n }\r\n\r\n @case ('empty') {\r\n <div class=\"empty\">Sin contenido.</div>\r\n }\r\n\r\n @case ('template') {\r\n @if (template) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{\r\n cardId: cardId(),\r\n tabId: tab.id,\r\n }\"\r\n />\r\n } @else {\r\n <div class=\"empty\">Template no encontrado para \"{{ tab.templateId }}\"</div>\r\n }\r\n }\r\n }\r\n } @else {\r\n <div class=\"empty\">Sin tabs configurados.</div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.
|
|
97
|
+
args: [{ selector: 'ac-card-tab-content', imports: [NgTemplateOutlet], template: "@let tab = activeTab();\r\n@let template = templateRef();\r\n\r\n<div class=\"tabs__content\">\r\n @if (tab) {\r\n @switch (tab.kind) {\r\n @case ('text') {\r\n <div class=\"tab-text\">\r\n {{ tab.text ?? '' }}\r\n </div>\r\n }\r\n\r\n @case ('empty') {\r\n <div class=\"empty\">Sin contenido.</div>\r\n }\r\n\r\n @case ('template') {\r\n @if (template) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{\r\n cardId: cardId(),\r\n tabId: tab.id,\r\n }\"\r\n />\r\n } @else {\r\n <div class=\"empty\">Template no encontrado para \"{{ tab.templateId }}\"</div>\r\n }\r\n }\r\n }\r\n } @else {\r\n <div class=\"empty\">Sin tabs configurados.</div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"] }]
|
|
90
98
|
}], propDecorators: { activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }], cardId: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardId", required: true }] }], templateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateRef", required: false }] }] } });
|
|
91
99
|
|
|
92
100
|
class CardTabsBarComponent {
|
|
@@ -110,11 +118,11 @@ class CardTabsBarComponent {
|
|
|
110
118
|
this.tabAction.emit(advancedTabAction);
|
|
111
119
|
}
|
|
112
120
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardTabsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
113
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CardTabsBarComponent, isStandalone: true, selector: "ac-card-tabs-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: true, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tabSelected: "tabSelected", tabAction: "tabAction" }, ngImport: i0, template: "@let tabList = tabs();\r\n@let currentId = activeTabId();\r\n@let current = activeTab();\r\n\r\n<div class=\"tabs__bar\">\r\n @for (tab of tabList; track tab.id) {\r\n <button\r\n type=\"button\"\r\n class=\"tab\"\r\n [class.tab--active]=\"currentId === tab.id\"\r\n (click)=\"selectTab(tab.id)\"\r\n >\r\n <span>{{ tab.label }}</span>\r\n @if (tab.pill) {\r\n <span class=\"pill\" [class]=\"badgeClass()(tab.pill.tone)\">\r\n {{ tab.pill.label }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n\r\n <div class=\"tabs__spacer\"></div>\r\n\r\n @if (current?.actions?.length) {\r\n <div class=\"tabs__actions\">\r\n @for (actions of current?.actions ?? []; track actions.id) {\r\n <button\r\n type=\"button\"\r\n class=\"btn btn--sm\"\r\n [class.btn--primary]=\"actions.tone === 'primary'\"\r\n [class.btn--danger]=\"actions.tone === 'danger'\"\r\n [class.btn--secondary]=\"!actions.tone || actions.tone === 'secondary'\"\r\n [disabled]=\"actions.disabled\"\r\n (click)=\"clickAction(actions)\"\r\n >\r\n {{ actions.label }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.
|
|
121
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CardTabsBarComponent, isStandalone: true, selector: "ac-card-tabs-bar", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeTabId: { classPropertyName: "activeTabId", publicName: "activeTabId", isSignal: true, isRequired: true, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tabSelected: "tabSelected", tabAction: "tabAction" }, ngImport: i0, template: "@let tabList = tabs();\r\n@let currentId = activeTabId();\r\n@let current = activeTab();\r\n\r\n<div class=\"tabs__bar\">\r\n @for (tab of tabList; track tab.id) {\r\n <button\r\n type=\"button\"\r\n class=\"tab\"\r\n [class.tab--active]=\"currentId === tab.id\"\r\n (click)=\"selectTab(tab.id)\"\r\n >\r\n <span>{{ tab.label }}</span>\r\n @if (tab.pill) {\r\n <span class=\"pill\" [class]=\"badgeClass()(tab.pill.tone)\">\r\n {{ tab.pill.label }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n\r\n <div class=\"tabs__spacer\"></div>\r\n\r\n @if (current?.actions?.length) {\r\n <div class=\"tabs__actions\">\r\n @for (actions of current?.actions ?? []; track actions.id) {\r\n <button\r\n type=\"button\"\r\n class=\"btn btn--sm\"\r\n [class.btn--primary]=\"actions.tone === 'primary'\"\r\n [class.btn--danger]=\"actions.tone === 'danger'\"\r\n [class.btn--secondary]=\"!actions.tone || actions.tone === 'secondary'\"\r\n [disabled]=\"actions.disabled\"\r\n (click)=\"clickAction(actions)\"\r\n >\r\n {{ actions.label }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"] });
|
|
114
122
|
}
|
|
115
123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardTabsBarComponent, decorators: [{
|
|
116
124
|
type: Component,
|
|
117
|
-
args: [{ selector: 'ac-card-tabs-bar', imports: [], template: "@let tabList = tabs();\r\n@let currentId = activeTabId();\r\n@let current = activeTab();\r\n\r\n<div class=\"tabs__bar\">\r\n @for (tab of tabList; track tab.id) {\r\n <button\r\n type=\"button\"\r\n class=\"tab\"\r\n [class.tab--active]=\"currentId === tab.id\"\r\n (click)=\"selectTab(tab.id)\"\r\n >\r\n <span>{{ tab.label }}</span>\r\n @if (tab.pill) {\r\n <span class=\"pill\" [class]=\"badgeClass()(tab.pill.tone)\">\r\n {{ tab.pill.label }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n\r\n <div class=\"tabs__spacer\"></div>\r\n\r\n @if (current?.actions?.length) {\r\n <div class=\"tabs__actions\">\r\n @for (actions of current?.actions ?? []; track actions.id) {\r\n <button\r\n type=\"button\"\r\n class=\"btn btn--sm\"\r\n [class.btn--primary]=\"actions.tone === 'primary'\"\r\n [class.btn--danger]=\"actions.tone === 'danger'\"\r\n [class.btn--secondary]=\"!actions.tone || actions.tone === 'secondary'\"\r\n [disabled]=\"actions.disabled\"\r\n (click)=\"clickAction(actions)\"\r\n >\r\n {{ actions.label }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.
|
|
125
|
+
args: [{ selector: 'ac-card-tabs-bar', imports: [], template: "@let tabList = tabs();\r\n@let currentId = activeTabId();\r\n@let current = activeTab();\r\n\r\n<div class=\"tabs__bar\">\r\n @for (tab of tabList; track tab.id) {\r\n <button\r\n type=\"button\"\r\n class=\"tab\"\r\n [class.tab--active]=\"currentId === tab.id\"\r\n (click)=\"selectTab(tab.id)\"\r\n >\r\n <span>{{ tab.label }}</span>\r\n @if (tab.pill) {\r\n <span class=\"pill\" [class]=\"badgeClass()(tab.pill.tone)\">\r\n {{ tab.pill.label }}\r\n </span>\r\n }\r\n </button>\r\n }\r\n\r\n <div class=\"tabs__spacer\"></div>\r\n\r\n @if (current?.actions?.length) {\r\n <div class=\"tabs__actions\">\r\n @for (actions of current?.actions ?? []; track actions.id) {\r\n <button\r\n type=\"button\"\r\n class=\"btn btn--sm\"\r\n [class.btn--primary]=\"actions.tone === 'primary'\"\r\n [class.btn--danger]=\"actions.tone === 'danger'\"\r\n [class.btn--secondary]=\"!actions.tone || actions.tone === 'secondary'\"\r\n [disabled]=\"actions.disabled\"\r\n (click)=\"clickAction(actions)\"\r\n >\r\n {{ actions.label }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"] }]
|
|
118
126
|
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeTabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTabId", required: true }] }], badgeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeClass", required: true }] }], tabSelected: [{ type: i0.Output, args: ["tabSelected"] }], tabAction: [{ type: i0.Output, args: ["tabAction"] }] } });
|
|
119
127
|
|
|
120
128
|
class AdvancedCardContentComponent {
|
|
@@ -129,11 +137,11 @@ class AdvancedCardContentComponent {
|
|
|
129
137
|
this.tabAction.emit(a);
|
|
130
138
|
}
|
|
131
139
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdvancedCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
132
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdvancedCardContentComponent, isStandalone: true, selector: "ac-advanced-card-content", inputs: { viewModel: { classPropertyName: "viewModel", publicName: "viewModel", isSignal: true, isRequired: true, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tabSelected: "tabSelected", tabAction: "tabAction" }, ngImport: i0, template: "@let vm = viewModel();\r\n\r\n<ac-card-summary [blocks]=\"vm.summaryBlocks\" />\r\n\r\n@if (vm.tabs.length) {\r\n
|
|
140
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdvancedCardContentComponent, isStandalone: true, selector: "ac-advanced-card-content", inputs: { viewModel: { classPropertyName: "viewModel", publicName: "viewModel", isSignal: true, isRequired: true, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { tabSelected: "tabSelected", tabAction: "tabAction" }, ngImport: i0, template: "@let vm = viewModel();\r\n\r\n<div class=\"ac-content\" [class.ac-content--inline]=\"vm.layout === 'inline'\">\r\n <div class=\"summary\">\r\n <ac-card-summary [blocks]=\"vm.summaryBlocks\" [layout]=\"vm.layout\" />\r\n </div>\r\n\r\n @if (vm.tabs.length) {\r\n <div class=\"tabs\">\r\n <ac-card-tabs-bar\r\n [tabs]=\"vm.tabs\"\r\n [activeTabId]=\"vm.activeTabId\"\r\n [badgeClass]=\"badgeClass()\"\r\n (tabSelected)=\"onSelect($event)\"\r\n (tabAction)=\"onAction($event)\"\r\n />\r\n\r\n <ac-card-tab-content\r\n [activeTab]=\"vm.activeTab\"\r\n [cardId]=\"vm.cardId\"\r\n [templateRef]=\"vm.templateRef\"\r\n />\r\n </div>\r\n } @else {\r\n <div class=\"acx__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"], dependencies: [{ kind: "component", type: CardSummaryComponent, selector: "ac-card-summary", inputs: ["blocks", "layout"] }, { kind: "component", type: CardTabsBarComponent, selector: "ac-card-tabs-bar", inputs: ["tabs", "activeTabId", "badgeClass"], outputs: ["tabSelected", "tabAction"] }, { kind: "component", type: CardTabContentComponent, selector: "ac-card-tab-content", inputs: ["activeTab", "cardId", "templateRef"] }] });
|
|
133
141
|
}
|
|
134
142
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdvancedCardContentComponent, decorators: [{
|
|
135
143
|
type: Component,
|
|
136
|
-
args: [{ selector: 'ac-advanced-card-content', imports: [CardSummaryComponent, CardTabsBarComponent, CardTabContentComponent], template: "@let vm = viewModel();\r\n\r\n<ac-card-summary [blocks]=\"vm.summaryBlocks\" />\r\n\r\n@if (vm.tabs.length) {\r\n
|
|
144
|
+
args: [{ selector: 'ac-advanced-card-content', imports: [CardSummaryComponent, CardTabsBarComponent, CardTabContentComponent], template: "@let vm = viewModel();\r\n\r\n<div class=\"ac-content\" [class.ac-content--inline]=\"vm.layout === 'inline'\">\r\n <div class=\"summary\">\r\n <ac-card-summary [blocks]=\"vm.summaryBlocks\" [layout]=\"vm.layout\" />\r\n </div>\r\n\r\n @if (vm.tabs.length) {\r\n <div class=\"tabs\">\r\n <ac-card-tabs-bar\r\n [tabs]=\"vm.tabs\"\r\n [activeTabId]=\"vm.activeTabId\"\r\n [badgeClass]=\"badgeClass()\"\r\n (tabSelected)=\"onSelect($event)\"\r\n (tabAction)=\"onAction($event)\"\r\n />\r\n\r\n <ac-card-tab-content\r\n [activeTab]=\"vm.activeTab\"\r\n [cardId]=\"vm.cardId\"\r\n [templateRef]=\"vm.templateRef\"\r\n />\r\n </div>\r\n } @else {\r\n <div class=\"acx__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"] }]
|
|
137
145
|
}], propDecorators: { viewModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModel", required: true }] }], badgeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeClass", required: true }] }], tabSelected: [{ type: i0.Output, args: ["tabSelected"] }], tabAction: [{ type: i0.Output, args: ["tabAction"] }] } });
|
|
138
146
|
|
|
139
147
|
class AdvancedCardOverlayComponent {
|
|
@@ -154,11 +162,11 @@ class AdvancedCardOverlayComponent {
|
|
|
154
162
|
this.actionClick.emit(a);
|
|
155
163
|
}
|
|
156
164
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdvancedCardOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
157
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: AdvancedCardOverlayComponent, isStandalone: true, selector: "ac-advanced-card-overlay", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: true, transformFunction: null }, viewModel: { classPropertyName: "viewModel", publicName: "viewModel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClick: "actionClick", close: "close", tabSelected: "tabSelected", tabAction: "tabAction" }, ngImport: i0, template: "@let isModal = mode() === 'modal';\r\n\r\n<div class=\"overlay\" [class.modal-center]=\"isModal\" (click)=\"onBackdrop()\">\r\n <section\r\n class=\"panel\"\r\n [class.panel--drawer]=\"!isModal\"\r\n [class.panel--modal]=\"isModal\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ac-card-header\r\n variant=\"panel\"\r\n [title]=\"config().title\"\r\n [badge]=\"config().badge\"\r\n [actions]=\"config().actions\"\r\n [badgeClass]=\"badgeClass()\"\r\n (actionClick)=\"onAction($event)\"\r\n (close)=\"close.emit()\"\r\n />\r\n\r\n <div class=\"panel__body min-croll\">\r\n <ac-advanced-card-content\r\n [viewModel]=\"viewModel()\"\r\n [badgeClass]=\"badgeClass()\"\r\n (tabSelected)=\"tabSelected.emit($event)\"\r\n (tabAction)=\"tabAction.emit($event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-content>\r\n </div>\r\n </section>\r\n</div>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.
|
|
165
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: AdvancedCardOverlayComponent, isStandalone: true, selector: "ac-advanced-card-overlay", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: true, transformFunction: null }, viewModel: { classPropertyName: "viewModel", publicName: "viewModel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClick: "actionClick", close: "close", tabSelected: "tabSelected", tabAction: "tabAction" }, ngImport: i0, template: "@let isModal = mode() === 'modal';\r\n\r\n<div class=\"overlay\" [class.modal-center]=\"isModal\" (click)=\"onBackdrop()\">\r\n <section\r\n class=\"panel\"\r\n [class.panel--drawer]=\"!isModal\"\r\n [class.panel--modal]=\"isModal\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ac-card-header\r\n variant=\"panel\"\r\n [title]=\"config().title\"\r\n [badge]=\"config().badge\"\r\n [actions]=\"config().actions\"\r\n [badgeClass]=\"badgeClass()\"\r\n (actionClick)=\"onAction($event)\"\r\n (close)=\"close.emit()\"\r\n />\r\n\r\n <div class=\"panel__body min-croll\">\r\n <ac-advanced-card-content\r\n [viewModel]=\"viewModel()\"\r\n [badgeClass]=\"badgeClass()\"\r\n (tabSelected)=\"tabSelected.emit($event)\"\r\n (tabAction)=\"tabAction.emit($event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-content>\r\n </div>\r\n </section>\r\n</div>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"], dependencies: [{ kind: "component", type: CardHeaderComponent, selector: "ac-card-header", inputs: ["variant", "title", "badge", "actions", "sticky", "badgeClass"], outputs: ["actionClick", "close"] }, { kind: "component", type: AdvancedCardContentComponent, selector: "ac-advanced-card-content", inputs: ["viewModel", "badgeClass"], outputs: ["tabSelected", "tabAction"] }] });
|
|
158
166
|
}
|
|
159
167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdvancedCardOverlayComponent, decorators: [{
|
|
160
168
|
type: Component,
|
|
161
|
-
args: [{ selector: 'ac-advanced-card-overlay', imports: [CardHeaderComponent, AdvancedCardContentComponent], template: "@let isModal = mode() === 'modal';\r\n\r\n<div class=\"overlay\" [class.modal-center]=\"isModal\" (click)=\"onBackdrop()\">\r\n <section\r\n class=\"panel\"\r\n [class.panel--drawer]=\"!isModal\"\r\n [class.panel--modal]=\"isModal\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ac-card-header\r\n variant=\"panel\"\r\n [title]=\"config().title\"\r\n [badge]=\"config().badge\"\r\n [actions]=\"config().actions\"\r\n [badgeClass]=\"badgeClass()\"\r\n (actionClick)=\"onAction($event)\"\r\n (close)=\"close.emit()\"\r\n />\r\n\r\n <div class=\"panel__body min-croll\">\r\n <ac-advanced-card-content\r\n [viewModel]=\"viewModel()\"\r\n [badgeClass]=\"badgeClass()\"\r\n (tabSelected)=\"tabSelected.emit($event)\"\r\n (tabAction)=\"tabAction.emit($event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-content>\r\n </div>\r\n </section>\r\n</div>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.
|
|
169
|
+
args: [{ selector: 'ac-advanced-card-overlay', imports: [CardHeaderComponent, AdvancedCardContentComponent], template: "@let isModal = mode() === 'modal';\r\n\r\n<div class=\"overlay\" [class.modal-center]=\"isModal\" (click)=\"onBackdrop()\">\r\n <section\r\n class=\"panel\"\r\n [class.panel--drawer]=\"!isModal\"\r\n [class.panel--modal]=\"isModal\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ac-card-header\r\n variant=\"panel\"\r\n [title]=\"config().title\"\r\n [badge]=\"config().badge\"\r\n [actions]=\"config().actions\"\r\n [badgeClass]=\"badgeClass()\"\r\n (actionClick)=\"onAction($event)\"\r\n (close)=\"close.emit()\"\r\n />\r\n\r\n <div class=\"panel__body min-croll\">\r\n <ac-advanced-card-content\r\n [viewModel]=\"viewModel()\"\r\n [badgeClass]=\"badgeClass()\"\r\n (tabSelected)=\"tabSelected.emit($event)\"\r\n (tabAction)=\"tabAction.emit($event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-content>\r\n </div>\r\n </section>\r\n</div>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"] }]
|
|
162
170
|
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], badgeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeClass", required: true }] }], viewModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModel", required: true }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], close: [{ type: i0.Output, args: ["close"] }], tabSelected: [{ type: i0.Output, args: ["tabSelected"] }], tabAction: [{ type: i0.Output, args: ["tabAction"] }] } });
|
|
163
171
|
|
|
164
172
|
class AdvancedCardInlineComponent {
|
|
@@ -175,11 +183,11 @@ class AdvancedCardInlineComponent {
|
|
|
175
183
|
tabSelected = output();
|
|
176
184
|
tabAction = output();
|
|
177
185
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdvancedCardInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
178
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: AdvancedCardInlineComponent, isStandalone: true, selector: "ac-advanced-card-inline", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: true, transformFunction: null }, viewModel: { classPropertyName: "viewModel", publicName: "viewModel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClick: "actionClick", close: "close", tabSelected: "tabSelected", tabAction: "tabAction" }, ngImport: i0, template: "<section class=\"ac ac--expanded\" [class.ac--full]=\"fullWidth()\">\r\n <ac-card-header\r\n variant=\"inline\"\r\n [title]=\"config().title\"\r\n [badge]=\"config().badge\"\r\n [actions]=\"config().actions\"\r\n [sticky]=\"stickyHeader()\"\r\n [badgeClass]=\"badgeClass()\"\r\n (actionClick)=\"onAction($event)\"\r\n (close)=\"close.emit()\"\r\n />\r\n\r\n <div class=\"acx__body\">\r\n <ac-advanced-card-content\r\n [viewModel]=\"viewModel()\"\r\n [badgeClass]=\"badgeClass()\"\r\n (tabSelected)=\"tabSelected.emit($event)\"\r\n (tabAction)=\"tabAction.emit($event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-content>\r\n </div>\r\n</section>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.
|
|
186
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: AdvancedCardInlineComponent, isStandalone: true, selector: "ac-advanced-card-inline", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: true, isRequired: true, transformFunction: null }, viewModel: { classPropertyName: "viewModel", publicName: "viewModel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClick: "actionClick", close: "close", tabSelected: "tabSelected", tabAction: "tabAction" }, ngImport: i0, template: "<section class=\"ac ac--expanded\" [class.ac--full]=\"fullWidth()\">\r\n <ac-card-header\r\n variant=\"inline\"\r\n [title]=\"config().title\"\r\n [badge]=\"config().badge\"\r\n [actions]=\"config().actions\"\r\n [sticky]=\"stickyHeader()\"\r\n [badgeClass]=\"badgeClass()\"\r\n (actionClick)=\"onAction($event)\"\r\n (close)=\"close.emit()\"\r\n />\r\n\r\n <div class=\"acx__body\">\r\n <ac-advanced-card-content\r\n [viewModel]=\"viewModel()\"\r\n [badgeClass]=\"badgeClass()\"\r\n (tabSelected)=\"tabSelected.emit($event)\"\r\n (tabAction)=\"tabAction.emit($event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-content>\r\n </div>\r\n</section>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"], dependencies: [{ kind: "component", type: AdvancedCardContentComponent, selector: "ac-advanced-card-content", inputs: ["viewModel", "badgeClass"], outputs: ["tabSelected", "tabAction"] }, { kind: "component", type: CardHeaderComponent, selector: "ac-card-header", inputs: ["variant", "title", "badge", "actions", "sticky", "badgeClass"], outputs: ["actionClick", "close"] }] });
|
|
179
187
|
}
|
|
180
188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdvancedCardInlineComponent, decorators: [{
|
|
181
189
|
type: Component,
|
|
182
|
-
args: [{ selector: 'ac-advanced-card-inline', imports: [AdvancedCardContentComponent, CardHeaderComponent], template: "<section class=\"ac ac--expanded\" [class.ac--full]=\"fullWidth()\">\r\n <ac-card-header\r\n variant=\"inline\"\r\n [title]=\"config().title\"\r\n [badge]=\"config().badge\"\r\n [actions]=\"config().actions\"\r\n [sticky]=\"stickyHeader()\"\r\n [badgeClass]=\"badgeClass()\"\r\n (actionClick)=\"onAction($event)\"\r\n (close)=\"close.emit()\"\r\n />\r\n\r\n <div class=\"acx__body\">\r\n <ac-advanced-card-content\r\n [viewModel]=\"viewModel()\"\r\n [badgeClass]=\"badgeClass()\"\r\n (tabSelected)=\"tabSelected.emit($event)\"\r\n (tabAction)=\"tabAction.emit($event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-content>\r\n </div>\r\n</section>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.
|
|
190
|
+
args: [{ selector: 'ac-advanced-card-inline', imports: [AdvancedCardContentComponent, CardHeaderComponent], template: "<section class=\"ac ac--expanded\" [class.ac--full]=\"fullWidth()\">\r\n <ac-card-header\r\n variant=\"inline\"\r\n [title]=\"config().title\"\r\n [badge]=\"config().badge\"\r\n [actions]=\"config().actions\"\r\n [sticky]=\"stickyHeader()\"\r\n [badgeClass]=\"badgeClass()\"\r\n (actionClick)=\"onAction($event)\"\r\n (close)=\"close.emit()\"\r\n />\r\n\r\n <div class=\"acx__body\">\r\n <ac-advanced-card-content\r\n [viewModel]=\"viewModel()\"\r\n [badgeClass]=\"badgeClass()\"\r\n (tabSelected)=\"tabSelected.emit($event)\"\r\n (tabAction)=\"tabAction.emit($event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-content>\r\n </div>\r\n</section>\r\n", styles: [":host{display:block}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"] }]
|
|
183
191
|
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], badgeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeClass", required: true }] }], viewModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModel", required: true }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], close: [{ type: i0.Output, args: ["close"] }], tabSelected: [{ type: i0.Output, args: ["tabSelected"] }], tabAction: [{ type: i0.Output, args: ["tabAction"] }] } });
|
|
184
192
|
|
|
185
193
|
class AdvancedCard {
|
|
@@ -237,6 +245,7 @@ class AdvancedCard {
|
|
|
237
245
|
activeTabId: this.activeTabId(),
|
|
238
246
|
activeTab: this.activeTab(),
|
|
239
247
|
templateRef: this.activeTemplateRef(),
|
|
248
|
+
layout: this.config().contentLayout ?? 'stacked',
|
|
240
249
|
}), ...(ngDevMode ? [{ debugName: "contentVm" }] : []));
|
|
241
250
|
// Effects
|
|
242
251
|
notifyExpandenChangesEffect = effect(() => {
|
|
@@ -319,13 +328,13 @@ class AdvancedCard {
|
|
|
319
328
|
this.collapse();
|
|
320
329
|
}
|
|
321
330
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdvancedCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
322
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdvancedCard, isStandalone: true, selector: "advanced-card", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, fullWidthOnExpand: { classPropertyName: "fullWidthOnExpand", publicName: "fullWidthOnExpand", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange", action: "action", tabChanged: "tabChanged", tabAction: "tabAction" }, host: { listeners: { "document:keydown": "onKeydown($event)" }, properties: { "class": "hostClass()" } }, queries: [{ propertyName: "projectedTemplates", predicate: AdvancedCardTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ac__card\">\r\n <lib-card-compact\r\n [configuration]=\"config()\"\r\n [expanded]=\"expanded()\"\r\n [badgeClass]=\"badgeClass.bind(this)\"\r\n (expand)=\"expand()\"\r\n />\r\n\r\n @let mode = expandMode();\r\n\r\n @if (expanded()) {\r\n @if (mode === 'inline') {\r\n <ac-advanced-card-inline\r\n [config]=\"config()\"\r\n [stickyHeader]=\"stickyHeader()\"\r\n [fullWidth]=\"fullWidthOnExpand()\"\r\n [badgeClass]=\"badgeClass.bind(this)\"\r\n [viewModel]=\"contentVm()\"\r\n (actionClick)=\"onActionClick($event)\"\r\n (close)=\"collapse()\"\r\n (tabSelected)=\"selectTab($event)\"\r\n (tabAction)=\"onTabActionClick(activeTab()!, $event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-inline>\r\n } @else {\r\n <ac-advanced-card-overlay\r\n [config]=\"config()\"\r\n [mode]=\"mode === 'modal' ? 'modal' : 'drawer'\"\r\n [closeOnBackdrop]=\"closeOnBackdrop()\"\r\n [badgeClass]=\"badgeClass.bind(this)\"\r\n [viewModel]=\"contentVm()\"\r\n (actionClick)=\"onActionClick($event)\"\r\n (close)=\"collapse()\"\r\n (tabSelected)=\"selectTab($event)\"\r\n (tabAction)=\"onTabActionClick(activeTab()!, $event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-overlay>\r\n }\r\n }\r\n</div>\r\n\r\n<div class=\"ac__projected-templates\" aria-hidden=\"true\">\r\n <ng-content select=\"ng-template[advancedCardTemplate]\"></ng-content>\r\n</div>\r\n", styles: [":host.ac-host{--ac-surface: #ffffff;--ac-surface-2: #fafafa;--ac-border: #e5e7eb;--ac-border-soft: #eef2f7;--ac-shadow: 0 8px 22px rgba(17, 24, 39, .06);--ac-text: #111827;--ac-muted: #6b7280;--ac-radius: 14px;--ac-radius-sm: 10px;--ac-gap: 16px;--ac-title-size: 18px;--ac-subtitle-size: 13px;--ac-pad-card: 16px;--ac-pad-header: 14px 18px;--ac-pad-body: 18px;--ac-btn-radius: 10px;--ac-btn-pad: 8px 12px;--ac-btn-font: 700;--ac-primary: #1d4ed8;--ac-danger: #dc2626;--ac-badge-success-bg: #e6f9f1;--ac-badge-success-fg: #0f766e;--ac-badge-warning-bg: #fff7ed;--ac-badge-warning-fg: #b45309;--ac-badge-danger-bg: #fef2f2;--ac-badge-danger-fg: #b91c1c;--ac-badge-primary-bg: #eff6ff;--ac-badge-primary-fg: #1d4ed8;--ac-badge-neutral-bg: #f3f4f6;--ac-badge-neutral-fg: #374151;--ac-overlay: rgba(17, 24, 39, .45);--ac-overlay-blur: 2px;--ac-modal-max: 1200px;--ac-drawer-height: min(85vh, 900px);--ac-modal-height: min(80vh, 880px)}:host.ac-density--compact{--ac-gap: 12px;--ac-pad-card: 12px;--ac-pad-header: 12px 14px;--ac-pad-body: 14px;--ac-subtitle-size: 12px;--ac-btn-pad: 7px 10px}:host.ac-size--sm{--ac-title-size: 16px;--ac-radius: 12px;--ac-modal-max: 1000px}:host.ac-size--lg{--ac-title-size: 20px;--ac-radius: 16px;--ac-modal-max: 1400px}.ac__card{padding:10px;gap:10px}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.acx__summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:15px}.block{border:1px solid var(--ac-border-soft);border-radius:5px;padding:12px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{font-weight:800;color:var(--ac-text);margin-bottom:8px;font-size:13px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}\n"], dependencies: [{ kind: "component", type: CardCompactComponent, selector: "lib-card-compact", inputs: ["configuration", "expanded", "badgeClass"], outputs: ["expand"] }, { kind: "component", type: AdvancedCardOverlayComponent, selector: "ac-advanced-card-overlay", inputs: ["config", "mode", "closeOnBackdrop", "badgeClass", "viewModel"], outputs: ["actionClick", "close", "tabSelected", "tabAction"] }, { kind: "component", type: AdvancedCardInlineComponent, selector: "ac-advanced-card-inline", inputs: ["config", "stickyHeader", "fullWidth", "badgeClass", "viewModel"], outputs: ["actionClick", "close", "tabSelected", "tabAction"] }] });
|
|
331
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdvancedCard, isStandalone: true, selector: "advanced-card", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, fullWidthOnExpand: { classPropertyName: "fullWidthOnExpand", publicName: "fullWidthOnExpand", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange", action: "action", tabChanged: "tabChanged", tabAction: "tabAction" }, host: { listeners: { "document:keydown": "onKeydown($event)" }, properties: { "class": "hostClass()" } }, queries: [{ propertyName: "projectedTemplates", predicate: AdvancedCardTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ac__card\">\r\n <lib-card-compact\r\n [configuration]=\"config()\"\r\n [expanded]=\"expanded()\"\r\n [badgeClass]=\"badgeClass.bind(this)\"\r\n (expand)=\"expand()\"\r\n />\r\n\r\n @let mode = expandMode();\r\n\r\n @if (expanded()) {\r\n @if (mode === 'inline') {\r\n <ac-advanced-card-inline\r\n [config]=\"config()\"\r\n [stickyHeader]=\"stickyHeader()\"\r\n [fullWidth]=\"fullWidthOnExpand()\"\r\n [badgeClass]=\"badgeClass.bind(this)\"\r\n [viewModel]=\"contentVm()\"\r\n (actionClick)=\"onActionClick($event)\"\r\n (close)=\"collapse()\"\r\n (tabSelected)=\"selectTab($event)\"\r\n (tabAction)=\"onTabActionClick(activeTab()!, $event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-inline>\r\n } @else {\r\n <ac-advanced-card-overlay\r\n [config]=\"config()\"\r\n [mode]=\"mode === 'modal' ? 'modal' : 'drawer'\"\r\n [closeOnBackdrop]=\"closeOnBackdrop()\"\r\n [badgeClass]=\"badgeClass.bind(this)\"\r\n [viewModel]=\"contentVm()\"\r\n (actionClick)=\"onActionClick($event)\"\r\n (close)=\"collapse()\"\r\n (tabSelected)=\"selectTab($event)\"\r\n (tabAction)=\"onTabActionClick(activeTab()!, $event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-overlay>\r\n }\r\n }\r\n</div>\r\n\r\n<div class=\"ac__projected-templates\" aria-hidden=\"true\">\r\n <ng-content select=\"ng-template[advancedCardTemplate]\"></ng-content>\r\n</div>\r\n", styles: [":host.ac-host{--ac-surface: #ffffff;--ac-surface-2: #fafafa;--ac-border: #e5e7eb;--ac-border-soft: #eef2f7;--ac-border-block: #f6f6f6;--ac-shadow: 0 8px 22px rgba(17, 24, 39, .06);--ac-text: #111827;--ac-muted: #6b7280;--ac-radius: 14px;--ac-radius-sm: 10px;--ac-gap: 16px;--ac-title-size: 18px;--ac-subtitle-size: 13px;--ac-pad-card: 16px;--ac-pad-header: 14px 18px;--ac-pad-body: 18px;--ac-btn-radius: 10px;--ac-btn-pad: 8px 12px;--ac-btn-font: 700;--ac-primary: #1d4ed8;--ac-danger: #dc2626;--ac-badge-success-bg: #e6f9f1;--ac-badge-success-fg: #0f766e;--ac-badge-warning-bg: #fff7ed;--ac-badge-warning-fg: #b45309;--ac-badge-danger-bg: #fef2f2;--ac-badge-danger-fg: #b91c1c;--ac-badge-primary-bg: #eff6ff;--ac-badge-primary-fg: #1d4ed8;--ac-badge-neutral-bg: #f3f4f6;--ac-badge-neutral-fg: #374151;--ac-overlay: rgba(17, 24, 39, .45);--ac-overlay-blur: 2px;--ac-modal-max: 1200px;--ac-drawer-height: min(85vh, 900px);--ac-modal-height: min(80vh, 880px)}:host.ac-density--compact{--ac-gap: 12px;--ac-pad-card: 12px;--ac-pad-header: 12px 14px;--ac-pad-body: 14px;--ac-subtitle-size: 12px;--ac-btn-pad: 7px 10px}:host.ac-size--sm{--ac-title-size: 16px;--ac-radius: 12px;--ac-modal-max: 1000px}:host.ac-size--lg{--ac-title-size: 20px;--ac-radius: 16px;--ac-modal-max: 1400px}.ac__card{padding:10px;gap:10px}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"], dependencies: [{ kind: "component", type: CardCompactComponent, selector: "lib-card-compact", inputs: ["configuration", "expanded", "badgeClass"], outputs: ["expand"] }, { kind: "component", type: AdvancedCardOverlayComponent, selector: "ac-advanced-card-overlay", inputs: ["config", "mode", "closeOnBackdrop", "badgeClass", "viewModel"], outputs: ["actionClick", "close", "tabSelected", "tabAction"] }, { kind: "component", type: AdvancedCardInlineComponent, selector: "ac-advanced-card-inline", inputs: ["config", "stickyHeader", "fullWidth", "badgeClass", "viewModel"], outputs: ["actionClick", "close", "tabSelected", "tabAction"] }] });
|
|
323
332
|
}
|
|
324
333
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdvancedCard, decorators: [{
|
|
325
334
|
type: Component,
|
|
326
335
|
args: [{ selector: 'advanced-card', imports: [CardCompactComponent, AdvancedCardOverlayComponent, AdvancedCardInlineComponent], host: {
|
|
327
336
|
'[class]': 'hostClass()',
|
|
328
|
-
}, template: "<div class=\"ac__card\">\r\n <lib-card-compact\r\n [configuration]=\"config()\"\r\n [expanded]=\"expanded()\"\r\n [badgeClass]=\"badgeClass.bind(this)\"\r\n (expand)=\"expand()\"\r\n />\r\n\r\n @let mode = expandMode();\r\n\r\n @if (expanded()) {\r\n @if (mode === 'inline') {\r\n <ac-advanced-card-inline\r\n [config]=\"config()\"\r\n [stickyHeader]=\"stickyHeader()\"\r\n [fullWidth]=\"fullWidthOnExpand()\"\r\n [badgeClass]=\"badgeClass.bind(this)\"\r\n [viewModel]=\"contentVm()\"\r\n (actionClick)=\"onActionClick($event)\"\r\n (close)=\"collapse()\"\r\n (tabSelected)=\"selectTab($event)\"\r\n (tabAction)=\"onTabActionClick(activeTab()!, $event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-inline>\r\n } @else {\r\n <ac-advanced-card-overlay\r\n [config]=\"config()\"\r\n [mode]=\"mode === 'modal' ? 'modal' : 'drawer'\"\r\n [closeOnBackdrop]=\"closeOnBackdrop()\"\r\n [badgeClass]=\"badgeClass.bind(this)\"\r\n [viewModel]=\"contentVm()\"\r\n (actionClick)=\"onActionClick($event)\"\r\n (close)=\"collapse()\"\r\n (tabSelected)=\"selectTab($event)\"\r\n (tabAction)=\"onTabActionClick(activeTab()!, $event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-overlay>\r\n }\r\n }\r\n</div>\r\n\r\n<div class=\"ac__projected-templates\" aria-hidden=\"true\">\r\n <ng-content select=\"ng-template[advancedCardTemplate]\"></ng-content>\r\n</div>\r\n", styles: [":host.ac-host{--ac-surface: #ffffff;--ac-surface-2: #fafafa;--ac-border: #e5e7eb;--ac-border-soft: #eef2f7;--ac-shadow: 0 8px 22px rgba(17, 24, 39, .06);--ac-text: #111827;--ac-muted: #6b7280;--ac-radius: 14px;--ac-radius-sm: 10px;--ac-gap: 16px;--ac-title-size: 18px;--ac-subtitle-size: 13px;--ac-pad-card: 16px;--ac-pad-header: 14px 18px;--ac-pad-body: 18px;--ac-btn-radius: 10px;--ac-btn-pad: 8px 12px;--ac-btn-font: 700;--ac-primary: #1d4ed8;--ac-danger: #dc2626;--ac-badge-success-bg: #e6f9f1;--ac-badge-success-fg: #0f766e;--ac-badge-warning-bg: #fff7ed;--ac-badge-warning-fg: #b45309;--ac-badge-danger-bg: #fef2f2;--ac-badge-danger-fg: #b91c1c;--ac-badge-primary-bg: #eff6ff;--ac-badge-primary-fg: #1d4ed8;--ac-badge-neutral-bg: #f3f4f6;--ac-badge-neutral-fg: #374151;--ac-overlay: rgba(17, 24, 39, .45);--ac-overlay-blur: 2px;--ac-modal-max: 1200px;--ac-drawer-height: min(85vh, 900px);--ac-modal-height: min(80vh, 880px)}:host.ac-density--compact{--ac-gap: 12px;--ac-pad-card: 12px;--ac-pad-header: 12px 14px;--ac-pad-body: 14px;--ac-subtitle-size: 12px;--ac-btn-pad: 7px 10px}:host.ac-size--sm{--ac-title-size: 16px;--ac-radius: 12px;--ac-modal-max: 1000px}:host.ac-size--lg{--ac-title-size: 20px;--ac-radius: 16px;--ac-modal-max: 1400px}.ac__card{padding:10px;gap:10px}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.
|
|
337
|
+
}, template: "<div class=\"ac__card\">\r\n <lib-card-compact\r\n [configuration]=\"config()\"\r\n [expanded]=\"expanded()\"\r\n [badgeClass]=\"badgeClass.bind(this)\"\r\n (expand)=\"expand()\"\r\n />\r\n\r\n @let mode = expandMode();\r\n\r\n @if (expanded()) {\r\n @if (mode === 'inline') {\r\n <ac-advanced-card-inline\r\n [config]=\"config()\"\r\n [stickyHeader]=\"stickyHeader()\"\r\n [fullWidth]=\"fullWidthOnExpand()\"\r\n [badgeClass]=\"badgeClass.bind(this)\"\r\n [viewModel]=\"contentVm()\"\r\n (actionClick)=\"onActionClick($event)\"\r\n (close)=\"collapse()\"\r\n (tabSelected)=\"selectTab($event)\"\r\n (tabAction)=\"onTabActionClick(activeTab()!, $event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-inline>\r\n } @else {\r\n <ac-advanced-card-overlay\r\n [config]=\"config()\"\r\n [mode]=\"mode === 'modal' ? 'modal' : 'drawer'\"\r\n [closeOnBackdrop]=\"closeOnBackdrop()\"\r\n [badgeClass]=\"badgeClass.bind(this)\"\r\n [viewModel]=\"contentVm()\"\r\n (actionClick)=\"onActionClick($event)\"\r\n (close)=\"collapse()\"\r\n (tabSelected)=\"selectTab($event)\"\r\n (tabAction)=\"onTabActionClick(activeTab()!, $event)\"\r\n >\r\n <ng-content></ng-content>\r\n </ac-advanced-card-overlay>\r\n }\r\n }\r\n</div>\r\n\r\n<div class=\"ac__projected-templates\" aria-hidden=\"true\">\r\n <ng-content select=\"ng-template[advancedCardTemplate]\"></ng-content>\r\n</div>\r\n", styles: [":host.ac-host{--ac-surface: #ffffff;--ac-surface-2: #fafafa;--ac-border: #e5e7eb;--ac-border-soft: #eef2f7;--ac-border-block: #f6f6f6;--ac-shadow: 0 8px 22px rgba(17, 24, 39, .06);--ac-text: #111827;--ac-muted: #6b7280;--ac-radius: 14px;--ac-radius-sm: 10px;--ac-gap: 16px;--ac-title-size: 18px;--ac-subtitle-size: 13px;--ac-pad-card: 16px;--ac-pad-header: 14px 18px;--ac-pad-body: 18px;--ac-btn-radius: 10px;--ac-btn-pad: 8px 12px;--ac-btn-font: 700;--ac-primary: #1d4ed8;--ac-danger: #dc2626;--ac-badge-success-bg: #e6f9f1;--ac-badge-success-fg: #0f766e;--ac-badge-warning-bg: #fff7ed;--ac-badge-warning-fg: #b45309;--ac-badge-danger-bg: #fef2f2;--ac-badge-danger-fg: #b91c1c;--ac-badge-primary-bg: #eff6ff;--ac-badge-primary-fg: #1d4ed8;--ac-badge-neutral-bg: #f3f4f6;--ac-badge-neutral-fg: #374151;--ac-overlay: rgba(17, 24, 39, .45);--ac-overlay-blur: 2px;--ac-modal-max: 1200px;--ac-drawer-height: min(85vh, 900px);--ac-modal-height: min(80vh, 880px)}:host.ac-density--compact{--ac-gap: 12px;--ac-pad-card: 12px;--ac-pad-header: 12px 14px;--ac-pad-body: 14px;--ac-subtitle-size: 12px;--ac-btn-pad: 7px 10px}:host.ac-size--sm{--ac-title-size: 16px;--ac-radius: 12px;--ac-modal-max: 1000px}:host.ac-size--lg{--ac-title-size: 20px;--ac-radius: 16px;--ac-modal-max: 1400px}.ac__card{padding:10px;gap:10px}\n", ":host{display:block}.ac{border:1px solid var(--ac-border);border-radius:var(--ac-radius-sm);background:var(--ac-surface);box-shadow:var(--ac-shadow)}.ac--hidden{display:none}.ac--compact{padding:var(--ac-pad-card);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-right:1px solid var(--ac-primary)}.ac--compact:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1118271f;border-right:2px solid var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #eaeaea}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.ac__subtitle{margin:4px 0 0;font-size:var(--ac-subtitle-size);color:var(--ac-muted)}.ac__highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ac__hl{border-right:1px solid #eaeaea;padding:0 10px;box-sizing:border-box}.ac__hl:nth-child(3n){border-right:none}.ac__hl-value{font-weight:900;font-size:calc(var(--ac-title-size) - 0px);color:var(--ac-text)}.ac__hl-label{font-size:12px;color:var(--ac-muted)}.ac__hl-hint{color:#9ca3af}.ac__footer{margin-top:14px;display:flex;justify-content:flex-end}.ac--expanded{margin-top:16px}.ac--full{width:100%}.acx__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface)}.acx__header--sticky{position:sticky;top:0;z-index:10}.acx__title{display:flex;align-items:center;gap:10px}.acx__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.acx__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.acx__body{padding:var(--ac-pad-body);display:grid;gap:var(--ac-gap)}.ac-content{display:flex;flex-direction:column;gap:16px}.ac-content--inline{flex-direction:row;align-items:flex-start}.ac-content__summary{flex:0 0 320px}.ac-content--inline .ac-content__main{flex:1}.acx__summary{display:grid;gap:14px;padding-bottom:15px;width:100%}.summary{flex:1}.block{border:1px solid var(--ac-border-soft);border-radius:5px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:800;color:var(--ac-text);font-size:13px;padding:12px}.block__row{display:flex;justify-content:space-between;gap:10px;padding:4px 12px;border:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px}.block__value{color:var(--ac-text);font-size:12px;font-weight:800}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:5px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:center;gap:6px;padding:8px;background:var(--ac-surface-2);border-bottom:1px solid var(--ac-border-soft)}.tab{padding:10px 14px;border-radius:5px;border:1px solid transparent;background:transparent;font-weight:800;cursor:pointer;color:var(--ac-badge-neutral-fg);display:inline-flex;align-items:center;gap:8px;height:100%}.tab:hover{background:#f3f4f6}.tab--active{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text);box-shadow:0 6px 18px #11182714}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.5}.empty{border:1px dashed #d1d5db;border-radius:var(--ac-radius);padding:16px;color:var(--ac-muted);text-align:center;background:#fcfcfc}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text)}.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}.btn--secondary{background:var(--ac-surface);border-color:#d1d5db}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:13px}.icon-btn{width:36px;height:36px;border-radius:var(--ac-btn-radius);border:1px solid var(--ac-border);background:var(--ac-surface);cursor:pointer;font-weight:900;padding:6px 4px;color:#000}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px)}.badge{font-size:12px;padding:4px 10px;border-radius:5px;font-weight:800;margin:auto 0}.badge--success{background:var(--ac-badge-success-bg);color:var(--ac-badge-success-fg)}.badge--warning{background:var(--ac-badge-warning-bg);color:var(--ac-badge-warning-fg)}.badge--danger{background:var(--ac-badge-danger-bg);color:var(--ac-badge-danger-fg)}.badge--primary{background:var(--ac-badge-primary-bg);color:var(--ac-badge-primary-fg)}.badge--neutral{background:var(--ac-badge-neutral-bg);color:var(--ac-badge-neutral-fg)}.overlay{position:fixed;inset:0;background:var(--ac-overlay);-webkit-backdrop-filter:blur(var(--ac-overlay-blur));backdrop-filter:blur(var(--ac-overlay-blur));z-index:999;display:flex;align-items:flex-end;justify-content:center;padding:16px}.panel{width:100%;max-width:var(--ac-modal-max);background:var(--ac-surface);border-radius:var(--ac-radius);border:1px solid var(--ac-border);box-shadow:0 20px 60px #00000040;overflow:hidden}.panel--drawer{border-bottom-left-radius:0;border-bottom-right-radius:0;height:var(--ac-drawer-height)}.panel--modal{height:var(--ac-modal-height)}.overlay.modal-center{align-items:center}.panel__header{display:flex;justify-content:space-between;gap:12px;padding:var(--ac-pad-header);border-bottom:1px solid var(--ac-border-soft);background:var(--ac-surface);position:sticky;top:0;z-index:10}.panel__title{display:flex;align-items:center;gap:10px}.panel__title-text{margin:0;font-size:var(--ac-title-size);font-weight:900;color:var(--ac-text)}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;height:calc(100% - 64px)}.ac__projected-templates{display:none}@media(max-width:1100px){.acx__summary,.ac__highlights{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.ac__highlights{grid-template-columns:1fr}}.panel__body::-webkit-scrollbar{width:8px;height:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#00000059;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#00000080}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}\n"] }]
|
|
329
338
|
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], fullWidthOnExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidthOnExpand", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], closeOnEsc: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEsc", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], action: [{ type: i0.Output, args: ["action"] }], tabChanged: [{ type: i0.Output, args: ["tabChanged"] }], tabAction: [{ type: i0.Output, args: ["tabAction"] }], projectedTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AdvancedCardTemplateDirective), { ...{
|
|
330
339
|
descendants: true,
|
|
331
340
|
}, isSignal: true }] }], onKeydown: [{
|