@camp2gether/c2g-ui 0.0.8 → 0.0.9
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/camp2gether-c2g-ui-charts.mjs +12 -12
- package/fesm2022/camp2gether-c2g-ui-charts.mjs.map +1 -1
- package/fesm2022/camp2gether-c2g-ui-layout.mjs +84 -84
- package/fesm2022/camp2gether-c2g-ui-layout.mjs.map +1 -1
- package/fesm2022/camp2gether-c2g-ui-maps.mjs +8 -8
- package/fesm2022/camp2gether-c2g-ui-maps.mjs.map +1 -1
- package/fesm2022/camp2gether-c2g-ui-presets.mjs +164 -164
- package/fesm2022/camp2gether-c2g-ui-presets.mjs.map +1 -1
- package/fesm2022/camp2gether-c2g-ui-theme.mjs +6 -6
- package/fesm2022/camp2gether-c2g-ui-theme.mjs.map +1 -1
- package/fesm2022/camp2gether-c2g-ui.mjs +342 -86
- package/fesm2022/camp2gether-c2g-ui.mjs.map +1 -1
- package/index.d.ts +61 -2
- package/package.json +1 -1
|
@@ -19,51 +19,51 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
|
19
19
|
class ContentPanelComponent {
|
|
20
20
|
eyebrow = input('', ...(ngDevMode ? [{ debugName: "eyebrow" }] : []));
|
|
21
21
|
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
22
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
23
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
22
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ContentPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ContentPanelComponent, isStandalone: true, selector: "app-content-panel", inputs: { eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"content-panel\">\n @if (eyebrow() || title()) {\n <header class=\"content-panel__header\">\n <div class=\"content-panel__header-text\">\n @if (eyebrow()) {\n <span class=\"content-panel__eyebrow\">{{ eyebrow() | translate }}</span>\n }\n @if (title()) {\n <h2 class=\"content-panel__title\">{{ title() | translate }}</h2>\n }\n </div>\n <div class=\"content-panel__actions\">\n <ng-content select=\"[panel-actions]\" />\n </div>\n </header>\n }\n <ng-content />\n</article>\n", styles: [".content-panel{background:var(--c2g-glass-bg, rgba(255, 255, 255, .95));border:1px solid var(--c2g-color-border-soft, rgba(17, 24, 39, .08));border-radius:var(--c2g-radius-xl, 1.125rem);box-shadow:var(--c2g-shadow-sm, 0 1px 2px rgba(15, 23, 42, .08));overflow:hidden}.content-panel__header{display:flex;align-items:flex-end;gap:var(--c2g-space-4, 1rem);padding:var(--c2g-space-6, 1.5rem) var(--c2g-space-6, 1.5rem) 0;flex-wrap:wrap}.content-panel__header-text{flex:1;min-width:0}.content-panel__eyebrow{display:block;font-size:var(--c2g-font-size-xs, .75rem);font-weight:var(--c2g-font-weight-bold, 700);letter-spacing:var(--c2g-letter-spacing-wide, .1em);text-transform:uppercase;color:var(--c2g-primary, #f97316);margin-bottom:var(--c2g-space-1, .25rem)}.content-panel__title{font-size:var(--c2g-font-size-lg, 1.25rem);font-weight:var(--c2g-font-weight-extrabold, 800);color:var(--c2g-text-primary, #1f2937);margin:0;letter-spacing:var(--c2g-letter-spacing-tight, -.02em)}.content-panel__actions{display:flex;align-items:center;gap:var(--c2g-space-2, .5rem);flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24
24
|
}
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ContentPanelComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
27
|
args: [{ selector: 'app-content-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<article class=\"content-panel\">\n @if (eyebrow() || title()) {\n <header class=\"content-panel__header\">\n <div class=\"content-panel__header-text\">\n @if (eyebrow()) {\n <span class=\"content-panel__eyebrow\">{{ eyebrow() | translate }}</span>\n }\n @if (title()) {\n <h2 class=\"content-panel__title\">{{ title() | translate }}</h2>\n }\n </div>\n <div class=\"content-panel__actions\">\n <ng-content select=\"[panel-actions]\" />\n </div>\n </header>\n }\n <ng-content />\n</article>\n", styles: [".content-panel{background:var(--c2g-glass-bg, rgba(255, 255, 255, .95));border:1px solid var(--c2g-color-border-soft, rgba(17, 24, 39, .08));border-radius:var(--c2g-radius-xl, 1.125rem);box-shadow:var(--c2g-shadow-sm, 0 1px 2px rgba(15, 23, 42, .08));overflow:hidden}.content-panel__header{display:flex;align-items:flex-end;gap:var(--c2g-space-4, 1rem);padding:var(--c2g-space-6, 1.5rem) var(--c2g-space-6, 1.5rem) 0;flex-wrap:wrap}.content-panel__header-text{flex:1;min-width:0}.content-panel__eyebrow{display:block;font-size:var(--c2g-font-size-xs, .75rem);font-weight:var(--c2g-font-weight-bold, 700);letter-spacing:var(--c2g-letter-spacing-wide, .1em);text-transform:uppercase;color:var(--c2g-primary, #f97316);margin-bottom:var(--c2g-space-1, .25rem)}.content-panel__title{font-size:var(--c2g-font-size-lg, 1.25rem);font-weight:var(--c2g-font-weight-extrabold, 800);color:var(--c2g-text-primary, #1f2937);margin:0;letter-spacing:var(--c2g-letter-spacing-tight, -.02em)}.content-panel__actions{display:flex;align-items:center;gap:var(--c2g-space-2, .5rem);flex-wrap:wrap}\n"] }]
|
|
28
|
-
}]
|
|
28
|
+
}] });
|
|
29
29
|
|
|
30
30
|
class CoverageKpiComponent {
|
|
31
31
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
32
32
|
coveragePercent = input(0, ...(ngDevMode ? [{ debugName: "coveragePercent" }] : []));
|
|
33
33
|
ringCircumference = 125.66;
|
|
34
34
|
ringOffset = computed(() => this.ringCircumference * (1 - this.coveragePercent() / 100), ...(ngDevMode ? [{ debugName: "ringOffset" }] : []));
|
|
35
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
36
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
35
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CoverageKpiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: CoverageKpiComponent, isStandalone: true, selector: "app-coverage-kpi", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, coveragePercent: { classPropertyName: "coveragePercent", publicName: "coveragePercent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"coverage-kpi\" role=\"listitem\">\n <div class=\"coverage-kpi__content\">\n <div class=\"coverage-kpi__ring\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 48 48\">\n <circle class=\"coverage-kpi__ring-bg\" cx=\"24\" cy=\"24\" r=\"20\" />\n <circle\n class=\"coverage-kpi__ring-fill\"\n cx=\"24\"\n cy=\"24\"\n r=\"20\"\n [style.stroke-dasharray]=\"ringCircumference\"\n [style.stroke-dashoffset]=\"ringOffset()\"\n />\n </svg>\n <span class=\"coverage-kpi__percent\">{{ coveragePercent() }}%</span>\n </div>\n\n <span class=\"coverage-kpi__label\">{{ label() }}</span>\n </div>\n</div>", styles: [":host{display:block;width:100%;height:100%}.coverage-kpi{box-sizing:border-box;background:#63b3ed26;border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;height:100%;position:relative;overflow:hidden}.coverage-kpi__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;height:100%}.coverage-kpi__label{font-size:12px;opacity:.8;text-transform:uppercase;letter-spacing:.06em;line-height:1.25;text-align:center}.coverage-kpi__ring{position:relative;width:56px;height:56px;display:flex;align-items:center;justify-content:center}.coverage-kpi__ring svg{width:100%;height:100%;transform:rotate(-90deg)}.coverage-kpi__ring-bg{fill:none;stroke:#ffffff26;stroke-width:4}.coverage-kpi__ring-fill{fill:none;stroke:var(--c2g-color-secondary);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .6s ease}.coverage-kpi__percent{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}@media(max-width:1024px){.coverage-kpi{padding:14px}.coverage-kpi__content{gap:8px}.coverage-kpi__ring{width:54px;height:54px}.coverage-kpi__label,.coverage-kpi__percent{font-size:11px}}@media(max-width:640px){.coverage-kpi{padding:12px 14px}.coverage-kpi__content{gap:6px}.coverage-kpi__ring{width:48px;height:48px}.coverage-kpi__label,.coverage-kpi__percent{font-size:10px}.coverage-kpi__ring-bg,.coverage-kpi__ring-fill{stroke-width:3}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
37
37
|
}
|
|
38
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: CoverageKpiComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
40
40
|
args: [{ selector: 'app-coverage-kpi', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div class=\"coverage-kpi\" role=\"listitem\">\n <div class=\"coverage-kpi__content\">\n <div class=\"coverage-kpi__ring\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 48 48\">\n <circle class=\"coverage-kpi__ring-bg\" cx=\"24\" cy=\"24\" r=\"20\" />\n <circle\n class=\"coverage-kpi__ring-fill\"\n cx=\"24\"\n cy=\"24\"\n r=\"20\"\n [style.stroke-dasharray]=\"ringCircumference\"\n [style.stroke-dashoffset]=\"ringOffset()\"\n />\n </svg>\n <span class=\"coverage-kpi__percent\">{{ coveragePercent() }}%</span>\n </div>\n\n <span class=\"coverage-kpi__label\">{{ label() }}</span>\n </div>\n</div>", styles: [":host{display:block;width:100%;height:100%}.coverage-kpi{box-sizing:border-box;background:#63b3ed26;border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;height:100%;position:relative;overflow:hidden}.coverage-kpi__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;height:100%}.coverage-kpi__label{font-size:12px;opacity:.8;text-transform:uppercase;letter-spacing:.06em;line-height:1.25;text-align:center}.coverage-kpi__ring{position:relative;width:56px;height:56px;display:flex;align-items:center;justify-content:center}.coverage-kpi__ring svg{width:100%;height:100%;transform:rotate(-90deg)}.coverage-kpi__ring-bg{fill:none;stroke:#ffffff26;stroke-width:4}.coverage-kpi__ring-fill{fill:none;stroke:var(--c2g-color-secondary);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .6s ease}.coverage-kpi__percent{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}@media(max-width:1024px){.coverage-kpi{padding:14px}.coverage-kpi__content{gap:8px}.coverage-kpi__ring{width:54px;height:54px}.coverage-kpi__label,.coverage-kpi__percent{font-size:11px}}@media(max-width:640px){.coverage-kpi{padding:12px 14px}.coverage-kpi__content{gap:6px}.coverage-kpi__ring{width:48px;height:48px}.coverage-kpi__label,.coverage-kpi__percent{font-size:10px}.coverage-kpi__ring-bg,.coverage-kpi__ring-fill{stroke-width:3}}\n"] }]
|
|
41
|
-
}]
|
|
41
|
+
}] });
|
|
42
42
|
|
|
43
43
|
class HeroComponent {
|
|
44
44
|
eyebrow = input(...(ngDevMode ? [undefined, { debugName: "eyebrow" }] : []));
|
|
45
45
|
title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
46
46
|
lead = input(...(ngDevMode ? [undefined, { debugName: "lead" }] : []));
|
|
47
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
48
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
47
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
48
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: HeroComponent, isStandalone: true, selector: "app-hero", inputs: { eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, lead: { classPropertyName: "lead", publicName: "lead", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"hero\">\n @if (eyebrow()) {\n <div class=\"hero__eyebrow\">\n <mat-icon class=\"hero__icon\">backpack</mat-icon>\n <span>{{ eyebrow() }}</span>\n </div>\n }\n\n <h1 class=\"hero__title\">{{ title() }}</h1>\n <p class=\"hero__lead\">{{ lead() }}</p>\n\n <ng-content></ng-content>\n</section>\n", styles: [".hero{background:linear-gradient(135deg,var(--c2g-dark-bg, #16213e) 0%,#0f3460 100%);border-radius:20px;padding:32px;margin-bottom:24px;color:#fff}.hero__eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:8px}.hero__icon{font-size:18px;width:18px;height:18px;flex-shrink:0}.hero__title{font-size:28px;font-weight:700;margin:0 0 24px;line-height:1.2}.hero__lead{font-size:14px;line-height:1.6;color:#ffffffa6;margin:0 0 24px;max-width:560px}@media(max-width:1024px){.hero{padding:28px 22px}.hero__title{font-size:24px}.hero__lead{font-size:13px;margin-bottom:18px}}@media(max-width:640px){.hero{padding:24px 16px}.hero__title{font-size:22px}.hero__lead{font-size:13px;margin-bottom:14px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
49
49
|
}
|
|
50
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
50
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: HeroComponent, decorators: [{
|
|
51
51
|
type: Component,
|
|
52
52
|
args: [{ selector: 'app-hero', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule, TranslateModule], template: "<section class=\"hero\">\n @if (eyebrow()) {\n <div class=\"hero__eyebrow\">\n <mat-icon class=\"hero__icon\">backpack</mat-icon>\n <span>{{ eyebrow() }}</span>\n </div>\n }\n\n <h1 class=\"hero__title\">{{ title() }}</h1>\n <p class=\"hero__lead\">{{ lead() }}</p>\n\n <ng-content></ng-content>\n</section>\n", styles: [".hero{background:linear-gradient(135deg,var(--c2g-dark-bg, #16213e) 0%,#0f3460 100%);border-radius:20px;padding:32px;margin-bottom:24px;color:#fff}.hero__eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:8px}.hero__icon{font-size:18px;width:18px;height:18px;flex-shrink:0}.hero__title{font-size:28px;font-weight:700;margin:0 0 24px;line-height:1.2}.hero__lead{font-size:14px;line-height:1.6;color:#ffffffa6;margin:0 0 24px;max-width:560px}@media(max-width:1024px){.hero{padding:28px 22px}.hero__title{font-size:24px}.hero__lead{font-size:13px;margin-bottom:18px}}@media(max-width:640px){.hero{padding:24px 16px}.hero__title{font-size:22px}.hero__lead{font-size:13px;margin-bottom:14px}}\n"] }]
|
|
53
|
-
}]
|
|
53
|
+
}] });
|
|
54
54
|
|
|
55
55
|
class KpiCardComponent {
|
|
56
56
|
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
57
57
|
label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
58
58
|
icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
59
59
|
tone = input.required(...(ngDevMode ? [{ debugName: "tone" }] : []));
|
|
60
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
61
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
60
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: KpiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
61
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.1", type: KpiCardComponent, isStandalone: true, selector: "app-kpi-card", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"kpi-card\" [class]=\"'kpi-card kpi-card--' + tone()\" role=\"listitem\">\n <div class=\"kpi-card__content\">\n <span class=\"kpi-card__value\">{{ value() }}</span>\n <span class=\"kpi-card__label\">{{ label() }}</span>\n </div>\n <mat-icon class=\"kpi-card__icon\">{{ icon() }}</mat-icon>\n</div>", styles: [":host{display:block;width:100%;height:100%}.kpi-card{box-sizing:border-box;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;height:100%;position:relative;overflow:hidden}.kpi-card__content{display:flex;flex-direction:column;gap:6px;padding-right:20px}.kpi-card--owned{background:#48bb7826}.kpi-card--missing{background:#f5656526}.kpi-card--total{background:#ed893626}.kpi-card__value{font-size:28px;font-weight:700;line-height:1.05}.kpi-card__label{font-size:12px;opacity:.8;text-transform:uppercase;letter-spacing:.06em;line-height:1.25}.kpi-card__icon{position:absolute;top:12px;right:12px;font-size:18px;width:18px;height:18px;color:#ffffff40}.kpi-card--owned .kpi-card__icon{color:#3f9d76b3}.kpi-card--missing .kpi-card__icon{color:#dd4c4c99}.kpi-card--total .kpi-card__icon{color:#ff6b3599}@media(max-width:1024px){.kpi-card{padding:14px}.kpi-card__content{gap:4px;padding-right:18px}.kpi-card__value{font-size:25px}.kpi-card__label{font-size:11px}}@media(max-width:640px){.kpi-card{padding:12px 14px}.kpi-card__content{gap:4px;padding-right:18px}.kpi-card__value{font-size:22px}.kpi-card__label{font-size:10px}.kpi-card__icon{font-size:16px;width:16px;height:16px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
62
62
|
}
|
|
63
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: KpiCardComponent, decorators: [{
|
|
64
64
|
type: Component,
|
|
65
65
|
args: [{ selector: 'app-kpi-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconModule], template: "<div class=\"kpi-card\" [class]=\"'kpi-card kpi-card--' + tone()\" role=\"listitem\">\n <div class=\"kpi-card__content\">\n <span class=\"kpi-card__value\">{{ value() }}</span>\n <span class=\"kpi-card__label\">{{ label() }}</span>\n </div>\n <mat-icon class=\"kpi-card__icon\">{{ icon() }}</mat-icon>\n</div>", styles: [":host{display:block;width:100%;height:100%}.kpi-card{box-sizing:border-box;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;height:100%;position:relative;overflow:hidden}.kpi-card__content{display:flex;flex-direction:column;gap:6px;padding-right:20px}.kpi-card--owned{background:#48bb7826}.kpi-card--missing{background:#f5656526}.kpi-card--total{background:#ed893626}.kpi-card__value{font-size:28px;font-weight:700;line-height:1.05}.kpi-card__label{font-size:12px;opacity:.8;text-transform:uppercase;letter-spacing:.06em;line-height:1.25}.kpi-card__icon{position:absolute;top:12px;right:12px;font-size:18px;width:18px;height:18px;color:#ffffff40}.kpi-card--owned .kpi-card__icon{color:#3f9d76b3}.kpi-card--missing .kpi-card__icon{color:#dd4c4c99}.kpi-card--total .kpi-card__icon{color:#ff6b3599}@media(max-width:1024px){.kpi-card{padding:14px}.kpi-card__content{gap:4px;padding-right:18px}.kpi-card__value{font-size:25px}.kpi-card__label{font-size:11px}}@media(max-width:640px){.kpi-card{padding:12px 14px}.kpi-card__content{gap:4px;padding-right:18px}.kpi-card__value{font-size:22px}.kpi-card__label{font-size:10px}.kpi-card__icon{font-size:16px;width:16px;height:16px}}\n"] }]
|
|
66
|
-
}]
|
|
66
|
+
}] });
|
|
67
67
|
|
|
68
68
|
class DangerZoneItemComponent {
|
|
69
69
|
item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
|
|
@@ -83,13 +83,13 @@ class DangerZoneItemComponent {
|
|
|
83
83
|
onTriggered() {
|
|
84
84
|
this.triggered.emit(this.item());
|
|
85
85
|
}
|
|
86
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
87
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
86
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DangerZoneItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
87
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: DangerZoneItemComponent, isStandalone: true, selector: "c2g-danger-zone-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggered: "triggered" }, ngImport: i0, template: "<div class=\"c2g-danger-zone-item\">\n <div class=\"c2g-danger-zone-item__info\">\n <span class=\"c2g-danger-zone-item__label\">{{ titleKey() | translate }}</span>\n @if (descriptionKey(); as descriptionKey) {\n <span class=\"c2g-danger-zone-item__hint\">{{ descriptionKey | translate }}</span>\n }\n </div>\n\n <c2g-button\n [variant]=\"item().action.variant ?? 'secondary'\"\n [icon]=\"item().action.icon ?? ''\"\n [ariaLabel]=\"actionAriaLabelKey() | translate\"\n [disabled]=\"item().action.disabled ?? false\"\n (clicked)=\"onTriggered()\"\n >\n {{ actionLabelKey() | translate }}\n </c2g-button>\n</div>\n", styles: [".c2g-danger-zone-item{display:flex;align-items:flex-start;gap:1rem;justify-content:space-between;padding:.875rem 1.25rem}.c2g-danger-zone-item__info{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.c2g-danger-zone-item__label{font-size:.9rem;color:var(--c2g-text-primary, #1a1a1a);font-weight:500}.c2g-danger-zone-item__hint{font-size:.8rem;color:var(--c2g-text-muted, #666);line-height:1.4}@media(max-width:639px){.c2g-danger-zone-item{flex-direction:column;align-items:stretch}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "c2g-button", inputs: ["variant", "size", "disabled", "loading", "icon", "iconPosition", "iconOnly", "ariaLabel", "loadingAriaLabel", "type"], outputs: ["clicked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
88
88
|
}
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
89
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DangerZoneItemComponent, decorators: [{
|
|
90
90
|
type: Component,
|
|
91
91
|
args: [{ selector: 'c2g-danger-zone-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, TranslateModule], template: "<div class=\"c2g-danger-zone-item\">\n <div class=\"c2g-danger-zone-item__info\">\n <span class=\"c2g-danger-zone-item__label\">{{ titleKey() | translate }}</span>\n @if (descriptionKey(); as descriptionKey) {\n <span class=\"c2g-danger-zone-item__hint\">{{ descriptionKey | translate }}</span>\n }\n </div>\n\n <c2g-button\n [variant]=\"item().action.variant ?? 'secondary'\"\n [icon]=\"item().action.icon ?? ''\"\n [ariaLabel]=\"actionAriaLabelKey() | translate\"\n [disabled]=\"item().action.disabled ?? false\"\n (clicked)=\"onTriggered()\"\n >\n {{ actionLabelKey() | translate }}\n </c2g-button>\n</div>\n", styles: [".c2g-danger-zone-item{display:flex;align-items:flex-start;gap:1rem;justify-content:space-between;padding:.875rem 1.25rem}.c2g-danger-zone-item__info{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.c2g-danger-zone-item__label{font-size:.9rem;color:var(--c2g-text-primary, #1a1a1a);font-weight:500}.c2g-danger-zone-item__hint{font-size:.8rem;color:var(--c2g-text-muted, #666);line-height:1.4}@media(max-width:639px){.c2g-danger-zone-item{flex-direction:column;align-items:stretch}}\n"] }]
|
|
92
|
-
}]
|
|
92
|
+
}] });
|
|
93
93
|
|
|
94
94
|
class DangerZoneComponent {
|
|
95
95
|
headingKey = input('c2g.danger_zone.default.heading', ...(ngDevMode ? [{ debugName: "headingKey" }] : []));
|
|
@@ -120,26 +120,26 @@ class DangerZoneComponent {
|
|
|
120
120
|
item.onTrigger?.(item);
|
|
121
121
|
this.itemTriggered.emit(item.id);
|
|
122
122
|
}
|
|
123
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
124
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
123
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DangerZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
124
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: DangerZoneComponent, isStandalone: true, selector: "c2g-danger-zone", inputs: { headingKey: { classPropertyName: "headingKey", publicName: "headingKey", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemTriggered: "itemTriggered" }, ngImport: i0, template: "<section class=\"c2g-danger-zone\" aria-labelledby=\"c2g-danger-zone-heading\">\n <h2 id=\"c2g-danger-zone-heading\" class=\"c2g-danger-zone__heading\">\n {{ resolvedHeadingKey() | translate }}\n </h2>\n\n <div class=\"c2g-danger-zone__content\">\n @for (item of items(); track item.id; let last = $last) {\n <c2g-danger-zone-item [item]=\"item\" (triggered)=\"onItemTriggered($event)\" />\n\n @if (!last) {\n <div class=\"c2g-danger-zone__divider\" aria-hidden=\"true\"></div>\n }\n }\n </div>\n</section>", styles: [".c2g-danger-zone{background:var(--c2g-card-background, #fff);border-radius:12px;border:1px solid var(--c2g-outline-variant, #d8d8d8);border-top:3px solid var(--mat-sys-error, #d32f2f);overflow:hidden}.c2g-danger-zone__heading{margin:0;padding:1rem 1.25rem .75rem;font-size:.875rem;font-weight:700;color:var(--mat-sys-error, #d32f2f);letter-spacing:.02em;text-transform:uppercase;background:var(--c2g-bg-primary, #f8f8f8);border-bottom:1px solid var(--c2g-outline-variant, #d8d8d8)}.c2g-danger-zone__content{padding:.25rem 0}.c2g-danger-zone__divider{height:1px;margin:0 1.25rem;background:var(--c2g-outline-variant, #d8d8d8)}\n"], dependencies: [{ kind: "component", type: DangerZoneItemComponent, selector: "c2g-danger-zone-item", inputs: ["item"], outputs: ["triggered"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
125
125
|
}
|
|
126
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
126
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DangerZoneComponent, decorators: [{
|
|
127
127
|
type: Component,
|
|
128
128
|
args: [{ selector: 'c2g-danger-zone', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [DangerZoneItemComponent, TranslateModule], template: "<section class=\"c2g-danger-zone\" aria-labelledby=\"c2g-danger-zone-heading\">\n <h2 id=\"c2g-danger-zone-heading\" class=\"c2g-danger-zone__heading\">\n {{ resolvedHeadingKey() | translate }}\n </h2>\n\n <div class=\"c2g-danger-zone__content\">\n @for (item of items(); track item.id; let last = $last) {\n <c2g-danger-zone-item [item]=\"item\" (triggered)=\"onItemTriggered($event)\" />\n\n @if (!last) {\n <div class=\"c2g-danger-zone__divider\" aria-hidden=\"true\"></div>\n }\n }\n </div>\n</section>", styles: [".c2g-danger-zone{background:var(--c2g-card-background, #fff);border-radius:12px;border:1px solid var(--c2g-outline-variant, #d8d8d8);border-top:3px solid var(--mat-sys-error, #d32f2f);overflow:hidden}.c2g-danger-zone__heading{margin:0;padding:1rem 1.25rem .75rem;font-size:.875rem;font-weight:700;color:var(--mat-sys-error, #d32f2f);letter-spacing:.02em;text-transform:uppercase;background:var(--c2g-bg-primary, #f8f8f8);border-bottom:1px solid var(--c2g-outline-variant, #d8d8d8)}.c2g-danger-zone__content{padding:.25rem 0}.c2g-danger-zone__divider{height:1px;margin:0 1.25rem;background:var(--c2g-outline-variant, #d8d8d8)}\n"] }]
|
|
129
|
-
}]
|
|
129
|
+
}] });
|
|
130
130
|
|
|
131
131
|
class ListItemComponent {
|
|
132
132
|
group = input(null, ...(ngDevMode ? [{ debugName: "group" }] : []));
|
|
133
133
|
active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
134
134
|
selected = output();
|
|
135
135
|
opened = output();
|
|
136
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
137
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
136
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
137
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ListItemComponent, isStandalone: true, selector: "c2g-list-item", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", opened: "opened" }, ngImport: i0, template: "<li\n class=\"c2g-list-item\"\n [class.c2g-list-item--active]=\"active()\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"group()?.name\"\n (click)=\"selected.emit(group())\"\n (keyup.enter)=\"selected.emit(group())\"\n (keydown.space)=\"$event.preventDefault(); selected.emit(group())\"\n>\n <div class=\"c2g-list-item__avatar\">\n <mat-icon>group</mat-icon>\n </div>\n\n <div class=\"c2g-list-item__info\">\n <span class=\"c2g-list-item__name\">{{ group()?.name }}</span>\n @if (group()?.description) {\n <span class=\"c2g-list-item__desc\">{{ group()?.description }}</span>\n }\n </div>\n\n <div class=\"c2g-list-item__end\">\n <span class=\"c2g-list-item__members\">\n <mat-icon>group</mat-icon>\n {{ group()?.memberCount ?? group()?.members?.length ?? 0 }}\n </span>\n <button\n mat-icon-button\n class=\"c2g-list-item__open-btn\"\n [matTooltip]=\"'groups.open' | translate\"\n [attr.aria-label]=\"'groups.open' | translate\"\n (click)=\"$event.stopPropagation(); opened.emit(group())\"\n >\n <mat-icon>arrow_forward</mat-icon>\n </button>\n </div>\n</li>\n", styles: [":host{display:contents}.c2g-list-item{display:flex;align-items:center;gap:var(--spacing-3, 12px);padding:var(--spacing-3, 12px) var(--spacing-4, 16px);background:var(--c2g-glass-bg, rgba(255, 255, 255, .95));border:1px solid rgba(0,0,0,.06);border-radius:12px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;list-style:none}.c2g-list-item:hover{background:#fff;box-shadow:0 2px 8px #00000014}.c2g-list-item--active{border-color:var(--c2g-primary, #16213e);background:#16213e0a;box-shadow:0 0 0 2px #16213e1f}.c2g-list-item:focus-visible{outline:2px solid var(--c2g-primary, #16213e);outline-offset:2px}.c2g-list-item__avatar{width:40px;height:40px;border-radius:50%;background:var(--c2g-primary, #16213e);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}.c2g-list-item__avatar mat-icon{font-size:20px;width:20px;height:20px}.c2g-list-item__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.c2g-list-item__name{font-weight:600;font-size:14px;color:var(--c2g-text-primary, #1a1a2e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c2g-list-item__desc{font-size:12px;color:var(--c2g-text-muted, #6b5e52);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c2g-list-item__end{display:flex;align-items:center;gap:var(--spacing-2, 8px);flex-shrink:0}.c2g-list-item__members{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:var(--c2g-text-muted, #6b5e52);white-space:nowrap}.c2g-list-item__members mat-icon{font-size:16px;width:16px;height:16px}.c2g-list-item__open-btn{color:var(--c2g-text-muted, #6b5e52);transition:color .15s}.c2g-list-item__open-btn:hover{color:var(--c2g-primary, #16213e)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
138
138
|
}
|
|
139
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ListItemComponent, decorators: [{
|
|
140
140
|
type: Component,
|
|
141
141
|
args: [{ selector: 'c2g-list-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule, MatTooltipModule, TranslateModule], template: "<li\n class=\"c2g-list-item\"\n [class.c2g-list-item--active]=\"active()\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"group()?.name\"\n (click)=\"selected.emit(group())\"\n (keyup.enter)=\"selected.emit(group())\"\n (keydown.space)=\"$event.preventDefault(); selected.emit(group())\"\n>\n <div class=\"c2g-list-item__avatar\">\n <mat-icon>group</mat-icon>\n </div>\n\n <div class=\"c2g-list-item__info\">\n <span class=\"c2g-list-item__name\">{{ group()?.name }}</span>\n @if (group()?.description) {\n <span class=\"c2g-list-item__desc\">{{ group()?.description }}</span>\n }\n </div>\n\n <div class=\"c2g-list-item__end\">\n <span class=\"c2g-list-item__members\">\n <mat-icon>group</mat-icon>\n {{ group()?.memberCount ?? group()?.members?.length ?? 0 }}\n </span>\n <button\n mat-icon-button\n class=\"c2g-list-item__open-btn\"\n [matTooltip]=\"'groups.open' | translate\"\n [attr.aria-label]=\"'groups.open' | translate\"\n (click)=\"$event.stopPropagation(); opened.emit(group())\"\n >\n <mat-icon>arrow_forward</mat-icon>\n </button>\n </div>\n</li>\n", styles: [":host{display:contents}.c2g-list-item{display:flex;align-items:center;gap:var(--spacing-3, 12px);padding:var(--spacing-3, 12px) var(--spacing-4, 16px);background:var(--c2g-glass-bg, rgba(255, 255, 255, .95));border:1px solid rgba(0,0,0,.06);border-radius:12px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;list-style:none}.c2g-list-item:hover{background:#fff;box-shadow:0 2px 8px #00000014}.c2g-list-item--active{border-color:var(--c2g-primary, #16213e);background:#16213e0a;box-shadow:0 0 0 2px #16213e1f}.c2g-list-item:focus-visible{outline:2px solid var(--c2g-primary, #16213e);outline-offset:2px}.c2g-list-item__avatar{width:40px;height:40px;border-radius:50%;background:var(--c2g-primary, #16213e);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}.c2g-list-item__avatar mat-icon{font-size:20px;width:20px;height:20px}.c2g-list-item__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.c2g-list-item__name{font-weight:600;font-size:14px;color:var(--c2g-text-primary, #1a1a2e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c2g-list-item__desc{font-size:12px;color:var(--c2g-text-muted, #6b5e52);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c2g-list-item__end{display:flex;align-items:center;gap:var(--spacing-2, 8px);flex-shrink:0}.c2g-list-item__members{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:var(--c2g-text-muted, #6b5e52);white-space:nowrap}.c2g-list-item__members mat-icon{font-size:16px;width:16px;height:16px}.c2g-list-item__open-btn{color:var(--c2g-text-muted, #6b5e52);transition:color .15s}.c2g-list-item__open-btn:hover{color:var(--c2g-primary, #16213e)}\n"] }]
|
|
142
|
-
}]
|
|
142
|
+
}] });
|
|
143
143
|
|
|
144
144
|
class StatCardComponent {
|
|
145
145
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -162,13 +162,13 @@ class StatCardComponent {
|
|
|
162
162
|
backgroundRepeat: 'no-repeat',
|
|
163
163
|
};
|
|
164
164
|
}, ...(ngDevMode ? [{ debugName: "cardBackgroundStyle" }] : []));
|
|
165
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
166
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
165
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
166
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: StatCardComponent, isStandalone: true, selector: "c2g-stat-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"stat-card\"\n [class]=\"'stat-card--' + (data().iconBackgroundTone || 'neutral')\"\n [class.stat-card--disabled]=\"data().disabled\"\n [class.stat-card--custom-bg]=\"!!data().background\"\n [ngStyle]=\"cardBackgroundStyle()\"\n>\n @if (data().lottiePreset) {\n <div class=\"stat-icon-wrapper stat-icon-wrapper--lottie\">\n <c2g-lottie-loader\n [preset]=\"data().lottiePreset!\"\n width=\"28px\"\n height=\"28px\"\n [showLabel]=\"false\"\n label=\"Animation\"\n ></c2g-lottie-loader>\n </div>\n } @else if (data().icon) {\n <div class=\"stat-icon-wrapper\">\n <mat-icon class=\"stat-icon\">{{ data().icon }}</mat-icon>\n </div>\n }\n\n <div class=\"stat-content\">\n <div class=\"stat-value\">{{ data().value }}</div>\n <div class=\"stat-label\">{{ data().label | translate }}</div>\n </div>\n\n @if (data().trend) {\n <div class=\"stat-trend\" [class]=\"'stat-trend--' + data().trend!.direction\">\n <mat-icon class=\"trend-icon\">\n @switch (data().trend!.direction) {\n @case ('up') {\n trending_up\n }\n @case ('down') {\n trending_down\n }\n @case ('neutral') {\n trending_flat\n }\n }\n </mat-icon>\n <span class=\"trend-value\">{{ data().trend!.value }}</span>\n </div>\n }\n</div>\n", styles: [".stat-card{display:flex;align-items:center;gap:var(--c2g-space-4, 1rem);min-height:5rem;padding:var(--c2g-space-5, 1.25rem);border:1px solid var(--c2g-color-border-subtle, #e5dfd7);border-radius:var(--c2g-radius-lg, 12px);background:var(--c2g-color-surface, #ffffff);opacity:1;transition:opacity .2s ease-in-out}.stat-card.stat-card--disabled{opacity:.5;pointer-events:none}.stat-card.stat-card--custom-bg{border-color:color-mix(in srgb,#ffffff 45%,transparent)}.stat-card.stat-card--custom-bg .stat-value,.stat-card.stat-card--custom-bg .stat-label{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.28)}.stat-card.stat-card--custom-bg .stat-icon-wrapper{background-color:#ffffff2e;border:1px solid rgba(255,255,255,.26);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.stat-card.stat-card--custom-bg .stat-icon{color:#fff}.stat-card.stat-card--custom-bg .stat-trend--up{color:#b9f6ca}.stat-card.stat-card--custom-bg .stat-trend--down{color:#ffccbc}.stat-card.stat-card--custom-bg .stat-trend--neutral{color:#eceff1}.stat-card--primary{border-left:4px solid var(--c2g-color-primary, #ff6b35)}.stat-card--primary .stat-value{color:var(--c2g-color-primary, #ff6b35)}.stat-card--primary .stat-icon-wrapper{background-color:color-mix(in srgb,var(--c2g-color-primary, #ff6b35) 10%,#ffffff)}.stat-card--primary .stat-icon{color:var(--c2g-color-primary, #ff6b35)}.stat-card--secondary{border-left:4px solid var(--c2g-color-secondary, #2c5f5d)}.stat-card--secondary .stat-value{color:var(--c2g-color-secondary, #2c5f5d)}.stat-card--secondary .stat-icon-wrapper{background-color:color-mix(in srgb,var(--c2g-color-secondary, #2c5f5d) 10%,#ffffff)}.stat-card--secondary .stat-icon{color:var(--c2g-color-secondary, #2c5f5d)}.stat-card--neutral{border-left:4px solid var(--c2g-color-border-subtle, #d0c6bb)}.stat-card--neutral .stat-value{color:var(--c2g-color-text-primary, #2f2925)}.stat-card--neutral .stat-icon-wrapper{background-color:var(--c2g-color-surface-subtle, #f7f3ef)}.stat-card--neutral .stat-icon{color:var(--c2g-color-text-secondary, #4a423b)}.stat-icon-wrapper{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:var(--c2g-radius-md, 8px);flex-shrink:0}.stat-icon-wrapper--lottie c2g-lottie-loader{display:inline-flex}.stat-icon{font-size:1.5rem;width:1.5rem;height:1.5rem}.stat-content{display:flex;flex:1;flex-direction:column;gap:var(--c2g-space-1, .25rem)}.stat-value{font-size:var(--c2g-font-size-xl, 1.5rem);font-weight:var(--c2g-font-weight-bold, 700);line-height:1.2}.stat-label{color:var(--c2g-color-text-secondary, #4a423b);font-size:var(--c2g-font-size-sm, .875rem);font-weight:var(--c2g-font-weight-medium, 500)}.stat-trend{display:flex;align-items:center;gap:var(--c2g-space-1, .25rem)}.stat-trend--up{color:var(--c2g-color-success, #2e7d32)}.stat-trend--down{color:var(--c2g-color-danger, #c62828)}.stat-trend--neutral{color:var(--c2g-color-text-muted, #7a6f64)}.trend-icon{font-size:1rem;width:1rem;height:1rem}.trend-value{font-size:var(--c2g-font-size-xs, .75rem);font-weight:var(--c2g-font-weight-medium, 500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LottieLoaderComponent, selector: "c2g-lottie-loader", inputs: ["preset", "presetMode", "animationPath", "animationData", "loop", "autoplay", "width", "height", "label", "showLabel"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
167
167
|
}
|
|
168
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: StatCardComponent, decorators: [{
|
|
169
169
|
type: Component,
|
|
170
170
|
args: [{ selector: 'c2g-stat-card', standalone: true, imports: [CommonModule, MatIcon, TranslateModule, LottieLoaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"stat-card\"\n [class]=\"'stat-card--' + (data().iconBackgroundTone || 'neutral')\"\n [class.stat-card--disabled]=\"data().disabled\"\n [class.stat-card--custom-bg]=\"!!data().background\"\n [ngStyle]=\"cardBackgroundStyle()\"\n>\n @if (data().lottiePreset) {\n <div class=\"stat-icon-wrapper stat-icon-wrapper--lottie\">\n <c2g-lottie-loader\n [preset]=\"data().lottiePreset!\"\n width=\"28px\"\n height=\"28px\"\n [showLabel]=\"false\"\n label=\"Animation\"\n ></c2g-lottie-loader>\n </div>\n } @else if (data().icon) {\n <div class=\"stat-icon-wrapper\">\n <mat-icon class=\"stat-icon\">{{ data().icon }}</mat-icon>\n </div>\n }\n\n <div class=\"stat-content\">\n <div class=\"stat-value\">{{ data().value }}</div>\n <div class=\"stat-label\">{{ data().label | translate }}</div>\n </div>\n\n @if (data().trend) {\n <div class=\"stat-trend\" [class]=\"'stat-trend--' + data().trend!.direction\">\n <mat-icon class=\"trend-icon\">\n @switch (data().trend!.direction) {\n @case ('up') {\n trending_up\n }\n @case ('down') {\n trending_down\n }\n @case ('neutral') {\n trending_flat\n }\n }\n </mat-icon>\n <span class=\"trend-value\">{{ data().trend!.value }}</span>\n </div>\n }\n</div>\n", styles: [".stat-card{display:flex;align-items:center;gap:var(--c2g-space-4, 1rem);min-height:5rem;padding:var(--c2g-space-5, 1.25rem);border:1px solid var(--c2g-color-border-subtle, #e5dfd7);border-radius:var(--c2g-radius-lg, 12px);background:var(--c2g-color-surface, #ffffff);opacity:1;transition:opacity .2s ease-in-out}.stat-card.stat-card--disabled{opacity:.5;pointer-events:none}.stat-card.stat-card--custom-bg{border-color:color-mix(in srgb,#ffffff 45%,transparent)}.stat-card.stat-card--custom-bg .stat-value,.stat-card.stat-card--custom-bg .stat-label{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.28)}.stat-card.stat-card--custom-bg .stat-icon-wrapper{background-color:#ffffff2e;border:1px solid rgba(255,255,255,.26);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.stat-card.stat-card--custom-bg .stat-icon{color:#fff}.stat-card.stat-card--custom-bg .stat-trend--up{color:#b9f6ca}.stat-card.stat-card--custom-bg .stat-trend--down{color:#ffccbc}.stat-card.stat-card--custom-bg .stat-trend--neutral{color:#eceff1}.stat-card--primary{border-left:4px solid var(--c2g-color-primary, #ff6b35)}.stat-card--primary .stat-value{color:var(--c2g-color-primary, #ff6b35)}.stat-card--primary .stat-icon-wrapper{background-color:color-mix(in srgb,var(--c2g-color-primary, #ff6b35) 10%,#ffffff)}.stat-card--primary .stat-icon{color:var(--c2g-color-primary, #ff6b35)}.stat-card--secondary{border-left:4px solid var(--c2g-color-secondary, #2c5f5d)}.stat-card--secondary .stat-value{color:var(--c2g-color-secondary, #2c5f5d)}.stat-card--secondary .stat-icon-wrapper{background-color:color-mix(in srgb,var(--c2g-color-secondary, #2c5f5d) 10%,#ffffff)}.stat-card--secondary .stat-icon{color:var(--c2g-color-secondary, #2c5f5d)}.stat-card--neutral{border-left:4px solid var(--c2g-color-border-subtle, #d0c6bb)}.stat-card--neutral .stat-value{color:var(--c2g-color-text-primary, #2f2925)}.stat-card--neutral .stat-icon-wrapper{background-color:var(--c2g-color-surface-subtle, #f7f3ef)}.stat-card--neutral .stat-icon{color:var(--c2g-color-text-secondary, #4a423b)}.stat-icon-wrapper{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:var(--c2g-radius-md, 8px);flex-shrink:0}.stat-icon-wrapper--lottie c2g-lottie-loader{display:inline-flex}.stat-icon{font-size:1.5rem;width:1.5rem;height:1.5rem}.stat-content{display:flex;flex:1;flex-direction:column;gap:var(--c2g-space-1, .25rem)}.stat-value{font-size:var(--c2g-font-size-xl, 1.5rem);font-weight:var(--c2g-font-weight-bold, 700);line-height:1.2}.stat-label{color:var(--c2g-color-text-secondary, #4a423b);font-size:var(--c2g-font-size-sm, .875rem);font-weight:var(--c2g-font-weight-medium, 500)}.stat-trend{display:flex;align-items:center;gap:var(--c2g-space-1, .25rem)}.stat-trend--up{color:var(--c2g-color-success, #2e7d32)}.stat-trend--down{color:var(--c2g-color-danger, #c62828)}.stat-trend--neutral{color:var(--c2g-color-text-muted, #7a6f64)}.trend-icon{font-size:1rem;width:1rem;height:1rem}.trend-value{font-size:var(--c2g-font-size-xs, .75rem);font-weight:var(--c2g-font-weight-medium, 500)}\n"] }]
|
|
171
|
-
}]
|
|
171
|
+
}] });
|
|
172
172
|
|
|
173
173
|
class ActionCardComponent {
|
|
174
174
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
@@ -196,10 +196,10 @@ class ActionCardComponent {
|
|
|
196
196
|
this.cardClicked.emit();
|
|
197
197
|
}
|
|
198
198
|
}
|
|
199
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
200
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
199
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ActionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
200
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ActionCardComponent, isStandalone: true, selector: "c2g-action-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<mat-card\n class=\"action-card\"\n [class.clickable]=\"isInteractive()\"\n [class.disabled]=\"data().disabled\"\n [class.variant-icon-left]=\"variant() === 'icon-left'\"\n [class.variant-hero-top]=\"variant() === 'hero-top'\"\n [class.variant-icon-detail]=\"variant() === 'icon-detail'\"\n (click)=\"onCardClick()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.role]=\"isInteractive() ? 'button' : null\"\n [attr.tabindex]=\"isInteractive() ? '0' : null\">\n\n @if (variant() === 'hero-top') {\n <div class=\"hero-top-header\" [class.has-image]=\"data().image || data().lottiePreset\">\n @if (data().lottiePreset) {\n <div class=\"hero-image hero-image--lottie\">\n <c2g-lottie-loader\n [preset]=\"data().lottiePreset!\"\n [showLabel]=\"false\"\n width=\"100%\"\n height=\"100%\"\n ></c2g-lottie-loader>\n </div>\n } @else if (data().image) {\n <div class=\"hero-image\">\n <img [src]=\"data().image\" [alt]=\"data().title | translate\" />\n </div>\n }\n\n <div class=\"hero-top-title-wrap\">\n <h3 class=\"hero-top-title\">{{ data().title | translate }}</h3>\n @if (effectiveText()) {\n <p class=\"hero-top-description\">{{ effectiveText() | translate }}</p>\n }\n </div>\n </div>\n } @else if (variant() === 'icon-detail') {\n <div class=\"icon-detail-layout\">\n @if (data().icon) {\n <div class=\"icon-chip\" [ngClass]=\"iconToneClass()\">\n <mat-icon class=\"hero-icon\">{{ data().icon }}</mat-icon>\n </div>\n }\n <div class=\"icon-detail-body\">\n <h3 class=\"hero-title\">{{ data().title | translate }}</h3>\n @if (effectiveText()) {\n <p class=\"hero-description\">{{ effectiveText() | translate }}</p>\n }\n <div class=\"icon-detail-cta\" (click)=\"$event.stopPropagation()\">\n @if (data().ctaLabel) {\n <c2g-button variant=\"ghost\" size=\"sm\">{{ data().ctaLabel! | translate }}</c2g-button>\n }\n <ng-content select=\"[ctas]\"></ng-content>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"icon-left-header\">\n @if (data().icon) {\n <div class=\"icon-chip\" [ngClass]=\"iconToneClass()\">\n <mat-icon class=\"hero-icon\">{{ data().icon }}</mat-icon>\n </div>\n }\n\n <div class=\"icon-left-title-wrap\">\n <h3 class=\"hero-title\">{{ data().title | translate }}</h3>\n </div>\n </div>\n }\n\n @if (variant() !== 'icon-detail') {\n <div class=\"content-section\">\n @if (variant() !== 'hero-top' && effectiveText()) {\n <p class=\"hero-description\">{{ effectiveText() | translate }}</p>\n }\n\n @if (supportingDescription()) {\n <p class=\"hero-description supporting\">{{ supportingDescription() | translate }}</p>\n }\n\n <ng-content></ng-content>\n </div>\n }\n\n @if (variant() !== 'icon-detail') {\n <div class=\"cta-section\" (click)=\"$event.stopPropagation()\">\n @if (data().ctaLabel) {\n <c2g-button variant=\"ghost\" size=\"sm\">{{ data().ctaLabel! | translate }}</c2g-button>\n }\n\n <ng-content select=\"[ctas]\"></ng-content>\n </div>\n }\n\n</mat-card>\n", styles: [".action-card{border-radius:var(--c2g-radius-lg);overflow:hidden;transition:all var(--c2g-transition-fast);box-shadow:var(--c2g-shadow-sm);background-color:var(--c2g-neutral-50);border:1px solid var(--c2g-neutral-300);display:flex;flex-direction:column;min-height:100%}.action-card.clickable{cursor:pointer}.action-card.clickable:hover{transform:translateY(-2px);box-shadow:var(--c2g-shadow-md)}.action-card.disabled{opacity:.6;cursor:not-allowed}.action-card.disabled:hover{transform:none;box-shadow:var(--c2g-shadow-sm)}.action-card.variant-hero-top .hero-top-header{min-height:132px}.icon-left-header{display:flex;align-items:center;gap:var(--c2g-space-md);padding:var(--c2g-space-lg)}.icon-detail-layout{display:flex;flex-direction:row;align-items:flex-start;gap:var(--c2g-space-md);padding:var(--c2g-space-lg);flex:1}.icon-detail-body{display:flex;flex-direction:column;flex:1;min-width:0}.icon-detail-cta{display:flex;justify-content:flex-end;margin-top:auto;padding-top:var(--c2g-space-sm)}.icon-chip{width:48px;height:48px;border-radius:var(--c2g-radius-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-chip.primary{background:var(--c2g-primary);color:var(--c2g-neutral-50)}.icon-chip.secondary{background:var(--c2g-secondary);color:var(--c2g-neutral-50)}.icon-chip.neutral{background:var(--c2g-neutral-200);color:var(--c2g-neutral-900)}.hero-icon{display:inline-flex!important;align-items:center;justify-content:center;font-size:24px;width:24px;height:24px;vertical-align:middle;flex-shrink:0}.icon-left-title-wrap{min-width:0}.hero-top-header{position:relative;min-height:120px;display:flex;align-items:flex-end;justify-content:flex-end;padding:var(--c2g-space-lg);background:linear-gradient(135deg,var(--c2g-primary-light) 0%,var(--c2g-secondary-light) 100%)}@media(min-width:768px){.hero-top-header{min-height:140px}}.hero-top-header.has-image .hero-top-title-wrap{background:#1f1c199e;border-radius:var(--c2g-radius-sm);padding:var(--c2g-space-sm) var(--c2g-space-md);z-index:1}.hero-top-header.has-image .hero-top-title{color:var(--c2g-neutral-50)}.hero-top-header.has-image .hero-top-description{color:#fffc}.hero-image{position:absolute;top:0;left:0;width:100%;height:120px;overflow:hidden}.hero-image img{width:100%;height:100%;object-fit:cover}@media(min-width:768px){.hero-image{height:140px}}.hero-top-title{margin:0;font-size:16px;font-weight:600;line-height:1.3;color:var(--c2g-neutral-50)}@media(min-width:768px){.hero-top-title{font-size:18px}}.hero-top-description{margin:2px 0 0;font-size:12px;font-weight:500;line-height:1.3;color:#ffffffbf}.hero-title{margin:0;font-size:16px;font-weight:600;line-height:1.3}@media(min-width:768px){.hero-title{font-size:18px}}.content-section{display:flex;flex-direction:column;gap:var(--c2g-space-sm);flex:1}.content-section:empty{display:none}.content-section:not(:empty){padding:var(--c2g-space-lg)}.cta-section:empty{display:none}.cta-section:not(:empty){padding:var(--c2g-space-sm) var(--c2g-space-lg) var(--c2g-space-lg);display:flex;gap:var(--c2g-space-sm);justify-content:flex-start;align-items:center}.cta-section:not(:empty) button mat-icon{display:inline-flex!important;align-items:center;justify-content:center;line-height:1!important;vertical-align:middle;font-size:20px;width:20px;height:20px}.hero-description{margin:0;font-size:14px;line-height:1.4;opacity:.8;color:var(--c2g-neutral-700)}@media(min-width:768px){.hero-description{font-size:15px}}.hero-description.supporting{color:var(--c2g-neutral-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "c2g-button", inputs: ["variant", "size", "disabled", "loading", "icon", "iconPosition", "iconOnly", "ariaLabel", "loadingAriaLabel", "type"], outputs: ["clicked"] }, { kind: "component", type: LottieLoaderComponent, selector: "c2g-lottie-loader", inputs: ["preset", "presetMode", "animationPath", "animationData", "loop", "autoplay", "width", "height", "label", "showLabel"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
201
201
|
}
|
|
202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ActionCardComponent, decorators: [{
|
|
203
203
|
type: Component,
|
|
204
204
|
args: [{ selector: 'c2g-action-card', standalone: true, imports: [
|
|
205
205
|
CommonModule,
|
|
@@ -209,16 +209,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
209
209
|
ButtonComponent,
|
|
210
210
|
LottieLoaderComponent
|
|
211
211
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card\n class=\"action-card\"\n [class.clickable]=\"isInteractive()\"\n [class.disabled]=\"data().disabled\"\n [class.variant-icon-left]=\"variant() === 'icon-left'\"\n [class.variant-hero-top]=\"variant() === 'hero-top'\"\n [class.variant-icon-detail]=\"variant() === 'icon-detail'\"\n (click)=\"onCardClick()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.role]=\"isInteractive() ? 'button' : null\"\n [attr.tabindex]=\"isInteractive() ? '0' : null\">\n\n @if (variant() === 'hero-top') {\n <div class=\"hero-top-header\" [class.has-image]=\"data().image || data().lottiePreset\">\n @if (data().lottiePreset) {\n <div class=\"hero-image hero-image--lottie\">\n <c2g-lottie-loader\n [preset]=\"data().lottiePreset!\"\n [showLabel]=\"false\"\n width=\"100%\"\n height=\"100%\"\n ></c2g-lottie-loader>\n </div>\n } @else if (data().image) {\n <div class=\"hero-image\">\n <img [src]=\"data().image\" [alt]=\"data().title | translate\" />\n </div>\n }\n\n <div class=\"hero-top-title-wrap\">\n <h3 class=\"hero-top-title\">{{ data().title | translate }}</h3>\n @if (effectiveText()) {\n <p class=\"hero-top-description\">{{ effectiveText() | translate }}</p>\n }\n </div>\n </div>\n } @else if (variant() === 'icon-detail') {\n <div class=\"icon-detail-layout\">\n @if (data().icon) {\n <div class=\"icon-chip\" [ngClass]=\"iconToneClass()\">\n <mat-icon class=\"hero-icon\">{{ data().icon }}</mat-icon>\n </div>\n }\n <div class=\"icon-detail-body\">\n <h3 class=\"hero-title\">{{ data().title | translate }}</h3>\n @if (effectiveText()) {\n <p class=\"hero-description\">{{ effectiveText() | translate }}</p>\n }\n <div class=\"icon-detail-cta\" (click)=\"$event.stopPropagation()\">\n @if (data().ctaLabel) {\n <c2g-button variant=\"ghost\" size=\"sm\">{{ data().ctaLabel! | translate }}</c2g-button>\n }\n <ng-content select=\"[ctas]\"></ng-content>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"icon-left-header\">\n @if (data().icon) {\n <div class=\"icon-chip\" [ngClass]=\"iconToneClass()\">\n <mat-icon class=\"hero-icon\">{{ data().icon }}</mat-icon>\n </div>\n }\n\n <div class=\"icon-left-title-wrap\">\n <h3 class=\"hero-title\">{{ data().title | translate }}</h3>\n </div>\n </div>\n }\n\n @if (variant() !== 'icon-detail') {\n <div class=\"content-section\">\n @if (variant() !== 'hero-top' && effectiveText()) {\n <p class=\"hero-description\">{{ effectiveText() | translate }}</p>\n }\n\n @if (supportingDescription()) {\n <p class=\"hero-description supporting\">{{ supportingDescription() | translate }}</p>\n }\n\n <ng-content></ng-content>\n </div>\n }\n\n @if (variant() !== 'icon-detail') {\n <div class=\"cta-section\" (click)=\"$event.stopPropagation()\">\n @if (data().ctaLabel) {\n <c2g-button variant=\"ghost\" size=\"sm\">{{ data().ctaLabel! | translate }}</c2g-button>\n }\n\n <ng-content select=\"[ctas]\"></ng-content>\n </div>\n }\n\n</mat-card>\n", styles: [".action-card{border-radius:var(--c2g-radius-lg);overflow:hidden;transition:all var(--c2g-transition-fast);box-shadow:var(--c2g-shadow-sm);background-color:var(--c2g-neutral-50);border:1px solid var(--c2g-neutral-300);display:flex;flex-direction:column;min-height:100%}.action-card.clickable{cursor:pointer}.action-card.clickable:hover{transform:translateY(-2px);box-shadow:var(--c2g-shadow-md)}.action-card.disabled{opacity:.6;cursor:not-allowed}.action-card.disabled:hover{transform:none;box-shadow:var(--c2g-shadow-sm)}.action-card.variant-hero-top .hero-top-header{min-height:132px}.icon-left-header{display:flex;align-items:center;gap:var(--c2g-space-md);padding:var(--c2g-space-lg)}.icon-detail-layout{display:flex;flex-direction:row;align-items:flex-start;gap:var(--c2g-space-md);padding:var(--c2g-space-lg);flex:1}.icon-detail-body{display:flex;flex-direction:column;flex:1;min-width:0}.icon-detail-cta{display:flex;justify-content:flex-end;margin-top:auto;padding-top:var(--c2g-space-sm)}.icon-chip{width:48px;height:48px;border-radius:var(--c2g-radius-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-chip.primary{background:var(--c2g-primary);color:var(--c2g-neutral-50)}.icon-chip.secondary{background:var(--c2g-secondary);color:var(--c2g-neutral-50)}.icon-chip.neutral{background:var(--c2g-neutral-200);color:var(--c2g-neutral-900)}.hero-icon{display:inline-flex!important;align-items:center;justify-content:center;font-size:24px;width:24px;height:24px;vertical-align:middle;flex-shrink:0}.icon-left-title-wrap{min-width:0}.hero-top-header{position:relative;min-height:120px;display:flex;align-items:flex-end;justify-content:flex-end;padding:var(--c2g-space-lg);background:linear-gradient(135deg,var(--c2g-primary-light) 0%,var(--c2g-secondary-light) 100%)}@media(min-width:768px){.hero-top-header{min-height:140px}}.hero-top-header.has-image .hero-top-title-wrap{background:#1f1c199e;border-radius:var(--c2g-radius-sm);padding:var(--c2g-space-sm) var(--c2g-space-md);z-index:1}.hero-top-header.has-image .hero-top-title{color:var(--c2g-neutral-50)}.hero-top-header.has-image .hero-top-description{color:#fffc}.hero-image{position:absolute;top:0;left:0;width:100%;height:120px;overflow:hidden}.hero-image img{width:100%;height:100%;object-fit:cover}@media(min-width:768px){.hero-image{height:140px}}.hero-top-title{margin:0;font-size:16px;font-weight:600;line-height:1.3;color:var(--c2g-neutral-50)}@media(min-width:768px){.hero-top-title{font-size:18px}}.hero-top-description{margin:2px 0 0;font-size:12px;font-weight:500;line-height:1.3;color:#ffffffbf}.hero-title{margin:0;font-size:16px;font-weight:600;line-height:1.3}@media(min-width:768px){.hero-title{font-size:18px}}.content-section{display:flex;flex-direction:column;gap:var(--c2g-space-sm);flex:1}.content-section:empty{display:none}.content-section:not(:empty){padding:var(--c2g-space-lg)}.cta-section:empty{display:none}.cta-section:not(:empty){padding:var(--c2g-space-sm) var(--c2g-space-lg) var(--c2g-space-lg);display:flex;gap:var(--c2g-space-sm);justify-content:flex-start;align-items:center}.cta-section:not(:empty) button mat-icon{display:inline-flex!important;align-items:center;justify-content:center;line-height:1!important;vertical-align:middle;font-size:20px;width:20px;height:20px}.hero-description{margin:0;font-size:14px;line-height:1.4;opacity:.8;color:var(--c2g-neutral-700)}@media(min-width:768px){.hero-description{font-size:15px}}.hero-description.supporting{color:var(--c2g-neutral-600)}\n"] }]
|
|
212
|
-
}]
|
|
212
|
+
}] });
|
|
213
213
|
|
|
214
214
|
class ViewToggleComponent {
|
|
215
215
|
options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
216
216
|
activeValue = input(null, ...(ngDevMode ? [{ debugName: "activeValue" }] : []));
|
|
217
217
|
valueChange = output();
|
|
218
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
219
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
218
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ViewToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
219
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: ViewToggleComponent, isStandalone: true, selector: "app-view-toggle", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"view-toggle\" role=\"group\">\n @for (option of options(); track option.value) {\n <button\n mat-icon-button\n [class.active]=\"activeValue() === option.value\"\n (click)=\"valueChange.emit(option.value)\"\n [matTooltip]=\"option.label | translate\"\n [attr.aria-label]=\"option.label | translate\"\n [attr.aria-pressed]=\"activeValue() === option.value\"\n >\n <mat-icon>{{ option.icon }}</mat-icon>\n </button>\n }\n</div>\n", styles: [".view-toggle{display:flex;border:1px solid var(--c2g-color-border-subtle, rgba(17, 24, 39, .12));border-radius:var(--c2g-radius-md, .625rem);overflow:hidden;background:var(--c2g-glass-bg, rgba(255, 255, 255, .95))}.view-toggle button{border-radius:0!important;min-width:2.5rem;width:2.5rem;height:2.5rem;padding:0;border-right:1px solid var(--c2g-color-border-soft, rgba(17, 24, 39, .08));display:flex;align-items:center;justify-content:center;transition:background-color var(--c2g-motion-duration-base, .2s) var(--c2g-motion-ease-standard, ease)}.view-toggle button:last-child{border-right:none}.view-toggle button.active{background:color-mix(in srgb,var(--c2g-color-text-primary) 8%,transparent)}.view-toggle button:hover:not(.active){background:color-mix(in srgb,var(--c2g-color-text-primary) 4%,transparent)}.view-toggle button mat-icon{display:flex;align-items:center;justify-content:center;font-size:1.25rem;width:1.25rem;height:1.25rem;line-height:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
220
220
|
}
|
|
221
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
221
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: ViewToggleComponent, decorators: [{
|
|
222
222
|
type: Component,
|
|
223
223
|
args: [{ selector: 'app-view-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
224
224
|
MatIconModule,
|
|
@@ -226,7 +226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
226
226
|
MatTooltipModule,
|
|
227
227
|
TranslateModule
|
|
228
228
|
], template: "<div class=\"view-toggle\" role=\"group\">\n @for (option of options(); track option.value) {\n <button\n mat-icon-button\n [class.active]=\"activeValue() === option.value\"\n (click)=\"valueChange.emit(option.value)\"\n [matTooltip]=\"option.label | translate\"\n [attr.aria-label]=\"option.label | translate\"\n [attr.aria-pressed]=\"activeValue() === option.value\"\n >\n <mat-icon>{{ option.icon }}</mat-icon>\n </button>\n }\n</div>\n", styles: [".view-toggle{display:flex;border:1px solid var(--c2g-color-border-subtle, rgba(17, 24, 39, .12));border-radius:var(--c2g-radius-md, .625rem);overflow:hidden;background:var(--c2g-glass-bg, rgba(255, 255, 255, .95))}.view-toggle button{border-radius:0!important;min-width:2.5rem;width:2.5rem;height:2.5rem;padding:0;border-right:1px solid var(--c2g-color-border-soft, rgba(17, 24, 39, .08));display:flex;align-items:center;justify-content:center;transition:background-color var(--c2g-motion-duration-base, .2s) var(--c2g-motion-ease-standard, ease)}.view-toggle button:last-child{border-right:none}.view-toggle button.active{background:color-mix(in srgb,var(--c2g-color-text-primary) 8%,transparent)}.view-toggle button:hover:not(.active){background:color-mix(in srgb,var(--c2g-color-text-primary) 4%,transparent)}.view-toggle button mat-icon{display:flex;align-items:center;justify-content:center;font-size:1.25rem;width:1.25rem;height:1.25rem;line-height:1.25rem}\n"] }]
|
|
229
|
-
}]
|
|
229
|
+
}] });
|
|
230
230
|
|
|
231
231
|
class SegmentedToggleComponent {
|
|
232
232
|
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
@@ -318,8 +318,8 @@ class SegmentedToggleComponent {
|
|
|
318
318
|
allButtons[optionIndex]?.focus();
|
|
319
319
|
}
|
|
320
320
|
}
|
|
321
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
322
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
321
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SegmentedToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
322
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: SegmentedToggleComponent, isStandalone: true, selector: "c2g-segmented-toggle", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
|
|
323
323
|
{
|
|
324
324
|
provide: NG_VALUE_ACCESSOR,
|
|
325
325
|
useExisting: forwardRef(() => SegmentedToggleComponent),
|
|
@@ -356,7 +356,7 @@ class SegmentedToggleComponent {
|
|
|
356
356
|
</div>
|
|
357
357
|
`, isInline: true, styles: [".c2g-segmented{display:inline-flex;align-items:center;border:1px solid var(--c2g-color-border-subtle, rgba(74, 66, 59, .18));border-radius:var(--c2g-radius-md, .625rem);padding:var(--c2g-space-1, .25rem);background:var(--c2g-color-surface, #ffffff);gap:var(--c2g-space-1, .25rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-segmented__item{border:none;background:transparent;border-radius:var(--c2g-radius-sm, .375rem);padding:var(--c2g-space-2, .5rem) var(--c2g-space-3, .75rem);display:inline-flex;align-items:center;gap:var(--c2g-space-2, .5rem);font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-color-text-secondary, #4a423b);cursor:pointer;transition:all var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease)}.c2g-segmented__icon{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;font-size:.875rem;line-height:1}.c2g-segmented__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.c2g-segmented__item--active{background:var(--c2g-color-primary, #ff6b35);color:var(--c2g-color-text-primary, #1a1714);font-weight:var(--c2g-font-weight-semibold, 600)}.c2g-segmented__item:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-focus, #e55623) 24%,transparent)}.c2g-segmented__item:disabled{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
358
358
|
}
|
|
359
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
359
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SegmentedToggleComponent, decorators: [{
|
|
360
360
|
type: Component,
|
|
361
361
|
args: [{ selector: 'c2g-segmented-toggle', standalone: true, imports: [MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
362
362
|
{
|
|
@@ -394,7 +394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
|
|
|
394
394
|
}
|
|
395
395
|
</div>
|
|
396
396
|
`, styles: [".c2g-segmented{display:inline-flex;align-items:center;border:1px solid var(--c2g-color-border-subtle, rgba(74, 66, 59, .18));border-radius:var(--c2g-radius-md, .625rem);padding:var(--c2g-space-1, .25rem);background:var(--c2g-color-surface, #ffffff);gap:var(--c2g-space-1, .25rem);font-family:var(--c2g-font-family-base, \"Quicksand\", \"Segoe UI\", sans-serif)}.c2g-segmented__item{border:none;background:transparent;border-radius:var(--c2g-radius-sm, .375rem);padding:var(--c2g-space-2, .5rem) var(--c2g-space-3, .75rem);display:inline-flex;align-items:center;gap:var(--c2g-space-2, .5rem);font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-color-text-secondary, #4a423b);cursor:pointer;transition:all var(--c2g-motion-duration-fast, .12s) var(--c2g-motion-ease-standard, ease)}.c2g-segmented__icon{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;font-size:.875rem;line-height:1}.c2g-segmented__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.c2g-segmented__item--active{background:var(--c2g-color-primary, #ff6b35);color:var(--c2g-color-text-primary, #1a1714);font-weight:var(--c2g-font-weight-semibold, 600)}.c2g-segmented__item:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-color-focus, #e55623) 24%,transparent)}.c2g-segmented__item:disabled{cursor:not-allowed;opacity:.5}\n"] }]
|
|
397
|
-
}]
|
|
397
|
+
}] });
|
|
398
398
|
|
|
399
399
|
class SearchInputComponent {
|
|
400
400
|
searchChange = output();
|
|
@@ -402,27 +402,27 @@ class SearchInputComponent {
|
|
|
402
402
|
const inputEl = event.target;
|
|
403
403
|
this.searchChange.emit(inputEl.value);
|
|
404
404
|
}
|
|
405
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
406
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
405
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
406
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: SearchInputComponent, isStandalone: true, selector: "app-search-input", outputs: { searchChange: "searchChange" }, ngImport: i0, template: "<div class=\"search-input\">\n <mat-icon class=\"search-input__icon\">search</mat-icon>\n <input\n class=\"search-input__field\"\n type=\"text\"\n [placeholder]=\"'equipment.workspace.search' | translate\"\n [attr.aria-label]=\"'equipment.workspace.search' | translate\"\n (input)=\"onInput($event)\"\n />\n</div>\n", styles: [".search-input{display:flex;align-items:center;gap:var(--c2g-space-2, .5rem);background:var(--c2g-glass-bg, rgba(255, 255, 255, .95));border:1px solid var(--c2g-color-border-subtle, rgba(17, 24, 39, .12));border-radius:var(--c2g-radius-lg, .75rem);padding:0 var(--spacing-3, .75rem);height:2.75rem;flex:1;box-shadow:var(--c2g-shadow-sm, 0 1px 2px rgba(15, 23, 42, .08))}.search-input__icon{font-size:1.25rem;width:1.25rem;height:1.25rem;color:var(--c2g-text-muted, #6b7280);flex-shrink:0}.search-input__field{flex:1;border:none;outline:none;background:transparent;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-text-primary, #1f2937)}.search-input__field::placeholder{color:var(--c2g-text-muted, #6b7280)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
407
407
|
}
|
|
408
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
408
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SearchInputComponent, decorators: [{
|
|
409
409
|
type: Component,
|
|
410
410
|
args: [{ selector: 'app-search-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
411
411
|
MatIconModule,
|
|
412
412
|
TranslateModule
|
|
413
413
|
], template: "<div class=\"search-input\">\n <mat-icon class=\"search-input__icon\">search</mat-icon>\n <input\n class=\"search-input__field\"\n type=\"text\"\n [placeholder]=\"'equipment.workspace.search' | translate\"\n [attr.aria-label]=\"'equipment.workspace.search' | translate\"\n (input)=\"onInput($event)\"\n />\n</div>\n", styles: [".search-input{display:flex;align-items:center;gap:var(--c2g-space-2, .5rem);background:var(--c2g-glass-bg, rgba(255, 255, 255, .95));border:1px solid var(--c2g-color-border-subtle, rgba(17, 24, 39, .12));border-radius:var(--c2g-radius-lg, .75rem);padding:0 var(--spacing-3, .75rem);height:2.75rem;flex:1;box-shadow:var(--c2g-shadow-sm, 0 1px 2px rgba(15, 23, 42, .08))}.search-input__icon{font-size:1.25rem;width:1.25rem;height:1.25rem;color:var(--c2g-text-muted, #6b7280);flex-shrink:0}.search-input__field{flex:1;border:none;outline:none;background:transparent;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-text-primary, #1f2937)}.search-input__field::placeholder{color:var(--c2g-text-muted, #6b7280)}\n"] }]
|
|
414
|
-
}]
|
|
414
|
+
}] });
|
|
415
415
|
|
|
416
416
|
class EmptyStateComponent {
|
|
417
417
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
418
418
|
actionClicked = output();
|
|
419
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
420
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
419
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
420
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: EmptyStateComponent, isStandalone: true, selector: "c2g-empty-state", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, ngImport: i0, template: "<div class=\"c2g-empty-state\">\n @if (data().lottiePreset) {\n <div class=\"c2g-empty-state__lottie\">\n <c2g-lottie-loader\n [preset]=\"data().lottiePreset!\"\n width=\"120px\"\n height=\"120px\"\n [showLabel]=\"false\"\n label=\"Illustration\"\n />\n </div>\n } @else if (data().icon) {\n <span class=\"c2g-empty-state__icon\" aria-hidden=\"true\">{{ data().icon }}</span>\n }\n\n <h3 class=\"c2g-empty-state__title\">{{ data().title }}</h3>\n\n @if (data().description) {\n <p class=\"c2g-empty-state__description\">{{ data().description }}</p>\n }\n\n @if (data().actionLabel) {\n <button\n class=\"c2g-empty-state__action\"\n type=\"button\"\n (click)=\"actionClicked.emit()\">\n {{ data().actionLabel }}\n </button>\n }\n\n <ng-content />\n</div>\n", styles: [".c2g-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--c2g-spacing-8, 2rem) var(--c2g-spacing-4, 1rem);gap:var(--c2g-spacing-3, .75rem);color:var(--c2g-text-primary, #111827)}.c2g-empty-state__lottie{margin-bottom:var(--c2g-spacing-2, .5rem)}.c2g-empty-state__icon{font-size:3rem;line-height:1;margin-bottom:var(--c2g-spacing-2, .5rem)}.c2g-empty-state__title{margin:0;font-size:var(--c2g-font-size-lg, 1.125rem);font-weight:var(--c2g-font-weight-semibold, 600);color:var(--c2g-text-primary, #111827)}.c2g-empty-state__description{margin:0;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-text-secondary, #6b7280);max-width:32ch;line-height:1.6}.c2g-empty-state__action{margin-top:var(--c2g-spacing-2, .5rem);padding:var(--c2g-spacing-2, .5rem) var(--c2g-spacing-5, 1.25rem);background-color:var(--c2g-color-primary, #ff6b35);color:var(--c2g-color-on-primary, #ffffff);border:none;border-radius:var(--c2g-radius-md, .5rem);font-size:var(--c2g-font-size-sm, .875rem);font-weight:var(--c2g-font-weight-medium, 500);cursor:pointer;transition:opacity .15s ease}.c2g-empty-state__action:hover{opacity:.88}.c2g-empty-state__action:focus-visible{outline:2px solid var(--c2g-focus-ring, #3b82f6);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: LottieLoaderComponent, selector: "c2g-lottie-loader", inputs: ["preset", "presetMode", "animationPath", "animationData", "loop", "autoplay", "width", "height", "label", "showLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
421
421
|
}
|
|
422
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
422
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
423
423
|
type: Component,
|
|
424
424
|
args: [{ selector: 'c2g-empty-state', standalone: true, imports: [LottieLoaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-empty-state\">\n @if (data().lottiePreset) {\n <div class=\"c2g-empty-state__lottie\">\n <c2g-lottie-loader\n [preset]=\"data().lottiePreset!\"\n width=\"120px\"\n height=\"120px\"\n [showLabel]=\"false\"\n label=\"Illustration\"\n />\n </div>\n } @else if (data().icon) {\n <span class=\"c2g-empty-state__icon\" aria-hidden=\"true\">{{ data().icon }}</span>\n }\n\n <h3 class=\"c2g-empty-state__title\">{{ data().title }}</h3>\n\n @if (data().description) {\n <p class=\"c2g-empty-state__description\">{{ data().description }}</p>\n }\n\n @if (data().actionLabel) {\n <button\n class=\"c2g-empty-state__action\"\n type=\"button\"\n (click)=\"actionClicked.emit()\">\n {{ data().actionLabel }}\n </button>\n }\n\n <ng-content />\n</div>\n", styles: [".c2g-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--c2g-spacing-8, 2rem) var(--c2g-spacing-4, 1rem);gap:var(--c2g-spacing-3, .75rem);color:var(--c2g-text-primary, #111827)}.c2g-empty-state__lottie{margin-bottom:var(--c2g-spacing-2, .5rem)}.c2g-empty-state__icon{font-size:3rem;line-height:1;margin-bottom:var(--c2g-spacing-2, .5rem)}.c2g-empty-state__title{margin:0;font-size:var(--c2g-font-size-lg, 1.125rem);font-weight:var(--c2g-font-weight-semibold, 600);color:var(--c2g-text-primary, #111827)}.c2g-empty-state__description{margin:0;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-text-secondary, #6b7280);max-width:32ch;line-height:1.6}.c2g-empty-state__action{margin-top:var(--c2g-spacing-2, .5rem);padding:var(--c2g-spacing-2, .5rem) var(--c2g-spacing-5, 1.25rem);background-color:var(--c2g-color-primary, #ff6b35);color:var(--c2g-color-on-primary, #ffffff);border:none;border-radius:var(--c2g-radius-md, .5rem);font-size:var(--c2g-font-size-sm, .875rem);font-weight:var(--c2g-font-weight-medium, 500);cursor:pointer;transition:opacity .15s ease}.c2g-empty-state__action:hover{opacity:.88}.c2g-empty-state__action:focus-visible{outline:2px solid var(--c2g-focus-ring, #3b82f6);outline-offset:2px}\n"] }]
|
|
425
|
-
}]
|
|
425
|
+
}] });
|
|
426
426
|
|
|
427
427
|
const MAX_VISIBLE_PAGES = 5;
|
|
428
428
|
class PaginationComponent {
|
|
@@ -451,13 +451,13 @@ class PaginationComponent {
|
|
|
451
451
|
return;
|
|
452
452
|
this.pageChanged.emit(page);
|
|
453
453
|
}
|
|
454
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
455
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
454
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
455
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: PaginationComponent, isStandalone: true, selector: "c2g-pagination", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChanged: "pageChanged" }, ngImport: i0, template: "<nav class=\"c2g-pagination\" [attr.aria-label]=\"ariaLabel()\">\n <button\n class=\"c2g-pagination__btn c2g-pagination__btn--nav\"\n type=\"button\"\n aria-label=\"Vorherige Seite\"\n [disabled]=\"!hasPrev()\"\n (click)=\"go(currentPage() - 1)\">\n \u2039\n </button>\n\n @if (showStartEllipsis()) {\n <button\n class=\"c2g-pagination__btn\"\n type=\"button\"\n [attr.aria-label]=\"'Seite 1'\"\n (click)=\"go(1)\">\n 1\n </button>\n <span class=\"c2g-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n }\n\n @for (page of visiblePages(); track page) {\n <button\n class=\"c2g-pagination__btn\"\n [class.c2g-pagination__btn--active]=\"page === currentPage()\"\n type=\"button\"\n [attr.aria-label]=\"'Seite ' + page\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n (click)=\"go(page)\">\n {{ page }}\n </button>\n }\n\n @if (showEndEllipsis()) {\n <span class=\"c2g-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n <button\n class=\"c2g-pagination__btn\"\n type=\"button\"\n [attr.aria-label]=\"'Seite ' + totalPages()\"\n (click)=\"go(totalPages())\">\n {{ totalPages() }}\n </button>\n }\n\n <button\n class=\"c2g-pagination__btn c2g-pagination__btn--nav\"\n type=\"button\"\n aria-label=\"N\u00E4chste Seite\"\n [disabled]=\"!hasNext()\"\n (click)=\"go(currentPage() + 1)\">\n \u203A\n </button>\n</nav>\n", styles: [".c2g-pagination{display:flex;align-items:center;gap:var(--c2g-spacing-1, .25rem);flex-wrap:wrap}.c2g-pagination__btn{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 var(--c2g-spacing-2, .5rem);border:1px solid var(--c2g-border-color, #e5e7eb);border-radius:var(--c2g-radius-md, .5rem);background-color:var(--c2g-surface-bg, #ffffff);color:var(--c2g-text-primary, #111827);font-size:var(--c2g-font-size-sm, .875rem);font-weight:var(--c2g-font-weight-medium, 500);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;line-height:1}.c2g-pagination__btn:hover:not(:disabled){background-color:var(--c2g-hover-bg, #f3f4f6);border-color:var(--c2g-border-color-strong, #d1d5db)}.c2g-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.c2g-pagination__btn:focus-visible{outline:2px solid var(--c2g-focus-ring, #3b82f6);outline-offset:2px}.c2g-pagination__btn--active{background-color:var(--c2g-color-primary, #ff6b35);border-color:var(--c2g-color-primary, #ff6b35);color:var(--c2g-color-on-primary, #ffffff)}.c2g-pagination__btn--active:hover:not(:disabled){background-color:var(--c2g-color-primary, #ff6b35);opacity:.88}.c2g-pagination__btn--nav{font-size:1.25rem}.c2g-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;color:var(--c2g-text-secondary, #6b7280);font-size:var(--c2g-font-size-sm, .875rem);-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
456
456
|
}
|
|
457
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
457
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
458
458
|
type: Component,
|
|
459
459
|
args: [{ selector: 'c2g-pagination', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"c2g-pagination\" [attr.aria-label]=\"ariaLabel()\">\n <button\n class=\"c2g-pagination__btn c2g-pagination__btn--nav\"\n type=\"button\"\n aria-label=\"Vorherige Seite\"\n [disabled]=\"!hasPrev()\"\n (click)=\"go(currentPage() - 1)\">\n \u2039\n </button>\n\n @if (showStartEllipsis()) {\n <button\n class=\"c2g-pagination__btn\"\n type=\"button\"\n [attr.aria-label]=\"'Seite 1'\"\n (click)=\"go(1)\">\n 1\n </button>\n <span class=\"c2g-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n }\n\n @for (page of visiblePages(); track page) {\n <button\n class=\"c2g-pagination__btn\"\n [class.c2g-pagination__btn--active]=\"page === currentPage()\"\n type=\"button\"\n [attr.aria-label]=\"'Seite ' + page\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n (click)=\"go(page)\">\n {{ page }}\n </button>\n }\n\n @if (showEndEllipsis()) {\n <span class=\"c2g-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n <button\n class=\"c2g-pagination__btn\"\n type=\"button\"\n [attr.aria-label]=\"'Seite ' + totalPages()\"\n (click)=\"go(totalPages())\">\n {{ totalPages() }}\n </button>\n }\n\n <button\n class=\"c2g-pagination__btn c2g-pagination__btn--nav\"\n type=\"button\"\n aria-label=\"N\u00E4chste Seite\"\n [disabled]=\"!hasNext()\"\n (click)=\"go(currentPage() + 1)\">\n \u203A\n </button>\n</nav>\n", styles: [".c2g-pagination{display:flex;align-items:center;gap:var(--c2g-spacing-1, .25rem);flex-wrap:wrap}.c2g-pagination__btn{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 var(--c2g-spacing-2, .5rem);border:1px solid var(--c2g-border-color, #e5e7eb);border-radius:var(--c2g-radius-md, .5rem);background-color:var(--c2g-surface-bg, #ffffff);color:var(--c2g-text-primary, #111827);font-size:var(--c2g-font-size-sm, .875rem);font-weight:var(--c2g-font-weight-medium, 500);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;line-height:1}.c2g-pagination__btn:hover:not(:disabled){background-color:var(--c2g-hover-bg, #f3f4f6);border-color:var(--c2g-border-color-strong, #d1d5db)}.c2g-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.c2g-pagination__btn:focus-visible{outline:2px solid var(--c2g-focus-ring, #3b82f6);outline-offset:2px}.c2g-pagination__btn--active{background-color:var(--c2g-color-primary, #ff6b35);border-color:var(--c2g-color-primary, #ff6b35);color:var(--c2g-color-on-primary, #ffffff)}.c2g-pagination__btn--active:hover:not(:disabled){background-color:var(--c2g-color-primary, #ff6b35);opacity:.88}.c2g-pagination__btn--nav{font-size:1.25rem}.c2g-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;color:var(--c2g-text-secondary, #6b7280);font-size:var(--c2g-font-size-sm, .875rem);-webkit-user-select:none;user-select:none}\n"] }]
|
|
460
|
-
}]
|
|
460
|
+
}] });
|
|
461
461
|
|
|
462
462
|
class TableComponent {
|
|
463
463
|
rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : []));
|
|
@@ -510,13 +510,13 @@ class TableComponent {
|
|
|
510
510
|
return '↕';
|
|
511
511
|
return s.direction === 'asc' ? '↑' : '↓';
|
|
512
512
|
}
|
|
513
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
514
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
513
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
514
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: TableComponent, isStandalone: true, selector: "c2g-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChanged: "sortChanged", rowSelected: "rowSelected" }, ngImport: i0, template: "<div class=\"c2g-table-wrapper\" [style.maxHeight]=\"maxHeight()\">\n @if (virtualScroll()) {\n <cdk-virtual-scroll-viewport [itemSize]=\"rowHeight()\" class=\"c2g-table-viewport\" [style.height]=\"maxHeight()\">\n <table class=\"c2g-table\" role=\"grid\">\n <thead class=\"c2g-table__head\">\n <tr>\n @for (col of columns(); track col.key) {\n <th\n class=\"c2g-table__th\"\n [class.c2g-table__th--sortable]=\"col.sortable\"\n [class.c2g-table__th--sorted]=\"sortState().key === col.key\"\n (click)=\"col.sortable && sort(col.key)\"\n [attr.aria-sort]=\"col.sortable ? (sortState().key === col.key ? (sortState().direction ?? 'none') : 'none') : null\"\n >\n <span class=\"c2g-table__th-label\">{{ col.label }}</span>\n @if (col.sortable) {\n <span class=\"c2g-table__sort-icon\" aria-hidden=\"true\">{{ sortIcon(col.key) }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n <tr\n *cdkVirtualFor=\"let row of sortedRows()\"\n class=\"c2g-table__row\"\n [class.c2g-table__row--selectable]=\"selectable()\"\n [class.c2g-table__row--selected]=\"selectedRow() === row\"\n (click)=\"select(row)\"\n [attr.tabindex]=\"selectable() ? 0 : null\"\n (keydown.enter)=\"selectable() && select(row)\"\n >\n @for (col of columns(); track col.key) {\n <td class=\"c2g-table__td\">{{ getCellValue(row, col) }}</td>\n }\n </tr>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n } @else {\n <table class=\"c2g-table\" role=\"grid\">\n <thead class=\"c2g-table__head\">\n <tr>\n @for (col of columns(); track col.key) {\n <th\n class=\"c2g-table__th\"\n [class.c2g-table__th--sortable]=\"col.sortable\"\n [class.c2g-table__th--sorted]=\"sortState().key === col.key\"\n (click)=\"col.sortable && sort(col.key)\"\n [attr.aria-sort]=\"col.sortable ? (sortState().key === col.key ? (sortState().direction ?? 'none') : 'none') : null\"\n >\n <span class=\"c2g-table__th-label\">{{ col.label }}</span>\n @if (col.sortable) {\n <span class=\"c2g-table__sort-icon\" aria-hidden=\"true\">{{ sortIcon(col.key) }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of sortedRows(); track $index) {\n <tr\n class=\"c2g-table__row\"\n [class.c2g-table__row--selectable]=\"selectable()\"\n [class.c2g-table__row--selected]=\"selectedRow() === row\"\n (click)=\"select(row)\"\n [attr.tabindex]=\"selectable() ? 0 : null\"\n (keydown.enter)=\"selectable() && select(row)\"\n >\n @for (col of columns(); track col.key) {\n <td class=\"c2g-table__td\">{{ getCellValue(row, col) }}</td>\n }\n </tr>\n }\n </tbody>\n </table>\n }\n</div>\n", styles: [":host{display:block;width:100%;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-table-wrapper{overflow:auto;border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));border-radius:var(--c2g-radius-md, 8px);background:var(--c2g-theme-surface, var(--c2g-color-surface))}.c2g-table-viewport{width:100%}.c2g-table{width:100%;border-collapse:collapse;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif);font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-table__head{position:sticky;top:0;z-index:1;background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary))}.c2g-table__th{padding:12px 16px;text-align:left;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));border-bottom:2px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));white-space:nowrap;-webkit-user-select:none;user-select:none}.c2g-table__th--sortable{cursor:pointer}.c2g-table__th--sortable:hover{background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base));color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-table__th--sorted{color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-table__th-label{display:inline}.c2g-table__sort-icon{margin-left:6px;opacity:.5;font-size:.75rem}.c2g-table__row{border-bottom:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));transition:background .15s ease}.c2g-table__row:last-child{border-bottom:none}.c2g-table__row--selectable{cursor:pointer}.c2g-table__row--selectable:hover{background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base))}.c2g-table__row--selectable:focus{outline:2px solid var(--c2g-theme-primary, var(--c2g-color-primary));outline-offset:-2px}.c2g-table__row--selected,.c2g-table__row--selected:hover{background:var(--c2g-theme-primary-container, var(--c2g-color-primary-container))}.c2g-table__td{padding:12px 16px;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
515
515
|
}
|
|
516
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TableComponent, decorators: [{
|
|
517
517
|
type: Component,
|
|
518
518
|
args: [{ selector: 'c2g-table', standalone: true, imports: [ScrollingModule, NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-table-wrapper\" [style.maxHeight]=\"maxHeight()\">\n @if (virtualScroll()) {\n <cdk-virtual-scroll-viewport [itemSize]=\"rowHeight()\" class=\"c2g-table-viewport\" [style.height]=\"maxHeight()\">\n <table class=\"c2g-table\" role=\"grid\">\n <thead class=\"c2g-table__head\">\n <tr>\n @for (col of columns(); track col.key) {\n <th\n class=\"c2g-table__th\"\n [class.c2g-table__th--sortable]=\"col.sortable\"\n [class.c2g-table__th--sorted]=\"sortState().key === col.key\"\n (click)=\"col.sortable && sort(col.key)\"\n [attr.aria-sort]=\"col.sortable ? (sortState().key === col.key ? (sortState().direction ?? 'none') : 'none') : null\"\n >\n <span class=\"c2g-table__th-label\">{{ col.label }}</span>\n @if (col.sortable) {\n <span class=\"c2g-table__sort-icon\" aria-hidden=\"true\">{{ sortIcon(col.key) }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n <tr\n *cdkVirtualFor=\"let row of sortedRows()\"\n class=\"c2g-table__row\"\n [class.c2g-table__row--selectable]=\"selectable()\"\n [class.c2g-table__row--selected]=\"selectedRow() === row\"\n (click)=\"select(row)\"\n [attr.tabindex]=\"selectable() ? 0 : null\"\n (keydown.enter)=\"selectable() && select(row)\"\n >\n @for (col of columns(); track col.key) {\n <td class=\"c2g-table__td\">{{ getCellValue(row, col) }}</td>\n }\n </tr>\n </tbody>\n </table>\n </cdk-virtual-scroll-viewport>\n } @else {\n <table class=\"c2g-table\" role=\"grid\">\n <thead class=\"c2g-table__head\">\n <tr>\n @for (col of columns(); track col.key) {\n <th\n class=\"c2g-table__th\"\n [class.c2g-table__th--sortable]=\"col.sortable\"\n [class.c2g-table__th--sorted]=\"sortState().key === col.key\"\n (click)=\"col.sortable && sort(col.key)\"\n [attr.aria-sort]=\"col.sortable ? (sortState().key === col.key ? (sortState().direction ?? 'none') : 'none') : null\"\n >\n <span class=\"c2g-table__th-label\">{{ col.label }}</span>\n @if (col.sortable) {\n <span class=\"c2g-table__sort-icon\" aria-hidden=\"true\">{{ sortIcon(col.key) }}</span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of sortedRows(); track $index) {\n <tr\n class=\"c2g-table__row\"\n [class.c2g-table__row--selectable]=\"selectable()\"\n [class.c2g-table__row--selected]=\"selectedRow() === row\"\n (click)=\"select(row)\"\n [attr.tabindex]=\"selectable() ? 0 : null\"\n (keydown.enter)=\"selectable() && select(row)\"\n >\n @for (col of columns(); track col.key) {\n <td class=\"c2g-table__td\">{{ getCellValue(row, col) }}</td>\n }\n </tr>\n }\n </tbody>\n </table>\n }\n</div>\n", styles: [":host{display:block;width:100%;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-table-wrapper{overflow:auto;border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));border-radius:var(--c2g-radius-md, 8px);background:var(--c2g-theme-surface, var(--c2g-color-surface))}.c2g-table-viewport{width:100%}.c2g-table{width:100%;border-collapse:collapse;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif);font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-table__head{position:sticky;top:0;z-index:1;background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary))}.c2g-table__th{padding:12px 16px;text-align:left;font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));border-bottom:2px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));white-space:nowrap;-webkit-user-select:none;user-select:none}.c2g-table__th--sortable{cursor:pointer}.c2g-table__th--sortable:hover{background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base));color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-table__th--sorted{color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-table__th-label{display:inline}.c2g-table__sort-icon{margin-left:6px;opacity:.5;font-size:.75rem}.c2g-table__row{border-bottom:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));transition:background .15s ease}.c2g-table__row:last-child{border-bottom:none}.c2g-table__row--selectable{cursor:pointer}.c2g-table__row--selectable:hover{background:var(--c2g-theme-surface-container-low, var(--c2g-color-bg-base))}.c2g-table__row--selectable:focus{outline:2px solid var(--c2g-theme-primary, var(--c2g-color-primary));outline-offset:-2px}.c2g-table__row--selected,.c2g-table__row--selected:hover{background:var(--c2g-theme-primary-container, var(--c2g-color-primary-container))}.c2g-table__td{padding:12px 16px;color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));vertical-align:middle}\n"] }]
|
|
519
|
-
}]
|
|
519
|
+
}] });
|
|
520
520
|
|
|
521
521
|
class TabsComponent {
|
|
522
522
|
tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
@@ -533,13 +533,13 @@ class TabsComponent {
|
|
|
533
533
|
const key = this.activeKey();
|
|
534
534
|
return key ? tab.key === key : tab === this.tabs()[0];
|
|
535
535
|
}
|
|
536
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
537
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
536
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
537
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: TabsComponent, isStandalone: true, selector: "c2g-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeKey: "activeKeyChange", tabChanged: "tabChanged" }, ngImport: i0, template: "<div class=\"c2g-tabs\" role=\"tablist\" [attr.aria-label]=\"'Tabs'\">\n <div class=\"c2g-tabs__nav\">\n @for (tab of tabs(); track tab.key) {\n <button\n class=\"c2g-tabs__tab\"\n role=\"tab\"\n [class.c2g-tabs__tab--active]=\"isActive(tab)\"\n [class.c2g-tabs__tab--disabled]=\"tab.disabled\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled || null\"\n [disabled]=\"tab.disabled || null\"\n (click)=\"select(tab)\"\n >\n @if (tab.icon) {\n <span class=\"c2g-tabs__tab-icon\" aria-hidden=\"true\">{{ tab.icon }}</span>\n }\n <span class=\"c2g-tabs__tab-label\">{{ tab.label }}</span>\n @if (tab.badge !== undefined) {\n <span class=\"c2g-tabs__tab-badge\">{{ tab.badge }}</span>\n }\n </button>\n }\n </div>\n\n <div class=\"c2g-tabs__indicator-bar\" aria-hidden=\"true\"></div>\n\n <div class=\"c2g-tabs__panel\" role=\"tabpanel\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-tabs{font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-tabs__nav{display:flex;gap:4px;border-bottom:2px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));overflow-x:auto;scrollbar-width:none}.c2g-tabs__nav::-webkit-scrollbar{display:none}.c2g-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:none;background:none;cursor:pointer;font-family:inherit;font-size:var(--c2g-font-size-sm, .875rem);font-weight:500;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));white-space:nowrap;transition:color .15s ease;border-bottom:2px solid transparent;margin-bottom:-2px}.c2g-tabs__tab:hover:not(.c2g-tabs__tab--disabled){color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-tabs__tab--active{color:var(--c2g-theme-primary, var(--c2g-color-primary));border-bottom-color:var(--c2g-theme-primary, var(--c2g-color-primary));font-weight:600}.c2g-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.c2g-tabs__tab:focus-visible{outline:2px solid var(--c2g-theme-primary, var(--c2g-color-primary));outline-offset:2px;border-radius:var(--c2g-radius-sm, 4px)}.c2g-tabs__tab-icon{font-size:1rem}.c2g-tabs__tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--c2g-theme-primary, var(--c2g-color-primary));color:var(--c2g-theme-surface, var(--c2g-color-surface));font-size:.7rem;font-weight:700;line-height:1}.c2g-tabs__panel{padding-top:16px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
538
538
|
}
|
|
539
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
539
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TabsComponent, decorators: [{
|
|
540
540
|
type: Component,
|
|
541
541
|
args: [{ selector: 'c2g-tabs', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-tabs\" role=\"tablist\" [attr.aria-label]=\"'Tabs'\">\n <div class=\"c2g-tabs__nav\">\n @for (tab of tabs(); track tab.key) {\n <button\n class=\"c2g-tabs__tab\"\n role=\"tab\"\n [class.c2g-tabs__tab--active]=\"isActive(tab)\"\n [class.c2g-tabs__tab--disabled]=\"tab.disabled\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled || null\"\n [disabled]=\"tab.disabled || null\"\n (click)=\"select(tab)\"\n >\n @if (tab.icon) {\n <span class=\"c2g-tabs__tab-icon\" aria-hidden=\"true\">{{ tab.icon }}</span>\n }\n <span class=\"c2g-tabs__tab-label\">{{ tab.label }}</span>\n @if (tab.badge !== undefined) {\n <span class=\"c2g-tabs__tab-badge\">{{ tab.badge }}</span>\n }\n </button>\n }\n </div>\n\n <div class=\"c2g-tabs__indicator-bar\" aria-hidden=\"true\"></div>\n\n <div class=\"c2g-tabs__panel\" role=\"tabpanel\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:block;width:100%;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-tabs{font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-tabs__nav{display:flex;gap:4px;border-bottom:2px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));overflow-x:auto;scrollbar-width:none}.c2g-tabs__nav::-webkit-scrollbar{display:none}.c2g-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:none;background:none;cursor:pointer;font-family:inherit;font-size:var(--c2g-font-size-sm, .875rem);font-weight:500;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));white-space:nowrap;transition:color .15s ease;border-bottom:2px solid transparent;margin-bottom:-2px}.c2g-tabs__tab:hover:not(.c2g-tabs__tab--disabled){color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-tabs__tab--active{color:var(--c2g-theme-primary, var(--c2g-color-primary));border-bottom-color:var(--c2g-theme-primary, var(--c2g-color-primary));font-weight:600}.c2g-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.c2g-tabs__tab:focus-visible{outline:2px solid var(--c2g-theme-primary, var(--c2g-color-primary));outline-offset:2px;border-radius:var(--c2g-radius-sm, 4px)}.c2g-tabs__tab-icon{font-size:1rem}.c2g-tabs__tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--c2g-theme-primary, var(--c2g-color-primary));color:var(--c2g-theme-surface, var(--c2g-color-surface));font-size:.7rem;font-weight:700;line-height:1}.c2g-tabs__panel{padding-top:16px}\n"] }]
|
|
542
|
-
}]
|
|
542
|
+
}] });
|
|
543
543
|
|
|
544
544
|
class BreadcrumbComponent {
|
|
545
545
|
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
@@ -551,13 +551,13 @@ class BreadcrumbComponent {
|
|
|
551
551
|
this.itemClicked.emit(item);
|
|
552
552
|
}
|
|
553
553
|
}
|
|
554
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
555
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
554
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
555
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: BreadcrumbComponent, isStandalone: true, selector: "c2g-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, ngImport: i0, template: "<nav class=\"c2g-breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"c2g-breadcrumb__list\">\n @for (item of items(); track item.label; let last = $last) {\n <li class=\"c2g-breadcrumb__item\">\n @if (!last) {\n <a\n class=\"c2g-breadcrumb__link\"\n [href]=\"item.href || '#'\"\n (click)=\"navigate($event, item)\"\n >\n @if (item.icon) {\n <span class=\"c2g-breadcrumb__icon\" aria-hidden=\"true\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </a>\n <span class=\"c2g-breadcrumb__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n } @else {\n <span class=\"c2g-breadcrumb__current\" aria-current=\"page\">\n @if (item.icon) {\n <span class=\"c2g-breadcrumb__icon\" aria-hidden=\"true\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </span>\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":host{display:block;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-breadcrumb{font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0;font-size:var(--c2g-font-size-sm, .875rem)}.c2g-breadcrumb__item{display:flex;align-items:center;gap:4px}.c2g-breadcrumb__link{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));text-decoration:none;transition:color .15s ease;display:inline-flex;align-items:center;gap:4px;border-radius:var(--c2g-radius-sm, 4px);padding:2px 4px}.c2g-breadcrumb__link:hover{color:var(--c2g-theme-primary, var(--c2g-color-primary));text-decoration:underline}.c2g-breadcrumb__link:focus-visible{outline:2px solid var(--c2g-theme-primary, var(--c2g-color-primary));outline-offset:2px}.c2g-breadcrumb__separator{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));-webkit-user-select:none;user-select:none;font-size:.9em}.c2g-breadcrumb__current{color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-weight:600;display:inline-flex;align-items:center;gap:4px}.c2g-breadcrumb__icon{font-size:1em;line-height:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
556
556
|
}
|
|
557
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
558
558
|
type: Component,
|
|
559
559
|
args: [{ selector: 'c2g-breadcrumb', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"c2g-breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"c2g-breadcrumb__list\">\n @for (item of items(); track item.label; let last = $last) {\n <li class=\"c2g-breadcrumb__item\">\n @if (!last) {\n <a\n class=\"c2g-breadcrumb__link\"\n [href]=\"item.href || '#'\"\n (click)=\"navigate($event, item)\"\n >\n @if (item.icon) {\n <span class=\"c2g-breadcrumb__icon\" aria-hidden=\"true\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </a>\n <span class=\"c2g-breadcrumb__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n } @else {\n <span class=\"c2g-breadcrumb__current\" aria-current=\"page\">\n @if (item.icon) {\n <span class=\"c2g-breadcrumb__icon\" aria-hidden=\"true\">{{ item.icon }}</span>\n }\n {{ item.label }}\n </span>\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":host{display:block;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-breadcrumb{font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0;font-size:var(--c2g-font-size-sm, .875rem)}.c2g-breadcrumb__item{display:flex;align-items:center;gap:4px}.c2g-breadcrumb__link{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));text-decoration:none;transition:color .15s ease;display:inline-flex;align-items:center;gap:4px;border-radius:var(--c2g-radius-sm, 4px);padding:2px 4px}.c2g-breadcrumb__link:hover{color:var(--c2g-theme-primary, var(--c2g-color-primary));text-decoration:underline}.c2g-breadcrumb__link:focus-visible{outline:2px solid var(--c2g-theme-primary, var(--c2g-color-primary));outline-offset:2px}.c2g-breadcrumb__separator{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));-webkit-user-select:none;user-select:none;font-size:.9em}.c2g-breadcrumb__current{color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));font-weight:600;display:inline-flex;align-items:center;gap:4px}.c2g-breadcrumb__icon{font-size:1em;line-height:1}\n"] }]
|
|
560
|
-
}]
|
|
560
|
+
}] });
|
|
561
561
|
|
|
562
562
|
class StepperComponent {
|
|
563
563
|
steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : []));
|
|
@@ -585,13 +585,13 @@ class StepperComponent {
|
|
|
585
585
|
}
|
|
586
586
|
next() { this.goTo(this.activeIndex() + 1); }
|
|
587
587
|
prev() { this.goTo(this.activeIndex() - 1); }
|
|
588
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
589
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
588
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
589
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: StepperComponent, isStandalone: true, selector: "c2g-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, completedIndices: { classPropertyName: "completedIndices", publicName: "completedIndices", isSignal: true, isRequired: false, transformFunction: null }, errorIndices: { classPropertyName: "errorIndices", publicName: "errorIndices", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", stepChanged: "stepChanged" }, ngImport: i0, template: "<div\n class=\"c2g-stepper\"\n [class.c2g-stepper--horizontal]=\"orientation() === 'horizontal'\"\n [class.c2g-stepper--vertical]=\"orientation() === 'vertical'\"\n role=\"list\"\n [attr.aria-label]=\"'Steps'\"\n>\n @for (step of steps(); track step.label; let i = $index; let last = $last) {\n <div\n class=\"c2g-stepper__step\"\n [class.c2g-stepper__step--active]=\"getState(i) === 'active'\"\n [class.c2g-stepper__step--completed]=\"getState(i) === 'completed'\"\n [class.c2g-stepper__step--error]=\"getState(i) === 'error'\"\n [class.c2g-stepper__step--pending]=\"getState(i) === 'pending'\"\n role=\"listitem\"\n >\n <div class=\"c2g-stepper__header\">\n <button\n class=\"c2g-stepper__marker\"\n type=\"button\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n [attr.aria-current]=\"getState(i) === 'active' ? 'step' : null\"\n (click)=\"goTo(i)\"\n >\n @if (getState(i) === 'completed') {\n <span class=\"c2g-stepper__check\" aria-hidden=\"true\">\u2713</span>\n } @else if (getState(i) === 'error') {\n <span class=\"c2g-stepper__error-icon\" aria-hidden=\"true\">!</span>\n } @else {\n <span class=\"c2g-stepper__index\" aria-hidden=\"true\">{{ i + 1 }}</span>\n }\n </button>\n\n <div class=\"c2g-stepper__label-group\">\n <span class=\"c2g-stepper__label\">{{ step.label }}</span>\n @if (step.description) {\n <span class=\"c2g-stepper__description\">{{ step.description }}</span>\n }\n </div>\n </div>\n\n @if (!last) {\n <div class=\"c2g-stepper__connector\" aria-hidden=\"true\">\n <div\n class=\"c2g-stepper__connector-line\"\n [class.c2g-stepper__connector-line--filled]=\"getState(i) === 'completed'\"\n ></div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-stepper{font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-stepper--horizontal{display:flex;align-items:flex-start}.c2g-stepper--horizontal .c2g-stepper__step{flex:1;display:flex;flex-direction:column;align-items:center}.c2g-stepper--horizontal .c2g-stepper__header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.c2g-stepper--horizontal .c2g-stepper__connector{flex:1;display:flex;align-items:center;padding-top:20px}.c2g-stepper--horizontal .c2g-stepper__connector-line{flex:1;height:2px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline));margin:0 8px}.c2g-stepper--horizontal .c2g-stepper__connector-line--filled{background:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-stepper--vertical,.c2g-stepper--vertical .c2g-stepper__step{display:flex;flex-direction:column}.c2g-stepper--vertical .c2g-stepper__header{display:flex;align-items:center;gap:12px}.c2g-stepper--vertical .c2g-stepper__connector{display:flex;padding-left:20px;min-height:24px}.c2g-stepper--vertical .c2g-stepper__connector-line{width:2px;flex:1;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline));margin:4px 0}.c2g-stepper--vertical .c2g-stepper__connector-line--filled{background:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-stepper__marker{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));background:var(--c2g-theme-surface, var(--c2g-color-surface));cursor:pointer;font-weight:700;font-size:.875rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));transition:border-color .2s ease,background .2s ease,color .2s ease;flex-shrink:0}.c2g-stepper__marker:focus-visible{outline:2px solid var(--c2g-theme-primary, var(--c2g-color-primary));outline-offset:3px}.c2g-stepper__step--active .c2g-stepper__marker{border-color:var(--c2g-theme-primary, var(--c2g-color-primary));background:var(--c2g-theme-primary, var(--c2g-color-primary));color:var(--c2g-theme-surface, var(--c2g-color-surface))}.c2g-stepper__step--completed .c2g-stepper__marker{border-color:var(--c2g-theme-success, var(--c2g-color-success));background:var(--c2g-theme-success, var(--c2g-color-success));color:var(--c2g-theme-surface, var(--c2g-color-surface))}.c2g-stepper__step--error .c2g-stepper__marker{border-color:var(--c2g-theme-error, var(--c2g-color-error));background:var(--c2g-theme-error, var(--c2g-color-error));color:var(--c2g-theme-surface, var(--c2g-color-surface))}.c2g-stepper__label{font-weight:600;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary))}.c2g-stepper__step--active .c2g-stepper__label{color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-stepper__step--completed .c2g-stepper__label{color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-stepper__description{font-size:var(--c2g-font-size-xs, .75rem);color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin-top:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
590
590
|
}
|
|
591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
591
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: StepperComponent, decorators: [{
|
|
592
592
|
type: Component,
|
|
593
593
|
args: [{ selector: 'c2g-stepper', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"c2g-stepper\"\n [class.c2g-stepper--horizontal]=\"orientation() === 'horizontal'\"\n [class.c2g-stepper--vertical]=\"orientation() === 'vertical'\"\n role=\"list\"\n [attr.aria-label]=\"'Steps'\"\n>\n @for (step of steps(); track step.label; let i = $index; let last = $last) {\n <div\n class=\"c2g-stepper__step\"\n [class.c2g-stepper__step--active]=\"getState(i) === 'active'\"\n [class.c2g-stepper__step--completed]=\"getState(i) === 'completed'\"\n [class.c2g-stepper__step--error]=\"getState(i) === 'error'\"\n [class.c2g-stepper__step--pending]=\"getState(i) === 'pending'\"\n role=\"listitem\"\n >\n <div class=\"c2g-stepper__header\">\n <button\n class=\"c2g-stepper__marker\"\n type=\"button\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n [attr.aria-current]=\"getState(i) === 'active' ? 'step' : null\"\n (click)=\"goTo(i)\"\n >\n @if (getState(i) === 'completed') {\n <span class=\"c2g-stepper__check\" aria-hidden=\"true\">\u2713</span>\n } @else if (getState(i) === 'error') {\n <span class=\"c2g-stepper__error-icon\" aria-hidden=\"true\">!</span>\n } @else {\n <span class=\"c2g-stepper__index\" aria-hidden=\"true\">{{ i + 1 }}</span>\n }\n </button>\n\n <div class=\"c2g-stepper__label-group\">\n <span class=\"c2g-stepper__label\">{{ step.label }}</span>\n @if (step.description) {\n <span class=\"c2g-stepper__description\">{{ step.description }}</span>\n }\n </div>\n </div>\n\n @if (!last) {\n <div class=\"c2g-stepper__connector\" aria-hidden=\"true\">\n <div\n class=\"c2g-stepper__connector-line\"\n [class.c2g-stepper__connector-line--filled]=\"getState(i) === 'completed'\"\n ></div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-stepper{font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-stepper--horizontal{display:flex;align-items:flex-start}.c2g-stepper--horizontal .c2g-stepper__step{flex:1;display:flex;flex-direction:column;align-items:center}.c2g-stepper--horizontal .c2g-stepper__header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.c2g-stepper--horizontal .c2g-stepper__connector{flex:1;display:flex;align-items:center;padding-top:20px}.c2g-stepper--horizontal .c2g-stepper__connector-line{flex:1;height:2px;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline));margin:0 8px}.c2g-stepper--horizontal .c2g-stepper__connector-line--filled{background:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-stepper--vertical,.c2g-stepper--vertical .c2g-stepper__step{display:flex;flex-direction:column}.c2g-stepper--vertical .c2g-stepper__header{display:flex;align-items:center;gap:12px}.c2g-stepper--vertical .c2g-stepper__connector{display:flex;padding-left:20px;min-height:24px}.c2g-stepper--vertical .c2g-stepper__connector-line{width:2px;flex:1;background:var(--c2g-theme-outline-variant, var(--c2g-color-outline));margin:4px 0}.c2g-stepper--vertical .c2g-stepper__connector-line--filled{background:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-stepper__marker{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));background:var(--c2g-theme-surface, var(--c2g-color-surface));cursor:pointer;font-weight:700;font-size:.875rem;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));transition:border-color .2s ease,background .2s ease,color .2s ease;flex-shrink:0}.c2g-stepper__marker:focus-visible{outline:2px solid var(--c2g-theme-primary, var(--c2g-color-primary));outline-offset:3px}.c2g-stepper__step--active .c2g-stepper__marker{border-color:var(--c2g-theme-primary, var(--c2g-color-primary));background:var(--c2g-theme-primary, var(--c2g-color-primary));color:var(--c2g-theme-surface, var(--c2g-color-surface))}.c2g-stepper__step--completed .c2g-stepper__marker{border-color:var(--c2g-theme-success, var(--c2g-color-success));background:var(--c2g-theme-success, var(--c2g-color-success));color:var(--c2g-theme-surface, var(--c2g-color-surface))}.c2g-stepper__step--error .c2g-stepper__marker{border-color:var(--c2g-theme-error, var(--c2g-color-error));background:var(--c2g-theme-error, var(--c2g-color-error));color:var(--c2g-theme-surface, var(--c2g-color-surface))}.c2g-stepper__label{font-weight:600;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary))}.c2g-stepper__step--active .c2g-stepper__label{color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-stepper__step--completed .c2g-stepper__label{color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary))}.c2g-stepper__description{font-size:var(--c2g-font-size-xs, .75rem);color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));margin-top:2px}\n"] }]
|
|
594
|
-
}]
|
|
594
|
+
}] });
|
|
595
595
|
|
|
596
596
|
class C2gKpiCardComponent {
|
|
597
597
|
el;
|
|
@@ -689,17 +689,17 @@ class C2gKpiCardComponent {
|
|
|
689
689
|
ngOnDestroy() {
|
|
690
690
|
cancelAnimationFrame(this.countUpRaf);
|
|
691
691
|
}
|
|
692
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
693
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
692
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: C2gKpiCardComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
693
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: C2gKpiCardComponent, isStandalone: true, selector: "c2g-kpi-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mousemove": "onMouseMove($event)", "mouseleave": "onMouseLeave()" }, properties: { "class": "hostClass()" } }, ngImport: i0, template: "<div class=\"c2g-kpi-card__inner\" [style.transform]=\"tiltStyle()\">\n\n <!-- Glassmorphism icon orb -->\n @if (data().icon) {\n <div class=\"c2g-kpi-card__orb\" aria-hidden=\"true\">\n <span class=\"c2g-kpi-card__orb-icon\">{{ data().icon }}</span>\n </div>\n }\n\n <!-- Decorative blob -->\n <div class=\"c2g-kpi-card__blob\" aria-hidden=\"true\"></div>\n\n <!-- Label -->\n <p class=\"c2g-kpi-card__label\">{{ data().label }}</p>\n\n <!-- Main value -->\n <div class=\"c2g-kpi-card__value-row\">\n <span class=\"c2g-kpi-card__value\">{{ displayValue() }}</span>\n @if (data().unit) {\n <span class=\"c2g-kpi-card__unit\">{{ data().unit }}</span>\n }\n </div>\n\n <!-- Sparkline -->\n @if (sparklinePath(); as sp) {\n <div class=\"c2g-kpi-card__sparkline\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 80 28\" preserveAspectRatio=\"none\" width=\"100%\" height=\"28\">\n <defs>\n <linearGradient [id]=\"'spark-grad-' + color()\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" class=\"c2g-kpi-card__spark-stop-top\" />\n <stop offset=\"100%\" class=\"c2g-kpi-card__spark-stop-bottom\" />\n </linearGradient>\n </defs>\n <path class=\"c2g-kpi-card__spark-area\"\n [attr.d]=\"sp.area\"\n [attr.fill]=\"'url(#spark-grad-' + color() + ')'\" />\n <path class=\"c2g-kpi-card__spark-line\" [attr.d]=\"sp.line\" fill=\"none\" />\n <!-- Dot at latest value -->\n <circle class=\"c2g-kpi-card__spark-dot\"\n [attr.cx]=\"sp.lastX\" [attr.cy]=\"sp.lastY\" r=\"2.5\" />\n </svg>\n </div>\n }\n\n <!-- Trend footer -->\n @if (data().trend || data().change !== undefined) {\n <div class=\"c2g-kpi-card__footer\"\n [class.c2g-kpi-card__footer--up]=\"data().trend === 'up'\"\n [class.c2g-kpi-card__footer--down]=\"data().trend === 'down'\">\n <span class=\"c2g-kpi-card__arrow\">{{ trendArrow() }}</span>\n @if (data().change !== undefined) {\n <span class=\"c2g-kpi-card__change\">{{ data().change }}</span>\n }\n @if (data().changeLabel) {\n <span class=\"c2g-kpi-card__change-label\">{{ data().changeLabel }}</span>\n }\n </div>\n }\n\n</div>\n", styles: [":host{display:block;border-radius:var(--c2g-radius-xl, 20px);position:relative;isolation:isolate;cursor:default;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif);will-change:transform}:host.c2g-kpi-card--primary{background:linear-gradient(145deg,#ff6b35,#e03e1a);box-shadow:0 4px 24px #ff6b3559,0 1px #ffffff1f inset}:host.c2g-kpi-card--primary:hover{box-shadow:0 8px 40px #ff6b358c,0 1px #ffffff29 inset}:host.c2g-kpi-card--primary .c2g-kpi-card__orb{background:#ff6b352e}:host.c2g-kpi-card--primary .c2g-kpi-card__spark-line{stroke:#ffffffe6}:host.c2g-kpi-card--primary .c2g-kpi-card__spark-dot{fill:#fff}:host.c2g-kpi-card--primary .c2g-kpi-card__spark-stop-top{stop-color:#ffffff4d}:host.c2g-kpi-card--primary .c2g-kpi-card__spark-stop-bottom{stop-color:#fff0}:host.c2g-kpi-card--success{background:linear-gradient(145deg,#22c55e,#16a34a);box-shadow:0 4px 24px #22c55e4d,0 1px #ffffff1f inset}:host.c2g-kpi-card--success:hover{box-shadow:0 8px 40px #22c55e80,0 1px #ffffff29 inset}:host.c2g-kpi-card--success .c2g-kpi-card__orb{background:#22c55e26}:host.c2g-kpi-card--success .c2g-kpi-card__spark-line{stroke:#ffffffe6}:host.c2g-kpi-card--success .c2g-kpi-card__spark-dot{fill:#fff}:host.c2g-kpi-card--success .c2g-kpi-card__spark-stop-top{stop-color:#ffffff4d}:host.c2g-kpi-card--success .c2g-kpi-card__spark-stop-bottom{stop-color:#fff0}:host.c2g-kpi-card--warning{background:linear-gradient(145deg,#f59e0b,#d97706);box-shadow:0 4px 24px #f59e0b4d,0 1px #ffffff1f inset}:host.c2g-kpi-card--warning:hover{box-shadow:0 8px 40px #f59e0b80,0 1px #ffffff29 inset}:host.c2g-kpi-card--warning .c2g-kpi-card__orb{background:#f59e0b26}:host.c2g-kpi-card--warning .c2g-kpi-card__spark-line{stroke:#ffffffe6}:host.c2g-kpi-card--warning .c2g-kpi-card__spark-dot{fill:#fff}:host.c2g-kpi-card--warning .c2g-kpi-card__spark-stop-top{stop-color:#ffffff4d}:host.c2g-kpi-card--warning .c2g-kpi-card__spark-stop-bottom{stop-color:#fff0}:host.c2g-kpi-card--danger{background:linear-gradient(145deg,#ef4444,#dc2626);box-shadow:0 4px 24px #ef44444d,0 1px #ffffff1f inset}:host.c2g-kpi-card--danger:hover{box-shadow:0 8px 40px #ef444480,0 1px #ffffff29 inset}:host.c2g-kpi-card--danger .c2g-kpi-card__orb{background:#ef444426}:host.c2g-kpi-card--danger .c2g-kpi-card__spark-line{stroke:#ffffffe6}:host.c2g-kpi-card--danger .c2g-kpi-card__spark-dot{fill:#fff}:host.c2g-kpi-card--danger .c2g-kpi-card__spark-stop-top{stop-color:#ffffff4d}:host.c2g-kpi-card--danger .c2g-kpi-card__spark-stop-bottom{stop-color:#fff0}:host.c2g-kpi-card--neutral{background:linear-gradient(145deg,#6b7280,#4b5563);box-shadow:0 4px 24px #6b728033,0 1px #ffffff1f inset}:host.c2g-kpi-card--neutral:hover{box-shadow:0 8px 40px #6b728066,0 1px #ffffff29 inset}:host.c2g-kpi-card--neutral .c2g-kpi-card__orb{background:#6b72801f}:host.c2g-kpi-card--neutral .c2g-kpi-card__spark-line{stroke:#ffffffe6}:host.c2g-kpi-card--neutral .c2g-kpi-card__spark-dot{fill:#fff}:host.c2g-kpi-card--neutral .c2g-kpi-card__spark-stop-top{stop-color:#ffffff4d}:host.c2g-kpi-card--neutral .c2g-kpi-card__spark-stop-bottom{stop-color:#fff0}.c2g-kpi-card__inner{position:relative;padding:22px 22px 18px;border-radius:inherit;transition:transform .12s ease-out;overflow:hidden;color:#fff;min-height:148px;display:flex;flex-direction:column;gap:4px}.c2g-kpi-card__blob{pointer-events:none;position:absolute;top:-48px;right:-48px;width:180px;height:180px;border-radius:50%;background:#ffffff14;animation:c2g-kpi-breathe 4s ease-in-out infinite;z-index:0}.c2g-kpi-card__blob:after{content:\"\";position:absolute;bottom:-60px;left:-30px;width:120px;height:120px;border-radius:50%;background:#ffffff0d}@keyframes c2g-kpi-breathe{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1.08) translateY(-8px)}}.c2g-kpi-card__orb{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);z-index:1;transition:transform .2s ease}:host:hover .c2g-kpi-card__orb{transform:scale(1.1) rotate(-4deg)}.c2g-kpi-card__orb-icon{font-size:1.375rem;line-height:1;filter:drop-shadow(0 1px 4px rgba(0,0,0,.25))}.c2g-kpi-card__label{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.75;position:relative;z-index:1}.c2g-kpi-card__value-row{display:flex;align-items:baseline;gap:5px;position:relative;z-index:1;margin-top:4px}.c2g-kpi-card__value{font-size:2.6rem;font-weight:900;line-height:1;letter-spacing:-.02em;text-shadow:0 2px 12px rgba(0,0,0,.2)}.c2g-kpi-card__unit{font-size:1.1rem;font-weight:600;opacity:.7;margin-bottom:2px}.c2g-kpi-card__sparkline{position:relative;z-index:1;margin-top:auto;padding-top:8px}.c2g-kpi-card__sparkline svg{display:block;overflow:visible}.c2g-kpi-card__spark-line{stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.c2g-kpi-card__spark-dot{filter:drop-shadow(0 0 3px rgba(255,255,255,.8))}.c2g-kpi-card__footer{display:flex;align-items:center;gap:4px;font-size:.75rem;font-weight:600;opacity:.85;position:relative;z-index:1;margin-top:6px}.c2g-kpi-card__footer--up,.c2g-kpi-card__footer--down{opacity:1}.c2g-kpi-card__arrow{font-size:.9rem}.c2g-kpi-card__change{font-weight:800}.c2g-kpi-card__change-label{opacity:.7;font-weight:500}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
694
694
|
}
|
|
695
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
695
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: C2gKpiCardComponent, decorators: [{
|
|
696
696
|
type: Component,
|
|
697
697
|
args: [{ selector: 'c2g-kpi-card', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
698
698
|
'[class]': 'hostClass()',
|
|
699
699
|
'(mousemove)': 'onMouseMove($event)',
|
|
700
700
|
'(mouseleave)': 'onMouseLeave()',
|
|
701
701
|
}, template: "<div class=\"c2g-kpi-card__inner\" [style.transform]=\"tiltStyle()\">\n\n <!-- Glassmorphism icon orb -->\n @if (data().icon) {\n <div class=\"c2g-kpi-card__orb\" aria-hidden=\"true\">\n <span class=\"c2g-kpi-card__orb-icon\">{{ data().icon }}</span>\n </div>\n }\n\n <!-- Decorative blob -->\n <div class=\"c2g-kpi-card__blob\" aria-hidden=\"true\"></div>\n\n <!-- Label -->\n <p class=\"c2g-kpi-card__label\">{{ data().label }}</p>\n\n <!-- Main value -->\n <div class=\"c2g-kpi-card__value-row\">\n <span class=\"c2g-kpi-card__value\">{{ displayValue() }}</span>\n @if (data().unit) {\n <span class=\"c2g-kpi-card__unit\">{{ data().unit }}</span>\n }\n </div>\n\n <!-- Sparkline -->\n @if (sparklinePath(); as sp) {\n <div class=\"c2g-kpi-card__sparkline\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 80 28\" preserveAspectRatio=\"none\" width=\"100%\" height=\"28\">\n <defs>\n <linearGradient [id]=\"'spark-grad-' + color()\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" class=\"c2g-kpi-card__spark-stop-top\" />\n <stop offset=\"100%\" class=\"c2g-kpi-card__spark-stop-bottom\" />\n </linearGradient>\n </defs>\n <path class=\"c2g-kpi-card__spark-area\"\n [attr.d]=\"sp.area\"\n [attr.fill]=\"'url(#spark-grad-' + color() + ')'\" />\n <path class=\"c2g-kpi-card__spark-line\" [attr.d]=\"sp.line\" fill=\"none\" />\n <!-- Dot at latest value -->\n <circle class=\"c2g-kpi-card__spark-dot\"\n [attr.cx]=\"sp.lastX\" [attr.cy]=\"sp.lastY\" r=\"2.5\" />\n </svg>\n </div>\n }\n\n <!-- Trend footer -->\n @if (data().trend || data().change !== undefined) {\n <div class=\"c2g-kpi-card__footer\"\n [class.c2g-kpi-card__footer--up]=\"data().trend === 'up'\"\n [class.c2g-kpi-card__footer--down]=\"data().trend === 'down'\">\n <span class=\"c2g-kpi-card__arrow\">{{ trendArrow() }}</span>\n @if (data().change !== undefined) {\n <span class=\"c2g-kpi-card__change\">{{ data().change }}</span>\n }\n @if (data().changeLabel) {\n <span class=\"c2g-kpi-card__change-label\">{{ data().changeLabel }}</span>\n }\n </div>\n }\n\n</div>\n", styles: [":host{display:block;border-radius:var(--c2g-radius-xl, 20px);position:relative;isolation:isolate;cursor:default;font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif);will-change:transform}:host.c2g-kpi-card--primary{background:linear-gradient(145deg,#ff6b35,#e03e1a);box-shadow:0 4px 24px #ff6b3559,0 1px #ffffff1f inset}:host.c2g-kpi-card--primary:hover{box-shadow:0 8px 40px #ff6b358c,0 1px #ffffff29 inset}:host.c2g-kpi-card--primary .c2g-kpi-card__orb{background:#ff6b352e}:host.c2g-kpi-card--primary .c2g-kpi-card__spark-line{stroke:#ffffffe6}:host.c2g-kpi-card--primary .c2g-kpi-card__spark-dot{fill:#fff}:host.c2g-kpi-card--primary .c2g-kpi-card__spark-stop-top{stop-color:#ffffff4d}:host.c2g-kpi-card--primary .c2g-kpi-card__spark-stop-bottom{stop-color:#fff0}:host.c2g-kpi-card--success{background:linear-gradient(145deg,#22c55e,#16a34a);box-shadow:0 4px 24px #22c55e4d,0 1px #ffffff1f inset}:host.c2g-kpi-card--success:hover{box-shadow:0 8px 40px #22c55e80,0 1px #ffffff29 inset}:host.c2g-kpi-card--success .c2g-kpi-card__orb{background:#22c55e26}:host.c2g-kpi-card--success .c2g-kpi-card__spark-line{stroke:#ffffffe6}:host.c2g-kpi-card--success .c2g-kpi-card__spark-dot{fill:#fff}:host.c2g-kpi-card--success .c2g-kpi-card__spark-stop-top{stop-color:#ffffff4d}:host.c2g-kpi-card--success .c2g-kpi-card__spark-stop-bottom{stop-color:#fff0}:host.c2g-kpi-card--warning{background:linear-gradient(145deg,#f59e0b,#d97706);box-shadow:0 4px 24px #f59e0b4d,0 1px #ffffff1f inset}:host.c2g-kpi-card--warning:hover{box-shadow:0 8px 40px #f59e0b80,0 1px #ffffff29 inset}:host.c2g-kpi-card--warning .c2g-kpi-card__orb{background:#f59e0b26}:host.c2g-kpi-card--warning .c2g-kpi-card__spark-line{stroke:#ffffffe6}:host.c2g-kpi-card--warning .c2g-kpi-card__spark-dot{fill:#fff}:host.c2g-kpi-card--warning .c2g-kpi-card__spark-stop-top{stop-color:#ffffff4d}:host.c2g-kpi-card--warning .c2g-kpi-card__spark-stop-bottom{stop-color:#fff0}:host.c2g-kpi-card--danger{background:linear-gradient(145deg,#ef4444,#dc2626);box-shadow:0 4px 24px #ef44444d,0 1px #ffffff1f inset}:host.c2g-kpi-card--danger:hover{box-shadow:0 8px 40px #ef444480,0 1px #ffffff29 inset}:host.c2g-kpi-card--danger .c2g-kpi-card__orb{background:#ef444426}:host.c2g-kpi-card--danger .c2g-kpi-card__spark-line{stroke:#ffffffe6}:host.c2g-kpi-card--danger .c2g-kpi-card__spark-dot{fill:#fff}:host.c2g-kpi-card--danger .c2g-kpi-card__spark-stop-top{stop-color:#ffffff4d}:host.c2g-kpi-card--danger .c2g-kpi-card__spark-stop-bottom{stop-color:#fff0}:host.c2g-kpi-card--neutral{background:linear-gradient(145deg,#6b7280,#4b5563);box-shadow:0 4px 24px #6b728033,0 1px #ffffff1f inset}:host.c2g-kpi-card--neutral:hover{box-shadow:0 8px 40px #6b728066,0 1px #ffffff29 inset}:host.c2g-kpi-card--neutral .c2g-kpi-card__orb{background:#6b72801f}:host.c2g-kpi-card--neutral .c2g-kpi-card__spark-line{stroke:#ffffffe6}:host.c2g-kpi-card--neutral .c2g-kpi-card__spark-dot{fill:#fff}:host.c2g-kpi-card--neutral .c2g-kpi-card__spark-stop-top{stop-color:#ffffff4d}:host.c2g-kpi-card--neutral .c2g-kpi-card__spark-stop-bottom{stop-color:#fff0}.c2g-kpi-card__inner{position:relative;padding:22px 22px 18px;border-radius:inherit;transition:transform .12s ease-out;overflow:hidden;color:#fff;min-height:148px;display:flex;flex-direction:column;gap:4px}.c2g-kpi-card__blob{pointer-events:none;position:absolute;top:-48px;right:-48px;width:180px;height:180px;border-radius:50%;background:#ffffff14;animation:c2g-kpi-breathe 4s ease-in-out infinite;z-index:0}.c2g-kpi-card__blob:after{content:\"\";position:absolute;bottom:-60px;left:-30px;width:120px;height:120px;border-radius:50%;background:#ffffff0d}@keyframes c2g-kpi-breathe{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1.08) translateY(-8px)}}.c2g-kpi-card__orb{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);z-index:1;transition:transform .2s ease}:host:hover .c2g-kpi-card__orb{transform:scale(1.1) rotate(-4deg)}.c2g-kpi-card__orb-icon{font-size:1.375rem;line-height:1;filter:drop-shadow(0 1px 4px rgba(0,0,0,.25))}.c2g-kpi-card__label{margin:0;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.75;position:relative;z-index:1}.c2g-kpi-card__value-row{display:flex;align-items:baseline;gap:5px;position:relative;z-index:1;margin-top:4px}.c2g-kpi-card__value{font-size:2.6rem;font-weight:900;line-height:1;letter-spacing:-.02em;text-shadow:0 2px 12px rgba(0,0,0,.2)}.c2g-kpi-card__unit{font-size:1.1rem;font-weight:600;opacity:.7;margin-bottom:2px}.c2g-kpi-card__sparkline{position:relative;z-index:1;margin-top:auto;padding-top:8px}.c2g-kpi-card__sparkline svg{display:block;overflow:visible}.c2g-kpi-card__spark-line{stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.c2g-kpi-card__spark-dot{filter:drop-shadow(0 0 3px rgba(255,255,255,.8))}.c2g-kpi-card__footer{display:flex;align-items:center;gap:4px;font-size:.75rem;font-weight:600;opacity:.85;position:relative;z-index:1;margin-top:6px}.c2g-kpi-card__footer--up,.c2g-kpi-card__footer--down{opacity:1}.c2g-kpi-card__arrow{font-size:.9rem}.c2g-kpi-card__change{font-weight:800}.c2g-kpi-card__change-label{opacity:.7;font-weight:500}\n"] }]
|
|
702
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }]
|
|
702
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
703
703
|
|
|
704
704
|
class FilterBarComponent {
|
|
705
705
|
groups = input.required(...(ngDevMode ? [{ debugName: "groups" }] : []));
|
|
@@ -738,13 +738,13 @@ class FilterBarComponent {
|
|
|
738
738
|
this.search.set(value);
|
|
739
739
|
this.searchChanged.emit(value);
|
|
740
740
|
}
|
|
741
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
742
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
741
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
742
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: FilterBarComponent, isStandalone: true, selector: "c2g-filter-bar", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, activeFilters: { classPropertyName: "activeFilters", publicName: "activeFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange", activeFilters: "activeFiltersChange", filterChanged: "filterChanged", searchChanged: "searchChanged" }, ngImport: i0, template: "<div class=\"c2g-filter-bar\">\n @if (showSearch()) {\n <div class=\"c2g-filter-bar__search\">\n <input\n class=\"c2g-filter-bar__search-input\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"search()\"\n (input)=\"onSearch($any($event.target).value)\"\n aria-label=\"Suchen\"\n />\n <span class=\"c2g-filter-bar__search-icon\" aria-hidden=\"true\">\uD83D\uDD0D</span>\n </div>\n }\n\n <div class=\"c2g-filter-bar__groups\">\n @for (group of groups(); track group.key) {\n <div class=\"c2g-filter-bar__group\">\n @if (group.label) {\n <span class=\"c2g-filter-bar__group-label\">{{ group.label }}</span>\n }\n <div class=\"c2g-filter-bar__options\" role=\"group\" [attr.aria-label]=\"group.label\">\n @for (option of group.options; track option.key) {\n <button\n class=\"c2g-filter-bar__option\"\n type=\"button\"\n [class.c2g-filter-bar__option--active]=\"isSelected(group.key, option.key)\"\n [attr.aria-pressed]=\"isSelected(group.key, option.key)\"\n (click)=\"toggle(group.key, option.key, group.multiple ?? true)\"\n >\n @if (option.icon) {\n <span class=\"c2g-filter-bar__option-icon\" aria-hidden=\"true\">{{ option.icon }}</span>\n }\n {{ option.label }}\n @if (option.count !== undefined) {\n <span class=\"c2g-filter-bar__option-count\">{{ option.count }}</span>\n }\n </button>\n }\n </div>\n </div>\n }\n </div>\n\n @if (hasActiveFilters()) {\n <button\n class=\"c2g-filter-bar__clear\"\n type=\"button\"\n (click)=\"clearAll()\"\n >\n Filter zur\u00FCcksetzen\n <span class=\"c2g-filter-bar__clear-badge\">{{ activeCount() }}</span>\n </button>\n }\n</div>\n", styles: [":host{display:block;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:12px 16px;background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));border-radius:var(--c2g-radius-md, 8px);font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-filter-bar__search{position:relative;flex:0 0 auto;min-width:200px}.c2g-filter-bar__search-input{width:100%;padding:8px 36px 8px 12px;border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));border-radius:var(--c2g-radius-sm, 6px);font-family:inherit;font-size:var(--c2g-font-size-sm, .875rem);background:var(--c2g-theme-surface, var(--c2g-color-surface));color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));outline:none;transition:border-color .15s ease;box-sizing:border-box}.c2g-filter-bar__search-input:focus{border-color:var(--c2g-theme-primary, var(--c2g-color-primary));box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-theme-primary, var(--c2g-color-primary)) 12%,transparent)}.c2g-filter-bar__search-input::placeholder{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-filter-bar__search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:.875rem;opacity:.6}.c2g-filter-bar__groups{display:flex;flex-wrap:wrap;gap:12px;flex:1}.c2g-filter-bar__group{display:flex;align-items:center;gap:8px}.c2g-filter-bar__group-label{font-size:var(--c2g-font-size-xs, .75rem);font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.c2g-filter-bar__options{display:flex;flex-wrap:wrap;gap:6px}.c2g-filter-bar__option{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));border-radius:20px;background:var(--c2g-theme-surface, var(--c2g-color-surface));cursor:pointer;font-family:inherit;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));transition:border-color .15s ease,background .15s ease,color .15s ease;white-space:nowrap}.c2g-filter-bar__option:hover{border-color:var(--c2g-theme-primary, var(--c2g-color-primary));color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-filter-bar__option--active{border-color:var(--c2g-theme-primary, var(--c2g-color-primary));background:var(--c2g-theme-primary-container, var(--c2g-color-primary-container));color:var(--c2g-theme-primary, var(--c2g-color-primary));font-weight:600}.c2g-filter-bar__option:focus-visible{outline:2px solid var(--c2g-theme-primary, var(--c2g-color-primary));outline-offset:2px}.c2g-filter-bar__option-icon{font-size:.875rem;line-height:1}.c2g-filter-bar__option-count{font-size:.75rem;opacity:.7}.c2g-filter-bar__clear{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--c2g-theme-error, var(--c2g-color-error));border-radius:20px;background:none;cursor:pointer;font-family:inherit;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-error, var(--c2g-color-error));transition:background .15s ease;white-space:nowrap}.c2g-filter-bar__clear:hover{background:var(--c2g-theme-error-container, #fff5f5)}.c2g-filter-bar__clear:focus-visible{outline:2px solid var(--c2g-theme-error, var(--c2g-color-error));outline-offset:2px}.c2g-filter-bar__clear-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--c2g-theme-error, var(--c2g-color-error));color:var(--c2g-theme-surface, var(--c2g-color-surface));font-size:.7rem;font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
743
743
|
}
|
|
744
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
744
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: FilterBarComponent, decorators: [{
|
|
745
745
|
type: Component,
|
|
746
746
|
args: [{ selector: 'c2g-filter-bar', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-filter-bar\">\n @if (showSearch()) {\n <div class=\"c2g-filter-bar__search\">\n <input\n class=\"c2g-filter-bar__search-input\"\n type=\"search\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"search()\"\n (input)=\"onSearch($any($event.target).value)\"\n aria-label=\"Suchen\"\n />\n <span class=\"c2g-filter-bar__search-icon\" aria-hidden=\"true\">\uD83D\uDD0D</span>\n </div>\n }\n\n <div class=\"c2g-filter-bar__groups\">\n @for (group of groups(); track group.key) {\n <div class=\"c2g-filter-bar__group\">\n @if (group.label) {\n <span class=\"c2g-filter-bar__group-label\">{{ group.label }}</span>\n }\n <div class=\"c2g-filter-bar__options\" role=\"group\" [attr.aria-label]=\"group.label\">\n @for (option of group.options; track option.key) {\n <button\n class=\"c2g-filter-bar__option\"\n type=\"button\"\n [class.c2g-filter-bar__option--active]=\"isSelected(group.key, option.key)\"\n [attr.aria-pressed]=\"isSelected(group.key, option.key)\"\n (click)=\"toggle(group.key, option.key, group.multiple ?? true)\"\n >\n @if (option.icon) {\n <span class=\"c2g-filter-bar__option-icon\" aria-hidden=\"true\">{{ option.icon }}</span>\n }\n {{ option.label }}\n @if (option.count !== undefined) {\n <span class=\"c2g-filter-bar__option-count\">{{ option.count }}</span>\n }\n </button>\n }\n </div>\n </div>\n }\n </div>\n\n @if (hasActiveFilters()) {\n <button\n class=\"c2g-filter-bar__clear\"\n type=\"button\"\n (click)=\"clearAll()\"\n >\n Filter zur\u00FCcksetzen\n <span class=\"c2g-filter-bar__clear-badge\">{{ activeCount() }}</span>\n </button>\n }\n</div>\n", styles: [":host{display:block;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:12px 16px;background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary));border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));border-radius:var(--c2g-radius-md, 8px);font-family:var(--c2g-font-family-base, \"Quicksand\", sans-serif)}.c2g-filter-bar__search{position:relative;flex:0 0 auto;min-width:200px}.c2g-filter-bar__search-input{width:100%;padding:8px 36px 8px 12px;border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));border-radius:var(--c2g-radius-sm, 6px);font-family:inherit;font-size:var(--c2g-font-size-sm, .875rem);background:var(--c2g-theme-surface, var(--c2g-color-surface));color:var(--c2g-theme-on-surface, var(--c2g-color-text-primary));outline:none;transition:border-color .15s ease;box-sizing:border-box}.c2g-filter-bar__search-input:focus{border-color:var(--c2g-theme-primary, var(--c2g-color-primary));box-shadow:0 0 0 3px color-mix(in srgb,var(--c2g-theme-primary, var(--c2g-color-primary)) 12%,transparent)}.c2g-filter-bar__search-input::placeholder{color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted))}.c2g-filter-bar__search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:.875rem;opacity:.6}.c2g-filter-bar__groups{display:flex;flex-wrap:wrap;gap:12px;flex:1}.c2g-filter-bar__group{display:flex;align-items:center;gap:8px}.c2g-filter-bar__group-label{font-size:var(--c2g-font-size-xs, .75rem);font-weight:600;color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-muted));text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.c2g-filter-bar__options{display:flex;flex-wrap:wrap;gap:6px}.c2g-filter-bar__option{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));border-radius:20px;background:var(--c2g-theme-surface, var(--c2g-color-surface));cursor:pointer;font-family:inherit;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-on-surface-variant, var(--c2g-color-text-secondary));transition:border-color .15s ease,background .15s ease,color .15s ease;white-space:nowrap}.c2g-filter-bar__option:hover{border-color:var(--c2g-theme-primary, var(--c2g-color-primary));color:var(--c2g-theme-primary, var(--c2g-color-primary))}.c2g-filter-bar__option--active{border-color:var(--c2g-theme-primary, var(--c2g-color-primary));background:var(--c2g-theme-primary-container, var(--c2g-color-primary-container));color:var(--c2g-theme-primary, var(--c2g-color-primary));font-weight:600}.c2g-filter-bar__option:focus-visible{outline:2px solid var(--c2g-theme-primary, var(--c2g-color-primary));outline-offset:2px}.c2g-filter-bar__option-icon{font-size:.875rem;line-height:1}.c2g-filter-bar__option-count{font-size:.75rem;opacity:.7}.c2g-filter-bar__clear{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--c2g-theme-error, var(--c2g-color-error));border-radius:20px;background:none;cursor:pointer;font-family:inherit;font-size:var(--c2g-font-size-sm, .875rem);color:var(--c2g-theme-error, var(--c2g-color-error));transition:background .15s ease;white-space:nowrap}.c2g-filter-bar__clear:hover{background:var(--c2g-theme-error-container, #fff5f5)}.c2g-filter-bar__clear:focus-visible{outline:2px solid var(--c2g-theme-error, var(--c2g-color-error));outline-offset:2px}.c2g-filter-bar__clear-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--c2g-theme-error, var(--c2g-color-error));color:var(--c2g-theme-surface, var(--c2g-color-surface));font-size:.7rem;font-weight:700}\n"] }]
|
|
747
|
-
}]
|
|
747
|
+
}] });
|
|
748
748
|
|
|
749
749
|
class SkeletonTableComponent {
|
|
750
750
|
rows = input(5, ...(ngDevMode ? [{ debugName: "rows" }] : []));
|
|
@@ -752,13 +752,13 @@ class SkeletonTableComponent {
|
|
|
752
752
|
showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
|
|
753
753
|
rowIndices = Array.from({ length: 10 }).map((_, i) => i);
|
|
754
754
|
colIndices = Array.from({ length: 10 }).map((_, i) => i);
|
|
755
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
756
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
755
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SkeletonTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
756
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.1", type: SkeletonTableComponent, isStandalone: true, selector: "c2g-skeleton-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"c2g-skeleton-table\">\n <table class=\"c2g-skeleton-table__table\" aria-busy=\"true\" aria-label=\"Wird geladen...\">\n @if (showHeader()) {\n <thead class=\"c2g-skeleton-table__head\">\n <tr>\n @for (c of colIndices.slice(0, columns()); track c) {\n <th class=\"c2g-skeleton-table__th\">\n <span class=\"c2g-skeleton c2g-skeleton--header\"></span>\n </th>\n }\n </tr>\n </thead>\n }\n <tbody>\n @for (r of rowIndices.slice(0, rows()); track r) {\n <tr class=\"c2g-skeleton-table__row\">\n @for (c of colIndices.slice(0, columns()); track c; let first = $first) {\n <td class=\"c2g-skeleton-table__td\">\n <span\n class=\"c2g-skeleton\"\n [class.c2g-skeleton--wide]=\"first\"\n ></span>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n</div>\n", styles: ["@keyframes c2g-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}:host{display:block;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-skeleton-table{border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));border-radius:var(--c2g-radius-md, 8px);overflow:hidden}.c2g-skeleton-table__table{width:100%;border-collapse:collapse}.c2g-skeleton-table__head{background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary))}.c2g-skeleton-table__th,.c2g-skeleton-table__td{padding:12px 16px;border-bottom:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline))}.c2g-skeleton-table__row:last-child .c2g-skeleton-table__td{border-bottom:none}.c2g-skeleton{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--c2g-theme-surface-container-high, var(--c2g-color-bg-secondary)) 25%,var(--c2g-theme-surface-container-highest, var(--c2g-color-bg-base)) 50%,var(--c2g-theme-surface-container-high, var(--c2g-color-bg-secondary)) 75%);background-size:200% 100%;animation:c2g-shimmer 1.5s infinite linear;width:60%}.c2g-skeleton--header{height:14px;width:40%}.c2g-skeleton--wide{width:85%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
757
757
|
}
|
|
758
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
758
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: SkeletonTableComponent, decorators: [{
|
|
759
759
|
type: Component,
|
|
760
760
|
args: [{ selector: 'c2g-skeleton-table', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"c2g-skeleton-table\">\n <table class=\"c2g-skeleton-table__table\" aria-busy=\"true\" aria-label=\"Wird geladen...\">\n @if (showHeader()) {\n <thead class=\"c2g-skeleton-table__head\">\n <tr>\n @for (c of colIndices.slice(0, columns()); track c) {\n <th class=\"c2g-skeleton-table__th\">\n <span class=\"c2g-skeleton c2g-skeleton--header\"></span>\n </th>\n }\n </tr>\n </thead>\n }\n <tbody>\n @for (r of rowIndices.slice(0, rows()); track r) {\n <tr class=\"c2g-skeleton-table__row\">\n @for (c of colIndices.slice(0, columns()); track c; let first = $first) {\n <td class=\"c2g-skeleton-table__td\">\n <span\n class=\"c2g-skeleton\"\n [class.c2g-skeleton--wide]=\"first\"\n ></span>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n</div>\n", styles: ["@keyframes c2g-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}:host{display:block;transition:background-color var(--c2g-transition-medium, .25s ease),color var(--c2g-transition-medium, .25s ease),border-color var(--c2g-transition-medium, .25s ease)}.c2g-skeleton-table{border:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline));border-radius:var(--c2g-radius-md, 8px);overflow:hidden}.c2g-skeleton-table__table{width:100%;border-collapse:collapse}.c2g-skeleton-table__head{background:var(--c2g-theme-surface-container, var(--c2g-color-bg-secondary))}.c2g-skeleton-table__th,.c2g-skeleton-table__td{padding:12px 16px;border-bottom:1px solid var(--c2g-theme-outline-variant, var(--c2g-color-outline))}.c2g-skeleton-table__row:last-child .c2g-skeleton-table__td{border-bottom:none}.c2g-skeleton{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--c2g-theme-surface-container-high, var(--c2g-color-bg-secondary)) 25%,var(--c2g-theme-surface-container-highest, var(--c2g-color-bg-base)) 50%,var(--c2g-theme-surface-container-high, var(--c2g-color-bg-secondary)) 75%);background-size:200% 100%;animation:c2g-shimmer 1.5s infinite linear;width:60%}.c2g-skeleton--header{height:14px;width:40%}.c2g-skeleton--wide{width:85%}\n"] }]
|
|
761
|
-
}]
|
|
761
|
+
}] });
|
|
762
762
|
|
|
763
763
|
/**
|
|
764
764
|
* Generated bundle index. Do not edit.
|