duck-dev-lib 0.0.52 → 0.0.54
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.
|
@@ -332,21 +332,21 @@ function getNeobrutalButtonStyle(color) {
|
|
|
332
332
|
return {
|
|
333
333
|
'--neo-surface': 'var(--dd-base-accent-orange)',
|
|
334
334
|
'--neo-text': 'var(--dd-base-600)',
|
|
335
|
-
'--neo-shadow': 'var(--dd-base-accent-
|
|
335
|
+
'--neo-shadow': 'var(--dd-base-accent-blue)',
|
|
336
336
|
'--neo-accent': 'var(--dd-base-accent-yellow)',
|
|
337
337
|
};
|
|
338
338
|
case AccentEnumColor.Gray:
|
|
339
339
|
return {
|
|
340
340
|
'--neo-surface': 'var(--dd-base-200)',
|
|
341
341
|
'--neo-text': 'var(--dd-base-600)',
|
|
342
|
-
'--neo-shadow': 'var(--dd-base-
|
|
343
|
-
'--neo-accent': 'var(--dd-base-accent-
|
|
342
|
+
'--neo-shadow': 'var(--dd-base-accent-blue)',
|
|
343
|
+
'--neo-accent': 'var(--dd-base-accent-orange)',
|
|
344
344
|
};
|
|
345
345
|
case AccentEnumColor.Dark:
|
|
346
346
|
return {
|
|
347
347
|
'--neo-surface': 'var(--dd-base-600)',
|
|
348
348
|
'--neo-text': 'var(--dd-base-0)',
|
|
349
|
-
'--neo-shadow': 'var(--dd-base-
|
|
349
|
+
'--neo-shadow': 'var(--dd-base-secondary)',
|
|
350
350
|
'--neo-accent': 'var(--dd-base-accent-yellow)',
|
|
351
351
|
};
|
|
352
352
|
case AccentEnumColor.White:
|
|
@@ -354,8 +354,8 @@ function getNeobrutalButtonStyle(color) {
|
|
|
354
354
|
return {
|
|
355
355
|
'--neo-surface': 'var(--dd-base-0)',
|
|
356
356
|
'--neo-text': 'var(--dd-base-600)',
|
|
357
|
-
'--neo-shadow': 'var(--dd-base-accent-
|
|
358
|
-
'--neo-accent': 'var(--dd-base-accent-
|
|
357
|
+
'--neo-shadow': 'var(--dd-base-accent-orange)',
|
|
358
|
+
'--neo-accent': 'var(--dd-base-accent-blue)',
|
|
359
359
|
};
|
|
360
360
|
}
|
|
361
361
|
}
|
|
@@ -482,11 +482,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
482
482
|
|
|
483
483
|
class LoaderNeobrutalBars {
|
|
484
484
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalBars, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
485
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalBars, isStandalone: true, selector: "duck-dev-loader-neobrutal-bars", ngImport: i0, template: "<div class=\"neo-bars\" role=\"status\" aria-label=\"Loading\">\n <span class=\"bars-label\">WAIT</span>\n <span class=\"bars-track\">\n <span class=\"bar bar-one\"></span>\n <span class=\"bar bar-two\"></span>\n <span class=\"bar bar-three\"></span>\n <span class=\"bar bar-four\"></span>\n </span>\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0)}[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-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-neo-ink);border-radius:24px;background:var(--dd-base-0);box-shadow:7px 7px 0 var(--dd-base-accent-
|
|
485
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalBars, isStandalone: true, selector: "duck-dev-loader-neobrutal-bars", ngImport: i0, template: "<div class=\"neo-bars\" role=\"status\" aria-label=\"Loading\">\n <span class=\"bars-label\">WAIT</span>\n <span class=\"bars-track\">\n <span class=\"bar bar-one\"></span>\n <span class=\"bar bar-two\"></span>\n <span class=\"bar bar-three\"></span>\n <span class=\"bar bar-four\"></span>\n </span>\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0)}[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-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-neo-ink);border-radius:24px;background:var(--dd-base-0);box-shadow:7px 7px 0 var(--dd-base-accent-blue);transform:rotate(-2deg)}.bars-label{align-self:flex-start;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.2em}.bars-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:.5rem;height:54px}.bar{display:block;height:100%;border:3px solid var(--dd-neo-ink);border-radius:12px 12px 4px 4px;transform-origin:bottom center;animation:bar-bounce .9s steps(2) infinite}.bar-one{background:var(--dd-base-accent-pink);animation-delay:0s}.bar-two{background:var(--dd-base-accent-blue);animation-delay:.16s}.bar-three{background:var(--dd-base-secondary);animation-delay:.32s}.bar-four{background:var(--dd-base-accent-orange);animation-delay:.48s}@keyframes bar-bounce{0%,to{transform:scaleY(.38) translateY(0)}50%{transform:scaleY(1) translateY(-2px)}}\n"] });
|
|
486
486
|
}
|
|
487
487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalBars, decorators: [{
|
|
488
488
|
type: Component,
|
|
489
|
-
args: [{ selector: 'duck-dev-loader-neobrutal-bars', standalone: true, template: "<div class=\"neo-bars\" role=\"status\" aria-label=\"Loading\">\n <span class=\"bars-label\">WAIT</span>\n <span class=\"bars-track\">\n <span class=\"bar bar-one\"></span>\n <span class=\"bar bar-two\"></span>\n <span class=\"bar bar-three\"></span>\n <span class=\"bar bar-four\"></span>\n </span>\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0)}[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-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-neo-ink);border-radius:24px;background:var(--dd-base-0);box-shadow:7px 7px 0 var(--dd-base-accent-
|
|
489
|
+
args: [{ selector: 'duck-dev-loader-neobrutal-bars', standalone: true, template: "<div class=\"neo-bars\" role=\"status\" aria-label=\"Loading\">\n <span class=\"bars-label\">WAIT</span>\n <span class=\"bars-track\">\n <span class=\"bar bar-one\"></span>\n <span class=\"bar bar-two\"></span>\n <span class=\"bar bar-three\"></span>\n <span class=\"bar bar-four\"></span>\n </span>\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0)}[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-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-neo-ink);border-radius:24px;background:var(--dd-base-0);box-shadow:7px 7px 0 var(--dd-base-accent-blue);transform:rotate(-2deg)}.bars-label{align-self:flex-start;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.2em}.bars-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:.5rem;height:54px}.bar{display:block;height:100%;border:3px solid var(--dd-neo-ink);border-radius:12px 12px 4px 4px;transform-origin:bottom center;animation:bar-bounce .9s steps(2) infinite}.bar-one{background:var(--dd-base-accent-pink);animation-delay:0s}.bar-two{background:var(--dd-base-accent-blue);animation-delay:.16s}.bar-three{background:var(--dd-base-secondary);animation-delay:.32s}.bar-four{background:var(--dd-base-accent-orange);animation-delay:.48s}@keyframes bar-bounce{0%,to{transform:scaleY(.38) translateY(0)}50%{transform:scaleY(1) translateY(-2px)}}\n"] }]
|
|
490
490
|
}] });
|
|
491
491
|
|
|
492
492
|
class LoaderNeobrutalMarquee {
|
|
@@ -596,7 +596,7 @@ function getNeobrutalBadgeStyle(color) {
|
|
|
596
596
|
switch (color) {
|
|
597
597
|
case AccentEnumColor.Violet:
|
|
598
598
|
return {
|
|
599
|
-
'--dd-neo-badge-surface': 'color-mix(in srgb, var(--dd-base-
|
|
599
|
+
'--dd-neo-badge-surface': 'color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))',
|
|
600
600
|
'--dd-neo-badge-text': 'var(--dd-base-600)',
|
|
601
601
|
'--dd-neo-badge-border': 'var(--dd-neo-ink)',
|
|
602
602
|
'--dd-neo-badge-shadow': 'var(--dd-base-accent-blue)',
|
|
@@ -604,10 +604,10 @@ function getNeobrutalBadgeStyle(color) {
|
|
|
604
604
|
};
|
|
605
605
|
case AccentEnumColor.Orange:
|
|
606
606
|
return {
|
|
607
|
-
'--dd-neo-badge-surface': 'color-mix(in srgb, var(--dd-base-accent-orange)
|
|
607
|
+
'--dd-neo-badge-surface': 'color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))',
|
|
608
608
|
'--dd-neo-badge-text': 'var(--dd-base-600)',
|
|
609
609
|
'--dd-neo-badge-border': 'var(--dd-neo-ink)',
|
|
610
|
-
'--dd-neo-badge-shadow': 'var(--dd-base-accent-
|
|
610
|
+
'--dd-neo-badge-shadow': 'var(--dd-base-accent-blue)',
|
|
611
611
|
'--dd-neo-badge-accent': 'var(--dd-base-accent-pink)',
|
|
612
612
|
};
|
|
613
613
|
case AccentEnumColor.Gray:
|
|
@@ -615,15 +615,15 @@ function getNeobrutalBadgeStyle(color) {
|
|
|
615
615
|
'--dd-neo-badge-surface': 'var(--dd-base-100)',
|
|
616
616
|
'--dd-neo-badge-text': 'var(--dd-base-600)',
|
|
617
617
|
'--dd-neo-badge-border': 'var(--dd-neo-ink)',
|
|
618
|
-
'--dd-neo-badge-shadow': 'var(--dd-base-
|
|
619
|
-
'--dd-neo-badge-accent': 'var(--dd-base-accent-
|
|
618
|
+
'--dd-neo-badge-shadow': 'var(--dd-base-accent-blue)',
|
|
619
|
+
'--dd-neo-badge-accent': 'var(--dd-base-accent-orange)',
|
|
620
620
|
};
|
|
621
621
|
case AccentEnumColor.Dark:
|
|
622
622
|
return {
|
|
623
623
|
'--dd-neo-badge-surface': 'var(--dd-base-600)',
|
|
624
624
|
'--dd-neo-badge-text': 'var(--dd-base-0)',
|
|
625
625
|
'--dd-neo-badge-border': 'var(--dd-base-0)',
|
|
626
|
-
'--dd-neo-badge-shadow': 'var(--dd-base-
|
|
626
|
+
'--dd-neo-badge-shadow': 'var(--dd-base-secondary)',
|
|
627
627
|
'--dd-neo-badge-accent': 'var(--dd-base-accent-yellow)',
|
|
628
628
|
};
|
|
629
629
|
case AccentEnumColor.White:
|
|
@@ -632,8 +632,8 @@ function getNeobrutalBadgeStyle(color) {
|
|
|
632
632
|
'--dd-neo-badge-surface': 'var(--dd-base-0)',
|
|
633
633
|
'--dd-neo-badge-text': 'var(--dd-base-600)',
|
|
634
634
|
'--dd-neo-badge-border': 'var(--dd-neo-ink)',
|
|
635
|
-
'--dd-neo-badge-shadow': 'var(--dd-base-accent-
|
|
636
|
-
'--dd-neo-badge-accent': 'var(--dd-base-accent-
|
|
635
|
+
'--dd-neo-badge-shadow': 'var(--dd-base-accent-orange)',
|
|
636
|
+
'--dd-neo-badge-accent': 'var(--dd-base-accent-blue)',
|
|
637
637
|
};
|
|
638
638
|
}
|
|
639
639
|
}
|
|
@@ -2258,30 +2258,30 @@ function getNeobrutalSpeakerBubbleStyle(color) {
|
|
|
2258
2258
|
switch (color) {
|
|
2259
2259
|
case AccentEnumColor.Violet:
|
|
2260
2260
|
return {
|
|
2261
|
-
'--dd-speaker-surface': 'color-mix(in srgb, var(--dd-base-
|
|
2262
|
-
'--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-base-
|
|
2261
|
+
'--dd-speaker-surface': 'color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))',
|
|
2262
|
+
'--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-base-secondary) 7%, var(--dd-base-0))',
|
|
2263
2263
|
'--dd-speaker-text': 'var(--dd-base-600)',
|
|
2264
|
-
'--dd-speaker-border': 'var(--dd-
|
|
2264
|
+
'--dd-speaker-border': 'var(--dd-neo-ink)',
|
|
2265
2265
|
'--dd-speaker-accent': 'var(--dd-base-accent-yellow)',
|
|
2266
2266
|
'--dd-speaker-shadow': 'var(--dd-base-accent-blue)',
|
|
2267
2267
|
};
|
|
2268
2268
|
case AccentEnumColor.Orange:
|
|
2269
2269
|
return {
|
|
2270
|
-
'--dd-speaker-surface': 'color-mix(in srgb, var(--dd-base-accent-orange)
|
|
2271
|
-
'--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-base-accent-
|
|
2270
|
+
'--dd-speaker-surface': 'color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))',
|
|
2271
|
+
'--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-base-accent-orange) 8%, var(--dd-base-0))',
|
|
2272
2272
|
'--dd-speaker-text': 'var(--dd-base-600)',
|
|
2273
|
-
'--dd-speaker-border': 'var(--dd-
|
|
2273
|
+
'--dd-speaker-border': 'var(--dd-neo-ink)',
|
|
2274
2274
|
'--dd-speaker-accent': 'var(--dd-base-accent-pink)',
|
|
2275
|
-
'--dd-speaker-shadow': 'var(--dd-base-accent-
|
|
2275
|
+
'--dd-speaker-shadow': 'var(--dd-base-accent-blue)',
|
|
2276
2276
|
};
|
|
2277
2277
|
case AccentEnumColor.Gray:
|
|
2278
2278
|
return {
|
|
2279
2279
|
'--dd-speaker-surface': 'var(--dd-base-100)',
|
|
2280
2280
|
'--dd-speaker-surface-muted': 'var(--dd-base-0)',
|
|
2281
2281
|
'--dd-speaker-text': 'var(--dd-base-600)',
|
|
2282
|
-
'--dd-speaker-border': 'var(--dd-
|
|
2283
|
-
'--dd-speaker-accent': 'var(--dd-base-accent-
|
|
2284
|
-
'--dd-speaker-shadow': 'var(--dd-base-
|
|
2282
|
+
'--dd-speaker-border': 'var(--dd-neo-ink)',
|
|
2283
|
+
'--dd-speaker-accent': 'var(--dd-base-accent-orange)',
|
|
2284
|
+
'--dd-speaker-shadow': 'var(--dd-base-accent-blue)',
|
|
2285
2285
|
};
|
|
2286
2286
|
case AccentEnumColor.Dark:
|
|
2287
2287
|
return {
|
|
@@ -2290,17 +2290,17 @@ function getNeobrutalSpeakerBubbleStyle(color) {
|
|
|
2290
2290
|
'--dd-speaker-text': 'var(--dd-base-0)',
|
|
2291
2291
|
'--dd-speaker-border': 'var(--dd-base-0)',
|
|
2292
2292
|
'--dd-speaker-accent': 'var(--dd-base-accent-yellow)',
|
|
2293
|
-
'--dd-speaker-shadow': 'var(--dd-base-
|
|
2293
|
+
'--dd-speaker-shadow': 'var(--dd-base-secondary)',
|
|
2294
2294
|
};
|
|
2295
2295
|
case AccentEnumColor.White:
|
|
2296
2296
|
default:
|
|
2297
2297
|
return {
|
|
2298
2298
|
'--dd-speaker-surface': 'var(--dd-base-0)',
|
|
2299
|
-
'--dd-speaker-surface-muted': '
|
|
2299
|
+
'--dd-speaker-surface-muted': 'var(--dd-base-100)',
|
|
2300
2300
|
'--dd-speaker-text': 'var(--dd-base-600)',
|
|
2301
|
-
'--dd-speaker-border': 'var(--dd-
|
|
2302
|
-
'--dd-speaker-accent': 'var(--dd-base-accent-
|
|
2303
|
-
'--dd-speaker-shadow': 'var(--dd-base-accent-
|
|
2301
|
+
'--dd-speaker-border': 'var(--dd-neo-ink)',
|
|
2302
|
+
'--dd-speaker-accent': 'var(--dd-base-accent-blue)',
|
|
2303
|
+
'--dd-speaker-shadow': 'var(--dd-base-accent-orange)',
|
|
2304
2304
|
};
|
|
2305
2305
|
}
|
|
2306
2306
|
}
|
|
@@ -4196,8 +4196,8 @@ function getNeobrutalCardStyle(color) {
|
|
|
4196
4196
|
switch (color) {
|
|
4197
4197
|
case AccentEnumColor.Violet:
|
|
4198
4198
|
return {
|
|
4199
|
-
'--dd-neo-card-surface': 'color-mix(in srgb, var(--dd-base-
|
|
4200
|
-
'--dd-neo-card-panel': 'color-mix(in srgb, var(--dd-base-
|
|
4199
|
+
'--dd-neo-card-surface': 'color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))',
|
|
4200
|
+
'--dd-neo-card-panel': 'color-mix(in srgb, var(--dd-base-secondary) 7%, var(--dd-base-0))',
|
|
4201
4201
|
'--dd-neo-card-text': 'var(--dd-base-600)',
|
|
4202
4202
|
'--dd-neo-card-border': 'var(--dd-neo-ink)',
|
|
4203
4203
|
'--dd-neo-card-shadow': 'var(--dd-base-accent-blue)',
|
|
@@ -4205,11 +4205,11 @@ function getNeobrutalCardStyle(color) {
|
|
|
4205
4205
|
};
|
|
4206
4206
|
case AccentEnumColor.Orange:
|
|
4207
4207
|
return {
|
|
4208
|
-
'--dd-neo-card-surface': 'color-mix(in srgb, var(--dd-base-accent-orange)
|
|
4209
|
-
'--dd-neo-card-panel': 'color-mix(in srgb, var(--dd-base-accent-
|
|
4208
|
+
'--dd-neo-card-surface': 'color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))',
|
|
4209
|
+
'--dd-neo-card-panel': 'color-mix(in srgb, var(--dd-base-accent-orange) 8%, var(--dd-base-0))',
|
|
4210
4210
|
'--dd-neo-card-text': 'var(--dd-base-600)',
|
|
4211
4211
|
'--dd-neo-card-border': 'var(--dd-neo-ink)',
|
|
4212
|
-
'--dd-neo-card-shadow': 'var(--dd-base-accent-
|
|
4212
|
+
'--dd-neo-card-shadow': 'var(--dd-base-accent-blue)',
|
|
4213
4213
|
'--dd-neo-card-accent': 'var(--dd-base-accent-pink)',
|
|
4214
4214
|
};
|
|
4215
4215
|
case AccentEnumColor.Gray:
|
|
@@ -4218,8 +4218,8 @@ function getNeobrutalCardStyle(color) {
|
|
|
4218
4218
|
'--dd-neo-card-panel': 'var(--dd-base-0)',
|
|
4219
4219
|
'--dd-neo-card-text': 'var(--dd-base-600)',
|
|
4220
4220
|
'--dd-neo-card-border': 'var(--dd-neo-ink)',
|
|
4221
|
-
'--dd-neo-card-shadow': 'var(--dd-base-
|
|
4222
|
-
'--dd-neo-card-accent': 'var(--dd-base-accent-
|
|
4221
|
+
'--dd-neo-card-shadow': 'var(--dd-base-accent-blue)',
|
|
4222
|
+
'--dd-neo-card-accent': 'var(--dd-base-accent-orange)',
|
|
4223
4223
|
};
|
|
4224
4224
|
case AccentEnumColor.Dark:
|
|
4225
4225
|
return {
|
|
@@ -4227,7 +4227,7 @@ function getNeobrutalCardStyle(color) {
|
|
|
4227
4227
|
'--dd-neo-card-panel': 'color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500))',
|
|
4228
4228
|
'--dd-neo-card-text': 'var(--dd-base-0)',
|
|
4229
4229
|
'--dd-neo-card-border': 'var(--dd-base-0)',
|
|
4230
|
-
'--dd-neo-card-shadow': 'var(--dd-base-
|
|
4230
|
+
'--dd-neo-card-shadow': 'var(--dd-base-secondary)',
|
|
4231
4231
|
'--dd-neo-card-accent': 'var(--dd-base-accent-yellow)',
|
|
4232
4232
|
};
|
|
4233
4233
|
case AccentEnumColor.White:
|
|
@@ -4237,8 +4237,8 @@ function getNeobrutalCardStyle(color) {
|
|
|
4237
4237
|
'--dd-neo-card-panel': 'var(--dd-base-100)',
|
|
4238
4238
|
'--dd-neo-card-text': 'var(--dd-base-600)',
|
|
4239
4239
|
'--dd-neo-card-border': 'var(--dd-neo-ink)',
|
|
4240
|
-
'--dd-neo-card-shadow': 'var(--dd-base-accent-
|
|
4241
|
-
'--dd-neo-card-accent': 'var(--dd-base-accent-
|
|
4240
|
+
'--dd-neo-card-shadow': 'var(--dd-base-accent-orange)',
|
|
4241
|
+
'--dd-neo-card-accent': 'var(--dd-base-accent-blue)',
|
|
4242
4242
|
};
|
|
4243
4243
|
}
|
|
4244
4244
|
}
|
|
@@ -5095,11 +5095,11 @@ class DuckDevAccordionNeobrutalComponent {
|
|
|
5095
5095
|
this.isOpen.update((prev) => !prev);
|
|
5096
5096
|
}
|
|
5097
5097
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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-
|
|
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-orange);--dd-accordion-brutal-border: var(--dd-neo-ink);--dd-accordion-brutal-text: var(--dd-base-600);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-orange);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-secondary) 14%, var(--dd-base-0));--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-secondary) 7%, var(--dd-base-0));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=orange]{--dd-accordion-brutal-bg: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0));--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-accent-orange) 8%, var(--dd-base-0));--dd-accordion-brutal-accent: var(--dd-base-accent-pink);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.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-accent-orange);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.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-shadow: 10px 10px 0 var(--dd-base-secondary)}.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-blue);--dd-accordion-brutal-shadow: 10px 10px 0 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 });
|
|
5099
5099
|
}
|
|
5100
5100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, decorators: [{
|
|
5101
5101
|
type: Component,
|
|
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-
|
|
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-orange);--dd-accordion-brutal-border: var(--dd-neo-ink);--dd-accordion-brutal-text: var(--dd-base-600);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-orange);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-secondary) 14%, var(--dd-base-0));--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-secondary) 7%, var(--dd-base-0));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=orange]{--dd-accordion-brutal-bg: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0));--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-accent-orange) 8%, var(--dd-base-0));--dd-accordion-brutal-accent: var(--dd-base-accent-pink);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.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-accent-orange);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.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-shadow: 10px 10px 0 var(--dd-base-secondary)}.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-blue);--dd-accordion-brutal-shadow: 10px 10px 0 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
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 }] }] } });
|
|
5104
5104
|
|
|
5105
5105
|
class AccordionBlock {
|
|
@@ -5503,11 +5503,11 @@ class DuckDevTooltipNeobrutalComponent {
|
|
|
5503
5503
|
this.closeTimer = setTimeout(() => this.open.set(false), delay);
|
|
5504
5504
|
}
|
|
5505
5505
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTooltipNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5506
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTooltipNeobrutalComponent, isStandalone: true, selector: "duck-dev-tooltip-neobrutal", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delayCloseMs: { classPropertyName: "delayCloseMs", publicName: "delayCloseMs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-tooltip-brutal\"\n (mouseenter)=\"handleEnter()\"\n (mouseleave)=\"handleLeave()\"\n (focusin)=\"handleEnter()\"\n (focusout)=\"handleLeave()\"\n>\n <div class=\"dd-tooltip-brutal__trigger\">\n <ng-content />\n </div>\n\n @if (open()) {\n <div\n class=\"dd-tooltip-brutal__bubble\"\n animate.enter=\"enterAnimation\"\n animate.leave=\"leaveAnimation\"\n [style.--dd-tooltip-brutal-anim-ms.ms]=\"delayCloseMs()\"\n [attr.data-placement]=\"placement()\"\n [attr.data-color]=\"color()\"\n >\n <span class=\"dd-tooltip-brutal__stamp\">Duck Dev</span>\n <span class=\"dd-tooltip-brutal__text\">{{ text() }}</span>\n <span class=\"dd-tooltip-brutal__arrow\" aria-hidden=\"true\"></span>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip-brutal{position:relative;display:inline-block}.dd-tooltip-brutal__bubble{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-text: var(--dd-base-600);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-
|
|
5506
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTooltipNeobrutalComponent, isStandalone: true, selector: "duck-dev-tooltip-neobrutal", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delayCloseMs: { classPropertyName: "delayCloseMs", publicName: "delayCloseMs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-tooltip-brutal\"\n (mouseenter)=\"handleEnter()\"\n (mouseleave)=\"handleLeave()\"\n (focusin)=\"handleEnter()\"\n (focusout)=\"handleLeave()\"\n>\n <div class=\"dd-tooltip-brutal__trigger\">\n <ng-content />\n </div>\n\n @if (open()) {\n <div\n class=\"dd-tooltip-brutal__bubble\"\n animate.enter=\"enterAnimation\"\n animate.leave=\"leaveAnimation\"\n [style.--dd-tooltip-brutal-anim-ms.ms]=\"delayCloseMs()\"\n [attr.data-placement]=\"placement()\"\n [attr.data-color]=\"color()\"\n >\n <span class=\"dd-tooltip-brutal__stamp\">Duck Dev</span>\n <span class=\"dd-tooltip-brutal__text\">{{ text() }}</span>\n <span class=\"dd-tooltip-brutal__arrow\" aria-hidden=\"true\"></span>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip-brutal{position:relative;display:inline-block}.dd-tooltip-brutal__bubble{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-text: var(--dd-base-600);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange);position:absolute;z-index:6;display:grid;gap:10px;min-width:180px;max-width:280px;padding:14px;border:4px solid var(--dd-tooltip-brutal-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tooltip-brutal-accent) 26%,transparent) 0 18%,transparent 18% 100%),var(--dd-tooltip-brutal-surface);box-shadow:8px 8px 0 var(--dd-tooltip-brutal-shadow);color:var(--dd-tooltip-brutal-text);pointer-events:none;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-color=violet]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=orange]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-pink);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=gray]{--dd-tooltip-brutal-surface: var(--dd-base-200);--dd-tooltip-brutal-accent: var(--dd-base-accent-orange);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=dark]{--dd-tooltip-brutal-surface: var(--dd-base-600);--dd-tooltip-brutal-text: var(--dd-base-0);--dd-tooltip-brutal-border: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-secondary)}.dd-tooltip-brutal__bubble[data-color=white]{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange)}.dd-tooltip-brutal__bubble[data-placement=top],.dd-tooltip-brutal__bubble[data-placement=top-start],.dd-tooltip-brutal__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=top-start]{left:0;transform:translateY(-14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom],.dd-tooltip-brutal__bubble[data-placement=bottom-start],.dd-tooltip-brutal__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]{left:0;transform:translateY(14px) rotate(1.25deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left],.dd-tooltip-brutal__bubble[data-placement=left-start],.dd-tooltip-brutal__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-14px,-50%) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left-start]{top:0;transform:translate(-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=left-end]{top:100%;transform:translate(-14px,-100%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right],.dd-tooltip-brutal__bubble[data-placement=right-start],.dd-tooltip-brutal__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(14px,-50%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right-start]{top:0;transform:translate(14px) rotate(1.5deg)}.dd-tooltip-brutal__bubble[data-placement=right-end]{top:100%;transform:translate(14px,-100%) rotate(-1deg)}.dd-tooltip-brutal__stamp{display:inline-flex;width:fit-content;align-items:center;justify-content:center;padding:4px 8px;border:3px solid var(--dd-tooltip-brutal-border);background:var(--dd-base-0);box-shadow:3px 3px 0 var(--dd-tooltip-brutal-border);color:var(--dd-tooltip-brutal-border);font-size:10px;font-weight:900;line-height:1;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-4deg)}.dd-tooltip-brutal__bubble[data-color=dark] .dd-tooltip-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-tooltip-brutal__text{display:block;font-size:13px;line-height:1.35;font-weight:800;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}.dd-tooltip-brutal__arrow{position:absolute;width:18px;height:18px;border-right:4px solid var(--dd-tooltip-brutal-border);border-bottom:4px solid var(--dd-tooltip-brutal-border);background:var(--dd-tooltip-brutal-surface)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{bottom:-13px;transform:rotate(45deg)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{top:-13px;transform:rotate(225deg)}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{right:-13px;transform:rotate(315deg)}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{bottom:20px}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{left:-13px;transform:rotate(135deg)}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{bottom:20px}.enterAnimation{animation:enter-animation var(--dd-tooltip-brutal-anim-ms, .3s) cubic-bezier(.22,1.1,.36,1)}@keyframes enter-animation{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-brutal-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}@media(max-width:640px){.dd-tooltip-brutal__bubble{min-width:160px;max-width:min(240px,100vw - 32px);box-shadow:6px 6px 0 var(--dd-tooltip-brutal-shadow)}}\n"] });
|
|
5507
5507
|
}
|
|
5508
5508
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTooltipNeobrutalComponent, decorators: [{
|
|
5509
5509
|
type: Component,
|
|
5510
|
-
args: [{ selector: 'duck-dev-tooltip-neobrutal', standalone: true, imports: [], template: "<div\n class=\"dd-tooltip-brutal\"\n (mouseenter)=\"handleEnter()\"\n (mouseleave)=\"handleLeave()\"\n (focusin)=\"handleEnter()\"\n (focusout)=\"handleLeave()\"\n>\n <div class=\"dd-tooltip-brutal__trigger\">\n <ng-content />\n </div>\n\n @if (open()) {\n <div\n class=\"dd-tooltip-brutal__bubble\"\n animate.enter=\"enterAnimation\"\n animate.leave=\"leaveAnimation\"\n [style.--dd-tooltip-brutal-anim-ms.ms]=\"delayCloseMs()\"\n [attr.data-placement]=\"placement()\"\n [attr.data-color]=\"color()\"\n >\n <span class=\"dd-tooltip-brutal__stamp\">Duck Dev</span>\n <span class=\"dd-tooltip-brutal__text\">{{ text() }}</span>\n <span class=\"dd-tooltip-brutal__arrow\" aria-hidden=\"true\"></span>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip-brutal{position:relative;display:inline-block}.dd-tooltip-brutal__bubble{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-text: var(--dd-base-600);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-
|
|
5510
|
+
args: [{ selector: 'duck-dev-tooltip-neobrutal', standalone: true, imports: [], template: "<div\n class=\"dd-tooltip-brutal\"\n (mouseenter)=\"handleEnter()\"\n (mouseleave)=\"handleLeave()\"\n (focusin)=\"handleEnter()\"\n (focusout)=\"handleLeave()\"\n>\n <div class=\"dd-tooltip-brutal__trigger\">\n <ng-content />\n </div>\n\n @if (open()) {\n <div\n class=\"dd-tooltip-brutal__bubble\"\n animate.enter=\"enterAnimation\"\n animate.leave=\"leaveAnimation\"\n [style.--dd-tooltip-brutal-anim-ms.ms]=\"delayCloseMs()\"\n [attr.data-placement]=\"placement()\"\n [attr.data-color]=\"color()\"\n >\n <span class=\"dd-tooltip-brutal__stamp\">Duck Dev</span>\n <span class=\"dd-tooltip-brutal__text\">{{ text() }}</span>\n <span class=\"dd-tooltip-brutal__arrow\" aria-hidden=\"true\"></span>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip-brutal{position:relative;display:inline-block}.dd-tooltip-brutal__bubble{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-text: var(--dd-base-600);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange);position:absolute;z-index:6;display:grid;gap:10px;min-width:180px;max-width:280px;padding:14px;border:4px solid var(--dd-tooltip-brutal-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tooltip-brutal-accent) 26%,transparent) 0 18%,transparent 18% 100%),var(--dd-tooltip-brutal-surface);box-shadow:8px 8px 0 var(--dd-tooltip-brutal-shadow);color:var(--dd-tooltip-brutal-text);pointer-events:none;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-color=violet]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=orange]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-pink);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=gray]{--dd-tooltip-brutal-surface: var(--dd-base-200);--dd-tooltip-brutal-accent: var(--dd-base-accent-orange);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=dark]{--dd-tooltip-brutal-surface: var(--dd-base-600);--dd-tooltip-brutal-text: var(--dd-base-0);--dd-tooltip-brutal-border: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-secondary)}.dd-tooltip-brutal__bubble[data-color=white]{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange)}.dd-tooltip-brutal__bubble[data-placement=top],.dd-tooltip-brutal__bubble[data-placement=top-start],.dd-tooltip-brutal__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=top-start]{left:0;transform:translateY(-14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom],.dd-tooltip-brutal__bubble[data-placement=bottom-start],.dd-tooltip-brutal__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]{left:0;transform:translateY(14px) rotate(1.25deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left],.dd-tooltip-brutal__bubble[data-placement=left-start],.dd-tooltip-brutal__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-14px,-50%) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left-start]{top:0;transform:translate(-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=left-end]{top:100%;transform:translate(-14px,-100%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right],.dd-tooltip-brutal__bubble[data-placement=right-start],.dd-tooltip-brutal__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(14px,-50%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right-start]{top:0;transform:translate(14px) rotate(1.5deg)}.dd-tooltip-brutal__bubble[data-placement=right-end]{top:100%;transform:translate(14px,-100%) rotate(-1deg)}.dd-tooltip-brutal__stamp{display:inline-flex;width:fit-content;align-items:center;justify-content:center;padding:4px 8px;border:3px solid var(--dd-tooltip-brutal-border);background:var(--dd-base-0);box-shadow:3px 3px 0 var(--dd-tooltip-brutal-border);color:var(--dd-tooltip-brutal-border);font-size:10px;font-weight:900;line-height:1;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-4deg)}.dd-tooltip-brutal__bubble[data-color=dark] .dd-tooltip-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-tooltip-brutal__text{display:block;font-size:13px;line-height:1.35;font-weight:800;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}.dd-tooltip-brutal__arrow{position:absolute;width:18px;height:18px;border-right:4px solid var(--dd-tooltip-brutal-border);border-bottom:4px solid var(--dd-tooltip-brutal-border);background:var(--dd-tooltip-brutal-surface)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{bottom:-13px;transform:rotate(45deg)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{top:-13px;transform:rotate(225deg)}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{right:-13px;transform:rotate(315deg)}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{bottom:20px}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{left:-13px;transform:rotate(135deg)}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{bottom:20px}.enterAnimation{animation:enter-animation var(--dd-tooltip-brutal-anim-ms, .3s) cubic-bezier(.22,1.1,.36,1)}@keyframes enter-animation{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-brutal-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}@media(max-width:640px){.dd-tooltip-brutal__bubble{min-width:160px;max-width:min(240px,100vw - 32px);box-shadow:6px 6px 0 var(--dd-tooltip-brutal-shadow)}}\n"] }]
|
|
5511
5511
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], delayCloseMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "delayCloseMs", required: false }] }] } });
|
|
5512
5512
|
|
|
5513
5513
|
class TooltipBlock {
|
|
@@ -5604,11 +5604,11 @@ class DuckDevProgressNeobrutalSlab {
|
|
|
5604
5604
|
color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5605
5605
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5606
5606
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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-neo-ink);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-neo-ink)}.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-neo-ink);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-neo-ink);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-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-
|
|
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-neo-ink);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-neo-ink)}.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-neo-ink);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-neo-ink);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-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary);--dd-progress-panel: color-mix(in srgb, var(--dd-base-secondary) 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"] });
|
|
5608
5608
|
}
|
|
5609
5609
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
|
|
5610
5610
|
type: Component,
|
|
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-neo-ink);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-neo-ink)}.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-neo-ink);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-neo-ink);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-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-
|
|
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-neo-ink);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-neo-ink)}.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-neo-ink);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-neo-ink);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-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary);--dd-progress-panel: color-mix(in srgb, var(--dd-base-secondary) 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"] }]
|
|
5612
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 }] }] } });
|
|
5613
5613
|
|
|
5614
5614
|
class DuckDevProgressNeobrutalStamp {
|
|
@@ -5618,11 +5618,11 @@ class DuckDevProgressNeobrutalStamp {
|
|
|
5618
5618
|
color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5619
5619
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5620
5620
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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-neo-ink);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-neo-ink)}.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-neo-ink);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-neo-ink);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-
|
|
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-neo-ink);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-neo-ink)}.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-neo-ink);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-neo-ink);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-secondary)}.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"] });
|
|
5622
5622
|
}
|
|
5623
5623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, decorators: [{
|
|
5624
5624
|
type: Component,
|
|
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-neo-ink);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-neo-ink)}.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-neo-ink);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-neo-ink);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-
|
|
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-neo-ink);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-neo-ink)}.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-neo-ink);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-neo-ink);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-secondary)}.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"] }]
|
|
5626
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 }] }] } });
|
|
5627
5627
|
|
|
5628
5628
|
class DuckDevProgressNeobrutalTicket {
|
|
@@ -5633,11 +5633,11 @@ class DuckDevProgressNeobrutalTicket {
|
|
|
5633
5633
|
color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5634
5634
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5635
5635
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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-neo-ink);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-neo-ink))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.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-neo-ink)}.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-neo-ink);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-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-
|
|
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-neo-ink);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-neo-ink))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.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-neo-ink)}.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-neo-ink);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-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.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"] });
|
|
5637
5637
|
}
|
|
5638
5638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, decorators: [{
|
|
5639
5639
|
type: Component,
|
|
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-neo-ink);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-neo-ink))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.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-neo-ink)}.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-neo-ink);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-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-
|
|
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-neo-ink);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-neo-ink))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.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-neo-ink)}.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-neo-ink);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-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.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"] }]
|
|
5641
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 }] }] } });
|
|
5642
5642
|
|
|
5643
5643
|
class QuickStartBlock {
|
|
@@ -5906,11 +5906,11 @@ class DuckDevSegmentNeobrutal {
|
|
|
5906
5906
|
}
|
|
5907
5907
|
}
|
|
5908
5908
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5909
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentNeobrutal, isStandalone: true, selector: "duck-dev-segment-neobrutal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "segmentButtons", predicate: DuckDevSegmentButton }], viewQueries: [{ propertyName: "buttonsContainer", first: true, predicate: ["buttonsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo__indicator-shell\">\n <div\n class=\"dd-segment-neo__indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n >\n <span class=\"dd-segment-neo__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo__button\"\n [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-
|
|
5909
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentNeobrutal, isStandalone: true, selector: "duck-dev-segment-neobrutal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "segmentButtons", predicate: DuckDevSegmentButton }], viewQueries: [{ propertyName: "buttonsContainer", first: true, predicate: ["buttonsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo__indicator-shell\">\n <div\n class=\"dd-segment-neo__indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n >\n <span class=\"dd-segment-neo__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo__button\"\n [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-blue);--dd-segment-neo-shadow: var(--dd-base-accent-orange);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:before,.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0}.dd-segment-neo:before{top:-7px;right:18px;transform:rotate(10deg)}.dd-segment-neo:after{left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-neo-ink);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
5910
5910
|
}
|
|
5911
5911
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, decorators: [{
|
|
5912
5912
|
type: Component,
|
|
5913
|
-
args: [{ selector: 'duck-dev-segment-neobrutal', imports: [NgTemplateOutlet, NgStyle], template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo__indicator-shell\">\n <div\n class=\"dd-segment-neo__indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n >\n <span class=\"dd-segment-neo__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo__button\"\n [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-
|
|
5913
|
+
args: [{ selector: 'duck-dev-segment-neobrutal', imports: [NgTemplateOutlet, NgStyle], template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo__indicator-shell\">\n <div\n class=\"dd-segment-neo__indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n >\n <span class=\"dd-segment-neo__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo__button\"\n [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-blue);--dd-segment-neo-shadow: var(--dd-base-accent-orange);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:before,.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0}.dd-segment-neo:before{top:-7px;right:18px;transform:rotate(10deg)}.dd-segment-neo:after{left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-neo-ink);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"] }]
|
|
5914
5914
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ionChange: [{ type: i0.Output, args: ["ionChange"] }], segmentButtons: [{
|
|
5915
5915
|
type: ContentChildren,
|
|
5916
5916
|
args: [DuckDevSegmentButton]
|