duck-dev-lib 0.0.49 → 0.0.51
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/duck-dev-lib.mjs +160 -161
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/duck-dev-lib.d.ts +2 -1
|
@@ -381,11 +381,11 @@ class ButtonNeobrutalSlab {
|
|
|
381
381
|
colorButton = input(AccentEnumColor.Gray, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
382
382
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
383
383
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
384
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalSlab, isStandalone: true, selector: "duck-dev-button-neobrutal-slab", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"slab-text\">{{ text() }}</span>\n <span class=\"slab-helper\">{{ helperText() }}</span>\n
|
|
384
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalSlab, isStandalone: true, selector: "duck-dev-button-neobrutal-slab", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"slab-text\">{{ text() }}</span>\n <span class=\"slab-helper\">{{ helperText() }}</span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-slab{position:relative;display:grid;gap:.15rem;min-width:220px;padding:1rem 1.2rem .95rem;border:3px solid var(--dd-base-600);border-radius:10px;background:linear-gradient(135deg,transparent 0 18px,var(--neo-surface) 18px 100%);box-shadow:0 0 0 3px var(--dd-base-600),8px 8px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;text-align:left;font:inherit;transition:transform .18s ease,box-shadow .18s ease}.neo-slab:hover,.neo-slab:focus-visible{transform:translate(-2px,-2px);box-shadow:0 0 0 3px var(--dd-base-600),11px 11px 0 var(--neo-shadow)}.neo-slab:active{transform:translate(4px,4px);box-shadow:0 0 0 3px var(--dd-base-600),4px 4px 0 var(--neo-shadow)}.neo-slab:disabled{cursor:not-allowed;opacity:.6}.slab-text{position:relative;z-index:1;font-size:1rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.slab-helper{position:relative;z-index:1;font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.78}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
385
385
|
}
|
|
386
386
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSlab, decorators: [{
|
|
387
387
|
type: Component,
|
|
388
|
-
args: [{ selector: 'duck-dev-button-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"slab-text\">{{ text() }}</span>\n <span class=\"slab-helper\">{{ helperText() }}</span>\n
|
|
388
|
+
args: [{ selector: 'duck-dev-button-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"slab-text\">{{ text() }}</span>\n <span class=\"slab-helper\">{{ helperText() }}</span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-slab{position:relative;display:grid;gap:.15rem;min-width:220px;padding:1rem 1.2rem .95rem;border:3px solid var(--dd-base-600);border-radius:10px;background:linear-gradient(135deg,transparent 0 18px,var(--neo-surface) 18px 100%);box-shadow:0 0 0 3px var(--dd-base-600),8px 8px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;text-align:left;font:inherit;transition:transform .18s ease,box-shadow .18s ease}.neo-slab:hover,.neo-slab:focus-visible{transform:translate(-2px,-2px);box-shadow:0 0 0 3px var(--dd-base-600),11px 11px 0 var(--neo-shadow)}.neo-slab:active{transform:translate(4px,4px);box-shadow:0 0 0 3px var(--dd-base-600),4px 4px 0 var(--neo-shadow)}.neo-slab:disabled{cursor:not-allowed;opacity:.6}.slab-text{position:relative;z-index:1;font-size:1rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.slab-helper{position:relative;z-index:1;font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.78}\n"] }]
|
|
389
389
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
390
390
|
|
|
391
391
|
class ButtonNeobrutalTag {
|
|
@@ -579,146 +579,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
579
579
|
args: [{ selector: 'dd-card-section', standalone: true, imports: [], template: "<section class=\"component-section\">\n <ng-content />\n</section>\n", styles: [".component-section{background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}\n"] }]
|
|
580
580
|
}] });
|
|
581
581
|
|
|
582
|
-
class DuckDevCardMinimal {
|
|
583
|
-
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
584
|
-
cardStyle = computed(() => {
|
|
585
|
-
const color = this.color();
|
|
586
|
-
let accent = 'var(--dd-base-300)';
|
|
587
|
-
let background = 'linear-gradient(180deg, var(--dd-base-0) 0%, var(--dd-base-100) 100%)';
|
|
588
|
-
let panel = 'color-mix(in srgb, var(--dd-base-0) 88%, var(--dd-base-100))';
|
|
589
|
-
let title = 'var(--dd-base-600)';
|
|
590
|
-
let text = 'var(--dd-base-400)';
|
|
591
|
-
let border = 'color-mix(in srgb, var(--dd-base-300) 72%, transparent)';
|
|
592
|
-
let shadow = '0 28px 60px -42px color-mix(in srgb, var(--dd-base-600) 28%, transparent)';
|
|
593
|
-
let glow = 'color-mix(in srgb, var(--dd-base-300) 40%, transparent)';
|
|
594
|
-
switch (color) {
|
|
595
|
-
case AccentEnumColor.Violet:
|
|
596
|
-
accent = 'var(--dd-base-secondary)';
|
|
597
|
-
background =
|
|
598
|
-
'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-secondary) 8%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
|
|
599
|
-
panel = 'color-mix(in srgb, var(--dd-base-secondary) 4%, var(--dd-base-0))';
|
|
600
|
-
border = 'color-mix(in srgb, var(--dd-base-secondary) 18%, transparent)';
|
|
601
|
-
glow = 'color-mix(in srgb, var(--dd-base-secondary) 30%, transparent)';
|
|
602
|
-
shadow = '0 30px 65px -42px color-mix(in srgb, var(--dd-base-secondary) 32%, transparent)';
|
|
603
|
-
break;
|
|
604
|
-
case AccentEnumColor.Orange:
|
|
605
|
-
accent = 'var(--dd-base-accent-orange)';
|
|
606
|
-
background =
|
|
607
|
-
'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-accent-orange) 10%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
|
|
608
|
-
panel = 'color-mix(in srgb, var(--dd-base-accent-orange) 5%, var(--dd-base-0))';
|
|
609
|
-
border = 'color-mix(in srgb, var(--dd-base-accent-orange) 18%, transparent)';
|
|
610
|
-
glow = 'color-mix(in srgb, var(--dd-base-accent-orange) 32%, transparent)';
|
|
611
|
-
shadow =
|
|
612
|
-
'0 30px 65px -42px color-mix(in srgb, var(--dd-base-accent-orange) 34%, transparent)';
|
|
613
|
-
break;
|
|
614
|
-
case AccentEnumColor.Gray:
|
|
615
|
-
accent = 'var(--dd-base-500)';
|
|
616
|
-
background = 'linear-gradient(180deg, var(--dd-base-100) 0%, var(--dd-base-0) 100%)';
|
|
617
|
-
panel = 'color-mix(in srgb, var(--dd-base-100) 82%, var(--dd-base-0))';
|
|
618
|
-
border = 'color-mix(in srgb, var(--dd-base-400) 24%, transparent)';
|
|
619
|
-
glow = 'color-mix(in srgb, var(--dd-base-400) 22%, transparent)';
|
|
620
|
-
break;
|
|
621
|
-
case AccentEnumColor.Dark:
|
|
622
|
-
accent = 'var(--dd-base-0)';
|
|
623
|
-
background =
|
|
624
|
-
'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-600) 94%, black) 0%, var(--dd-base-600) 100%)';
|
|
625
|
-
panel = 'color-mix(in srgb, var(--dd-base-500) 92%, black)';
|
|
626
|
-
title = 'var(--dd-base-0)';
|
|
627
|
-
text = 'var(--dd-base-200)';
|
|
628
|
-
border = 'color-mix(in srgb, var(--dd-base-200) 14%, transparent)';
|
|
629
|
-
glow = 'color-mix(in srgb, var(--dd-base-0) 16%, transparent)';
|
|
630
|
-
shadow = '0 34px 80px -46px color-mix(in srgb, black 56%, transparent)';
|
|
631
|
-
break;
|
|
632
|
-
case AccentEnumColor.White:
|
|
633
|
-
break;
|
|
634
|
-
}
|
|
635
|
-
return {
|
|
636
|
-
'--dd-card-minimal-accent': accent,
|
|
637
|
-
'--dd-card-minimal-background': background,
|
|
638
|
-
'--dd-card-minimal-panel': panel,
|
|
639
|
-
'--dd-card-minimal-title': title,
|
|
640
|
-
'--dd-card-minimal-text': text,
|
|
641
|
-
'--dd-card-minimal-border': border,
|
|
642
|
-
'--dd-card-minimal-shadow': shadow,
|
|
643
|
-
'--dd-card-minimal-glow': glow,
|
|
644
|
-
};
|
|
645
|
-
}, { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
|
|
646
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardMinimal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
647
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardMinimal, isStandalone: true, selector: "dd-card-minimal", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-minimal\" [ngStyle]=\"cardStyle()\">\n <span class=\"dd-card-minimal__halo\" aria-hidden=\"true\"></span>\n <span class=\"dd-card-minimal__corner\" aria-hidden=\"true\"></span>\n\n <div class=\"dd-card-minimal__panel\">\n <div class=\"dd-card-minimal__rail\" aria-hidden=\"true\">\n <span class=\"dd-card-minimal__dot\"></span>\n <span class=\"dd-card-minimal__line\"></span>\n </div>\n\n <div class=\"dd-card-minimal__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-minimal{position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:1px;border:1px solid var(--dd-card-minimal-border);border-radius:24px;background:var(--dd-card-minimal-background);box-shadow:var(--dd-card-minimal-shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.dd-card-minimal:hover{transform:translateY(-4px);box-shadow:var(--dd-card-minimal-shadow),0 0 0 1px color-mix(in srgb,var(--dd-card-minimal-accent) 12%,transparent);border-color:color-mix(in srgb,var(--dd-card-minimal-accent) 28%,transparent)}.dd-card-minimal__halo,.dd-card-minimal__corner{position:absolute;pointer-events:none}.dd-card-minimal__halo{top:-72px;right:-52px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--dd-card-minimal-glow) 0%,transparent 72%);opacity:.9;z-index:0}.dd-card-minimal__corner{top:16px;right:16px;width:42px;height:42px;border-top:1px solid color-mix(in srgb,var(--dd-card-minimal-accent) 38%,transparent);border-right:1px solid color-mix(in srgb,var(--dd-card-minimal-accent) 38%,transparent);border-radius:0 16px 0 0;opacity:.9;z-index:2}.dd-card-minimal__panel{position:relative;z-index:1;display:grid;grid-template-columns:26px minmax(0,1fr);gap:18px;min-height:100%;padding:22px 22px 22px 20px;border-radius:23px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-card-minimal-panel) 96%,var(--dd-base-0)) 0%,var(--dd-card-minimal-panel) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dd-card-minimal__rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:2px}.dd-card-minimal__dot{width:8px;height:8px;border-radius:50%;background:var(--dd-card-minimal-accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--dd-card-minimal-accent) 12%,transparent)}.dd-card-minimal__line{width:1px;flex:1;min-height:76px;border-radius:999px;background:linear-gradient(180deg,var(--dd-card-minimal-accent) 0%,color-mix(in srgb,var(--dd-card-minimal-accent) 16%,transparent) 100%)}.dd-card-minimal__content{min-width:0;max-width:100%;color:var(--dd-card-minimal-text);line-height:1.65;padding-right:28px;letter-spacing:-.01em;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.dd-card-minimal__content>:first-child{margin-top:0}.dd-card-minimal__content>:last-child{margin-bottom:0}.dd-card-minimal strong,.dd-card-minimal h3,.dd-card-minimal h4{display:inline-block;color:var(--dd-card-minimal-title);font-weight:600;letter-spacing:-.03em}.dd-card-minimal h3,.dd-card-minimal h4{margin:0 0 8px;font-size:18px;line-height:1.2}.dd-card-minimal p{margin:0}.dd-card-minimal small{display:inline-block;margin-bottom:10px;color:color-mix(in srgb,var(--dd-card-minimal-accent) 72%,var(--dd-card-minimal-text));font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.dd-card-minimal a{color:var(--dd-card-minimal-title);text-decoration-color:color-mix(in srgb,var(--dd-card-minimal-accent) 40%,transparent);text-underline-offset:.18em}.dd-card-minimal p,.dd-card-minimal small,.dd-card-minimal a,.dd-card-minimal span,.dd-card-minimal div{max-width:100%;color:inherit;overflow-wrap:anywhere;word-break:break-word}@media(max-width:640px){.dd-card-minimal{border-radius:20px}.dd-card-minimal__panel{grid-template-columns:18px minmax(0,1fr);gap:14px;padding:18px 16px;border-radius:19px}.dd-card-minimal__content{padding-right:10px}.dd-card-minimal__corner{top:12px;right:12px;width:30px;height:30px;border-radius:0 12px 0 0}.dd-card-minimal__halo{top:-82px;right:-84px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
648
|
-
}
|
|
649
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardMinimal, decorators: [{
|
|
650
|
-
type: Component,
|
|
651
|
-
args: [{ selector: 'dd-card-minimal', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-minimal\" [ngStyle]=\"cardStyle()\">\n <span class=\"dd-card-minimal__halo\" aria-hidden=\"true\"></span>\n <span class=\"dd-card-minimal__corner\" aria-hidden=\"true\"></span>\n\n <div class=\"dd-card-minimal__panel\">\n <div class=\"dd-card-minimal__rail\" aria-hidden=\"true\">\n <span class=\"dd-card-minimal__dot\"></span>\n <span class=\"dd-card-minimal__line\"></span>\n </div>\n\n <div class=\"dd-card-minimal__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-minimal{position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:1px;border:1px solid var(--dd-card-minimal-border);border-radius:24px;background:var(--dd-card-minimal-background);box-shadow:var(--dd-card-minimal-shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.dd-card-minimal:hover{transform:translateY(-4px);box-shadow:var(--dd-card-minimal-shadow),0 0 0 1px color-mix(in srgb,var(--dd-card-minimal-accent) 12%,transparent);border-color:color-mix(in srgb,var(--dd-card-minimal-accent) 28%,transparent)}.dd-card-minimal__halo,.dd-card-minimal__corner{position:absolute;pointer-events:none}.dd-card-minimal__halo{top:-72px;right:-52px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--dd-card-minimal-glow) 0%,transparent 72%);opacity:.9;z-index:0}.dd-card-minimal__corner{top:16px;right:16px;width:42px;height:42px;border-top:1px solid color-mix(in srgb,var(--dd-card-minimal-accent) 38%,transparent);border-right:1px solid color-mix(in srgb,var(--dd-card-minimal-accent) 38%,transparent);border-radius:0 16px 0 0;opacity:.9;z-index:2}.dd-card-minimal__panel{position:relative;z-index:1;display:grid;grid-template-columns:26px minmax(0,1fr);gap:18px;min-height:100%;padding:22px 22px 22px 20px;border-radius:23px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-card-minimal-panel) 96%,var(--dd-base-0)) 0%,var(--dd-card-minimal-panel) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dd-card-minimal__rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:2px}.dd-card-minimal__dot{width:8px;height:8px;border-radius:50%;background:var(--dd-card-minimal-accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--dd-card-minimal-accent) 12%,transparent)}.dd-card-minimal__line{width:1px;flex:1;min-height:76px;border-radius:999px;background:linear-gradient(180deg,var(--dd-card-minimal-accent) 0%,color-mix(in srgb,var(--dd-card-minimal-accent) 16%,transparent) 100%)}.dd-card-minimal__content{min-width:0;max-width:100%;color:var(--dd-card-minimal-text);line-height:1.65;padding-right:28px;letter-spacing:-.01em;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.dd-card-minimal__content>:first-child{margin-top:0}.dd-card-minimal__content>:last-child{margin-bottom:0}.dd-card-minimal strong,.dd-card-minimal h3,.dd-card-minimal h4{display:inline-block;color:var(--dd-card-minimal-title);font-weight:600;letter-spacing:-.03em}.dd-card-minimal h3,.dd-card-minimal h4{margin:0 0 8px;font-size:18px;line-height:1.2}.dd-card-minimal p{margin:0}.dd-card-minimal small{display:inline-block;margin-bottom:10px;color:color-mix(in srgb,var(--dd-card-minimal-accent) 72%,var(--dd-card-minimal-text));font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.dd-card-minimal a{color:var(--dd-card-minimal-title);text-decoration-color:color-mix(in srgb,var(--dd-card-minimal-accent) 40%,transparent);text-underline-offset:.18em}.dd-card-minimal p,.dd-card-minimal small,.dd-card-minimal a,.dd-card-minimal span,.dd-card-minimal div{max-width:100%;color:inherit;overflow-wrap:anywhere;word-break:break-word}@media(max-width:640px){.dd-card-minimal{border-radius:20px}.dd-card-minimal__panel{grid-template-columns:18px minmax(0,1fr);gap:14px;padding:18px 16px;border-radius:19px}.dd-card-minimal__content{padding-right:10px}.dd-card-minimal__corner{top:12px;right:12px;width:30px;height:30px;border-radius:0 12px 0 0}.dd-card-minimal__halo{top:-82px;right:-84px}}\n"] }]
|
|
652
|
-
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
653
|
-
|
|
654
|
-
class DuckDevCardOutline {
|
|
655
|
-
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
656
|
-
cardStyle = computed(() => {
|
|
657
|
-
const color = this.color();
|
|
658
|
-
let accent = 'var(--dd-base-accent-blue)';
|
|
659
|
-
let border = 'color-mix(in srgb, var(--dd-base-300) 78%, transparent)';
|
|
660
|
-
let background = 'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-0) 96%, var(--dd-base-100)) 0%, var(--dd-base-0) 100%)';
|
|
661
|
-
let panel = 'color-mix(in srgb, var(--dd-base-0) 94%, var(--dd-base-100))';
|
|
662
|
-
let text = 'var(--dd-base-400)';
|
|
663
|
-
let title = 'var(--dd-base-600)';
|
|
664
|
-
let shadow = '0 28px 56px -42px color-mix(in srgb, var(--dd-base-600) 22%, transparent)';
|
|
665
|
-
switch (color) {
|
|
666
|
-
case AccentEnumColor.Violet:
|
|
667
|
-
accent = 'var(--dd-base-secondary)';
|
|
668
|
-
border = 'color-mix(in srgb, var(--dd-base-secondary) 22%, transparent)';
|
|
669
|
-
background =
|
|
670
|
-
'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-secondary) 8%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
|
|
671
|
-
panel = 'color-mix(in srgb, var(--dd-base-secondary) 4%, var(--dd-base-0))';
|
|
672
|
-
shadow = '0 28px 56px -42px color-mix(in srgb, var(--dd-base-secondary) 26%, transparent)';
|
|
673
|
-
break;
|
|
674
|
-
case AccentEnumColor.Orange:
|
|
675
|
-
accent = 'var(--dd-base-accent-orange)';
|
|
676
|
-
border = 'color-mix(in srgb, var(--dd-base-accent-orange) 22%, transparent)';
|
|
677
|
-
background =
|
|
678
|
-
'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-accent-orange) 10%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
|
|
679
|
-
panel = 'color-mix(in srgb, var(--dd-base-accent-orange) 5%, var(--dd-base-0))';
|
|
680
|
-
shadow =
|
|
681
|
-
'0 28px 56px -42px color-mix(in srgb, var(--dd-base-accent-orange) 28%, transparent)';
|
|
682
|
-
break;
|
|
683
|
-
case AccentEnumColor.Gray:
|
|
684
|
-
accent = 'var(--dd-base-500)';
|
|
685
|
-
border = 'color-mix(in srgb, var(--dd-base-400) 28%, transparent)';
|
|
686
|
-
background =
|
|
687
|
-
'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-100) 88%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
|
|
688
|
-
panel = 'color-mix(in srgb, var(--dd-base-100) 84%, var(--dd-base-0))';
|
|
689
|
-
break;
|
|
690
|
-
case AccentEnumColor.Dark:
|
|
691
|
-
accent = 'var(--dd-base-0)';
|
|
692
|
-
border = 'color-mix(in srgb, var(--dd-base-200) 18%, transparent)';
|
|
693
|
-
background =
|
|
694
|
-
'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-600) 94%, black) 0%, var(--dd-base-600) 100%)';
|
|
695
|
-
panel = 'color-mix(in srgb, var(--dd-base-500) 90%, black)';
|
|
696
|
-
text = 'var(--dd-base-200)';
|
|
697
|
-
title = 'var(--dd-base-0)';
|
|
698
|
-
shadow = '0 32px 72px -46px color-mix(in srgb, black 52%, transparent)';
|
|
699
|
-
break;
|
|
700
|
-
case AccentEnumColor.White:
|
|
701
|
-
accent = 'var(--dd-base-accent-blue)';
|
|
702
|
-
break;
|
|
703
|
-
}
|
|
704
|
-
return {
|
|
705
|
-
'--dd-card-outline-accent': accent,
|
|
706
|
-
'--dd-card-outline-border': border,
|
|
707
|
-
'--dd-card-outline-background': background,
|
|
708
|
-
'--dd-card-outline-panel': panel,
|
|
709
|
-
'--dd-card-outline-text': text,
|
|
710
|
-
'--dd-card-outline-title': title,
|
|
711
|
-
'--dd-card-outline-shadow': shadow,
|
|
712
|
-
};
|
|
713
|
-
}, { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
|
|
714
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardOutline, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
715
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardOutline, isStandalone: true, selector: "dd-card-outline", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-outline\" [ngStyle]=\"cardStyle()\">\n <span class=\"dd-card-outline__frame\" aria-hidden=\"true\"></span>\n <div class=\"dd-card-outline__surface\">\n <div class=\"dd-card-outline__eyebrow\"></div>\n <div class=\"dd-card-outline__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-outline{position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:1px;border-radius:26px;border:1px solid var(--dd-card-outline-border);background:var(--dd-card-outline-background);box-shadow:var(--dd-card-outline-shadow);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}.dd-card-outline:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--dd-card-outline-accent) 28%,transparent)}.dd-card-outline__frame{position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--dd-card-outline-accent) 18%,transparent);border-radius:18px;opacity:.9;pointer-events:none}.dd-card-outline__surface{position:relative;display:grid;gap:16px;min-width:0;padding:24px;border-radius:25px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-card-outline-panel) 98%,var(--dd-base-0)) 0%,var(--dd-card-outline-panel) 100%)}.dd-card-outline__eyebrow{width:72px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--dd-card-outline-accent) 0%,color-mix(in srgb,var(--dd-card-outline-accent) 16%,transparent) 100%);box-shadow:0 0 0 8px color-mix(in srgb,var(--dd-card-outline-accent) 8%,transparent)}.dd-card-outline__content{min-width:0;max-width:100%;color:var(--dd-card-outline-text);line-height:1.68;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.dd-card-outline__content>:first-child{margin-top:0}.dd-card-outline__content>:last-child{margin-bottom:0}.dd-card-outline h3,.dd-card-outline h4,.dd-card-outline strong{color:var(--dd-card-outline-title);letter-spacing:-.03em}.dd-card-outline h3,.dd-card-outline h4{margin:0 0 10px;font-size:20px;line-height:1.15;text-wrap:balance}.dd-card-outline small{display:inline-block;margin-bottom:10px;color:color-mix(in srgb,var(--dd-card-outline-accent) 76%,var(--dd-card-outline-text));font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;overflow-wrap:anywhere}.dd-card-outline p,.dd-card-outline span,.dd-card-outline div,.dd-card-outline a{max-width:100%;color:inherit;overflow-wrap:anywhere;word-break:break-word}.dd-card-outline a{text-decoration-color:color-mix(in srgb,var(--dd-card-outline-accent) 42%,transparent);text-underline-offset:.18em}@media(max-width:640px){.dd-card-outline{border-radius:22px}.dd-card-outline__frame{inset:10px;border-radius:14px}.dd-card-outline__surface{padding:18px;border-radius:21px}.dd-card-outline__eyebrow{width:56px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
716
|
-
}
|
|
717
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardOutline, decorators: [{
|
|
718
|
-
type: Component,
|
|
719
|
-
args: [{ selector: 'dd-card-outline', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-outline\" [ngStyle]=\"cardStyle()\">\n <span class=\"dd-card-outline__frame\" aria-hidden=\"true\"></span>\n <div class=\"dd-card-outline__surface\">\n <div class=\"dd-card-outline__eyebrow\"></div>\n <div class=\"dd-card-outline__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-outline{position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:1px;border-radius:26px;border:1px solid var(--dd-card-outline-border);background:var(--dd-card-outline-background);box-shadow:var(--dd-card-outline-shadow);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}.dd-card-outline:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--dd-card-outline-accent) 28%,transparent)}.dd-card-outline__frame{position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--dd-card-outline-accent) 18%,transparent);border-radius:18px;opacity:.9;pointer-events:none}.dd-card-outline__surface{position:relative;display:grid;gap:16px;min-width:0;padding:24px;border-radius:25px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-card-outline-panel) 98%,var(--dd-base-0)) 0%,var(--dd-card-outline-panel) 100%)}.dd-card-outline__eyebrow{width:72px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--dd-card-outline-accent) 0%,color-mix(in srgb,var(--dd-card-outline-accent) 16%,transparent) 100%);box-shadow:0 0 0 8px color-mix(in srgb,var(--dd-card-outline-accent) 8%,transparent)}.dd-card-outline__content{min-width:0;max-width:100%;color:var(--dd-card-outline-text);line-height:1.68;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.dd-card-outline__content>:first-child{margin-top:0}.dd-card-outline__content>:last-child{margin-bottom:0}.dd-card-outline h3,.dd-card-outline h4,.dd-card-outline strong{color:var(--dd-card-outline-title);letter-spacing:-.03em}.dd-card-outline h3,.dd-card-outline h4{margin:0 0 10px;font-size:20px;line-height:1.15;text-wrap:balance}.dd-card-outline small{display:inline-block;margin-bottom:10px;color:color-mix(in srgb,var(--dd-card-outline-accent) 76%,var(--dd-card-outline-text));font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;overflow-wrap:anywhere}.dd-card-outline p,.dd-card-outline span,.dd-card-outline div,.dd-card-outline a{max-width:100%;color:inherit;overflow-wrap:anywhere;word-break:break-word}.dd-card-outline a{text-decoration-color:color-mix(in srgb,var(--dd-card-outline-accent) 42%,transparent);text-underline-offset:.18em}@media(max-width:640px){.dd-card-outline{border-radius:22px}.dd-card-outline__frame{inset:10px;border-radius:14px}.dd-card-outline__surface{padding:18px;border-radius:21px}.dd-card-outline__eyebrow{width:56px}}\n"] }]
|
|
720
|
-
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
721
|
-
|
|
722
582
|
class Badge {
|
|
723
583
|
text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
724
584
|
color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
@@ -3601,11 +3461,11 @@ class DuckDevSpeakerBubbleNeobrutalSlab {
|
|
|
3601
3461
|
return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
|
|
3602
3462
|
}
|
|
3603
3463
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3604
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleNeobrutalSlab, isStandalone: true, selector: "dd-speaker-bubble-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-speaker-bubble-neo-slab\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-slab__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path\n class=\"dd-speaker-bubble-neo-slab__shape-path\"\n [attr.d]=\"shapePath()\"\n />\n </svg>\n <span class=\"dd-speaker-bubble-neo-slab__pin\" aria-hidden=\"true\"></span>\n <span class=\"dd-speaker-bubble-neo-slab__corner\" aria-hidden=\"true\"></span>\n <div class=\"dd-speaker-bubble-neo-slab__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,38rem)}.dd-speaker-bubble-neo-slab{position:relative;isolation:isolate;overflow:visible;padding:28px 22px 18px;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-slab__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-slab__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-slab__pin{position:absolute;top:-16px;left:18px;width:46px;height:18px;border:4px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-border);transform:rotate(-4deg)}.dd-speaker-bubble-neo-slab__corner{position:absolute;top:0;right:0;width:24px;height:24px;border-left:4px solid var(--dd-speaker-border);border-bottom:4px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 74%,
|
|
3464
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleNeobrutalSlab, isStandalone: true, selector: "dd-speaker-bubble-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-speaker-bubble-neo-slab\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-slab__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path\n class=\"dd-speaker-bubble-neo-slab__shape-path\"\n [attr.d]=\"shapePath()\"\n />\n </svg>\n <span class=\"dd-speaker-bubble-neo-slab__pin\" aria-hidden=\"true\"></span>\n <span class=\"dd-speaker-bubble-neo-slab__corner\" aria-hidden=\"true\"></span>\n <div class=\"dd-speaker-bubble-neo-slab__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,38rem)}.dd-speaker-bubble-neo-slab{position:relative;isolation:isolate;overflow:visible;padding:28px 22px 18px;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-slab__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-slab__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-slab__pin{position:absolute;top:-16px;left:18px;width:46px;height:18px;border:4px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-border);transform:rotate(-4deg)}.dd-speaker-bubble-neo-slab__corner{position:absolute;top:0;right:0;width:24px;height:24px;border-left:4px solid var(--dd-speaker-border);border-bottom:4px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 74%,var(--dd-base-0))}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__pin{right:18px;left:auto;transform:rotate(4deg)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__corner{right:auto;left:0;border-right:4px solid var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-slab__content{position:relative;z-index:1;font-size:15px;font-weight:800;line-height:1.55;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}.dd-speaker-bubble-neo-slab__content :first-child{margin-top:0}.dd-speaker-bubble-neo-slab__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-slab__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab__content small{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:6px 10px 5px;border:3px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 20%,var(--dd-speaker-surface));box-shadow:3px 3px 0 var(--dd-speaker-shadow);color:var(--dd-speaker-text);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-slab__content small:before{content:\"\";width:10px;height:10px;flex:0 0 auto;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__content{background:linear-gradient(225deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3605
3465
|
}
|
|
3606
3466
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalSlab, decorators: [{
|
|
3607
3467
|
type: Component,
|
|
3608
|
-
args: [{ selector: 'dd-speaker-bubble-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<div\n class=\"dd-speaker-bubble-neo-slab\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-slab__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path\n class=\"dd-speaker-bubble-neo-slab__shape-path\"\n [attr.d]=\"shapePath()\"\n />\n </svg>\n <span class=\"dd-speaker-bubble-neo-slab__pin\" aria-hidden=\"true\"></span>\n <span class=\"dd-speaker-bubble-neo-slab__corner\" aria-hidden=\"true\"></span>\n <div class=\"dd-speaker-bubble-neo-slab__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,38rem)}.dd-speaker-bubble-neo-slab{position:relative;isolation:isolate;overflow:visible;padding:28px 22px 18px;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-slab__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-slab__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-slab__pin{position:absolute;top:-16px;left:18px;width:46px;height:18px;border:4px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-border);transform:rotate(-4deg)}.dd-speaker-bubble-neo-slab__corner{position:absolute;top:0;right:0;width:24px;height:24px;border-left:4px solid var(--dd-speaker-border);border-bottom:4px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 74%,
|
|
3468
|
+
args: [{ selector: 'dd-speaker-bubble-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<div\n class=\"dd-speaker-bubble-neo-slab\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-slab__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path\n class=\"dd-speaker-bubble-neo-slab__shape-path\"\n [attr.d]=\"shapePath()\"\n />\n </svg>\n <span class=\"dd-speaker-bubble-neo-slab__pin\" aria-hidden=\"true\"></span>\n <span class=\"dd-speaker-bubble-neo-slab__corner\" aria-hidden=\"true\"></span>\n <div class=\"dd-speaker-bubble-neo-slab__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,38rem)}.dd-speaker-bubble-neo-slab{position:relative;isolation:isolate;overflow:visible;padding:28px 22px 18px;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-slab__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-slab__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-slab__pin{position:absolute;top:-16px;left:18px;width:46px;height:18px;border:4px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-border);transform:rotate(-4deg)}.dd-speaker-bubble-neo-slab__corner{position:absolute;top:0;right:0;width:24px;height:24px;border-left:4px solid var(--dd-speaker-border);border-bottom:4px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 74%,var(--dd-base-0))}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__pin{right:18px;left:auto;transform:rotate(4deg)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__corner{right:auto;left:0;border-right:4px solid var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-slab__content{position:relative;z-index:1;font-size:15px;font-weight:800;line-height:1.55;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}.dd-speaker-bubble-neo-slab__content :first-child{margin-top:0}.dd-speaker-bubble-neo-slab__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-slab__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab__content small{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:6px 10px 5px;border:3px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 20%,var(--dd-speaker-surface));box-shadow:3px 3px 0 var(--dd-speaker-shadow);color:var(--dd-speaker-text);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-slab__content small:before{content:\"\";width:10px;height:10px;flex:0 0 auto;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__content{background:linear-gradient(225deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}\n"] }]
|
|
3609
3469
|
}], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
|
|
3610
3470
|
|
|
3611
3471
|
const DEFAULT_BUBBLE_GEOMETRY = {
|
|
@@ -3824,11 +3684,11 @@ class DuckDevSpeakerBubbleNeobrutalTicket {
|
|
|
3824
3684
|
return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
|
|
3825
3685
|
}
|
|
3826
3686
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3827
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleNeobrutalTicket, isStandalone: true, selector: "dd-speaker-bubble-neobrutal-ticket", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-speaker-bubble-neo-ticket\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-ticket__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path\n class=\"dd-speaker-bubble-neo-ticket__shape-path\"\n [attr.d]=\"shapePath()\"\n />\n </svg>\n\n <div class=\"dd-speaker-bubble-neo-ticket__shell\">\n <div class=\"dd-speaker-bubble-neo-ticket__body\">\n <span class=\"dd-speaker-bubble-neo-ticket__flash\" aria-hidden=\"true\"></span>\n\n <div class=\"dd-speaker-bubble-neo-ticket__content\">\n <ng-content />\n </div>\n </div>\n\n <span class=\"dd-speaker-bubble-neo-ticket__stub\" aria-hidden=\"true\">\n <span></span>\n <span></span>\n <span></span>\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,40rem)}.dd-speaker-bubble-neo-ticket{position:relative;isolation:isolate;overflow:visible;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-ticket__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-ticket__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(10px 10px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-areas:\"body stub\";padding:4px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:58px minmax(0,1fr);grid-template-areas:\"stub body\"}.dd-speaker-bubble-neo-ticket__body{grid-area:body;position:relative;padding:22px 22px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 20%,transparent) 0 16px,transparent 16px 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-speaker-border) 8%,transparent) 14px 16px),color-mix(in srgb,var(--dd-speaker-surface-muted) 78%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after{content:\"\";position:absolute;top:18px;right:-18px;width:28px;height:28px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:var(--dd-speaker-surface)}.dd-speaker-bubble-neo-ticket__body:after{top:auto;bottom:18px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{right:auto;left:-18px}.dd-speaker-bubble-neo-ticket__flash{position:absolute;top:14px;left:18px;width:30px;height:12px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-shadow);transform:rotate(-7deg)}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__flash{left:auto;right:18px;transform:rotate(7deg)}.dd-speaker-bubble-neo-ticket__content{position:relative;z-index:1;padding-top:18px;font-size:15px;font-weight:800;line-height:1.55}.dd-speaker-bubble-neo-ticket__content :first-child{margin-top:0}.dd-speaker-bubble-neo-ticket__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-ticket__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-ticket__content small{display:inline-flex;margin-bottom:10px;padding:5px 8px 4px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);color:var(--dd-speaker-border);font-size:11px;font-weight:1000;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-ticket__stub{grid-area:stub;display:grid;align-content:center;justify-items:center;gap:10px;padding:16px 8px;border-left:4px dashed var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 70%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{border-right:4px dashed var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-ticket__stub span{width:18px;height:18px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:color-mix(in srgb,var(--dd-speaker-surface) 80%,
|
|
3687
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleNeobrutalTicket, isStandalone: true, selector: "dd-speaker-bubble-neobrutal-ticket", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-speaker-bubble-neo-ticket\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-ticket__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path\n class=\"dd-speaker-bubble-neo-ticket__shape-path\"\n [attr.d]=\"shapePath()\"\n />\n </svg>\n\n <div class=\"dd-speaker-bubble-neo-ticket__shell\">\n <div class=\"dd-speaker-bubble-neo-ticket__body\">\n <span class=\"dd-speaker-bubble-neo-ticket__flash\" aria-hidden=\"true\"></span>\n\n <div class=\"dd-speaker-bubble-neo-ticket__content\">\n <ng-content />\n </div>\n </div>\n\n <span class=\"dd-speaker-bubble-neo-ticket__stub\" aria-hidden=\"true\">\n <span></span>\n <span></span>\n <span></span>\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,40rem)}.dd-speaker-bubble-neo-ticket{position:relative;isolation:isolate;overflow:visible;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-ticket__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-ticket__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(10px 10px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-areas:\"body stub\";padding:4px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:58px minmax(0,1fr);grid-template-areas:\"stub body\"}.dd-speaker-bubble-neo-ticket__body{grid-area:body;position:relative;padding:22px 22px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 20%,transparent) 0 16px,transparent 16px 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-speaker-border) 8%,transparent) 14px 16px),color-mix(in srgb,var(--dd-speaker-surface-muted) 78%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after{content:\"\";position:absolute;top:18px;right:-18px;width:28px;height:28px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:var(--dd-speaker-surface)}.dd-speaker-bubble-neo-ticket__body:after{top:auto;bottom:18px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{right:auto;left:-18px}.dd-speaker-bubble-neo-ticket__flash{position:absolute;top:14px;left:18px;width:30px;height:12px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-shadow);transform:rotate(-7deg)}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__flash{left:auto;right:18px;transform:rotate(7deg)}.dd-speaker-bubble-neo-ticket__content{position:relative;z-index:1;padding-top:18px;font-size:15px;font-weight:800;line-height:1.55}.dd-speaker-bubble-neo-ticket__content :first-child{margin-top:0}.dd-speaker-bubble-neo-ticket__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-ticket__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-ticket__content small{display:inline-flex;margin-bottom:10px;padding:5px 8px 4px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);color:var(--dd-speaker-border);font-size:11px;font-weight:1000;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-ticket__stub{grid-area:stub;display:grid;align-content:center;justify-items:center;gap:10px;padding:16px 8px;border-left:4px dashed var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 70%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{border-right:4px dashed var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-ticket__stub span{width:18px;height:18px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:color-mix(in srgb,var(--dd-speaker-surface) 80%,var(--dd-base-0))}@media(max-width:640px){.dd-speaker-bubble-neo-ticket__shape-path{filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:1fr;grid-template-areas:\"body\" \"stub\"}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{inset:auto auto -18px 22px;width:24px;height:24px}.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{left:auto;right:22px}.dd-speaker-bubble-neo-ticket__stub,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px 14px;border-top:4px dashed var(--dd-speaker-border);border-right:0;border-left:0}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3828
3688
|
}
|
|
3829
3689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalTicket, decorators: [{
|
|
3830
3690
|
type: Component,
|
|
3831
|
-
args: [{ selector: 'dd-speaker-bubble-neobrutal-ticket', standalone: true, imports: [NgStyle], template: "<div\n class=\"dd-speaker-bubble-neo-ticket\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-ticket__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path\n class=\"dd-speaker-bubble-neo-ticket__shape-path\"\n [attr.d]=\"shapePath()\"\n />\n </svg>\n\n <div class=\"dd-speaker-bubble-neo-ticket__shell\">\n <div class=\"dd-speaker-bubble-neo-ticket__body\">\n <span class=\"dd-speaker-bubble-neo-ticket__flash\" aria-hidden=\"true\"></span>\n\n <div class=\"dd-speaker-bubble-neo-ticket__content\">\n <ng-content />\n </div>\n </div>\n\n <span class=\"dd-speaker-bubble-neo-ticket__stub\" aria-hidden=\"true\">\n <span></span>\n <span></span>\n <span></span>\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,40rem)}.dd-speaker-bubble-neo-ticket{position:relative;isolation:isolate;overflow:visible;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-ticket__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-ticket__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(10px 10px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-areas:\"body stub\";padding:4px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:58px minmax(0,1fr);grid-template-areas:\"stub body\"}.dd-speaker-bubble-neo-ticket__body{grid-area:body;position:relative;padding:22px 22px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 20%,transparent) 0 16px,transparent 16px 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-speaker-border) 8%,transparent) 14px 16px),color-mix(in srgb,var(--dd-speaker-surface-muted) 78%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after{content:\"\";position:absolute;top:18px;right:-18px;width:28px;height:28px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:var(--dd-speaker-surface)}.dd-speaker-bubble-neo-ticket__body:after{top:auto;bottom:18px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{right:auto;left:-18px}.dd-speaker-bubble-neo-ticket__flash{position:absolute;top:14px;left:18px;width:30px;height:12px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-shadow);transform:rotate(-7deg)}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__flash{left:auto;right:18px;transform:rotate(7deg)}.dd-speaker-bubble-neo-ticket__content{position:relative;z-index:1;padding-top:18px;font-size:15px;font-weight:800;line-height:1.55}.dd-speaker-bubble-neo-ticket__content :first-child{margin-top:0}.dd-speaker-bubble-neo-ticket__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-ticket__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-ticket__content small{display:inline-flex;margin-bottom:10px;padding:5px 8px 4px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);color:var(--dd-speaker-border);font-size:11px;font-weight:1000;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-ticket__stub{grid-area:stub;display:grid;align-content:center;justify-items:center;gap:10px;padding:16px 8px;border-left:4px dashed var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 70%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{border-right:4px dashed var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-ticket__stub span{width:18px;height:18px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:color-mix(in srgb,var(--dd-speaker-surface) 80%,
|
|
3691
|
+
args: [{ selector: 'dd-speaker-bubble-neobrutal-ticket', standalone: true, imports: [NgStyle], template: "<div\n class=\"dd-speaker-bubble-neo-ticket\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-ticket__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path\n class=\"dd-speaker-bubble-neo-ticket__shape-path\"\n [attr.d]=\"shapePath()\"\n />\n </svg>\n\n <div class=\"dd-speaker-bubble-neo-ticket__shell\">\n <div class=\"dd-speaker-bubble-neo-ticket__body\">\n <span class=\"dd-speaker-bubble-neo-ticket__flash\" aria-hidden=\"true\"></span>\n\n <div class=\"dd-speaker-bubble-neo-ticket__content\">\n <ng-content />\n </div>\n </div>\n\n <span class=\"dd-speaker-bubble-neo-ticket__stub\" aria-hidden=\"true\">\n <span></span>\n <span></span>\n <span></span>\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,40rem)}.dd-speaker-bubble-neo-ticket{position:relative;isolation:isolate;overflow:visible;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-ticket__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-ticket__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(10px 10px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-areas:\"body stub\";padding:4px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:58px minmax(0,1fr);grid-template-areas:\"stub body\"}.dd-speaker-bubble-neo-ticket__body{grid-area:body;position:relative;padding:22px 22px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 20%,transparent) 0 16px,transparent 16px 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-speaker-border) 8%,transparent) 14px 16px),color-mix(in srgb,var(--dd-speaker-surface-muted) 78%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after{content:\"\";position:absolute;top:18px;right:-18px;width:28px;height:28px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:var(--dd-speaker-surface)}.dd-speaker-bubble-neo-ticket__body:after{top:auto;bottom:18px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{right:auto;left:-18px}.dd-speaker-bubble-neo-ticket__flash{position:absolute;top:14px;left:18px;width:30px;height:12px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-shadow);transform:rotate(-7deg)}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__flash{left:auto;right:18px;transform:rotate(7deg)}.dd-speaker-bubble-neo-ticket__content{position:relative;z-index:1;padding-top:18px;font-size:15px;font-weight:800;line-height:1.55}.dd-speaker-bubble-neo-ticket__content :first-child{margin-top:0}.dd-speaker-bubble-neo-ticket__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-ticket__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-ticket__content small{display:inline-flex;margin-bottom:10px;padding:5px 8px 4px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);color:var(--dd-speaker-border);font-size:11px;font-weight:1000;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-ticket__stub{grid-area:stub;display:grid;align-content:center;justify-items:center;gap:10px;padding:16px 8px;border-left:4px dashed var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 70%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{border-right:4px dashed var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-ticket__stub span{width:18px;height:18px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:color-mix(in srgb,var(--dd-speaker-surface) 80%,var(--dd-base-0))}@media(max-width:640px){.dd-speaker-bubble-neo-ticket__shape-path{filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:1fr;grid-template-areas:\"body\" \"stub\"}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{inset:auto auto -18px 22px;width:24px;height:24px}.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{left:auto;right:22px}.dd-speaker-bubble-neo-ticket__stub,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px 14px;border-top:4px dashed var(--dd-speaker-border);border-right:0;border-left:0}}\n"] }]
|
|
3832
3692
|
}], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
|
|
3833
3693
|
|
|
3834
3694
|
class ButtonNeobrutalBlock {
|
|
@@ -3881,8 +3741,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3881
3741
|
ButtonFlip,
|
|
3882
3742
|
ButtonCasper,
|
|
3883
3743
|
DuckDevCardSection,
|
|
3884
|
-
DuckDevCardMinimal,
|
|
3885
|
-
DuckDevCardOutline,
|
|
3886
3744
|
Badge,
|
|
3887
3745
|
DuckDevAccordionComponent,
|
|
3888
3746
|
DuckDevSpeakerBubbleSoft,
|
|
@@ -3918,6 +3776,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3918
3776
|
], template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-classic /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-loading-bubble /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code><lib-loader-three-dots /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-neobrutal-stamp />\n<duck-dev-loader-neobrutal-bars />\n<duck-dev-loader-neobrutal-marquee /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-three-dots,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-stamp,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-bars,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-marquee{display:flex;justify-content:center;align-items:center}.demo-container .component-section .examples-block .example-row .example-item.example-item-neobrutal{background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 35%,var(--dd-base-0) 35% 100%);border-width:3px;border-color:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
3919
3777
|
}] });
|
|
3920
3778
|
|
|
3779
|
+
class DuckDevCardMinimal {
|
|
3780
|
+
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
3781
|
+
cardStyle = computed(() => {
|
|
3782
|
+
const color = this.color();
|
|
3783
|
+
let accent = 'var(--dd-base-300)';
|
|
3784
|
+
let background = 'linear-gradient(180deg, var(--dd-base-0) 0%, var(--dd-base-100) 100%)';
|
|
3785
|
+
let panel = 'color-mix(in srgb, var(--dd-base-0) 88%, var(--dd-base-100))';
|
|
3786
|
+
let title = 'var(--dd-base-600)';
|
|
3787
|
+
let text = 'var(--dd-base-400)';
|
|
3788
|
+
let border = 'color-mix(in srgb, var(--dd-base-300) 72%, transparent)';
|
|
3789
|
+
let shadow = '0 28px 60px -42px color-mix(in srgb, var(--dd-base-600) 28%, transparent)';
|
|
3790
|
+
let glow = 'color-mix(in srgb, var(--dd-base-300) 40%, transparent)';
|
|
3791
|
+
switch (color) {
|
|
3792
|
+
case AccentEnumColor.Violet:
|
|
3793
|
+
accent = 'var(--dd-base-secondary)';
|
|
3794
|
+
background =
|
|
3795
|
+
'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-secondary) 8%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
|
|
3796
|
+
panel = 'color-mix(in srgb, var(--dd-base-secondary) 4%, var(--dd-base-0))';
|
|
3797
|
+
border = 'color-mix(in srgb, var(--dd-base-secondary) 18%, transparent)';
|
|
3798
|
+
glow = 'color-mix(in srgb, var(--dd-base-secondary) 30%, transparent)';
|
|
3799
|
+
shadow = '0 30px 65px -42px color-mix(in srgb, var(--dd-base-secondary) 32%, transparent)';
|
|
3800
|
+
break;
|
|
3801
|
+
case AccentEnumColor.Orange:
|
|
3802
|
+
accent = 'var(--dd-base-accent-orange)';
|
|
3803
|
+
background =
|
|
3804
|
+
'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-accent-orange) 10%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
|
|
3805
|
+
panel = 'color-mix(in srgb, var(--dd-base-accent-orange) 5%, var(--dd-base-0))';
|
|
3806
|
+
border = 'color-mix(in srgb, var(--dd-base-accent-orange) 18%, transparent)';
|
|
3807
|
+
glow = 'color-mix(in srgb, var(--dd-base-accent-orange) 32%, transparent)';
|
|
3808
|
+
shadow =
|
|
3809
|
+
'0 30px 65px -42px color-mix(in srgb, var(--dd-base-accent-orange) 34%, transparent)';
|
|
3810
|
+
break;
|
|
3811
|
+
case AccentEnumColor.Gray:
|
|
3812
|
+
accent = 'var(--dd-base-500)';
|
|
3813
|
+
background = 'linear-gradient(180deg, var(--dd-base-100) 0%, var(--dd-base-0) 100%)';
|
|
3814
|
+
panel = 'color-mix(in srgb, var(--dd-base-100) 82%, var(--dd-base-0))';
|
|
3815
|
+
border = 'color-mix(in srgb, var(--dd-base-400) 24%, transparent)';
|
|
3816
|
+
glow = 'color-mix(in srgb, var(--dd-base-400) 22%, transparent)';
|
|
3817
|
+
break;
|
|
3818
|
+
case AccentEnumColor.Dark:
|
|
3819
|
+
accent = 'var(--dd-base-0)';
|
|
3820
|
+
background =
|
|
3821
|
+
'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-600) 94%, black) 0%, var(--dd-base-600) 100%)';
|
|
3822
|
+
panel = 'color-mix(in srgb, var(--dd-base-500) 92%, black)';
|
|
3823
|
+
title = 'var(--dd-base-0)';
|
|
3824
|
+
text = 'var(--dd-base-200)';
|
|
3825
|
+
border = 'color-mix(in srgb, var(--dd-base-200) 14%, transparent)';
|
|
3826
|
+
glow = 'color-mix(in srgb, var(--dd-base-0) 16%, transparent)';
|
|
3827
|
+
shadow = '0 34px 80px -46px color-mix(in srgb, black 56%, transparent)';
|
|
3828
|
+
break;
|
|
3829
|
+
case AccentEnumColor.White:
|
|
3830
|
+
break;
|
|
3831
|
+
}
|
|
3832
|
+
return {
|
|
3833
|
+
'--dd-card-minimal-accent': accent,
|
|
3834
|
+
'--dd-card-minimal-background': background,
|
|
3835
|
+
'--dd-card-minimal-panel': panel,
|
|
3836
|
+
'--dd-card-minimal-title': title,
|
|
3837
|
+
'--dd-card-minimal-text': text,
|
|
3838
|
+
'--dd-card-minimal-border': border,
|
|
3839
|
+
'--dd-card-minimal-shadow': shadow,
|
|
3840
|
+
'--dd-card-minimal-glow': glow,
|
|
3841
|
+
};
|
|
3842
|
+
}, { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
|
|
3843
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardMinimal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3844
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardMinimal, isStandalone: true, selector: "dd-card-minimal", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-minimal\" [ngStyle]=\"cardStyle()\">\n <span class=\"dd-card-minimal__halo\" aria-hidden=\"true\"></span>\n <span class=\"dd-card-minimal__corner\" aria-hidden=\"true\"></span>\n\n <div class=\"dd-card-minimal__panel\">\n <div class=\"dd-card-minimal__rail\" aria-hidden=\"true\">\n <span class=\"dd-card-minimal__dot\"></span>\n <span class=\"dd-card-minimal__line\"></span>\n </div>\n\n <div class=\"dd-card-minimal__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-minimal{position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:1px;border:1px solid var(--dd-card-minimal-border);border-radius:24px;background:var(--dd-card-minimal-background);box-shadow:var(--dd-card-minimal-shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.dd-card-minimal:hover{transform:translateY(-4px);box-shadow:var(--dd-card-minimal-shadow),0 0 0 1px color-mix(in srgb,var(--dd-card-minimal-accent) 12%,transparent);border-color:color-mix(in srgb,var(--dd-card-minimal-accent) 28%,transparent)}.dd-card-minimal__halo,.dd-card-minimal__corner{position:absolute;pointer-events:none}.dd-card-minimal__halo{top:-72px;right:-52px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--dd-card-minimal-glow) 0%,transparent 72%);opacity:.9;z-index:0}.dd-card-minimal__corner{top:16px;right:16px;width:42px;height:42px;border-top:1px solid color-mix(in srgb,var(--dd-card-minimal-accent) 38%,transparent);border-right:1px solid color-mix(in srgb,var(--dd-card-minimal-accent) 38%,transparent);border-radius:0 16px 0 0;opacity:.9;z-index:2}.dd-card-minimal__panel{position:relative;z-index:1;display:grid;grid-template-columns:26px minmax(0,1fr);gap:18px;min-height:100%;padding:22px 22px 22px 20px;border-radius:23px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-card-minimal-panel) 96%,var(--dd-base-0)) 0%,var(--dd-card-minimal-panel) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dd-card-minimal__rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:2px}.dd-card-minimal__dot{width:8px;height:8px;border-radius:50%;background:var(--dd-card-minimal-accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--dd-card-minimal-accent) 12%,transparent)}.dd-card-minimal__line{width:1px;flex:1;min-height:76px;border-radius:999px;background:linear-gradient(180deg,var(--dd-card-minimal-accent) 0%,color-mix(in srgb,var(--dd-card-minimal-accent) 16%,transparent) 100%)}.dd-card-minimal__content{min-width:0;max-width:100%;color:var(--dd-card-minimal-text);line-height:1.65;padding-right:28px;letter-spacing:-.01em;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.dd-card-minimal__content>:first-child{margin-top:0}.dd-card-minimal__content>:last-child{margin-bottom:0}.dd-card-minimal strong,.dd-card-minimal h3,.dd-card-minimal h4{display:inline-block;color:var(--dd-card-minimal-title);font-weight:600;letter-spacing:-.03em}.dd-card-minimal h3,.dd-card-minimal h4{margin:0 0 8px;font-size:18px;line-height:1.2}.dd-card-minimal p{margin:0}.dd-card-minimal small{display:inline-block;margin-bottom:10px;color:color-mix(in srgb,var(--dd-card-minimal-accent) 72%,var(--dd-card-minimal-text));font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.dd-card-minimal a{color:var(--dd-card-minimal-title);text-decoration-color:color-mix(in srgb,var(--dd-card-minimal-accent) 40%,transparent);text-underline-offset:.18em}.dd-card-minimal p,.dd-card-minimal small,.dd-card-minimal a,.dd-card-minimal span,.dd-card-minimal div{max-width:100%;color:inherit;overflow-wrap:anywhere;word-break:break-word}@media(max-width:640px){.dd-card-minimal{border-radius:20px}.dd-card-minimal__panel{grid-template-columns:18px minmax(0,1fr);gap:14px;padding:18px 16px;border-radius:19px}.dd-card-minimal__content{padding-right:10px}.dd-card-minimal__corner{top:12px;right:12px;width:30px;height:30px;border-radius:0 12px 0 0}.dd-card-minimal__halo{top:-82px;right:-84px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3845
|
+
}
|
|
3846
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardMinimal, decorators: [{
|
|
3847
|
+
type: Component,
|
|
3848
|
+
args: [{ selector: 'dd-card-minimal', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-minimal\" [ngStyle]=\"cardStyle()\">\n <span class=\"dd-card-minimal__halo\" aria-hidden=\"true\"></span>\n <span class=\"dd-card-minimal__corner\" aria-hidden=\"true\"></span>\n\n <div class=\"dd-card-minimal__panel\">\n <div class=\"dd-card-minimal__rail\" aria-hidden=\"true\">\n <span class=\"dd-card-minimal__dot\"></span>\n <span class=\"dd-card-minimal__line\"></span>\n </div>\n\n <div class=\"dd-card-minimal__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-minimal{position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:1px;border:1px solid var(--dd-card-minimal-border);border-radius:24px;background:var(--dd-card-minimal-background);box-shadow:var(--dd-card-minimal-shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.dd-card-minimal:hover{transform:translateY(-4px);box-shadow:var(--dd-card-minimal-shadow),0 0 0 1px color-mix(in srgb,var(--dd-card-minimal-accent) 12%,transparent);border-color:color-mix(in srgb,var(--dd-card-minimal-accent) 28%,transparent)}.dd-card-minimal__halo,.dd-card-minimal__corner{position:absolute;pointer-events:none}.dd-card-minimal__halo{top:-72px;right:-52px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--dd-card-minimal-glow) 0%,transparent 72%);opacity:.9;z-index:0}.dd-card-minimal__corner{top:16px;right:16px;width:42px;height:42px;border-top:1px solid color-mix(in srgb,var(--dd-card-minimal-accent) 38%,transparent);border-right:1px solid color-mix(in srgb,var(--dd-card-minimal-accent) 38%,transparent);border-radius:0 16px 0 0;opacity:.9;z-index:2}.dd-card-minimal__panel{position:relative;z-index:1;display:grid;grid-template-columns:26px minmax(0,1fr);gap:18px;min-height:100%;padding:22px 22px 22px 20px;border-radius:23px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-card-minimal-panel) 96%,var(--dd-base-0)) 0%,var(--dd-card-minimal-panel) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dd-card-minimal__rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:2px}.dd-card-minimal__dot{width:8px;height:8px;border-radius:50%;background:var(--dd-card-minimal-accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--dd-card-minimal-accent) 12%,transparent)}.dd-card-minimal__line{width:1px;flex:1;min-height:76px;border-radius:999px;background:linear-gradient(180deg,var(--dd-card-minimal-accent) 0%,color-mix(in srgb,var(--dd-card-minimal-accent) 16%,transparent) 100%)}.dd-card-minimal__content{min-width:0;max-width:100%;color:var(--dd-card-minimal-text);line-height:1.65;padding-right:28px;letter-spacing:-.01em;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.dd-card-minimal__content>:first-child{margin-top:0}.dd-card-minimal__content>:last-child{margin-bottom:0}.dd-card-minimal strong,.dd-card-minimal h3,.dd-card-minimal h4{display:inline-block;color:var(--dd-card-minimal-title);font-weight:600;letter-spacing:-.03em}.dd-card-minimal h3,.dd-card-minimal h4{margin:0 0 8px;font-size:18px;line-height:1.2}.dd-card-minimal p{margin:0}.dd-card-minimal small{display:inline-block;margin-bottom:10px;color:color-mix(in srgb,var(--dd-card-minimal-accent) 72%,var(--dd-card-minimal-text));font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.dd-card-minimal a{color:var(--dd-card-minimal-title);text-decoration-color:color-mix(in srgb,var(--dd-card-minimal-accent) 40%,transparent);text-underline-offset:.18em}.dd-card-minimal p,.dd-card-minimal small,.dd-card-minimal a,.dd-card-minimal span,.dd-card-minimal div{max-width:100%;color:inherit;overflow-wrap:anywhere;word-break:break-word}@media(max-width:640px){.dd-card-minimal{border-radius:20px}.dd-card-minimal__panel{grid-template-columns:18px minmax(0,1fr);gap:14px;padding:18px 16px;border-radius:19px}.dd-card-minimal__content{padding-right:10px}.dd-card-minimal__corner{top:12px;right:12px;width:30px;height:30px;border-radius:0 12px 0 0}.dd-card-minimal__halo{top:-82px;right:-84px}}\n"] }]
|
|
3849
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
3850
|
+
|
|
3921
3851
|
class TabsBlock {
|
|
3922
3852
|
t = inject(TranslocoService);
|
|
3923
3853
|
colorViolet = AccentEnumColor.Violet;
|
|
@@ -4020,11 +3950,11 @@ class DuckDevInputNeobrutalRadio {
|
|
|
4020
3950
|
options = input.required({ ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
4021
3951
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
4022
3952
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4023
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalRadio, isStandalone: true, selector: "duck-dev-input-neobrutal-radio", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n <div class=\"neo-radio__copy\">\n <label class=\"neo-radio__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n }\n </div>\n\n <div\n class=\"neo-radio__group\"\n [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n role=\"radiogroup\"\n [attr.aria-describedby]=\"describedBy\"\n >\n @for (option of options(); track option.value; let index = $index) {\n <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n <input\n class=\"neo-radio__input\"\n type=\"radio\"\n [id]=\"control + '-' + index\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n formControlName=\"{{ control }}\"\n />\n <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n <span class=\"neo-radio__text\">{{ option.label }}</span>\n </label>\n }\n </div>\n\n @if (erMessage) {\n <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-0)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,
|
|
3953
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalRadio, isStandalone: true, selector: "duck-dev-input-neobrutal-radio", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n <div class=\"neo-radio__copy\">\n <label class=\"neo-radio__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n }\n </div>\n\n <div\n class=\"neo-radio__group\"\n [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n role=\"radiogroup\"\n [attr.aria-describedby]=\"describedBy\"\n >\n @for (option of options(); track option.value; let index = $index) {\n <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n <input\n class=\"neo-radio__input\"\n type=\"radio\"\n [id]=\"control + '-' + index\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n formControlName=\"{{ control }}\"\n />\n <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n <span class=\"neo-radio__text\">{{ option.label }}</span>\n </label>\n }\n </div>\n\n @if (erMessage) {\n <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-0)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,var(--dd-base-0));box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-radio__option:hover,.neo-radio__option:has(.neo-radio__input:focus-visible){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-radio__group_error .neo-radio__option{border-color:var(--dd-base-accent-orange)}.neo-radio__option_disabled{opacity:.55;cursor:not-allowed}.neo-radio__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
4024
3954
|
}
|
|
4025
3955
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalRadio, decorators: [{
|
|
4026
3956
|
type: Component,
|
|
4027
|
-
args: [{ selector: 'duck-dev-input-neobrutal-radio', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n <div class=\"neo-radio__copy\">\n <label class=\"neo-radio__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n }\n </div>\n\n <div\n class=\"neo-radio__group\"\n [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n role=\"radiogroup\"\n [attr.aria-describedby]=\"describedBy\"\n >\n @for (option of options(); track option.value; let index = $index) {\n <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n <input\n class=\"neo-radio__input\"\n type=\"radio\"\n [id]=\"control + '-' + index\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n formControlName=\"{{ control }}\"\n />\n <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n <span class=\"neo-radio__text\">{{ option.label }}</span>\n </label>\n }\n </div>\n\n @if (erMessage) {\n <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-0)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,
|
|
3957
|
+
args: [{ selector: 'duck-dev-input-neobrutal-radio', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n <div class=\"neo-radio__copy\">\n <label class=\"neo-radio__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n }\n </div>\n\n <div\n class=\"neo-radio__group\"\n [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n role=\"radiogroup\"\n [attr.aria-describedby]=\"describedBy\"\n >\n @for (option of options(); track option.value; let index = $index) {\n <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n <input\n class=\"neo-radio__input\"\n type=\"radio\"\n [id]=\"control + '-' + index\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n formControlName=\"{{ control }}\"\n />\n <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n <span class=\"neo-radio__text\">{{ option.label }}</span>\n </label>\n }\n </div>\n\n @if (erMessage) {\n <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-0)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,var(--dd-base-0));box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-radio__option:hover,.neo-radio__option:has(.neo-radio__input:focus-visible){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-radio__group_error .neo-radio__option{border-color:var(--dd-base-accent-orange)}.neo-radio__option_disabled{opacity:.55;cursor:not-allowed}.neo-radio__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}\n"] }]
|
|
4028
3958
|
}], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
|
|
4029
3959
|
|
|
4030
3960
|
class DuckDevInputNeobrutalSlab {
|
|
@@ -4626,6 +4556,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
4626
4556
|
args: [{ selector: 'dd-card-neobrutal-ticket', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-ticket\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-ticket__body\">\n <div class=\"dd-card-neo-ticket__flash\" aria-hidden=\"true\">{{ flashLabel() }}</div>\n <div class=\"dd-card-neo-ticket__content\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"dd-card-neo-ticket__stub\" aria-hidden=\"true\">\n <span>{{ stubTop() }}</span>\n <span>{{ stubMiddle() }}</span>\n <span>{{ stubBottom() }}</span>\n </div>\n</article>\n", styles: [".dd-card-neo-ticket{display:grid;grid-template-columns:minmax(0,1fr) 92px;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-ticket__body{position:relative;padding:24px 26px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 22%,transparent) 0 18%,transparent 18% 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-neo-card-border) 8%,transparent) 14px 16px),var(--dd-neo-card-panel)}.dd-card-neo-ticket__body:before,.dd-card-neo-ticket__body:after{content:\"\";position:absolute;right:-16px;width:28px;height:28px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface)}.dd-card-neo-ticket__body:before{top:18px}.dd-card-neo-ticket__body:after{bottom:18px}.dd-card-neo-ticket__flash{position:absolute;top:16px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 10px 5px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-6deg)}.dd-card-neo-ticket__content{padding-top:34px;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-ticket__content :first-child{margin-top:0}.dd-card-neo-ticket__content :last-child{margin-bottom:0}.dd-card-neo-ticket__stub{display:grid;align-content:center;justify-items:center;gap:10px;padding:18px 10px;border-left:4px dashed var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-ticket__stub span{font-size:12px;font-weight:1000;letter-spacing:.18em;line-height:1;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}@media(max-width:640px){.dd-card-neo-ticket{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-ticket__body{padding:22px 22px 20px}.dd-card-neo-ticket__body:before,.dd-card-neo-ticket__body:after{right:auto;left:24px;width:24px;height:24px}.dd-card-neo-ticket__body:before{top:auto;bottom:-16px}.dd-card-neo-ticket__body:after{left:auto;right:24px;bottom:-16px}.dd-card-neo-ticket__stub{grid-template-columns:repeat(3,1fr);align-items:center;gap:0;padding:14px 12px;border-left:0;border-top:4px dashed var(--dd-neo-card-border)}.dd-card-neo-ticket__stub span{writing-mode:horizontal-tb;transform:none;text-align:center}}\n"] }]
|
|
4627
4557
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], flashLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "flashLabel", required: true }] }], stubTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "stubTop", required: true }] }], stubMiddle: [{ type: i0.Input, args: [{ isSignal: true, alias: "stubMiddle", required: true }] }], stubBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "stubBottom", required: true }] }] } });
|
|
4628
4558
|
|
|
4559
|
+
class DuckDevCardOutline {
|
|
4560
|
+
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
4561
|
+
cardStyle = computed(() => {
|
|
4562
|
+
const color = this.color();
|
|
4563
|
+
let accent = 'var(--dd-base-accent-blue)';
|
|
4564
|
+
let border = 'color-mix(in srgb, var(--dd-base-300) 78%, transparent)';
|
|
4565
|
+
let background = 'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-0) 96%, var(--dd-base-100)) 0%, var(--dd-base-0) 100%)';
|
|
4566
|
+
let panel = 'color-mix(in srgb, var(--dd-base-0) 94%, var(--dd-base-100))';
|
|
4567
|
+
let text = 'var(--dd-base-400)';
|
|
4568
|
+
let title = 'var(--dd-base-600)';
|
|
4569
|
+
let shadow = '0 28px 56px -42px color-mix(in srgb, var(--dd-base-600) 22%, transparent)';
|
|
4570
|
+
switch (color) {
|
|
4571
|
+
case AccentEnumColor.Violet:
|
|
4572
|
+
accent = 'var(--dd-base-secondary)';
|
|
4573
|
+
border = 'color-mix(in srgb, var(--dd-base-secondary) 22%, transparent)';
|
|
4574
|
+
background =
|
|
4575
|
+
'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-secondary) 8%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
|
|
4576
|
+
panel = 'color-mix(in srgb, var(--dd-base-secondary) 4%, var(--dd-base-0))';
|
|
4577
|
+
shadow = '0 28px 56px -42px color-mix(in srgb, var(--dd-base-secondary) 26%, transparent)';
|
|
4578
|
+
break;
|
|
4579
|
+
case AccentEnumColor.Orange:
|
|
4580
|
+
accent = 'var(--dd-base-accent-orange)';
|
|
4581
|
+
border = 'color-mix(in srgb, var(--dd-base-accent-orange) 22%, transparent)';
|
|
4582
|
+
background =
|
|
4583
|
+
'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-accent-orange) 10%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
|
|
4584
|
+
panel = 'color-mix(in srgb, var(--dd-base-accent-orange) 5%, var(--dd-base-0))';
|
|
4585
|
+
shadow =
|
|
4586
|
+
'0 28px 56px -42px color-mix(in srgb, var(--dd-base-accent-orange) 28%, transparent)';
|
|
4587
|
+
break;
|
|
4588
|
+
case AccentEnumColor.Gray:
|
|
4589
|
+
accent = 'var(--dd-base-500)';
|
|
4590
|
+
border = 'color-mix(in srgb, var(--dd-base-400) 28%, transparent)';
|
|
4591
|
+
background =
|
|
4592
|
+
'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-100) 88%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
|
|
4593
|
+
panel = 'color-mix(in srgb, var(--dd-base-100) 84%, var(--dd-base-0))';
|
|
4594
|
+
break;
|
|
4595
|
+
case AccentEnumColor.Dark:
|
|
4596
|
+
accent = 'var(--dd-base-0)';
|
|
4597
|
+
border = 'color-mix(in srgb, var(--dd-base-200) 18%, transparent)';
|
|
4598
|
+
background =
|
|
4599
|
+
'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-600) 94%, black) 0%, var(--dd-base-600) 100%)';
|
|
4600
|
+
panel = 'color-mix(in srgb, var(--dd-base-500) 90%, black)';
|
|
4601
|
+
text = 'var(--dd-base-200)';
|
|
4602
|
+
title = 'var(--dd-base-0)';
|
|
4603
|
+
shadow = '0 32px 72px -46px color-mix(in srgb, black 52%, transparent)';
|
|
4604
|
+
break;
|
|
4605
|
+
case AccentEnumColor.White:
|
|
4606
|
+
accent = 'var(--dd-base-accent-blue)';
|
|
4607
|
+
break;
|
|
4608
|
+
}
|
|
4609
|
+
return {
|
|
4610
|
+
'--dd-card-outline-accent': accent,
|
|
4611
|
+
'--dd-card-outline-border': border,
|
|
4612
|
+
'--dd-card-outline-background': background,
|
|
4613
|
+
'--dd-card-outline-panel': panel,
|
|
4614
|
+
'--dd-card-outline-text': text,
|
|
4615
|
+
'--dd-card-outline-title': title,
|
|
4616
|
+
'--dd-card-outline-shadow': shadow,
|
|
4617
|
+
};
|
|
4618
|
+
}, { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
|
|
4619
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardOutline, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4620
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardOutline, isStandalone: true, selector: "dd-card-outline", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-outline\" [ngStyle]=\"cardStyle()\">\n <span class=\"dd-card-outline__frame\" aria-hidden=\"true\"></span>\n <div class=\"dd-card-outline__surface\">\n <div class=\"dd-card-outline__eyebrow\"></div>\n <div class=\"dd-card-outline__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-outline{position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:1px;border-radius:26px;border:1px solid var(--dd-card-outline-border);background:var(--dd-card-outline-background);box-shadow:var(--dd-card-outline-shadow);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}.dd-card-outline:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--dd-card-outline-accent) 28%,transparent)}.dd-card-outline__frame{position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--dd-card-outline-accent) 18%,transparent);border-radius:18px;opacity:.9;pointer-events:none}.dd-card-outline__surface{position:relative;display:grid;gap:16px;min-width:0;padding:24px;border-radius:25px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-card-outline-panel) 98%,var(--dd-base-0)) 0%,var(--dd-card-outline-panel) 100%)}.dd-card-outline__eyebrow{width:72px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--dd-card-outline-accent) 0%,color-mix(in srgb,var(--dd-card-outline-accent) 16%,transparent) 100%);box-shadow:0 0 0 8px color-mix(in srgb,var(--dd-card-outline-accent) 8%,transparent)}.dd-card-outline__content{min-width:0;max-width:100%;color:var(--dd-card-outline-text);line-height:1.68;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.dd-card-outline__content>:first-child{margin-top:0}.dd-card-outline__content>:last-child{margin-bottom:0}.dd-card-outline h3,.dd-card-outline h4,.dd-card-outline strong{color:var(--dd-card-outline-title);letter-spacing:-.03em}.dd-card-outline h3,.dd-card-outline h4{margin:0 0 10px;font-size:20px;line-height:1.15;text-wrap:balance}.dd-card-outline small{display:inline-block;margin-bottom:10px;color:color-mix(in srgb,var(--dd-card-outline-accent) 76%,var(--dd-card-outline-text));font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;overflow-wrap:anywhere}.dd-card-outline p,.dd-card-outline span,.dd-card-outline div,.dd-card-outline a{max-width:100%;color:inherit;overflow-wrap:anywhere;word-break:break-word}.dd-card-outline a{text-decoration-color:color-mix(in srgb,var(--dd-card-outline-accent) 42%,transparent);text-underline-offset:.18em}@media(max-width:640px){.dd-card-outline{border-radius:22px}.dd-card-outline__frame{inset:10px;border-radius:14px}.dd-card-outline__surface{padding:18px;border-radius:21px}.dd-card-outline__eyebrow{width:56px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
4621
|
+
}
|
|
4622
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardOutline, decorators: [{
|
|
4623
|
+
type: Component,
|
|
4624
|
+
args: [{ selector: 'dd-card-outline', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-outline\" [ngStyle]=\"cardStyle()\">\n <span class=\"dd-card-outline__frame\" aria-hidden=\"true\"></span>\n <div class=\"dd-card-outline__surface\">\n <div class=\"dd-card-outline__eyebrow\"></div>\n <div class=\"dd-card-outline__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-outline{position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:1px;border-radius:26px;border:1px solid var(--dd-card-outline-border);background:var(--dd-card-outline-background);box-shadow:var(--dd-card-outline-shadow);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}.dd-card-outline:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--dd-card-outline-accent) 28%,transparent)}.dd-card-outline__frame{position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--dd-card-outline-accent) 18%,transparent);border-radius:18px;opacity:.9;pointer-events:none}.dd-card-outline__surface{position:relative;display:grid;gap:16px;min-width:0;padding:24px;border-radius:25px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-card-outline-panel) 98%,var(--dd-base-0)) 0%,var(--dd-card-outline-panel) 100%)}.dd-card-outline__eyebrow{width:72px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--dd-card-outline-accent) 0%,color-mix(in srgb,var(--dd-card-outline-accent) 16%,transparent) 100%);box-shadow:0 0 0 8px color-mix(in srgb,var(--dd-card-outline-accent) 8%,transparent)}.dd-card-outline__content{min-width:0;max-width:100%;color:var(--dd-card-outline-text);line-height:1.68;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.dd-card-outline__content>:first-child{margin-top:0}.dd-card-outline__content>:last-child{margin-bottom:0}.dd-card-outline h3,.dd-card-outline h4,.dd-card-outline strong{color:var(--dd-card-outline-title);letter-spacing:-.03em}.dd-card-outline h3,.dd-card-outline h4{margin:0 0 10px;font-size:20px;line-height:1.15;text-wrap:balance}.dd-card-outline small{display:inline-block;margin-bottom:10px;color:color-mix(in srgb,var(--dd-card-outline-accent) 76%,var(--dd-card-outline-text));font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;overflow-wrap:anywhere}.dd-card-outline p,.dd-card-outline span,.dd-card-outline div,.dd-card-outline a{max-width:100%;color:inherit;overflow-wrap:anywhere;word-break:break-word}.dd-card-outline a{text-decoration-color:color-mix(in srgb,var(--dd-card-outline-accent) 42%,transparent);text-underline-offset:.18em}@media(max-width:640px){.dd-card-outline{border-radius:22px}.dd-card-outline__frame{inset:10px;border-radius:14px}.dd-card-outline__surface{padding:18px;border-radius:21px}.dd-card-outline__eyebrow{width:56px}}\n"] }]
|
|
4625
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
4626
|
+
|
|
4629
4627
|
class DuckDevCardSignal {
|
|
4630
4628
|
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
4631
4629
|
cardStyle = computed(() => {
|
|
@@ -5089,6 +5087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5089
5087
|
class DuckDevAccordionNeobrutalComponent {
|
|
5090
5088
|
content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
|
|
5091
5089
|
title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
|
|
5090
|
+
stampLabel = input.required({ ...(ngDevMode ? { debugName: "stampLabel" } : {}) });
|
|
5092
5091
|
color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5093
5092
|
isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
|
|
5094
5093
|
stateLabel = computed(() => (this.isOpen() ? 'OPEN' : 'CLOSED'), { ...(ngDevMode ? { debugName: "stateLabel" } : {}) });
|
|
@@ -5096,12 +5095,12 @@ class DuckDevAccordionNeobrutalComponent {
|
|
|
5096
5095
|
this.isOpen.update((prev) => !prev);
|
|
5097
5096
|
}
|
|
5098
5097
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5099
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevAccordionNeobrutalComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-brutal__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"title()\"\n (click)=\"toggle()\"\n >\n <span class=\"dd-accordion-brutal__stamp\">
|
|
5098
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevAccordionNeobrutalComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, stampLabel: { classPropertyName: "stampLabel", publicName: "stampLabel", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-brutal__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"title()\"\n (click)=\"toggle()\"\n >\n <span class=\"dd-accordion-brutal__stamp\">{{ stampLabel() }}</span>\n\n <span class=\"dd-accordion-brutal__headline\">\n <span class=\"dd-accordion-brutal__title\">{{ title() }}</span>\n <span class=\"dd-accordion-brutal__state\">{{ stateLabel() }}</span>\n </span>\n\n <span class=\"dd-accordion-brutal__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </button>\n\n <div class=\"dd-accordion-brutal__body-shell\" [class.is-open]=\"isOpen()\" [attr.aria-hidden]=\"!isOpen()\">\n <div class=\"dd-accordion-brutal__body-frame\">\n <div class=\"dd-accordion-brutal__body-content\">\n <ng-container [ngTemplateOutlet]=\"content()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [".dd-accordion-brutal{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-blue);--dd-accordion-brutal-border: var(--dd-base-600);--dd-accordion-brutal-text: var(--dd-base-600);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-accordion-brutal-border);display:block;background:var(--dd-accordion-brutal-bg);border:4px solid var(--dd-accordion-brutal-border);box-shadow:var(--dd-accordion-brutal-shadow);overflow:clip;color:var(--dd-accordion-brutal-text)}.dd-accordion-brutal[data-color=violet]{--dd-accordion-brutal-bg: color-mix(in srgb, var(--dd-base-accent-blue) 16%, var(--dd-base-0));--dd-accordion-brutal-panel: color-mix( in srgb, var(--dd-base-accent-blue) 10%, var(--dd-base-0) );--dd-accordion-brutal-accent: var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=orange]{--dd-accordion-brutal-bg: color-mix( in srgb, var(--dd-base-accent-orange) 18%, var(--dd-base-0) );--dd-accordion-brutal-panel: color-mix( in srgb, var(--dd-base-accent-yellow) 22%, var(--dd-base-0) );--dd-accordion-brutal-accent: var(--dd-base-accent-orange)}.dd-accordion-brutal[data-color=gray]{--dd-accordion-brutal-bg: var(--dd-base-100);--dd-accordion-brutal-panel: var(--dd-base-0);--dd-accordion-brutal-accent: var(--dd-base-400)}.dd-accordion-brutal[data-color=dark]{--dd-accordion-brutal-bg: var(--dd-base-600);--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-border: var(--dd-base-0);--dd-accordion-brutal-text: var(--dd-base-0)}.dd-accordion-brutal[data-color=white]{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-orange)}.dd-accordion-brutal__header{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-accordion-brutal-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-accordion-brutal-bg);color:inherit;border:0;cursor:pointer;text-align:left;transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:after{content:\"\";position:absolute;inset:auto 0 0;height:4px;background:var(--dd-accordion-brutal-border);transform-origin:left center;transform:scaleX(.92);transition:transform .32s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:hover{transform:translate(-2px,-2px)}.dd-accordion-brutal.is-open .dd-accordion-brutal__header:after{transform:scaleX(1)}.dd-accordion-brutal__stamp{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:7px 10px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-accordion-brutal-border);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-accordion-brutal-border);transform:rotate(-4deg)}.dd-accordion-brutal[data-color=dark] .dd-accordion-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-accordion-brutal__headline{display:grid;gap:8px;min-width:0}.dd-accordion-brutal__title{font-size:18px;line-height:1.15;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}.dd-accordion-brutal__state{display:inline-flex;width:fit-content;padding:3px 8px;border:2px solid var(--dd-accordion-brutal-border);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 14%,var(--dd-base-0));font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.dd-accordion-brutal__action{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-accordion-brutal-border);transform:rotate(-8deg);transition:transform .42s cubic-bezier(.22,1.2,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__action.is-open{transform:rotate(90deg) scale(1.05);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 20%,var(--dd-base-0));box-shadow:2px 2px 0 var(--dd-accordion-brutal-border)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-accordion-brutal-panel);transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1),background-color .22s ease}.dd-accordion-brutal__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-brutal__body-frame{min-height:0;overflow:hidden;border-top:4px solid var(--dd-accordion-brutal-border)}.dd-accordion-brutal__body-content{position:relative;padding:0 20px 0 24px;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__body-content:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-accordion-brutal-accent)}.dd-accordion-brutal__body-shell.is-open .dd-accordion-brutal__body-content{padding-top:20px;padding-bottom:22px;opacity:1;transform:translateY(0) scale(1);transition-delay:40ms,0ms,0ms}.dd-accordion-brutal__body-content :first-child{margin-top:0}.dd-accordion-brutal__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-brutal{box-shadow:7px 7px 0 var(--dd-accordion-brutal-border)}.dd-accordion-brutal__header{grid-template-columns:1fr auto;padding:16px}.dd-accordion-brutal__stamp{grid-column:1/-1;width:fit-content;min-width:0}.dd-accordion-brutal__title{font-size:16px}.dd-accordion-brutal__action{width:44px;height:44px}.dd-accordion-brutal__body-content{padding-right:16px;padding-left:20px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5100
5099
|
}
|
|
5101
5100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, decorators: [{
|
|
5102
5101
|
type: Component,
|
|
5103
|
-
args: [{ selector: 'duck-dev-accordion-neobrutal', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-brutal__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"title()\"\n (click)=\"toggle()\"\n >\n <span class=\"dd-accordion-brutal__stamp\">
|
|
5104
|
-
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5102
|
+
args: [{ selector: 'duck-dev-accordion-neobrutal', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-brutal__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"title()\"\n (click)=\"toggle()\"\n >\n <span class=\"dd-accordion-brutal__stamp\">{{ stampLabel() }}</span>\n\n <span class=\"dd-accordion-brutal__headline\">\n <span class=\"dd-accordion-brutal__title\">{{ title() }}</span>\n <span class=\"dd-accordion-brutal__state\">{{ stateLabel() }}</span>\n </span>\n\n <span class=\"dd-accordion-brutal__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </button>\n\n <div class=\"dd-accordion-brutal__body-shell\" [class.is-open]=\"isOpen()\" [attr.aria-hidden]=\"!isOpen()\">\n <div class=\"dd-accordion-brutal__body-frame\">\n <div class=\"dd-accordion-brutal__body-content\">\n <ng-container [ngTemplateOutlet]=\"content()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [".dd-accordion-brutal{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-blue);--dd-accordion-brutal-border: var(--dd-base-600);--dd-accordion-brutal-text: var(--dd-base-600);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-accordion-brutal-border);display:block;background:var(--dd-accordion-brutal-bg);border:4px solid var(--dd-accordion-brutal-border);box-shadow:var(--dd-accordion-brutal-shadow);overflow:clip;color:var(--dd-accordion-brutal-text)}.dd-accordion-brutal[data-color=violet]{--dd-accordion-brutal-bg: color-mix(in srgb, var(--dd-base-accent-blue) 16%, var(--dd-base-0));--dd-accordion-brutal-panel: color-mix( in srgb, var(--dd-base-accent-blue) 10%, var(--dd-base-0) );--dd-accordion-brutal-accent: var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=orange]{--dd-accordion-brutal-bg: color-mix( in srgb, var(--dd-base-accent-orange) 18%, var(--dd-base-0) );--dd-accordion-brutal-panel: color-mix( in srgb, var(--dd-base-accent-yellow) 22%, var(--dd-base-0) );--dd-accordion-brutal-accent: var(--dd-base-accent-orange)}.dd-accordion-brutal[data-color=gray]{--dd-accordion-brutal-bg: var(--dd-base-100);--dd-accordion-brutal-panel: var(--dd-base-0);--dd-accordion-brutal-accent: var(--dd-base-400)}.dd-accordion-brutal[data-color=dark]{--dd-accordion-brutal-bg: var(--dd-base-600);--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-border: var(--dd-base-0);--dd-accordion-brutal-text: var(--dd-base-0)}.dd-accordion-brutal[data-color=white]{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-orange)}.dd-accordion-brutal__header{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-accordion-brutal-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-accordion-brutal-bg);color:inherit;border:0;cursor:pointer;text-align:left;transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:after{content:\"\";position:absolute;inset:auto 0 0;height:4px;background:var(--dd-accordion-brutal-border);transform-origin:left center;transform:scaleX(.92);transition:transform .32s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:hover{transform:translate(-2px,-2px)}.dd-accordion-brutal.is-open .dd-accordion-brutal__header:after{transform:scaleX(1)}.dd-accordion-brutal__stamp{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:7px 10px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-accordion-brutal-border);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-accordion-brutal-border);transform:rotate(-4deg)}.dd-accordion-brutal[data-color=dark] .dd-accordion-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-accordion-brutal__headline{display:grid;gap:8px;min-width:0}.dd-accordion-brutal__title{font-size:18px;line-height:1.15;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}.dd-accordion-brutal__state{display:inline-flex;width:fit-content;padding:3px 8px;border:2px solid var(--dd-accordion-brutal-border);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 14%,var(--dd-base-0));font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.dd-accordion-brutal__action{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-accordion-brutal-border);transform:rotate(-8deg);transition:transform .42s cubic-bezier(.22,1.2,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__action.is-open{transform:rotate(90deg) scale(1.05);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 20%,var(--dd-base-0));box-shadow:2px 2px 0 var(--dd-accordion-brutal-border)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-accordion-brutal-panel);transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1),background-color .22s ease}.dd-accordion-brutal__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-brutal__body-frame{min-height:0;overflow:hidden;border-top:4px solid var(--dd-accordion-brutal-border)}.dd-accordion-brutal__body-content{position:relative;padding:0 20px 0 24px;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__body-content:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-accordion-brutal-accent)}.dd-accordion-brutal__body-shell.is-open .dd-accordion-brutal__body-content{padding-top:20px;padding-bottom:22px;opacity:1;transform:translateY(0) scale(1);transition-delay:40ms,0ms,0ms}.dd-accordion-brutal__body-content :first-child{margin-top:0}.dd-accordion-brutal__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-brutal{box-shadow:7px 7px 0 var(--dd-accordion-brutal-border)}.dd-accordion-brutal__header{grid-template-columns:1fr auto;padding:16px}.dd-accordion-brutal__stamp{grid-column:1/-1;width:fit-content;min-width:0}.dd-accordion-brutal__title{font-size:16px}.dd-accordion-brutal__action{width:44px;height:44px}.dd-accordion-brutal__body-content{padding-right:16px;padding-left:20px}}\n"] }]
|
|
5103
|
+
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], stampLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stampLabel", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5105
5104
|
|
|
5106
5105
|
class AccordionBlock {
|
|
5107
5106
|
t = inject(TranslocoService);
|
|
@@ -5119,7 +5118,7 @@ class AccordionBlock {
|
|
|
5119
5118
|
this.activeStyleTab.set(tab);
|
|
5120
5119
|
}
|
|
5121
5120
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5122
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: AccordionBlock, isStandalone: true, selector: "app-accordion-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-base-600);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevAccordionNeobrutalComponent, selector: "duck-dev-accordion-neobrutal", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5121
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: AccordionBlock, isStandalone: true, selector: "app-accordion-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n text rendered in the header\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-base-600);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevAccordionNeobrutalComponent, selector: "duck-dev-accordion-neobrutal", inputs: ["content", "title", "stampLabel", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5123
5122
|
}
|
|
5124
5123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, decorators: [{
|
|
5125
5124
|
type: Component,
|
|
@@ -5129,7 +5128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5129
5128
|
DuckDevAccordionNeobrutalComponent,
|
|
5130
5129
|
DuckDevCardSection,
|
|
5131
5130
|
DuckDevTab,
|
|
5132
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-base-600);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
5131
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n text rendered in the header\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-base-600);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
5133
5132
|
}] });
|
|
5134
5133
|
|
|
5135
5134
|
class SliderFlip {
|
|
@@ -5605,11 +5604,11 @@ class DuckDevProgressNeobrutalSlab {
|
|
|
5605
5604
|
color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5606
5605
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5607
5606
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5608
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,
|
|
5607
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-base-600)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-base-0);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-blue) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] });
|
|
5609
5608
|
}
|
|
5610
5609
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
|
|
5611
5610
|
type: Component,
|
|
5612
|
-
args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,
|
|
5611
|
+
args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-base-600)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-base-0);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-blue) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] }]
|
|
5613
5612
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5614
5613
|
|
|
5615
5614
|
class DuckDevProgressNeobrutalStamp {
|
|
@@ -5619,11 +5618,11 @@ class DuckDevProgressNeobrutalStamp {
|
|
|
5619
5618
|
color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5620
5619
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5621
5620
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5622
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,
|
|
5621
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-base-0)) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:0 0 0 4px var(--dd-base-0),8px 8px 0 var(--dd-base-600)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-base-600);background:var(--dd-base-100);overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-base-600)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
|
|
5623
5622
|
}
|
|
5624
5623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, decorators: [{
|
|
5625
5624
|
type: Component,
|
|
5626
|
-
args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,
|
|
5625
|
+
args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-base-0)) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:0 0 0 4px var(--dd-base-0),8px 8px 0 var(--dd-base-600)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-base-600);background:var(--dd-base-100);overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-base-600)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
|
|
5627
5626
|
}], propDecorators: { kicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "kicker", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5628
5627
|
|
|
5629
5628
|
class DuckDevProgressNeobrutalTicket {
|
|
@@ -5634,11 +5633,11 @@ class DuckDevProgressNeobrutalTicket {
|
|
|
5634
5633
|
color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5635
5634
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5636
5635
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5637
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-base-600))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-base-600)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-base-600)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-base-600);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,
|
|
5636
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-base-600))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-base-600)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-base-600)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-base-600);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
|
|
5638
5637
|
}
|
|
5639
5638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, decorators: [{
|
|
5640
5639
|
type: Component,
|
|
5641
|
-
args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-base-600))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-base-600)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-base-600)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-base-600);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,
|
|
5640
|
+
args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-base-600))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-base-600)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-base-600)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-base-600);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
|
|
5642
5641
|
}], propDecorators: { leftTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftTag", required: true }] }], rightTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightTag", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5643
5642
|
|
|
5644
5643
|
class QuickStartBlock {
|