b2b-tools 0.2.3 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/b2b-tools.mjs +24 -24
- package/fesm2022/b2b-tools.mjs.map +1 -1
- package/package.json +1 -1
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.2.11", ngImport: i0, type: CardCompactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] });
|
|
33
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] });
|
|
34
34
|
}
|
|
35
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", 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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\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,11 +55,11 @@ class CardHeaderComponent {
|
|
|
55
55
|
this.close.emit();
|
|
56
56
|
}
|
|
57
57
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
58
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] });
|
|
58
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] });
|
|
59
59
|
}
|
|
60
60
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", 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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\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 {
|
|
@@ -129,11 +129,11 @@ class CardSummaryComponent {
|
|
|
129
129
|
return `repeat(${Math.min(this.numBlocks(), this.columnMax)}, 1fr)`;
|
|
130
130
|
}, ...(ngDevMode ? [{ debugName: "templateStyle" }] : /* istanbul ignore next */ []));
|
|
131
131
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CardSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
132
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 }, collapsibleVertical: { classPropertyName: "collapsibleVertical", publicName: "collapsibleVertical", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (numBlocks() > 0) {\n @let list = blocks();\n\n @if (isHorizontalAccordion()) {\n\n <!-- \u2500\u2500\u2500 HORIZONTAL ACCORDION (stacked, 2+ blocks) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"acx__hacc\">\n @for (block of list; track block.title) {\n <div class=\"hacc__item\" [class.hacc__item--active]=\"isActiveBlock(block.title)\">\n\n <button\n class=\"hacc__trigger\"\n (click)=\"selectBlock(block.title)\"\n type=\"button\"\n [attr.aria-expanded]=\"isActiveBlock(block.title)\"\n [attr.aria-label]=\"block.title\"\n >\n <span class=\"hacc__trigger-text\">{{ block.title }}</span>\n </button>\n\n <div class=\"hacc__content\">\n <div class=\"hacc__rows\">\n @for (row of block.rows; track row.label) {\n <div class=\"block__row\">\n <span class=\"block__label\">\n @if (row.icon) { <span class=\"block__row-icon\">{{ row.icon }}</span> }\n {{ row.label }}\n </span>\n @switch (row.kind) {\n @case ('badge') {\n <span [class]=\"rowBadgeClass(row.tone)\">{{ row.value }}</span>\n }\n @case ('number') {\n <span class=\"block__value block__value--number\">{{ row.value }}</span>\n }\n @case ('date') {\n <span class=\"block__value block__value--date\">{{ row.value }}</span>\n }\n @default {\n <span class=\"block__value\">{{ row.value }}</span>\n }\n }\n </div>\n }\n </div>\n </div>\n\n </div>\n }\n </div>\n\n } @else {\n\n <!-- \u2500\u2500\u2500 GRID MODE (single block or inline sidebar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (showToggle()) {\n <button\n class=\"summary__toggle\"\n [class.summary__toggle--collapsed]=\"isStackedCollapsed()\"\n (click)=\"toggleStacked()\"\n type=\"button\"\n >\n <span class=\"summary__toggle-icon\">›</span>\n Summary\n </button>\n }\n\n <div\n class=\"acx__summary\"\n [class.acx__summary--single]=\"isSingle()\"\n [class.acx__summary--collapsed]=\"isStackedCollapsed()\"\n [class.scrollbar-y]=\"isAccordion()\"\n [style.grid-template-columns]=\"templateStyle()\"\n >\n @for (block of list; track block.title) {\n <div class=\"block\" [class.block--single]=\"isSingle()\">\n <button\n class=\"block__title\"\n [class.block__title--accordion]=\"isAccordion()\"\n [class.block__title--open]=\"isAccordion() && isOpen(block.title)\"\n (click)=\"isAccordion() && toggleBlock(block.title)\"\n type=\"button\"\n >\n {{ block.title }}\n @if (isAccordion()) {\n <span class=\"block__chevron\">›</span>\n }\n </button>\n\n <div class=\"block__rows\" [class.block__rows--hidden]=\"isAccordion() && !isOpen(block.title)\">\n @for (row of block.rows; track row.label) {\n <div class=\"block__row\">\n <span class=\"block__label\">\n @if (row.icon) { <span class=\"block__row-icon\">{{ row.icon }}</span> }\n {{ row.label }}\n </span>\n @switch (row.kind) {\n @case ('badge') {\n <span [class]=\"rowBadgeClass(row.tone)\">{{ row.value }}</span>\n }\n @case ('number') {\n <span class=\"block__value block__value--number\">{{ row.value }}</span>\n }\n @case ('date') {\n <span class=\"block__value block__value--date\">{{ row.value }}</span>\n }\n @default {\n <span class=\"block__value\">{{ row.value }}</span>\n }\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n }\n}\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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] });
|
|
132
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 }, collapsibleVertical: { classPropertyName: "collapsibleVertical", publicName: "collapsibleVertical", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (numBlocks() > 0) {\n @let list = blocks();\n\n @if (isHorizontalAccordion()) {\n\n <!-- \u2500\u2500\u2500 HORIZONTAL ACCORDION (stacked, 2+ blocks) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"acx__hacc\">\n @for (block of list; track block.title) {\n <div class=\"hacc__item\" [class.hacc__item--active]=\"isActiveBlock(block.title)\">\n\n <button\n class=\"hacc__trigger\"\n (click)=\"selectBlock(block.title)\"\n type=\"button\"\n [attr.aria-expanded]=\"isActiveBlock(block.title)\"\n [attr.aria-label]=\"block.title\"\n >\n <span class=\"hacc__trigger-text\">{{ block.title }}</span>\n </button>\n\n <div class=\"hacc__content\">\n <div class=\"hacc__rows\">\n @for (row of block.rows; track row.label) {\n <div class=\"block__row\">\n <span class=\"block__label\">\n @if (row.icon) { <span class=\"block__row-icon\">{{ row.icon }}</span> }\n {{ row.label }}\n </span>\n @switch (row.kind) {\n @case ('badge') {\n <span [class]=\"rowBadgeClass(row.tone)\">{{ row.value }}</span>\n }\n @case ('number') {\n <span class=\"block__value block__value--number\">{{ row.value }}</span>\n }\n @case ('date') {\n <span class=\"block__value block__value--date\">{{ row.value }}</span>\n }\n @default {\n <span class=\"block__value\">{{ row.value }}</span>\n }\n }\n </div>\n }\n </div>\n </div>\n\n </div>\n }\n </div>\n\n } @else {\n\n <!-- \u2500\u2500\u2500 GRID MODE (single block or inline sidebar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (showToggle()) {\n <button\n class=\"summary__toggle\"\n [class.summary__toggle--collapsed]=\"isStackedCollapsed()\"\n (click)=\"toggleStacked()\"\n type=\"button\"\n >\n <span class=\"summary__toggle-icon\">›</span>\n Summary\n </button>\n }\n\n <div\n class=\"acx__summary\"\n [class.acx__summary--single]=\"isSingle()\"\n [class.acx__summary--collapsed]=\"isStackedCollapsed()\"\n [class.scrollbar-y]=\"isAccordion()\"\n [style.grid-template-columns]=\"templateStyle()\"\n >\n @for (block of list; track block.title) {\n <div class=\"block\" [class.block--single]=\"isSingle()\">\n <button\n class=\"block__title\"\n [class.block__title--accordion]=\"isAccordion()\"\n [class.block__title--open]=\"isAccordion() && isOpen(block.title)\"\n (click)=\"isAccordion() && toggleBlock(block.title)\"\n type=\"button\"\n >\n {{ block.title }}\n @if (isAccordion()) {\n <span class=\"block__chevron\">›</span>\n }\n </button>\n\n <div class=\"block__rows\" [class.block__rows--hidden]=\"isAccordion() && !isOpen(block.title)\">\n @for (row of block.rows; track row.label) {\n <div class=\"block__row\">\n <span class=\"block__label\">\n @if (row.icon) { <span class=\"block__row-icon\">{{ row.icon }}</span> }\n {{ row.label }}\n </span>\n @switch (row.kind) {\n @case ('badge') {\n <span [class]=\"rowBadgeClass(row.tone)\">{{ row.value }}</span>\n }\n @case ('number') {\n <span class=\"block__value block__value--number\">{{ row.value }}</span>\n }\n @case ('date') {\n <span class=\"block__value block__value--date\">{{ row.value }}</span>\n }\n @default {\n <span class=\"block__value\">{{ row.value }}</span>\n }\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n }\n}\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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] });
|
|
133
133
|
}
|
|
134
134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CardSummaryComponent, decorators: [{
|
|
135
135
|
type: Component,
|
|
136
|
-
args: [{ selector: 'ac-card-summary', imports: [], template: "@if (numBlocks() > 0) {\n @let list = blocks();\n\n @if (isHorizontalAccordion()) {\n\n <!-- \u2500\u2500\u2500 HORIZONTAL ACCORDION (stacked, 2+ blocks) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"acx__hacc\">\n @for (block of list; track block.title) {\n <div class=\"hacc__item\" [class.hacc__item--active]=\"isActiveBlock(block.title)\">\n\n <button\n class=\"hacc__trigger\"\n (click)=\"selectBlock(block.title)\"\n type=\"button\"\n [attr.aria-expanded]=\"isActiveBlock(block.title)\"\n [attr.aria-label]=\"block.title\"\n >\n <span class=\"hacc__trigger-text\">{{ block.title }}</span>\n </button>\n\n <div class=\"hacc__content\">\n <div class=\"hacc__rows\">\n @for (row of block.rows; track row.label) {\n <div class=\"block__row\">\n <span class=\"block__label\">\n @if (row.icon) { <span class=\"block__row-icon\">{{ row.icon }}</span> }\n {{ row.label }}\n </span>\n @switch (row.kind) {\n @case ('badge') {\n <span [class]=\"rowBadgeClass(row.tone)\">{{ row.value }}</span>\n }\n @case ('number') {\n <span class=\"block__value block__value--number\">{{ row.value }}</span>\n }\n @case ('date') {\n <span class=\"block__value block__value--date\">{{ row.value }}</span>\n }\n @default {\n <span class=\"block__value\">{{ row.value }}</span>\n }\n }\n </div>\n }\n </div>\n </div>\n\n </div>\n }\n </div>\n\n } @else {\n\n <!-- \u2500\u2500\u2500 GRID MODE (single block or inline sidebar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (showToggle()) {\n <button\n class=\"summary__toggle\"\n [class.summary__toggle--collapsed]=\"isStackedCollapsed()\"\n (click)=\"toggleStacked()\"\n type=\"button\"\n >\n <span class=\"summary__toggle-icon\">›</span>\n Summary\n </button>\n }\n\n <div\n class=\"acx__summary\"\n [class.acx__summary--single]=\"isSingle()\"\n [class.acx__summary--collapsed]=\"isStackedCollapsed()\"\n [class.scrollbar-y]=\"isAccordion()\"\n [style.grid-template-columns]=\"templateStyle()\"\n >\n @for (block of list; track block.title) {\n <div class=\"block\" [class.block--single]=\"isSingle()\">\n <button\n class=\"block__title\"\n [class.block__title--accordion]=\"isAccordion()\"\n [class.block__title--open]=\"isAccordion() && isOpen(block.title)\"\n (click)=\"isAccordion() && toggleBlock(block.title)\"\n type=\"button\"\n >\n {{ block.title }}\n @if (isAccordion()) {\n <span class=\"block__chevron\">›</span>\n }\n </button>\n\n <div class=\"block__rows\" [class.block__rows--hidden]=\"isAccordion() && !isOpen(block.title)\">\n @for (row of block.rows; track row.label) {\n <div class=\"block__row\">\n <span class=\"block__label\">\n @if (row.icon) { <span class=\"block__row-icon\">{{ row.icon }}</span> }\n {{ row.label }}\n </span>\n @switch (row.kind) {\n @case ('badge') {\n <span [class]=\"rowBadgeClass(row.tone)\">{{ row.value }}</span>\n }\n @case ('number') {\n <span class=\"block__value block__value--number\">{{ row.value }}</span>\n }\n @case ('date') {\n <span class=\"block__value block__value--date\">{{ row.value }}</span>\n }\n @default {\n <span class=\"block__value\">{{ row.value }}</span>\n }\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n }\n}\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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
136
|
+
args: [{ selector: 'ac-card-summary', imports: [], template: "@if (numBlocks() > 0) {\n @let list = blocks();\n\n @if (isHorizontalAccordion()) {\n\n <!-- \u2500\u2500\u2500 HORIZONTAL ACCORDION (stacked, 2+ blocks) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"acx__hacc\">\n @for (block of list; track block.title) {\n <div class=\"hacc__item\" [class.hacc__item--active]=\"isActiveBlock(block.title)\">\n\n <button\n class=\"hacc__trigger\"\n (click)=\"selectBlock(block.title)\"\n type=\"button\"\n [attr.aria-expanded]=\"isActiveBlock(block.title)\"\n [attr.aria-label]=\"block.title\"\n >\n <span class=\"hacc__trigger-text\">{{ block.title }}</span>\n </button>\n\n <div class=\"hacc__content\">\n <div class=\"hacc__rows\">\n @for (row of block.rows; track row.label) {\n <div class=\"block__row\">\n <span class=\"block__label\">\n @if (row.icon) { <span class=\"block__row-icon\">{{ row.icon }}</span> }\n {{ row.label }}\n </span>\n @switch (row.kind) {\n @case ('badge') {\n <span [class]=\"rowBadgeClass(row.tone)\">{{ row.value }}</span>\n }\n @case ('number') {\n <span class=\"block__value block__value--number\">{{ row.value }}</span>\n }\n @case ('date') {\n <span class=\"block__value block__value--date\">{{ row.value }}</span>\n }\n @default {\n <span class=\"block__value\">{{ row.value }}</span>\n }\n }\n </div>\n }\n </div>\n </div>\n\n </div>\n }\n </div>\n\n } @else {\n\n <!-- \u2500\u2500\u2500 GRID MODE (single block or inline sidebar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (showToggle()) {\n <button\n class=\"summary__toggle\"\n [class.summary__toggle--collapsed]=\"isStackedCollapsed()\"\n (click)=\"toggleStacked()\"\n type=\"button\"\n >\n <span class=\"summary__toggle-icon\">›</span>\n Summary\n </button>\n }\n\n <div\n class=\"acx__summary\"\n [class.acx__summary--single]=\"isSingle()\"\n [class.acx__summary--collapsed]=\"isStackedCollapsed()\"\n [class.scrollbar-y]=\"isAccordion()\"\n [style.grid-template-columns]=\"templateStyle()\"\n >\n @for (block of list; track block.title) {\n <div class=\"block\" [class.block--single]=\"isSingle()\">\n <button\n class=\"block__title\"\n [class.block__title--accordion]=\"isAccordion()\"\n [class.block__title--open]=\"isAccordion() && isOpen(block.title)\"\n (click)=\"isAccordion() && toggleBlock(block.title)\"\n type=\"button\"\n >\n {{ block.title }}\n @if (isAccordion()) {\n <span class=\"block__chevron\">›</span>\n }\n </button>\n\n <div class=\"block__rows\" [class.block__rows--hidden]=\"isAccordion() && !isOpen(block.title)\">\n @for (row of block.rows; track row.label) {\n <div class=\"block__row\">\n <span class=\"block__label\">\n @if (row.icon) { <span class=\"block__row-icon\">{{ row.icon }}</span> }\n {{ row.label }}\n </span>\n @switch (row.kind) {\n @case ('badge') {\n <span [class]=\"rowBadgeClass(row.tone)\">{{ row.value }}</span>\n }\n @case ('number') {\n <span class=\"block__value block__value--number\">{{ row.value }}</span>\n }\n @case ('date') {\n <span class=\"block__value block__value--date\">{{ row.value }}</span>\n }\n @default {\n <span class=\"block__value\">{{ row.value }}</span>\n }\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n }\n}\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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
137
137
|
}], ctorParameters: () => [], propDecorators: { blocks: [{ type: i0.Input, args: [{ isSignal: true, alias: "blocks", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], collapsibleVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsibleVertical", required: false }] }] } });
|
|
138
138
|
|
|
139
139
|
class CardTabContentComponent {
|
|
@@ -145,11 +145,11 @@ class CardTabContentComponent {
|
|
|
145
145
|
*/
|
|
146
146
|
templateRef = input(null, ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
|
|
147
147
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CardTabContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
148
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
148
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
149
149
|
}
|
|
150
150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CardTabContentComponent, decorators: [{
|
|
151
151
|
type: Component,
|
|
152
|
-
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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
152
|
+
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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
153
153
|
}], 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 }] }] } });
|
|
154
154
|
|
|
155
155
|
class CardTabsBarComponent {
|
|
@@ -173,11 +173,11 @@ class CardTabsBarComponent {
|
|
|
173
173
|
this.tabAction.emit(advancedTabAction);
|
|
174
174
|
}
|
|
175
175
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CardTabsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
176
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 <div class=\"tab\" [class.tab--active]=\"currentId === tab.id\" (click)=\"selectTab(tab.id)\">\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 </div>\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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] });
|
|
176
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 <div class=\"tab\" [class.tab--active]=\"currentId === tab.id\" (click)=\"selectTab(tab.id)\">\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 </div>\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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] });
|
|
177
177
|
}
|
|
178
178
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CardTabsBarComponent, decorators: [{
|
|
179
179
|
type: Component,
|
|
180
|
-
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 <div class=\"tab\" [class.tab--active]=\"currentId === tab.id\" (click)=\"selectTab(tab.id)\">\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 </div>\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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
180
|
+
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 <div class=\"tab\" [class.tab--active]=\"currentId === tab.id\" (click)=\"selectTab(tab.id)\">\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 </div>\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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
181
181
|
}], 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"] }] } });
|
|
182
182
|
|
|
183
183
|
class AdvancedCardContentComponent {
|
|
@@ -192,11 +192,11 @@ class AdvancedCardContentComponent {
|
|
|
192
192
|
this.tabAction.emit(a);
|
|
193
193
|
}
|
|
194
194
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AdvancedCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
195
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 ac-content__summary\">\r\n <ac-card-summary\r\n [blocks]=\"vm.summaryBlocks\"\r\n [layout]=\"vm.layout\"\r\n [collapsibleVertical]=\"vm.summaryToggle\"\r\n />\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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"], dependencies: [{ kind: "component", type: CardSummaryComponent, selector: "ac-card-summary", inputs: ["blocks", "layout", "collapsibleVertical"] }, { 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"] }] });
|
|
195
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 ac-content__summary\">\r\n <ac-card-summary\r\n [blocks]=\"vm.summaryBlocks\"\r\n [layout]=\"vm.layout\"\r\n [collapsibleVertical]=\"vm.summaryToggle\"\r\n />\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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"], dependencies: [{ kind: "component", type: CardSummaryComponent, selector: "ac-card-summary", inputs: ["blocks", "layout", "collapsibleVertical"] }, { 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"] }] });
|
|
196
196
|
}
|
|
197
197
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AdvancedCardContentComponent, decorators: [{
|
|
198
198
|
type: Component,
|
|
199
|
-
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 ac-content__summary\">\r\n <ac-card-summary\r\n [blocks]=\"vm.summaryBlocks\"\r\n [layout]=\"vm.layout\"\r\n [collapsibleVertical]=\"vm.summaryToggle\"\r\n />\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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
199
|
+
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 ac-content__summary\">\r\n <ac-card-summary\r\n [blocks]=\"vm.summaryBlocks\"\r\n [layout]=\"vm.layout\"\r\n [collapsibleVertical]=\"vm.summaryToggle\"\r\n />\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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
200
200
|
}], 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"] }] } });
|
|
201
201
|
|
|
202
202
|
class AdvancedCardOverlayComponent {
|
|
@@ -217,11 +217,11 @@ class AdvancedCardOverlayComponent {
|
|
|
217
217
|
this.actionClick.emit(a);
|
|
218
218
|
}
|
|
219
219
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AdvancedCardOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
220
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", 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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\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"] }] });
|
|
220
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", 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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\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"] }] });
|
|
221
221
|
}
|
|
222
222
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AdvancedCardOverlayComponent, decorators: [{
|
|
223
223
|
type: Component,
|
|
224
|
-
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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
224
|
+
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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
225
225
|
}], 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"] }] } });
|
|
226
226
|
|
|
227
227
|
class AdvancedCardInlineComponent {
|
|
@@ -238,11 +238,11 @@ class AdvancedCardInlineComponent {
|
|
|
238
238
|
tabSelected = output();
|
|
239
239
|
tabAction = output();
|
|
240
240
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AdvancedCardInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
241
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", 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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\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"] }] });
|
|
241
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", 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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\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"] }] });
|
|
242
242
|
}
|
|
243
243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AdvancedCardInlineComponent, decorators: [{
|
|
244
244
|
type: Component,
|
|
245
|
-
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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
245
|
+
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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
246
246
|
}], 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"] }] } });
|
|
247
247
|
|
|
248
248
|
class AdvancedCard {
|
|
@@ -384,13 +384,13 @@ class AdvancedCard {
|
|
|
384
384
|
this.collapse();
|
|
385
385
|
}
|
|
386
386
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AdvancedCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
387
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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: #f8fafc;--ac-border: #e2e8f0;--ac-border-soft: #f1f5f9;--ac-border-block: #f8fafc;--ac-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);--ac-shadow-hover: 0 4px 8px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .1);--ac-shadow-panel: 0 8px 24px rgba(15, 23, 42, .08), 0 32px 64px rgba(15, 23, 42, .12);--ac-text: #0f172a;--ac-text-secondary: #334155;--ac-muted: #64748b;--ac-radius: 16px;--ac-radius-sm: 12px;--ac-gap: 16px;--ac-title-size: 18px;--ac-subtitle-size: 13px;--ac-pad-card: 18px;--ac-pad-header: 16px 20px;--ac-pad-body: 20px;--ac-btn-radius: 8px;--ac-btn-pad: 8px 14px;--ac-btn-font: 600;--ac-primary: #2563eb;--ac-primary-soft: #eff6ff;--ac-primary-glow: rgba(37, 99, 235, .12);--ac-accent-bar: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);--ac-danger: #dc2626;--ac-badge-success-bg: #ecfdf5;--ac-badge-success-fg: #059669;--ac-badge-warning-bg: #fffbeb;--ac-badge-warning-fg: #d97706;--ac-badge-danger-bg: #fef2f2;--ac-badge-danger-fg: #dc2626;--ac-badge-primary-bg: #eff6ff;--ac-badge-primary-fg: #2563eb;--ac-badge-neutral-bg: #f1f5f9;--ac-badge-neutral-fg: #475569;--ac-tab: #a0a0a8;--ac-tab-active: #0a0a0a;--ac-overlay: rgba(15, 23, 42, .5);--ac-overlay-blur: 4px;--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: 14px;--ac-pad-header: 12px 16px;--ac-pad-body: 14px;--ac-subtitle-size: 12px;--ac-btn-pad: 6px 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: 18px;--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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\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"] }] });
|
|
387
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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: var(--b2b-surface, #ffffff);--ac-surface-2: var(--b2b-surface-2, #f8fafc);--ac-border: var(--b2b-border, #e2e8f0);--ac-border-soft: #f1f5f9;--ac-border-block: #f8fafc;--ac-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);--ac-shadow-hover: 0 4px 8px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .1);--ac-shadow-panel: 0 8px 24px rgba(15, 23, 42, .08), 0 32px 64px rgba(15, 23, 42, .12);--ac-text: var(--b2b-text, #0f172a);--ac-text-secondary: var(--b2b-text-secondary, #334155);--ac-muted: var(--b2b-muted, #64748b);--ac-radius: var(--b2b-radius, 16px);--ac-radius-sm: var(--b2b-radius-sm, 12px);--ac-gap: 16px;--ac-title-size: 18px;--ac-subtitle-size: 13px;--ac-pad-card: 18px;--ac-pad-header: 16px 20px;--ac-pad-body: 20px;--ac-btn-radius: var(--b2b-radius-sm, 8px);--ac-btn-pad: 8px 14px;--ac-btn-font: 600;--ac-primary: var(--b2b-primary, #2563eb);--ac-primary-soft: var(--b2b-primary-soft, #eff6ff);--ac-primary-glow: rgba(37, 99, 235, .12);--ac-accent-bar: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);--ac-danger: var(--b2b-danger, #dc2626);--ac-badge-success-bg: #ecfdf5;--ac-badge-success-fg: var(--b2b-success, #059669);--ac-badge-warning-bg: #fffbeb;--ac-badge-warning-fg: var(--b2b-warning, #d97706);--ac-badge-danger-bg: #fef2f2;--ac-badge-danger-fg: var(--b2b-danger, #dc2626);--ac-badge-primary-bg: var(--b2b-primary-soft, #eff6ff);--ac-badge-primary-fg: var(--b2b-primary, #2563eb);--ac-badge-neutral-bg: #f1f5f9;--ac-badge-neutral-fg: #475569;--ac-tab: #a0a0a8;--ac-tab-active: var(--b2b-text, #0a0a0a);--ac-overlay: var(--b2b-overlay, rgba(15, 23, 42, .5));--ac-overlay-blur: 4px;--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: 14px;--ac-pad-header: 12px 16px;--ac-pad-body: 14px;--ac-subtitle-size: 12px;--ac-btn-pad: 6px 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: 18px;--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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\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"] }] });
|
|
388
388
|
}
|
|
389
389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AdvancedCard, decorators: [{
|
|
390
390
|
type: Component,
|
|
391
391
|
args: [{ selector: 'advanced-card', imports: [CardCompactComponent, AdvancedCardOverlayComponent, AdvancedCardInlineComponent], host: {
|
|
392
392
|
'[class]': 'hostClass()',
|
|
393
|
-
}, 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: #f8fafc;--ac-border: #e2e8f0;--ac-border-soft: #f1f5f9;--ac-border-block: #f8fafc;--ac-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);--ac-shadow-hover: 0 4px 8px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .1);--ac-shadow-panel: 0 8px 24px rgba(15, 23, 42, .08), 0 32px 64px rgba(15, 23, 42, .12);--ac-text: #0f172a;--ac-text-secondary: #334155;--ac-muted: #64748b;--ac-radius: 16px;--ac-radius-sm: 12px;--ac-gap: 16px;--ac-title-size: 18px;--ac-subtitle-size: 13px;--ac-pad-card: 18px;--ac-pad-header: 16px 20px;--ac-pad-body: 20px;--ac-btn-radius: 8px;--ac-btn-pad: 8px 14px;--ac-btn-font: 600;--ac-primary: #2563eb;--ac-primary-soft: #eff6ff;--ac-primary-glow: rgba(37, 99, 235, .12);--ac-accent-bar: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);--ac-danger: #dc2626;--ac-badge-success-bg: #ecfdf5;--ac-badge-success-fg: #059669;--ac-badge-warning-bg: #fffbeb;--ac-badge-warning-fg: #d97706;--ac-badge-danger-bg: #fef2f2;--ac-badge-danger-fg: #dc2626;--ac-badge-primary-bg: #eff6ff;--ac-badge-primary-fg: #2563eb;--ac-badge-neutral-bg: #f1f5f9;--ac-badge-neutral-fg: #475569;--ac-tab: #a0a0a8;--ac-tab-active: #0a0a0a;--ac-overlay: rgba(15, 23, 42, .5);--ac-overlay-blur: 4px;--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: 14px;--ac-pad-header: 12px 16px;--ac-pad-body: 14px;--ac-subtitle-size: 12px;--ac-btn-pad: 6px 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: 18px;--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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb;box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:#cbd5e1;color:var(--ac-text-secondary)}.btn--secondary:hover{background:#f8fafc;border-color:#94a3b8}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,#ffffff 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
393
|
+
}, 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: var(--b2b-surface, #ffffff);--ac-surface-2: var(--b2b-surface-2, #f8fafc);--ac-border: var(--b2b-border, #e2e8f0);--ac-border-soft: #f1f5f9;--ac-border-block: #f8fafc;--ac-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);--ac-shadow-hover: 0 4px 8px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .1);--ac-shadow-panel: 0 8px 24px rgba(15, 23, 42, .08), 0 32px 64px rgba(15, 23, 42, .12);--ac-text: var(--b2b-text, #0f172a);--ac-text-secondary: var(--b2b-text-secondary, #334155);--ac-muted: var(--b2b-muted, #64748b);--ac-radius: var(--b2b-radius, 16px);--ac-radius-sm: var(--b2b-radius-sm, 12px);--ac-gap: 16px;--ac-title-size: 18px;--ac-subtitle-size: 13px;--ac-pad-card: 18px;--ac-pad-header: 16px 20px;--ac-pad-body: 20px;--ac-btn-radius: var(--b2b-radius-sm, 8px);--ac-btn-pad: 8px 14px;--ac-btn-font: 600;--ac-primary: var(--b2b-primary, #2563eb);--ac-primary-soft: var(--b2b-primary-soft, #eff6ff);--ac-primary-glow: rgba(37, 99, 235, .12);--ac-accent-bar: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);--ac-danger: var(--b2b-danger, #dc2626);--ac-badge-success-bg: #ecfdf5;--ac-badge-success-fg: var(--b2b-success, #059669);--ac-badge-warning-bg: #fffbeb;--ac-badge-warning-fg: var(--b2b-warning, #d97706);--ac-badge-danger-bg: #fef2f2;--ac-badge-danger-fg: var(--b2b-danger, #dc2626);--ac-badge-primary-bg: var(--b2b-primary-soft, #eff6ff);--ac-badge-primary-fg: var(--b2b-primary, #2563eb);--ac-badge-neutral-bg: #f1f5f9;--ac-badge-neutral-fg: #475569;--ac-tab: #a0a0a8;--ac-tab-active: var(--b2b-text, #0a0a0a);--ac-overlay: var(--b2b-overlay, rgba(15, 23, 42, .5));--ac-overlay-blur: 4px;--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: 14px;--ac-pad-header: 12px 16px;--ac-pad-body: 14px;--ac-subtitle-size: 12px;--ac-btn-pad: 6px 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: 18px;--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 .18s ease,box-shadow .18s ease,border-color .18s ease;border-left:3px solid var(--ac-primary);border-right:1px solid var(--ac-border)}.ac--compact:hover{transform:translateY(-2px);box-shadow:var(--ac-shadow-hover);border-left-color:var(--ac-primary)}.ac__header{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--ac-border-soft)}.ac__title{margin:0;font-size:var(--ac-title-size);font-weight:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;margin-top:14px}.ac__hl{background:var(--ac-surface-2);border-radius:8px;padding:10px 12px;box-sizing:border-box}.ac__hl-value{font-weight:700;font-size:calc(var(--ac-title-size) + 2px);color:var(--ac-text);letter-spacing:-.02em;line-height:1.2}.ac__hl-label{font-size:11px;color:var(--ac-muted);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}.ac__hl-hint{color:var(--ac-muted);opacity:.7}.ac__footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--ac-border-soft);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%)}.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:700;color:var(--ac-text);letter-spacing:-.01em}.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:10px;background:var(--ac-surface-2);overflow:auto;scrollbar-width:thin;max-height:250px;box-shadow:0 1px 4px #0f172a0d}.block__title{background:var(--ac-surface-2);position:sticky;top:0;z-index:10;font-weight:700;color:var(--ac-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--ac-border-soft);border-left:none;border-right:none;border-top:none;border-radius:0;font-family:inherit;width:100%;text-align:left;appearance:none;box-sizing:border-box}.block__row{display:grid;grid-template-columns:40% 60%;align-items:center;gap:0;padding:5px 12px;border-bottom:1px solid var(--ac-border-block)}.block__row:last-child{border-bottom:0}.block__label{color:var(--ac-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block__value{color:var(--ac-text-secondary);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tabs{flex:2;border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface)}.tabs__bar{display:flex;align-items:stretch;gap:0;padding:0 8px;background:var(--ac-surface);border-bottom:2px solid var(--ac-border-soft)}.tab{padding:10px 16px;border-radius:0;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;font-weight:600;font-size:13px;cursor:pointer;color:var(--ac-muted);display:inline-flex;align-items:center;gap:8px;transition:color .15s ease,border-color .15s ease,background .15s ease}.tab:hover{color:var(--ac-text);background:var(--ac-primary-soft)}.tab--active{border-bottom:2px solid var(--ac-primary);color:var(--ac-primary);background:transparent;font-weight:700}.tabs__spacer{flex:1}.tabs__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tabs__content{padding:16px}.tab-text{color:var(--ac-text);line-height:1.6;font-size:13px}.empty{border:1px dashed var(--ac-border);border-radius:10px;padding:24px;color:var(--ac-muted);font-size:13px;text-align:center;background:var(--ac-surface-2)}.btn{border-radius:var(--ac-btn-radius);padding:var(--ac-btn-pad);font-weight:var(--ac-btn-font);font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--ac-border);background:var(--ac-surface);color:var(--ac-text);transition:all .15s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn--primary{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary);box-shadow:0 1px 4px var(--ac-primary-glow)}.btn--primary:hover{box-shadow:0 4px 12px var(--ac-primary-glow);filter:brightness(1.05)}.btn--secondary{background:var(--ac-surface);border-color:var(--ac-border);color:var(--ac-text-secondary)}.btn--secondary:hover{background:var(--ac-surface-2);border-color:var(--ac-muted)}.btn--danger{background:var(--ac-danger);color:#fff;border-color:var(--ac-danger)}.btn--sm{padding:6px 10px;font-size:12px}.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:700;padding:6px 4px;color:var(--ac-text-secondary);transition:all .15s ease}.icon-btn>svg{fill:currentColor}.icon-btn:hover{transform:translateY(-1px);background:var(--ac-surface-2);border-color:#94a3b8}.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;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:var(--ac-shadow-panel);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:none;box-shadow:0 1px 0 var(--ac-border);background:linear-gradient(to bottom,var(--ac-surface) 0%,var(--ac-surface-2) 100%);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:700;color:var(--ac-text);letter-spacing:-.01em}.panel__body{padding:var(--ac-pad-body);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) 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:6px;height:6px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background-color:#0f172a33;border-radius:999px;border:2px solid transparent;background-clip:padding-box}.panel__body::-webkit-scrollbar-thumb:hover{background-color:#0f172a59}.panel__body::-webkit-scrollbar-corner{background:transparent}.scrollbar-y{overflow-y:auto}.block--single{max-height:none}.block--single .block__rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.block--single .block__row{border-right:1px solid var(--ac-border-block)}.block--single .block__row:last-child,.block--single .block__row:nth-last-child(-n+2):nth-child(odd){border-right:none}.block__rows--hidden{display:none}.block__title--accordion{cursor:pointer;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;width:100%;text-align:left;appearance:none;transition:background .15s ease}.block__title--accordion:hover{background:var(--ac-border-soft)}.block__chevron{font-size:14px;transition:transform .2s ease;display:inline-block;opacity:.5;line-height:1}.block__title--open .block__chevron{transform:rotate(90deg)}.ac-content--inline .ac-content__summary{overflow-y:auto;max-height:100%;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.acx__hacc{display:flex;flex-direction:row;height:var(--ac-hacc-height, 200px);border:1px solid var(--ac-border-soft);border-radius:10px;overflow:hidden;background:var(--ac-surface);box-shadow:0 1px 4px #0f172a0d}.hacc__item{display:flex;flex-direction:row;flex:0 0 auto;border-right:1px solid var(--ac-border-soft);transition:flex .25s cubic-bezier(.4,0,.2,1);min-width:0}.hacc__item:last-child{border-right:none}.hacc__item--active{flex:1 0 0}.hacc__trigger{width:38px;min-width:38px;background:var(--ac-surface-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 0 10px;border:none;border-right:3px solid transparent;font-family:inherit;transition:background .15s ease,border-color .15s ease;box-sizing:border-box}.hacc__trigger:hover{background:var(--ac-border-soft)}.hacc__item--active .hacc__trigger{background:var(--ac-primary-soft);border-right-color:var(--ac-primary)}.hacc__item--active .hacc__trigger:hover{background:var(--ac-primary-soft)}.hacc__trigger-text{writing-mode:vertical-lr;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.hacc__item--active .hacc__trigger-text{color:var(--ac-primary)}.hacc__content{flex:1;display:none;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.2) transparent}.hacc__item--active .hacc__content{display:flex;flex-direction:column}.hacc__rows{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;flex:1}.hacc__rows .block__row{border-right:none;border-bottom:1px solid var(--ac-border-block)}.hacc__rows .block__row:nth-child(odd){border-right:1px solid var(--ac-border-block)}.hacc__rows .block__row:last-child,.hacc__rows .block__row:nth-last-child(2):nth-child(odd){border-bottom:none}.summary__toggle{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);background:none;border:none;padding:0 0 10px;cursor:pointer;font-family:inherit;transition:color .15s ease}.summary__toggle:hover{color:var(--ac-text)}.summary__toggle-icon{font-size:14px;display:inline-block;transition:transform .2s ease;transform:rotate(90deg)}.summary__toggle--collapsed .summary__toggle-icon{transform:rotate(0)}.acx__summary--collapsed{display:none}.block__row-icon{margin-right:4px;font-size:12px;opacity:.7}.block__value--number{font-family:ui-monospace,SF Mono,Cascadia Code,monospace;font-weight:700;color:var(--ac-text);letter-spacing:-.02em}.block__value--date{color:var(--ac-muted);font-size:11px}.block__row .badge{font-size:10px;padding:2px 8px}\n"] }]
|
|
394
394
|
}], 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), { ...{
|
|
395
395
|
descendants: true,
|
|
396
396
|
}, isSignal: true }] }], onKeydown: [{
|
|
@@ -464,11 +464,11 @@ class TableModalImageComponent {
|
|
|
464
464
|
this.close.emit();
|
|
465
465
|
}
|
|
466
466
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TableModalImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
467
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: TableModalImageComponent, isStandalone: true, selector: "table-modal-image", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "@if (open()) {\r\n <div class=\"dt-modal-backdrop\" (click)=\"onClose()\">\r\n <div class=\"dt-modal\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"dt-modal-header\">\r\n <span class=\"dt-modal-title\">{{ alt() }}</span>\r\n <button type=\"button\" class=\"dt-btn\" (click)=\"onClose()\">Cerrar</button>\r\n </div>\r\n\r\n <div class=\"dt-modal-body\">\r\n <img class=\"dt-modal-img\" [src]=\"src()\" [alt]=\"alt()\" />\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".dt-modal-backdrop{position:fixed;inset:0;background
|
|
467
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: TableModalImageComponent, isStandalone: true, selector: "table-modal-image", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "@if (open()) {\r\n <div class=\"dt-modal-backdrop\" (click)=\"onClose()\">\r\n <div class=\"dt-modal\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"dt-modal-header\">\r\n <span class=\"dt-modal-title\">{{ alt() }}</span>\r\n <button type=\"button\" class=\"dt-btn\" (click)=\"onClose()\">Cerrar</button>\r\n </div>\r\n\r\n <div class=\"dt-modal-body\">\r\n <img class=\"dt-modal-img\" [src]=\"src()\" [alt]=\"alt()\" />\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".dt-modal-backdrop{position:fixed;inset:0;background:var(--b2b-overlay, rgba(0, 0, 0, .55));display:flex;justify-content:center;align-items:center;padding:18px;z-index:9999}.dt-modal{width:min(900px,95vw);max-height:90vh;background:var(--white);border-radius:var(--radius-md);border:var(--border);overflow:hidden;display:flex;flex-direction:column}.dt-modal-header{padding:12px;border-bottom:var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--gray-white)}.dt-modal-title{font-weight:600;color:var(--black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-modal-body{padding:12px;overflow:auto}.dt-modal-img{width:100%;height:auto;border-radius:var(--radius-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
468
468
|
}
|
|
469
469
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TableModalImageComponent, decorators: [{
|
|
470
470
|
type: Component,
|
|
471
|
-
args: [{ selector: 'table-modal-image', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\r\n <div class=\"dt-modal-backdrop\" (click)=\"onClose()\">\r\n <div class=\"dt-modal\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"dt-modal-header\">\r\n <span class=\"dt-modal-title\">{{ alt() }}</span>\r\n <button type=\"button\" class=\"dt-btn\" (click)=\"onClose()\">Cerrar</button>\r\n </div>\r\n\r\n <div class=\"dt-modal-body\">\r\n <img class=\"dt-modal-img\" [src]=\"src()\" [alt]=\"alt()\" />\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".dt-modal-backdrop{position:fixed;inset:0;background
|
|
471
|
+
args: [{ selector: 'table-modal-image', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\r\n <div class=\"dt-modal-backdrop\" (click)=\"onClose()\">\r\n <div class=\"dt-modal\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"dt-modal-header\">\r\n <span class=\"dt-modal-title\">{{ alt() }}</span>\r\n <button type=\"button\" class=\"dt-btn\" (click)=\"onClose()\">Cerrar</button>\r\n </div>\r\n\r\n <div class=\"dt-modal-body\">\r\n <img class=\"dt-modal-img\" [src]=\"src()\" [alt]=\"alt()\" />\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".dt-modal-backdrop{position:fixed;inset:0;background:var(--b2b-overlay, rgba(0, 0, 0, .55));display:flex;justify-content:center;align-items:center;padding:18px;z-index:9999}.dt-modal{width:min(900px,95vw);max-height:90vh;background:var(--white);border-radius:var(--radius-md);border:var(--border);overflow:hidden;display:flex;flex-direction:column}.dt-modal-header{padding:12px;border-bottom:var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--gray-white)}.dt-modal-title{font-weight:600;color:var(--black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-modal-body{padding:12px;overflow:auto}.dt-modal-img{width:100%;height:auto;border-radius:var(--radius-sm)}\n"] }]
|
|
472
472
|
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
|
|
473
473
|
|
|
474
474
|
const SVG_ICONS = {
|
|
@@ -728,11 +728,11 @@ class TableGridComponent {
|
|
|
728
728
|
return value == null ? '' : String(value);
|
|
729
729
|
}
|
|
730
730
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TableGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
731
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: TableGridComponent, isStandalone: true, selector: "table-grid", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, gridTemplateColumns: { classPropertyName: "gridTemplateColumns", publicName: "gridTemplateColumns", isSignal: true, isRequired: false, transformFunction: null }, minTableWidth: { classPropertyName: "minTableWidth", publicName: "minTableWidth", isSignal: true, isRequired: false, transformFunction: null }, columnQueries: { classPropertyName: "columnQueries", publicName: "columnQueries", isSignal: true, isRequired: false, transformFunction: null }, sortState: { classPropertyName: "sortState", publicName: "sortState", isSignal: true, isRequired: false, transformFunction: null }, selectedIdsSet: { classPropertyName: "selectedIdsSet", publicName: "selectedIdsSet", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerSort: "headerSort", columnQueryChange: "columnQueryChange", rowClick: "rowClick", toggleRow: "toggleRow", toggleAllOnPage: "toggleAllOnPage", openImage: "openImage", actionClick: "actionClick", bodyScroll: "bodyScroll" }, ngImport: i0, template: "<div class=\"dt-grid dt-xscroll\">\r\n <div [style.minWidth.px]=\"minTableWidth()\">\r\n <!-- Header -->\r\n <div class=\"dt-row dt-header\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n @if (showSelectionColumn()) {\r\n <div class=\"dt-cell dt-cell--header dt-cell--center dt-select-col\">\r\n @if ((config().selectionMode ?? 'multiple') === 'multiple') {\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelectedOnPage()\"\r\n (change)=\"onToggleAllOnPage()\"\r\n aria-label=\"Select all\"\r\n />\r\n }\r\n </div>\r\n }\r\n\r\n @for (col of columns(); track col.key) {\r\n <div\r\n class=\"dt-cell dt-cell--header\"\r\n [class.dt-cell--sortable]=\"!!col.sortable\"\r\n [attr.data-align]=\"col.align ?? 'left'\"\r\n (click)=\"onHeaderClickSort(col)\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n >\r\n <span class=\"dt-header-label\">{{ col.label }}</span>\r\n @if (col.sortable) {\r\n <span class=\"dt-sort\">{{ getSortIcon(col.key) }}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Filters row (under header) -->\r\n @if (config().columnFilters) {\r\n <div class=\"dt-row dt-filters\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n @if (showSelectionColumn()) {\r\n <div class=\"dt-cell dt-cell--filter dt-select-col\"></div>\r\n }\r\n\r\n @for (col of columns(); track col.key) {\r\n <div class=\"dt-cell dt-cell--filter\" [attr.data-align]=\"col.align ?? 'left'\">\r\n @if (col.filterable) {\r\n <input\r\n type=\"text\"\r\n [value]=\"columnQueries()[col.key] ?? null\"\r\n (input)=\"onColumnQueryInput(col.key, $any($event.target).value)\"\r\n [placeholder]=\"i18n().filter + ' ' + col.label\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Body -->\r\n <div\r\n class=\"dt-body\"\r\n [style.maxHeight.px]=\"config().scroll?.heightPx ?? null\"\r\n (scroll)=\"onBodyScroll($event)\"\r\n >\r\n @if (rows().length === 0) {\r\n <div class=\"dt-empty\">\r\n {{ config().emptyText ?? i18n().empty }}\r\n </div>\r\n } @else {\r\n @for (row of rows(); track getRowId(row)) {\r\n <div class=\"dt-row dt-data\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n @if (showSelectionColumn()) {\r\n <div class=\"dt-cell dt-cell--center dt-select-col\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isSelected(row)\"\r\n (change)=\"onToggleRow(row)\"\r\n aria-label=\"Seleccionar fila\"\r\n />\r\n </div>\r\n }\r\n\r\n @for (col of columns(); track col.key) {\r\n <div\r\n class=\"dt-cell\"\r\n [attr.data-align]=\"col.align ?? 'left'\"\r\n (click)=\"onRowClick(row)\"\r\n >\r\n @switch (col.type) {\r\n @case ('image') {\r\n @if ((col.options?.image?.hidden ?? false) === true) {\r\n <button\r\n type=\"button\"\r\n class=\"dt-link\"\r\n (click)=\"onOpenImage(getImageSrc(row, col), getImageAlt(row, col), $event)\"\r\n >\r\n {{ i18n().seeImage }}\r\n </button>\r\n } @else {\r\n <img\r\n class=\"dt-img\"\r\n [class.dt-img--full]=\"!!col.options?.image?.showFull\"\r\n [src]=\"getImageSrc(row, col)\"\r\n [alt]=\"getImageAlt(row, col)\"\r\n (click)=\"\r\n (col.options?.image?.openInModal ?? true) &&\r\n onOpenImage(getImageSrc(row, col), getImageAlt(row, col), $event)\r\n \"\r\n />\r\n }\r\n }\r\n\r\n @case ('status') {\r\n <span class=\"dt-badge\" [attr.data-variant]=\"getStatusClass(row, col)\">\r\n {{ getDisplayText(row, col) }}\r\n </span>\r\n }\r\n\r\n @case ('link') {\r\n <a\r\n class=\"dt-link\"\r\n [href]=\"getLinkHref(row, col)\"\r\n [target]=\"col.options?.link?.target ?? '_blank'\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n {{ getLinkLabel(row, col) }}\r\n </a>\r\n }\r\n\r\n @case ('actions') {\r\n <div class=\"dt-actions\">\r\n @for (action of getColumnActions(col); track action.id) {\r\n @if (isActionVisible(action, row)) {\r\n <button\r\n type=\"button\"\r\n class=\"dt-action-btn\"\r\n [class.dt-action--edit]=\"action.id === 'edit'\"\r\n [class.dt-action--delete]=\"action.id === 'delete'\"\r\n [class.dt-action--open]=\"action.id === 'open'\"\r\n [class.dt-action--copy]=\"action.id === 'copy'\"\r\n [disabled]=\"isActionDisabled(action, row)\"\r\n [title]=\"action.tooltip ?? action.label\"\r\n (click)=\"emitAction(action, row, $event)\"\r\n >\r\n @if ((action.render ?? 'icon') === 'text') {\r\n <span class=\"dt-action-text\">{{ action.label }}</span>\r\n } @else {\r\n <span class=\"dt-action-svg\" [innerHTML]=\"getActionSvg(action)\"></span>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @default {\r\n <span class=\"dt-text\" [class.dt-text--wrap]=\"col.wrap\">{{ getDisplayText(row, col) }}</span>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".dt-grid{width:100%}.dt-row{display:grid;align-items:stretch;width:100%}.dt-xscroll{overflow-x:auto;overflow-y:hidden}.dt-header{background:var(--gray-white);border-bottom:var(--border);font-weight:600;color:var(--black)}.dt-cell--header{-webkit-user-select:none;user-select:none}.dt-cell--sortable{cursor:pointer}.dt-filters{background:var(--xxs-light-gray);border-bottom:var(--border)}.dt-cell--filter{padding:8px 12px;font-size:10px}input{width:100%;padding:7px 8px;border:1px solid var(--light-gray);border-radius:var(--radius-sm);background:var(--white);color:var(--black);outline:none}input::placeholder{color:var(--xs-dark-gray);font-size:11px}input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}.dt-body{overflow-y:auto;overflow-x:hidden}@media(max-heicg:900px){.dt-body{max-height:none!important;overflow-y:visible!important;overflow-x:auto!important}}.dt-cell{padding:10px 12px;min-height:30px;border-bottom:1px solid var(--xxs-light-gray);display:flex;align-items:center;gap:8px;color:var(--black)}.dt-cell[data-align=left]{justify-content:flex-start;text-align:left}.dt-cell[data-align=center]{justify-content:center;text-align:center}.dt-cell[data-align=right]{justify-content:flex-end;text-align:right}.dt-cell--center,.dt-select-col{justify-content:center}.dt-header-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dt-sort{margin-left:auto;font-size:12px;opacity:.7;color:var(--xs-dark-gray)}.dt-data:hover{background:var(--gray)}.dt-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dt-text--wrap{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}.dt-cell:has(.dt-text--wrap){align-items:flex-start}.dt-img{width:40px;height:40px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--xs-light-gray);cursor:pointer}.dt-img--full{width:100%;height:auto}.dt-link{color:var(--blue);text-decoration:none;background:transparent;border:none;cursor:pointer;padding:0;font:inherit}.dt-link:hover{text-decoration:underline}.dt-badge{padding:4px 10px;border-radius:999px;border:1px solid var(--xs-light-gray);font-size:12px;background:var(--xxs-light-gray)}.dt-badge[data-variant=success]{background:#208b6a1f;border-color:#208b6a59}.dt-badge[data-variant=warn]{background:#ffbc5733;border-color:#ffbc5773}.dt-badge[data-variant=error]{background:#e600181f;border-color:#e6001859}.dt-badge[data-variant=info]{background:#7390ec24;border-color:#7390ec59}.dt-empty{padding:18px 12px;color:var(--xs-dark-gray)}.dt-actions{display:inline-flex;align-items:center;gap:6px}.dt-action-svg{width:24px;height:24px;display:inline-flex}.dt-action-svg svg{width:24px;height:24px;color:inherit}.dt-action-btn{width:32px;height:32px;border:1px solid var(--xs-light-gray);border-radius:var(--radius-sm);background:var(--white);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--xs-dark-gray)}.dt-action-btn:hover:not(:disabled){background:var(--gray-white);border-color:var(--dark-gray)}.dt-action-btn.dt-action--edit{color:var(--blue)}.dt-action-btn.dt-action--edit:hover:not(:disabled){color:var(--white);background-color:var(--blue)}.dt-action-btn.dt-action--open{color:var(--blue-medium)}.dt-action-btn.dt-action--open:hover:not(:disabled){color:var(--blue-dark)}.dt-action-btn.dt-action--copy{color:var(--xs-dark-gray)}.dt-action-btn.dt-action--copy:hover:not(:disabled){color:var(--white);background-color:var(--xs-dark-gray)}.dt-action-btn.dt-action--delete{color:var(--red)}.dt-action-btn.dt-action--delete:hover:not(:disabled){color:var(--white);background-color:var(--red)}.dt-action-btn:disabled{color:var(--disabled-text);background:var(--soft-white);cursor:not-allowed}.dt-action-text{font-size:24px;padding:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
731
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: TableGridComponent, isStandalone: true, selector: "table-grid", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, gridTemplateColumns: { classPropertyName: "gridTemplateColumns", publicName: "gridTemplateColumns", isSignal: true, isRequired: false, transformFunction: null }, minTableWidth: { classPropertyName: "minTableWidth", publicName: "minTableWidth", isSignal: true, isRequired: false, transformFunction: null }, columnQueries: { classPropertyName: "columnQueries", publicName: "columnQueries", isSignal: true, isRequired: false, transformFunction: null }, sortState: { classPropertyName: "sortState", publicName: "sortState", isSignal: true, isRequired: false, transformFunction: null }, selectedIdsSet: { classPropertyName: "selectedIdsSet", publicName: "selectedIdsSet", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerSort: "headerSort", columnQueryChange: "columnQueryChange", rowClick: "rowClick", toggleRow: "toggleRow", toggleAllOnPage: "toggleAllOnPage", openImage: "openImage", actionClick: "actionClick", bodyScroll: "bodyScroll" }, ngImport: i0, template: "<div class=\"dt-grid dt-xscroll\">\r\n <div [style.minWidth.px]=\"minTableWidth()\">\r\n <!-- Header -->\r\n <div class=\"dt-row dt-header\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n @if (showSelectionColumn()) {\r\n <div class=\"dt-cell dt-cell--header dt-cell--center dt-select-col\">\r\n @if ((config().selectionMode ?? 'multiple') === 'multiple') {\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelectedOnPage()\"\r\n (change)=\"onToggleAllOnPage()\"\r\n aria-label=\"Select all\"\r\n />\r\n }\r\n </div>\r\n }\r\n\r\n @for (col of columns(); track col.key) {\r\n <div\r\n class=\"dt-cell dt-cell--header\"\r\n [class.dt-cell--sortable]=\"!!col.sortable\"\r\n [attr.data-align]=\"col.align ?? 'left'\"\r\n (click)=\"onHeaderClickSort(col)\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n >\r\n <span class=\"dt-header-label\">{{ col.label }}</span>\r\n @if (col.sortable) {\r\n <span class=\"dt-sort\">{{ getSortIcon(col.key) }}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Filters row (under header) -->\r\n @if (config().columnFilters) {\r\n <div class=\"dt-row dt-filters\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n @if (showSelectionColumn()) {\r\n <div class=\"dt-cell dt-cell--filter dt-select-col\"></div>\r\n }\r\n\r\n @for (col of columns(); track col.key) {\r\n <div class=\"dt-cell dt-cell--filter\" [attr.data-align]=\"col.align ?? 'left'\">\r\n @if (col.filterable) {\r\n <input\r\n type=\"text\"\r\n [value]=\"columnQueries()[col.key] ?? null\"\r\n (input)=\"onColumnQueryInput(col.key, $any($event.target).value)\"\r\n [placeholder]=\"i18n().filter + ' ' + col.label\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Body -->\r\n <div\r\n class=\"dt-body\"\r\n [style.maxHeight.px]=\"config().scroll?.heightPx ?? null\"\r\n (scroll)=\"onBodyScroll($event)\"\r\n >\r\n @if (rows().length === 0) {\r\n <div class=\"dt-empty\">\r\n {{ config().emptyText ?? i18n().empty }}\r\n </div>\r\n } @else {\r\n @for (row of rows(); track getRowId(row)) {\r\n <div class=\"dt-row dt-data\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n @if (showSelectionColumn()) {\r\n <div class=\"dt-cell dt-cell--center dt-select-col\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isSelected(row)\"\r\n (change)=\"onToggleRow(row)\"\r\n aria-label=\"Seleccionar fila\"\r\n />\r\n </div>\r\n }\r\n\r\n @for (col of columns(); track col.key) {\r\n <div\r\n class=\"dt-cell\"\r\n [attr.data-align]=\"col.align ?? 'left'\"\r\n (click)=\"onRowClick(row)\"\r\n >\r\n @switch (col.type) {\r\n @case ('image') {\r\n @if ((col.options?.image?.hidden ?? false) === true) {\r\n <button\r\n type=\"button\"\r\n class=\"dt-link\"\r\n (click)=\"onOpenImage(getImageSrc(row, col), getImageAlt(row, col), $event)\"\r\n >\r\n {{ i18n().seeImage }}\r\n </button>\r\n } @else {\r\n <img\r\n class=\"dt-img\"\r\n [class.dt-img--full]=\"!!col.options?.image?.showFull\"\r\n [src]=\"getImageSrc(row, col)\"\r\n [alt]=\"getImageAlt(row, col)\"\r\n (click)=\"\r\n (col.options?.image?.openInModal ?? true) &&\r\n onOpenImage(getImageSrc(row, col), getImageAlt(row, col), $event)\r\n \"\r\n />\r\n }\r\n }\r\n\r\n @case ('status') {\r\n <span class=\"dt-badge\" [attr.data-variant]=\"getStatusClass(row, col)\">\r\n {{ getDisplayText(row, col) }}\r\n </span>\r\n }\r\n\r\n @case ('link') {\r\n <a\r\n class=\"dt-link\"\r\n [href]=\"getLinkHref(row, col)\"\r\n [target]=\"col.options?.link?.target ?? '_blank'\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n {{ getLinkLabel(row, col) }}\r\n </a>\r\n }\r\n\r\n @case ('actions') {\r\n <div class=\"dt-actions\">\r\n @for (action of getColumnActions(col); track action.id) {\r\n @if (isActionVisible(action, row)) {\r\n <button\r\n type=\"button\"\r\n class=\"dt-action-btn\"\r\n [class.dt-action--edit]=\"action.id === 'edit'\"\r\n [class.dt-action--delete]=\"action.id === 'delete'\"\r\n [class.dt-action--open]=\"action.id === 'open'\"\r\n [class.dt-action--copy]=\"action.id === 'copy'\"\r\n [disabled]=\"isActionDisabled(action, row)\"\r\n [title]=\"action.tooltip ?? action.label\"\r\n (click)=\"emitAction(action, row, $event)\"\r\n >\r\n @if ((action.render ?? 'icon') === 'text') {\r\n <span class=\"dt-action-text\">{{ action.label }}</span>\r\n } @else {\r\n <span class=\"dt-action-svg\" [innerHTML]=\"getActionSvg(action)\"></span>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @default {\r\n <span class=\"dt-text\" [class.dt-text--wrap]=\"col.wrap\">{{ getDisplayText(row, col) }}</span>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".dt-grid{width:100%}.dt-row{display:grid;align-items:stretch;width:100%}.dt-xscroll{overflow-x:auto;overflow-y:hidden}.dt-header{background:var(--gray-white);border-bottom:var(--border);font-weight:600;color:var(--black)}.dt-cell--header{-webkit-user-select:none;user-select:none}.dt-cell--sortable{cursor:pointer}.dt-filters{background:var(--xxs-light-gray);border-bottom:var(--border)}.dt-cell--filter{padding:8px 12px;font-size:10px}input{width:100%;padding:7px 8px;border:1px solid var(--light-gray);border-radius:var(--radius-sm);background:var(--white);color:var(--black);outline:none}input::placeholder{color:var(--xs-dark-gray);font-size:11px}input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}.dt-body{overflow-y:auto;overflow-x:hidden}@media(max-heicg:900px){.dt-body{max-height:none!important;overflow-y:visible!important;overflow-x:auto!important}}.dt-cell{padding:10px 12px;min-height:30px;border-bottom:1px solid var(--xxs-light-gray);display:flex;align-items:center;gap:8px;color:var(--black)}.dt-cell[data-align=left]{justify-content:flex-start;text-align:left}.dt-cell[data-align=center]{justify-content:center;text-align:center}.dt-cell[data-align=right]{justify-content:flex-end;text-align:right}.dt-cell--center,.dt-select-col{justify-content:center}.dt-header-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dt-sort{margin-left:auto;font-size:12px;opacity:.7;color:var(--xs-dark-gray)}.dt-data:hover{background:var(--gray)}.dt-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dt-text--wrap{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}.dt-cell:has(.dt-text--wrap){align-items:flex-start}.dt-img{width:40px;height:40px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--xs-light-gray);cursor:pointer}.dt-img--full{width:100%;height:auto}.dt-link{color:var(--blue);text-decoration:none;background:transparent;border:none;cursor:pointer;padding:0;font:inherit}.dt-link:hover{text-decoration:underline}.dt-badge{padding:4px 10px;border-radius:999px;border:1px solid var(--xs-light-gray);font-size:12px;background:var(--xxs-light-gray)}.dt-badge[data-variant=success]{background:color-mix(in srgb,var(--green-success) 12%,transparent);border-color:color-mix(in srgb,var(--green-success) 35%,transparent)}.dt-badge[data-variant=warn]{background:color-mix(in srgb,var(--orange) 20%,transparent);border-color:color-mix(in srgb,var(--orange) 45%,transparent)}.dt-badge[data-variant=error]{background:color-mix(in srgb,var(--red) 12%,transparent);border-color:color-mix(in srgb,var(--red) 35%,transparent)}.dt-badge[data-variant=info]{background:color-mix(in srgb,var(--blue-info) 14%,transparent);border-color:color-mix(in srgb,var(--blue-info) 35%,transparent)}.dt-empty{padding:18px 12px;color:var(--xs-dark-gray)}.dt-actions{display:inline-flex;align-items:center;gap:6px}.dt-action-svg{width:24px;height:24px;display:inline-flex}.dt-action-svg svg{width:24px;height:24px;color:inherit}.dt-action-btn{width:32px;height:32px;border:1px solid var(--xs-light-gray);border-radius:var(--radius-sm);background:var(--white);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--xs-dark-gray)}.dt-action-btn:hover:not(:disabled){background:var(--gray-white);border-color:var(--dark-gray)}.dt-action-btn.dt-action--edit{color:var(--blue)}.dt-action-btn.dt-action--edit:hover:not(:disabled){color:var(--white);background-color:var(--blue)}.dt-action-btn.dt-action--open{color:var(--blue-medium)}.dt-action-btn.dt-action--open:hover:not(:disabled){color:var(--blue-dark)}.dt-action-btn.dt-action--copy{color:var(--xs-dark-gray)}.dt-action-btn.dt-action--copy:hover:not(:disabled){color:var(--white);background-color:var(--xs-dark-gray)}.dt-action-btn.dt-action--delete{color:var(--red)}.dt-action-btn.dt-action--delete:hover:not(:disabled){color:var(--white);background-color:var(--red)}.dt-action-btn:disabled{color:var(--disabled-text);background:var(--soft-white);cursor:not-allowed}.dt-action-text{font-size:24px;padding:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
732
732
|
}
|
|
733
733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TableGridComponent, decorators: [{
|
|
734
734
|
type: Component,
|
|
735
|
-
args: [{ selector: 'table-grid', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dt-grid dt-xscroll\">\r\n <div [style.minWidth.px]=\"minTableWidth()\">\r\n <!-- Header -->\r\n <div class=\"dt-row dt-header\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n @if (showSelectionColumn()) {\r\n <div class=\"dt-cell dt-cell--header dt-cell--center dt-select-col\">\r\n @if ((config().selectionMode ?? 'multiple') === 'multiple') {\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelectedOnPage()\"\r\n (change)=\"onToggleAllOnPage()\"\r\n aria-label=\"Select all\"\r\n />\r\n }\r\n </div>\r\n }\r\n\r\n @for (col of columns(); track col.key) {\r\n <div\r\n class=\"dt-cell dt-cell--header\"\r\n [class.dt-cell--sortable]=\"!!col.sortable\"\r\n [attr.data-align]=\"col.align ?? 'left'\"\r\n (click)=\"onHeaderClickSort(col)\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n >\r\n <span class=\"dt-header-label\">{{ col.label }}</span>\r\n @if (col.sortable) {\r\n <span class=\"dt-sort\">{{ getSortIcon(col.key) }}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Filters row (under header) -->\r\n @if (config().columnFilters) {\r\n <div class=\"dt-row dt-filters\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n @if (showSelectionColumn()) {\r\n <div class=\"dt-cell dt-cell--filter dt-select-col\"></div>\r\n }\r\n\r\n @for (col of columns(); track col.key) {\r\n <div class=\"dt-cell dt-cell--filter\" [attr.data-align]=\"col.align ?? 'left'\">\r\n @if (col.filterable) {\r\n <input\r\n type=\"text\"\r\n [value]=\"columnQueries()[col.key] ?? null\"\r\n (input)=\"onColumnQueryInput(col.key, $any($event.target).value)\"\r\n [placeholder]=\"i18n().filter + ' ' + col.label\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Body -->\r\n <div\r\n class=\"dt-body\"\r\n [style.maxHeight.px]=\"config().scroll?.heightPx ?? null\"\r\n (scroll)=\"onBodyScroll($event)\"\r\n >\r\n @if (rows().length === 0) {\r\n <div class=\"dt-empty\">\r\n {{ config().emptyText ?? i18n().empty }}\r\n </div>\r\n } @else {\r\n @for (row of rows(); track getRowId(row)) {\r\n <div class=\"dt-row dt-data\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n @if (showSelectionColumn()) {\r\n <div class=\"dt-cell dt-cell--center dt-select-col\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isSelected(row)\"\r\n (change)=\"onToggleRow(row)\"\r\n aria-label=\"Seleccionar fila\"\r\n />\r\n </div>\r\n }\r\n\r\n @for (col of columns(); track col.key) {\r\n <div\r\n class=\"dt-cell\"\r\n [attr.data-align]=\"col.align ?? 'left'\"\r\n (click)=\"onRowClick(row)\"\r\n >\r\n @switch (col.type) {\r\n @case ('image') {\r\n @if ((col.options?.image?.hidden ?? false) === true) {\r\n <button\r\n type=\"button\"\r\n class=\"dt-link\"\r\n (click)=\"onOpenImage(getImageSrc(row, col), getImageAlt(row, col), $event)\"\r\n >\r\n {{ i18n().seeImage }}\r\n </button>\r\n } @else {\r\n <img\r\n class=\"dt-img\"\r\n [class.dt-img--full]=\"!!col.options?.image?.showFull\"\r\n [src]=\"getImageSrc(row, col)\"\r\n [alt]=\"getImageAlt(row, col)\"\r\n (click)=\"\r\n (col.options?.image?.openInModal ?? true) &&\r\n onOpenImage(getImageSrc(row, col), getImageAlt(row, col), $event)\r\n \"\r\n />\r\n }\r\n }\r\n\r\n @case ('status') {\r\n <span class=\"dt-badge\" [attr.data-variant]=\"getStatusClass(row, col)\">\r\n {{ getDisplayText(row, col) }}\r\n </span>\r\n }\r\n\r\n @case ('link') {\r\n <a\r\n class=\"dt-link\"\r\n [href]=\"getLinkHref(row, col)\"\r\n [target]=\"col.options?.link?.target ?? '_blank'\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n {{ getLinkLabel(row, col) }}\r\n </a>\r\n }\r\n\r\n @case ('actions') {\r\n <div class=\"dt-actions\">\r\n @for (action of getColumnActions(col); track action.id) {\r\n @if (isActionVisible(action, row)) {\r\n <button\r\n type=\"button\"\r\n class=\"dt-action-btn\"\r\n [class.dt-action--edit]=\"action.id === 'edit'\"\r\n [class.dt-action--delete]=\"action.id === 'delete'\"\r\n [class.dt-action--open]=\"action.id === 'open'\"\r\n [class.dt-action--copy]=\"action.id === 'copy'\"\r\n [disabled]=\"isActionDisabled(action, row)\"\r\n [title]=\"action.tooltip ?? action.label\"\r\n (click)=\"emitAction(action, row, $event)\"\r\n >\r\n @if ((action.render ?? 'icon') === 'text') {\r\n <span class=\"dt-action-text\">{{ action.label }}</span>\r\n } @else {\r\n <span class=\"dt-action-svg\" [innerHTML]=\"getActionSvg(action)\"></span>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @default {\r\n <span class=\"dt-text\" [class.dt-text--wrap]=\"col.wrap\">{{ getDisplayText(row, col) }}</span>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".dt-grid{width:100%}.dt-row{display:grid;align-items:stretch;width:100%}.dt-xscroll{overflow-x:auto;overflow-y:hidden}.dt-header{background:var(--gray-white);border-bottom:var(--border);font-weight:600;color:var(--black)}.dt-cell--header{-webkit-user-select:none;user-select:none}.dt-cell--sortable{cursor:pointer}.dt-filters{background:var(--xxs-light-gray);border-bottom:var(--border)}.dt-cell--filter{padding:8px 12px;font-size:10px}input{width:100%;padding:7px 8px;border:1px solid var(--light-gray);border-radius:var(--radius-sm);background:var(--white);color:var(--black);outline:none}input::placeholder{color:var(--xs-dark-gray);font-size:11px}input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}.dt-body{overflow-y:auto;overflow-x:hidden}@media(max-heicg:900px){.dt-body{max-height:none!important;overflow-y:visible!important;overflow-x:auto!important}}.dt-cell{padding:10px 12px;min-height:30px;border-bottom:1px solid var(--xxs-light-gray);display:flex;align-items:center;gap:8px;color:var(--black)}.dt-cell[data-align=left]{justify-content:flex-start;text-align:left}.dt-cell[data-align=center]{justify-content:center;text-align:center}.dt-cell[data-align=right]{justify-content:flex-end;text-align:right}.dt-cell--center,.dt-select-col{justify-content:center}.dt-header-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dt-sort{margin-left:auto;font-size:12px;opacity:.7;color:var(--xs-dark-gray)}.dt-data:hover{background:var(--gray)}.dt-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dt-text--wrap{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}.dt-cell:has(.dt-text--wrap){align-items:flex-start}.dt-img{width:40px;height:40px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--xs-light-gray);cursor:pointer}.dt-img--full{width:100%;height:auto}.dt-link{color:var(--blue);text-decoration:none;background:transparent;border:none;cursor:pointer;padding:0;font:inherit}.dt-link:hover{text-decoration:underline}.dt-badge{padding:4px 10px;border-radius:999px;border:1px solid var(--xs-light-gray);font-size:12px;background:var(--xxs-light-gray)}.dt-badge[data-variant=success]{background:#208b6a1f;border-color:#208b6a59}.dt-badge[data-variant=warn]{background:#ffbc5733;border-color:#ffbc5773}.dt-badge[data-variant=error]{background:#e600181f;border-color:#e6001859}.dt-badge[data-variant=info]{background:#7390ec24;border-color:#7390ec59}.dt-empty{padding:18px 12px;color:var(--xs-dark-gray)}.dt-actions{display:inline-flex;align-items:center;gap:6px}.dt-action-svg{width:24px;height:24px;display:inline-flex}.dt-action-svg svg{width:24px;height:24px;color:inherit}.dt-action-btn{width:32px;height:32px;border:1px solid var(--xs-light-gray);border-radius:var(--radius-sm);background:var(--white);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--xs-dark-gray)}.dt-action-btn:hover:not(:disabled){background:var(--gray-white);border-color:var(--dark-gray)}.dt-action-btn.dt-action--edit{color:var(--blue)}.dt-action-btn.dt-action--edit:hover:not(:disabled){color:var(--white);background-color:var(--blue)}.dt-action-btn.dt-action--open{color:var(--blue-medium)}.dt-action-btn.dt-action--open:hover:not(:disabled){color:var(--blue-dark)}.dt-action-btn.dt-action--copy{color:var(--xs-dark-gray)}.dt-action-btn.dt-action--copy:hover:not(:disabled){color:var(--white);background-color:var(--xs-dark-gray)}.dt-action-btn.dt-action--delete{color:var(--red)}.dt-action-btn.dt-action--delete:hover:not(:disabled){color:var(--white);background-color:var(--red)}.dt-action-btn:disabled{color:var(--disabled-text);background:var(--soft-white);cursor:not-allowed}.dt-action-text{font-size:24px;padding:0 8px}\n"] }]
|
|
735
|
+
args: [{ selector: 'table-grid', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dt-grid dt-xscroll\">\r\n <div [style.minWidth.px]=\"minTableWidth()\">\r\n <!-- Header -->\r\n <div class=\"dt-row dt-header\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n @if (showSelectionColumn()) {\r\n <div class=\"dt-cell dt-cell--header dt-cell--center dt-select-col\">\r\n @if ((config().selectionMode ?? 'multiple') === 'multiple') {\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isAllSelectedOnPage()\"\r\n (change)=\"onToggleAllOnPage()\"\r\n aria-label=\"Select all\"\r\n />\r\n }\r\n </div>\r\n }\r\n\r\n @for (col of columns(); track col.key) {\r\n <div\r\n class=\"dt-cell dt-cell--header\"\r\n [class.dt-cell--sortable]=\"!!col.sortable\"\r\n [attr.data-align]=\"col.align ?? 'left'\"\r\n (click)=\"onHeaderClickSort(col)\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n >\r\n <span class=\"dt-header-label\">{{ col.label }}</span>\r\n @if (col.sortable) {\r\n <span class=\"dt-sort\">{{ getSortIcon(col.key) }}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Filters row (under header) -->\r\n @if (config().columnFilters) {\r\n <div class=\"dt-row dt-filters\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n @if (showSelectionColumn()) {\r\n <div class=\"dt-cell dt-cell--filter dt-select-col\"></div>\r\n }\r\n\r\n @for (col of columns(); track col.key) {\r\n <div class=\"dt-cell dt-cell--filter\" [attr.data-align]=\"col.align ?? 'left'\">\r\n @if (col.filterable) {\r\n <input\r\n type=\"text\"\r\n [value]=\"columnQueries()[col.key] ?? null\"\r\n (input)=\"onColumnQueryInput(col.key, $any($event.target).value)\"\r\n [placeholder]=\"i18n().filter + ' ' + col.label\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Body -->\r\n <div\r\n class=\"dt-body\"\r\n [style.maxHeight.px]=\"config().scroll?.heightPx ?? null\"\r\n (scroll)=\"onBodyScroll($event)\"\r\n >\r\n @if (rows().length === 0) {\r\n <div class=\"dt-empty\">\r\n {{ config().emptyText ?? i18n().empty }}\r\n </div>\r\n } @else {\r\n @for (row of rows(); track getRowId(row)) {\r\n <div class=\"dt-row dt-data\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n @if (showSelectionColumn()) {\r\n <div class=\"dt-cell dt-cell--center dt-select-col\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"isSelected(row)\"\r\n (change)=\"onToggleRow(row)\"\r\n aria-label=\"Seleccionar fila\"\r\n />\r\n </div>\r\n }\r\n\r\n @for (col of columns(); track col.key) {\r\n <div\r\n class=\"dt-cell\"\r\n [attr.data-align]=\"col.align ?? 'left'\"\r\n (click)=\"onRowClick(row)\"\r\n >\r\n @switch (col.type) {\r\n @case ('image') {\r\n @if ((col.options?.image?.hidden ?? false) === true) {\r\n <button\r\n type=\"button\"\r\n class=\"dt-link\"\r\n (click)=\"onOpenImage(getImageSrc(row, col), getImageAlt(row, col), $event)\"\r\n >\r\n {{ i18n().seeImage }}\r\n </button>\r\n } @else {\r\n <img\r\n class=\"dt-img\"\r\n [class.dt-img--full]=\"!!col.options?.image?.showFull\"\r\n [src]=\"getImageSrc(row, col)\"\r\n [alt]=\"getImageAlt(row, col)\"\r\n (click)=\"\r\n (col.options?.image?.openInModal ?? true) &&\r\n onOpenImage(getImageSrc(row, col), getImageAlt(row, col), $event)\r\n \"\r\n />\r\n }\r\n }\r\n\r\n @case ('status') {\r\n <span class=\"dt-badge\" [attr.data-variant]=\"getStatusClass(row, col)\">\r\n {{ getDisplayText(row, col) }}\r\n </span>\r\n }\r\n\r\n @case ('link') {\r\n <a\r\n class=\"dt-link\"\r\n [href]=\"getLinkHref(row, col)\"\r\n [target]=\"col.options?.link?.target ?? '_blank'\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n {{ getLinkLabel(row, col) }}\r\n </a>\r\n }\r\n\r\n @case ('actions') {\r\n <div class=\"dt-actions\">\r\n @for (action of getColumnActions(col); track action.id) {\r\n @if (isActionVisible(action, row)) {\r\n <button\r\n type=\"button\"\r\n class=\"dt-action-btn\"\r\n [class.dt-action--edit]=\"action.id === 'edit'\"\r\n [class.dt-action--delete]=\"action.id === 'delete'\"\r\n [class.dt-action--open]=\"action.id === 'open'\"\r\n [class.dt-action--copy]=\"action.id === 'copy'\"\r\n [disabled]=\"isActionDisabled(action, row)\"\r\n [title]=\"action.tooltip ?? action.label\"\r\n (click)=\"emitAction(action, row, $event)\"\r\n >\r\n @if ((action.render ?? 'icon') === 'text') {\r\n <span class=\"dt-action-text\">{{ action.label }}</span>\r\n } @else {\r\n <span class=\"dt-action-svg\" [innerHTML]=\"getActionSvg(action)\"></span>\r\n }\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @default {\r\n <span class=\"dt-text\" [class.dt-text--wrap]=\"col.wrap\">{{ getDisplayText(row, col) }}</span>\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".dt-grid{width:100%}.dt-row{display:grid;align-items:stretch;width:100%}.dt-xscroll{overflow-x:auto;overflow-y:hidden}.dt-header{background:var(--gray-white);border-bottom:var(--border);font-weight:600;color:var(--black)}.dt-cell--header{-webkit-user-select:none;user-select:none}.dt-cell--sortable{cursor:pointer}.dt-filters{background:var(--xxs-light-gray);border-bottom:var(--border)}.dt-cell--filter{padding:8px 12px;font-size:10px}input{width:100%;padding:7px 8px;border:1px solid var(--light-gray);border-radius:var(--radius-sm);background:var(--white);color:var(--black);outline:none}input::placeholder{color:var(--xs-dark-gray);font-size:11px}input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}.dt-body{overflow-y:auto;overflow-x:hidden}@media(max-heicg:900px){.dt-body{max-height:none!important;overflow-y:visible!important;overflow-x:auto!important}}.dt-cell{padding:10px 12px;min-height:30px;border-bottom:1px solid var(--xxs-light-gray);display:flex;align-items:center;gap:8px;color:var(--black)}.dt-cell[data-align=left]{justify-content:flex-start;text-align:left}.dt-cell[data-align=center]{justify-content:center;text-align:center}.dt-cell[data-align=right]{justify-content:flex-end;text-align:right}.dt-cell--center,.dt-select-col{justify-content:center}.dt-header-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dt-sort{margin-left:auto;font-size:12px;opacity:.7;color:var(--xs-dark-gray)}.dt-data:hover{background:var(--gray)}.dt-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dt-text--wrap{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}.dt-cell:has(.dt-text--wrap){align-items:flex-start}.dt-img{width:40px;height:40px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--xs-light-gray);cursor:pointer}.dt-img--full{width:100%;height:auto}.dt-link{color:var(--blue);text-decoration:none;background:transparent;border:none;cursor:pointer;padding:0;font:inherit}.dt-link:hover{text-decoration:underline}.dt-badge{padding:4px 10px;border-radius:999px;border:1px solid var(--xs-light-gray);font-size:12px;background:var(--xxs-light-gray)}.dt-badge[data-variant=success]{background:color-mix(in srgb,var(--green-success) 12%,transparent);border-color:color-mix(in srgb,var(--green-success) 35%,transparent)}.dt-badge[data-variant=warn]{background:color-mix(in srgb,var(--orange) 20%,transparent);border-color:color-mix(in srgb,var(--orange) 45%,transparent)}.dt-badge[data-variant=error]{background:color-mix(in srgb,var(--red) 12%,transparent);border-color:color-mix(in srgb,var(--red) 35%,transparent)}.dt-badge[data-variant=info]{background:color-mix(in srgb,var(--blue-info) 14%,transparent);border-color:color-mix(in srgb,var(--blue-info) 35%,transparent)}.dt-empty{padding:18px 12px;color:var(--xs-dark-gray)}.dt-actions{display:inline-flex;align-items:center;gap:6px}.dt-action-svg{width:24px;height:24px;display:inline-flex}.dt-action-svg svg{width:24px;height:24px;color:inherit}.dt-action-btn{width:32px;height:32px;border:1px solid var(--xs-light-gray);border-radius:var(--radius-sm);background:var(--white);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--xs-dark-gray)}.dt-action-btn:hover:not(:disabled){background:var(--gray-white);border-color:var(--dark-gray)}.dt-action-btn.dt-action--edit{color:var(--blue)}.dt-action-btn.dt-action--edit:hover:not(:disabled){color:var(--white);background-color:var(--blue)}.dt-action-btn.dt-action--open{color:var(--blue-medium)}.dt-action-btn.dt-action--open:hover:not(:disabled){color:var(--blue-dark)}.dt-action-btn.dt-action--copy{color:var(--xs-dark-gray)}.dt-action-btn.dt-action--copy:hover:not(:disabled){color:var(--white);background-color:var(--xs-dark-gray)}.dt-action-btn.dt-action--delete{color:var(--red)}.dt-action-btn.dt-action--delete:hover:not(:disabled){color:var(--white);background-color:var(--red)}.dt-action-btn:disabled{color:var(--disabled-text);background:var(--soft-white);cursor:not-allowed}.dt-action-text{font-size:24px;padding:0 8px}\n"] }]
|
|
736
736
|
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], gridTemplateColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridTemplateColumns", required: false }] }], minTableWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTableWidth", required: false }] }], columnQueries: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnQueries", required: false }] }], sortState: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortState", required: false }] }], selectedIdsSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIdsSet", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], i18n: [{ type: i0.Input, args: [{ isSignal: true, alias: "i18n", required: false }] }], headerSort: [{ type: i0.Output, args: ["headerSort"] }], columnQueryChange: [{ type: i0.Output, args: ["columnQueryChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], toggleRow: [{ type: i0.Output, args: ["toggleRow"] }], toggleAllOnPage: [{ type: i0.Output, args: ["toggleAllOnPage"] }], openImage: [{ type: i0.Output, args: ["openImage"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], bodyScroll: [{ type: i0.Output, args: ["bodyScroll"] }] } });
|
|
737
737
|
|
|
738
738
|
class TablePaginationComponent {
|
|
@@ -1267,7 +1267,7 @@ class AdvancedTable {
|
|
|
1267
1267
|
return String(value);
|
|
1268
1268
|
}
|
|
1269
1269
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AdvancedTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1270
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: AdvancedTable, isStandalone: true, selector: "advanced-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: false, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", selectionChange: "selectionChange", actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"dt-container\">\r\n <div class=\"dt-toolbar\">\r\n <!-- Search and Clean -->\r\n <table-toolbar\r\n [enabled]=\"config().globalSearch ?? true\"\r\n [query]=\"globalQuery()\"\r\n [i18n]=\"i18nCom()\"\r\n [showClear]=\"true\"\r\n (queryChange)=\"setGlobalQuery($event)\"\r\n (clear)=\"clearFilters()\"\r\n />\r\n\r\n <!-- Pagination -->\r\n @if (config().pagination?.enabled) {\r\n <table-pagination\r\n [page]=\"page()\"\r\n [pageSize]=\"pageSize()\"\r\n [pageCount]=\"pageCount()\"\r\n [totalCount]=\"totalCount()\"\r\n [pagerItems]=\"pagerItems()\"\r\n [pageSizeOptions]=\"config().pagination!.pageSizeOptions ?? [10, 25, 50]\"\r\n [i18n]=\"i18nCom()\"\r\n (pageChange)=\"goToPage($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n />\r\n }\r\n </div>\r\n\r\n <div class=\"dt-grid\">\r\n <!-- Data Table -->\r\n <table-grid\r\n [config]=\"config()\"\r\n [columns]=\"visibleColumns()\"\r\n [rows]=\"pagedData()\"\r\n [gridTemplateColumns]=\"gridTemplateColumns()\"\r\n [minTableWidth]=\"minTableWidth()\"\r\n [columnQueries]=\"columnQueries()\"\r\n [sortState]=\"sortState()\"\r\n [selectedIdsSet]=\"selectedIdsSet()\"\r\n [i18n]=\"i18nCom()\"\r\n (headerSort)=\"onHeaderClickSort($event)\"\r\n (columnQueryChange)=\"setColumnQuery($event.key, $event.value)\"\r\n (rowClick)=\"onRowClick($event)\"\r\n (toggleRow)=\"toggleRowSelection($event)\"\r\n (toggleAllOnPage)=\"toggleSelectAllOnPage()\"\r\n (openImage)=\"openImageModal($event.src, $event.alt)\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (bodyScroll)=\"onBodyScroll($event)\"\r\n />\r\n </div>\r\n\r\n <!-- Image Modal -->\r\n <table-modal-image\r\n [open]=\"modalOpen()\"\r\n [src]=\"modalImageSrc()\"\r\n [alt]=\"modalImageAlt()\"\r\n (close)=\"closeModal()\"\r\n />\r\n</div>\r\n", styles: [":host{display:block;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;--black: #171717;--black-light: #343434;--black-dark: #000000;--black-navy: #191a21;--xs-dark-gray: #5A5A5A;--dark-gray: #9E9E9E;--medium-gray: #D5D5D5;--gray: #F8F8F8;--light-gray: #C6C6C6;--xs-light-gray: #DFDFDF;--gray-white: #F5F4F4;--xxs-light-gray: #F2F2F2;--soft-white: #EEEEEE;--green-success: #208B6A;--blue: #3360fa;--blue-info: #7390EC;--orange: #F77C00;--yellow-warning: #FFBC57;--red: #E60018;--white: #FFFFFF;--disabled: #C6C6C6;--disabled-text: #9E9E9E;--radius-sm: 4px;--radius-md: 6px;--border: 1px solid var(--xs-light-gray);--focus-ring: 0 0 0 3px rgba(51, 96, 250, .18)}.dt-container{border:var(--border);border-radius:var(--radius-md);background:var(--white);overflow:hidden}.dt-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:var(--border);background:var(--xxs-light-gray)}.dt-empty{padding:18px 12px;color:var(--xs-dark-gray)}@media(max-width:900px){.dt-toolbar{flex-wrap:wrap;align-items:flex-start;row-gap:10px;padding:10px 12px}.dt-toolbar>b2b-table-toolbar{flex:1 1 100%}.dt-toolbar>b2b-table-pagination{flex:1 1 100%;display:flex;justify-content:center}}\n"], dependencies: [{ kind: "component", type: TableModalImageComponent, selector: "table-modal-image", inputs: ["open", "src", "alt"], outputs: ["close"] }, { kind: "component", type: TableGridComponent, selector: "table-grid", inputs: ["config", "columns", "rows", "gridTemplateColumns", "minTableWidth", "columnQueries", "sortState", "selectedIdsSet", "timeZone", "i18n"], outputs: ["headerSort", "columnQueryChange", "rowClick", "toggleRow", "toggleAllOnPage", "openImage", "actionClick", "bodyScroll"] }, { kind: "component", type: TablePaginationComponent, selector: "table-pagination", inputs: ["page", "pageSize", "pageCount", "totalCount", "pageSizeOptions", "pagerItems", "i18n"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: TableToolbarComponent, selector: "table-toolbar", inputs: ["enabled", "query", "showClear", "i18n"], outputs: ["queryChange", "clear"] }] });
|
|
1270
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: AdvancedTable, isStandalone: true, selector: "advanced-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: false, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", selectionChange: "selectionChange", actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"dt-container\">\r\n <div class=\"dt-toolbar\">\r\n <!-- Search and Clean -->\r\n <table-toolbar\r\n [enabled]=\"config().globalSearch ?? true\"\r\n [query]=\"globalQuery()\"\r\n [i18n]=\"i18nCom()\"\r\n [showClear]=\"true\"\r\n (queryChange)=\"setGlobalQuery($event)\"\r\n (clear)=\"clearFilters()\"\r\n />\r\n\r\n <!-- Pagination -->\r\n @if (config().pagination?.enabled) {\r\n <table-pagination\r\n [page]=\"page()\"\r\n [pageSize]=\"pageSize()\"\r\n [pageCount]=\"pageCount()\"\r\n [totalCount]=\"totalCount()\"\r\n [pagerItems]=\"pagerItems()\"\r\n [pageSizeOptions]=\"config().pagination!.pageSizeOptions ?? [10, 25, 50]\"\r\n [i18n]=\"i18nCom()\"\r\n (pageChange)=\"goToPage($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n />\r\n }\r\n </div>\r\n\r\n <div class=\"dt-grid\">\r\n <!-- Data Table -->\r\n <table-grid\r\n [config]=\"config()\"\r\n [columns]=\"visibleColumns()\"\r\n [rows]=\"pagedData()\"\r\n [gridTemplateColumns]=\"gridTemplateColumns()\"\r\n [minTableWidth]=\"minTableWidth()\"\r\n [columnQueries]=\"columnQueries()\"\r\n [sortState]=\"sortState()\"\r\n [selectedIdsSet]=\"selectedIdsSet()\"\r\n [i18n]=\"i18nCom()\"\r\n (headerSort)=\"onHeaderClickSort($event)\"\r\n (columnQueryChange)=\"setColumnQuery($event.key, $event.value)\"\r\n (rowClick)=\"onRowClick($event)\"\r\n (toggleRow)=\"toggleRowSelection($event)\"\r\n (toggleAllOnPage)=\"toggleSelectAllOnPage()\"\r\n (openImage)=\"openImageModal($event.src, $event.alt)\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (bodyScroll)=\"onBodyScroll($event)\"\r\n />\r\n </div>\r\n\r\n <!-- Image Modal -->\r\n <table-modal-image\r\n [open]=\"modalOpen()\"\r\n [src]=\"modalImageSrc()\"\r\n [alt]=\"modalImageAlt()\"\r\n (close)=\"closeModal()\"\r\n />\r\n</div>\r\n", styles: [":host{display:block;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;--black: #171717;--black-light: #343434;--black-dark: #000000;--black-navy: #191a21;--xs-dark-gray: #5A5A5A;--dark-gray: #9E9E9E;--medium-gray: #D5D5D5;--gray: #F8F8F8;--light-gray: #C6C6C6;--xs-light-gray: #DFDFDF;--gray-white: #F5F4F4;--xxs-light-gray: #F2F2F2;--soft-white: #EEEEEE;--green-success: var(--b2b-success, #208B6A);--blue: var(--b2b-primary, #3360fa);--blue-info: #7390EC;--orange: var(--b2b-warning, #F77C00);--yellow-warning: #FFBC57;--red: var(--b2b-danger, #E60018);--white: var(--b2b-surface, #FFFFFF);--disabled: #C6C6C6;--disabled-text: #9E9E9E;--radius-sm: var(--b2b-radius-sm, 4px);--radius-md: var(--b2b-radius, 6px);--border: 1px solid var(--xs-light-gray);--focus-ring: var(--b2b-focus-ring, 0 0 0 3px rgba(51, 96, 250, .18))}.dt-container{border:var(--border);border-radius:var(--radius-md);background:var(--white);overflow:hidden}.dt-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:var(--border);background:var(--xxs-light-gray)}.dt-empty{padding:18px 12px;color:var(--xs-dark-gray)}@media(max-width:900px){.dt-toolbar{flex-wrap:wrap;align-items:flex-start;row-gap:10px;padding:10px 12px}.dt-toolbar>b2b-table-toolbar{flex:1 1 100%}.dt-toolbar>b2b-table-pagination{flex:1 1 100%;display:flex;justify-content:center}}\n"], dependencies: [{ kind: "component", type: TableModalImageComponent, selector: "table-modal-image", inputs: ["open", "src", "alt"], outputs: ["close"] }, { kind: "component", type: TableGridComponent, selector: "table-grid", inputs: ["config", "columns", "rows", "gridTemplateColumns", "minTableWidth", "columnQueries", "sortState", "selectedIdsSet", "timeZone", "i18n"], outputs: ["headerSort", "columnQueryChange", "rowClick", "toggleRow", "toggleAllOnPage", "openImage", "actionClick", "bodyScroll"] }, { kind: "component", type: TablePaginationComponent, selector: "table-pagination", inputs: ["page", "pageSize", "pageCount", "totalCount", "pageSizeOptions", "pagerItems", "i18n"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: TableToolbarComponent, selector: "table-toolbar", inputs: ["enabled", "query", "showClear", "i18n"], outputs: ["queryChange", "clear"] }] });
|
|
1271
1271
|
}
|
|
1272
1272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AdvancedTable, decorators: [{
|
|
1273
1273
|
type: Component,
|
|
@@ -1276,7 +1276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
1276
1276
|
TableGridComponent,
|
|
1277
1277
|
TablePaginationComponent,
|
|
1278
1278
|
TableToolbarComponent,
|
|
1279
|
-
], template: "<div class=\"dt-container\">\r\n <div class=\"dt-toolbar\">\r\n <!-- Search and Clean -->\r\n <table-toolbar\r\n [enabled]=\"config().globalSearch ?? true\"\r\n [query]=\"globalQuery()\"\r\n [i18n]=\"i18nCom()\"\r\n [showClear]=\"true\"\r\n (queryChange)=\"setGlobalQuery($event)\"\r\n (clear)=\"clearFilters()\"\r\n />\r\n\r\n <!-- Pagination -->\r\n @if (config().pagination?.enabled) {\r\n <table-pagination\r\n [page]=\"page()\"\r\n [pageSize]=\"pageSize()\"\r\n [pageCount]=\"pageCount()\"\r\n [totalCount]=\"totalCount()\"\r\n [pagerItems]=\"pagerItems()\"\r\n [pageSizeOptions]=\"config().pagination!.pageSizeOptions ?? [10, 25, 50]\"\r\n [i18n]=\"i18nCom()\"\r\n (pageChange)=\"goToPage($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n />\r\n }\r\n </div>\r\n\r\n <div class=\"dt-grid\">\r\n <!-- Data Table -->\r\n <table-grid\r\n [config]=\"config()\"\r\n [columns]=\"visibleColumns()\"\r\n [rows]=\"pagedData()\"\r\n [gridTemplateColumns]=\"gridTemplateColumns()\"\r\n [minTableWidth]=\"minTableWidth()\"\r\n [columnQueries]=\"columnQueries()\"\r\n [sortState]=\"sortState()\"\r\n [selectedIdsSet]=\"selectedIdsSet()\"\r\n [i18n]=\"i18nCom()\"\r\n (headerSort)=\"onHeaderClickSort($event)\"\r\n (columnQueryChange)=\"setColumnQuery($event.key, $event.value)\"\r\n (rowClick)=\"onRowClick($event)\"\r\n (toggleRow)=\"toggleRowSelection($event)\"\r\n (toggleAllOnPage)=\"toggleSelectAllOnPage()\"\r\n (openImage)=\"openImageModal($event.src, $event.alt)\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (bodyScroll)=\"onBodyScroll($event)\"\r\n />\r\n </div>\r\n\r\n <!-- Image Modal -->\r\n <table-modal-image\r\n [open]=\"modalOpen()\"\r\n [src]=\"modalImageSrc()\"\r\n [alt]=\"modalImageAlt()\"\r\n (close)=\"closeModal()\"\r\n />\r\n</div>\r\n", styles: [":host{display:block;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;--black: #171717;--black-light: #343434;--black-dark: #000000;--black-navy: #191a21;--xs-dark-gray: #5A5A5A;--dark-gray: #9E9E9E;--medium-gray: #D5D5D5;--gray: #F8F8F8;--light-gray: #C6C6C6;--xs-light-gray: #DFDFDF;--gray-white: #F5F4F4;--xxs-light-gray: #F2F2F2;--soft-white: #EEEEEE;--green-success: #208B6A;--blue: #3360fa;--blue-info: #7390EC;--orange: #F77C00;--yellow-warning: #FFBC57;--red: #E60018;--white: #FFFFFF;--disabled: #C6C6C6;--disabled-text: #9E9E9E;--radius-sm: 4px;--radius-md: 6px;--border: 1px solid var(--xs-light-gray);--focus-ring: 0 0 0 3px rgba(51, 96, 250, .18)}.dt-container{border:var(--border);border-radius:var(--radius-md);background:var(--white);overflow:hidden}.dt-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:var(--border);background:var(--xxs-light-gray)}.dt-empty{padding:18px 12px;color:var(--xs-dark-gray)}@media(max-width:900px){.dt-toolbar{flex-wrap:wrap;align-items:flex-start;row-gap:10px;padding:10px 12px}.dt-toolbar>b2b-table-toolbar{flex:1 1 100%}.dt-toolbar>b2b-table-pagination{flex:1 1 100%;display:flex;justify-content:center}}\n"] }]
|
|
1279
|
+
], template: "<div class=\"dt-container\">\r\n <div class=\"dt-toolbar\">\r\n <!-- Search and Clean -->\r\n <table-toolbar\r\n [enabled]=\"config().globalSearch ?? true\"\r\n [query]=\"globalQuery()\"\r\n [i18n]=\"i18nCom()\"\r\n [showClear]=\"true\"\r\n (queryChange)=\"setGlobalQuery($event)\"\r\n (clear)=\"clearFilters()\"\r\n />\r\n\r\n <!-- Pagination -->\r\n @if (config().pagination?.enabled) {\r\n <table-pagination\r\n [page]=\"page()\"\r\n [pageSize]=\"pageSize()\"\r\n [pageCount]=\"pageCount()\"\r\n [totalCount]=\"totalCount()\"\r\n [pagerItems]=\"pagerItems()\"\r\n [pageSizeOptions]=\"config().pagination!.pageSizeOptions ?? [10, 25, 50]\"\r\n [i18n]=\"i18nCom()\"\r\n (pageChange)=\"goToPage($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"\r\n />\r\n }\r\n </div>\r\n\r\n <div class=\"dt-grid\">\r\n <!-- Data Table -->\r\n <table-grid\r\n [config]=\"config()\"\r\n [columns]=\"visibleColumns()\"\r\n [rows]=\"pagedData()\"\r\n [gridTemplateColumns]=\"gridTemplateColumns()\"\r\n [minTableWidth]=\"minTableWidth()\"\r\n [columnQueries]=\"columnQueries()\"\r\n [sortState]=\"sortState()\"\r\n [selectedIdsSet]=\"selectedIdsSet()\"\r\n [i18n]=\"i18nCom()\"\r\n (headerSort)=\"onHeaderClickSort($event)\"\r\n (columnQueryChange)=\"setColumnQuery($event.key, $event.value)\"\r\n (rowClick)=\"onRowClick($event)\"\r\n (toggleRow)=\"toggleRowSelection($event)\"\r\n (toggleAllOnPage)=\"toggleSelectAllOnPage()\"\r\n (openImage)=\"openImageModal($event.src, $event.alt)\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (bodyScroll)=\"onBodyScroll($event)\"\r\n />\r\n </div>\r\n\r\n <!-- Image Modal -->\r\n <table-modal-image\r\n [open]=\"modalOpen()\"\r\n [src]=\"modalImageSrc()\"\r\n [alt]=\"modalImageAlt()\"\r\n (close)=\"closeModal()\"\r\n />\r\n</div>\r\n", styles: [":host{display:block;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;--black: #171717;--black-light: #343434;--black-dark: #000000;--black-navy: #191a21;--xs-dark-gray: #5A5A5A;--dark-gray: #9E9E9E;--medium-gray: #D5D5D5;--gray: #F8F8F8;--light-gray: #C6C6C6;--xs-light-gray: #DFDFDF;--gray-white: #F5F4F4;--xxs-light-gray: #F2F2F2;--soft-white: #EEEEEE;--green-success: var(--b2b-success, #208B6A);--blue: var(--b2b-primary, #3360fa);--blue-info: #7390EC;--orange: var(--b2b-warning, #F77C00);--yellow-warning: #FFBC57;--red: var(--b2b-danger, #E60018);--white: var(--b2b-surface, #FFFFFF);--disabled: #C6C6C6;--disabled-text: #9E9E9E;--radius-sm: var(--b2b-radius-sm, 4px);--radius-md: var(--b2b-radius, 6px);--border: 1px solid var(--xs-light-gray);--focus-ring: var(--b2b-focus-ring, 0 0 0 3px rgba(51, 96, 250, .18))}.dt-container{border:var(--border);border-radius:var(--radius-md);background:var(--white);overflow:hidden}.dt-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:var(--border);background:var(--xxs-light-gray)}.dt-empty{padding:18px 12px;color:var(--xs-dark-gray)}@media(max-width:900px){.dt-toolbar{flex-wrap:wrap;align-items:flex-start;row-gap:10px;padding:10px 12px}.dt-toolbar>b2b-table-toolbar{flex:1 1 100%}.dt-toolbar>b2b-table-pagination{flex:1 1 100%;display:flex;justify-content:center}}\n"] }]
|
|
1280
1280
|
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], lang: [{
|
|
1281
1281
|
type: Input
|
|
1282
1282
|
}], i18n: [{
|