duck-dev-lib 0.0.81 → 0.0.82
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.
|
@@ -471,29 +471,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
471
471
|
|
|
472
472
|
class LoaderNeobrutalStamp {
|
|
473
473
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
474
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalStamp, isStandalone: true, selector: "duck-dev-loader-neobrutal-stamp", ngImport: i0, template: "<div class=\"neo-stamp\" role=\"status\" aria-label=\"Loading\">\n <span class=\"stamp-plate\"></span>\n <span class=\"stamp-center\"></span>\n <span class=\"stamp-text\">LOAD</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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-stamp{position:relative;display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;border:4px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 46%,var(--dd-base-0) 46% 100%);box-shadow:8px 8px 0 var(--dd-base-accent-blue);overflow:hidden}.neo-stamp:before,.neo-stamp:after{content:\"\";position:absolute;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-orange)}.neo-stamp:before{width:30px;height:30px;top:10px;left:10px;transform:rotate(8deg)}.neo-stamp:after{width:22px;height:22px;right:12px;bottom:14px;background:var(--dd-base-secondary)}.stamp-plate,.stamp-center{position:absolute;inset:auto;border:4px solid var(--dd-neo-ink)}.stamp-plate{width:48px;height:48px;background:var(--dd-base-accent-pink);transform:rotate(0);animation:stamp-spin 1.05s steps(4) infinite}.stamp-center{width:20px;height:20px;background:var(--dd-
|
|
474
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalStamp, isStandalone: true, selector: "duck-dev-loader-neobrutal-stamp", ngImport: i0, template: "<div class=\"neo-stamp\" role=\"status\" aria-label=\"Loading\">\n <span class=\"stamp-plate\"></span>\n <span class=\"stamp-center\"></span>\n <span class=\"stamp-text\">LOAD</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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-stamp{position:relative;display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;border:4px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 46%,var(--dd-base-0) 46% 100%);box-shadow:8px 8px 0 var(--dd-base-accent-blue);overflow:hidden}.neo-stamp:before,.neo-stamp:after{content:\"\";position:absolute;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-orange)}.neo-stamp:before{width:30px;height:30px;top:10px;left:10px;transform:rotate(8deg)}.neo-stamp:after{width:22px;height:22px;right:12px;bottom:14px;background:var(--dd-base-secondary)}.stamp-plate,.stamp-center{position:absolute;inset:auto;border:4px solid var(--dd-neo-ink)}.stamp-plate{width:48px;height:48px;background:var(--dd-base-accent-pink);transform:rotate(0);animation:stamp-spin 1.05s steps(4) infinite}.stamp-center{width:20px;height:20px;background:var(--dd-neo-paper);animation:stamp-pulse 1.05s ease-in-out infinite}.stamp-text{position:absolute;bottom:10px;left:50%;z-index:1;padding:.1rem .45rem;border:3px solid var(--dd-neo-ink);background:var(--dd-neo-paper);color:var(--dd-base-600);font-size:.62rem;font-weight:900;letter-spacing:.18em;transform:translate(-50%) rotate(-4deg)}@keyframes stamp-spin{0%,20%{transform:rotate(0) scale(1)}30%,50%{transform:rotate(90deg) scale(1.08)}60%,80%{transform:rotate(180deg) scale(.94)}to{transform:rotate(270deg) scale(1)}}@keyframes stamp-pulse{0%,to{transform:scale(.85)}50%{transform:scale(1.2)}}\n"] });
|
|
475
475
|
}
|
|
476
476
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalStamp, decorators: [{
|
|
477
477
|
type: Component,
|
|
478
|
-
args: [{ selector: 'duck-dev-loader-neobrutal-stamp', standalone: true, template: "<div class=\"neo-stamp\" role=\"status\" aria-label=\"Loading\">\n <span class=\"stamp-plate\"></span>\n <span class=\"stamp-center\"></span>\n <span class=\"stamp-text\">LOAD</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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-stamp{position:relative;display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;border:4px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 46%,var(--dd-base-0) 46% 100%);box-shadow:8px 8px 0 var(--dd-base-accent-blue);overflow:hidden}.neo-stamp:before,.neo-stamp:after{content:\"\";position:absolute;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-orange)}.neo-stamp:before{width:30px;height:30px;top:10px;left:10px;transform:rotate(8deg)}.neo-stamp:after{width:22px;height:22px;right:12px;bottom:14px;background:var(--dd-base-secondary)}.stamp-plate,.stamp-center{position:absolute;inset:auto;border:4px solid var(--dd-neo-ink)}.stamp-plate{width:48px;height:48px;background:var(--dd-base-accent-pink);transform:rotate(0);animation:stamp-spin 1.05s steps(4) infinite}.stamp-center{width:20px;height:20px;background:var(--dd-
|
|
478
|
+
args: [{ selector: 'duck-dev-loader-neobrutal-stamp', standalone: true, template: "<div class=\"neo-stamp\" role=\"status\" aria-label=\"Loading\">\n <span class=\"stamp-plate\"></span>\n <span class=\"stamp-center\"></span>\n <span class=\"stamp-text\">LOAD</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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-stamp{position:relative;display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;border:4px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 46%,var(--dd-base-0) 46% 100%);box-shadow:8px 8px 0 var(--dd-base-accent-blue);overflow:hidden}.neo-stamp:before,.neo-stamp:after{content:\"\";position:absolute;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-orange)}.neo-stamp:before{width:30px;height:30px;top:10px;left:10px;transform:rotate(8deg)}.neo-stamp:after{width:22px;height:22px;right:12px;bottom:14px;background:var(--dd-base-secondary)}.stamp-plate,.stamp-center{position:absolute;inset:auto;border:4px solid var(--dd-neo-ink)}.stamp-plate{width:48px;height:48px;background:var(--dd-base-accent-pink);transform:rotate(0);animation:stamp-spin 1.05s steps(4) infinite}.stamp-center{width:20px;height:20px;background:var(--dd-neo-paper);animation:stamp-pulse 1.05s ease-in-out infinite}.stamp-text{position:absolute;bottom:10px;left:50%;z-index:1;padding:.1rem .45rem;border:3px solid var(--dd-neo-ink);background:var(--dd-neo-paper);color:var(--dd-base-600);font-size:.62rem;font-weight:900;letter-spacing:.18em;transform:translate(-50%) rotate(-4deg)}@keyframes stamp-spin{0%,20%{transform:rotate(0) scale(1)}30%,50%{transform:rotate(90deg) scale(1.08)}60%,80%{transform:rotate(180deg) scale(.94)}to{transform:rotate(270deg) scale(1)}}@keyframes stamp-pulse{0%,to{transform:scale(.85)}50%{transform:scale(1.2)}}\n"] }]
|
|
479
479
|
}] });
|
|
480
480
|
|
|
481
481
|
class LoaderNeobrutalBars {
|
|
482
482
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalBars, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
483
|
-
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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[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-
|
|
483
|
+
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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[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-neo-paper);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"] });
|
|
484
484
|
}
|
|
485
485
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalBars, decorators: [{
|
|
486
486
|
type: Component,
|
|
487
|
-
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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[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-
|
|
487
|
+
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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[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-neo-paper);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"] }]
|
|
488
488
|
}] });
|
|
489
489
|
|
|
490
490
|
class LoaderNeobrutalMarquee {
|
|
491
491
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalMarquee, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
492
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalMarquee, isStandalone: true, selector: "duck-dev-loader-neobrutal-marquee", ngImport: i0, template: "<div class=\"neo-marquee\" role=\"status\" aria-label=\"Loading\">\n <span class=\"marquee-chip\">SYNC</span>\n <span class=\"marquee-window\">\n <span class=\"marquee-ribbon\">\n <span>LOADING</span>\n <span>LOADING</span>\n <span>LOADING</span>\n </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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-marquee{display:inline-flex;align-items:center;gap:.75rem;padding:.6rem .7rem .6rem .6rem;border:4px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-secondary)}.marquee-chip{flex-shrink:0;padding:.7rem .85rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.14em}.marquee-window{width:132px;overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:999px;background:linear-gradient(90deg,var(--dd-base-accent-yellow) 0 50%,var(--dd-
|
|
492
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalMarquee, isStandalone: true, selector: "duck-dev-loader-neobrutal-marquee", ngImport: i0, template: "<div class=\"neo-marquee\" role=\"status\" aria-label=\"Loading\">\n <span class=\"marquee-chip\">SYNC</span>\n <span class=\"marquee-window\">\n <span class=\"marquee-ribbon\">\n <span>LOADING</span>\n <span>LOADING</span>\n <span>LOADING</span>\n </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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-marquee{display:inline-flex;align-items:center;gap:.75rem;padding:.6rem .7rem .6rem .6rem;border:4px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-secondary)}.marquee-chip{flex-shrink:0;padding:.7rem .85rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.14em}.marquee-window{width:132px;overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:999px;background:linear-gradient(90deg,var(--dd-base-accent-yellow) 0 50%,var(--dd-neo-paper) 50% 100%)}.marquee-ribbon{display:inline-flex;align-items:center;gap:1.1rem;padding:.65rem 1rem;min-width:max-content;color:var(--dd-base-600);font-size:.8rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;animation:marquee-slide 1.15s linear infinite}@keyframes marquee-slide{0%{transform:translate(0)}to{transform:translate(-33.333%)}}\n"] });
|
|
493
493
|
}
|
|
494
494
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalMarquee, decorators: [{
|
|
495
495
|
type: Component,
|
|
496
|
-
args: [{ selector: 'duck-dev-loader-neobrutal-marquee', standalone: true, template: "<div class=\"neo-marquee\" role=\"status\" aria-label=\"Loading\">\n <span class=\"marquee-chip\">SYNC</span>\n <span class=\"marquee-window\">\n <span class=\"marquee-ribbon\">\n <span>LOADING</span>\n <span>LOADING</span>\n <span>LOADING</span>\n </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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-marquee{display:inline-flex;align-items:center;gap:.75rem;padding:.6rem .7rem .6rem .6rem;border:4px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-secondary)}.marquee-chip{flex-shrink:0;padding:.7rem .85rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.14em}.marquee-window{width:132px;overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:999px;background:linear-gradient(90deg,var(--dd-base-accent-yellow) 0 50%,var(--dd-
|
|
496
|
+
args: [{ selector: 'duck-dev-loader-neobrutal-marquee', standalone: true, template: "<div class=\"neo-marquee\" role=\"status\" aria-label=\"Loading\">\n <span class=\"marquee-chip\">SYNC</span>\n <span class=\"marquee-window\">\n <span class=\"marquee-ribbon\">\n <span>LOADING</span>\n <span>LOADING</span>\n <span>LOADING</span>\n </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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-marquee{display:inline-flex;align-items:center;gap:.75rem;padding:.6rem .7rem .6rem .6rem;border:4px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-secondary)}.marquee-chip{flex-shrink:0;padding:.7rem .85rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.14em}.marquee-window{width:132px;overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:999px;background:linear-gradient(90deg,var(--dd-base-accent-yellow) 0 50%,var(--dd-neo-paper) 50% 100%)}.marquee-ribbon{display:inline-flex;align-items:center;gap:1.1rem;padding:.65rem 1rem;min-width:max-content;color:var(--dd-base-600);font-size:.8rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;animation:marquee-slide 1.15s linear infinite}@keyframes marquee-slide{0%{transform:translate(0)}to{transform:translate(-33.333%)}}\n"] }]
|
|
497
497
|
}] });
|
|
498
498
|
|
|
499
499
|
class DuckDevTab {
|
|
@@ -659,11 +659,11 @@ class DuckDevInputNeobrutalPoster {
|
|
|
659
659
|
options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
660
660
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
661
661
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalPoster, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
662
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalPoster, isStandalone: true, selector: "duck-dev-input-neobrutal-poster", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<div class=\"neo-poster\">\n <label [for]=\"control\" class=\"neo-poster__label\">{{ label() }}</label>\n\n <div\n class=\"neo-poster__field\"\n [class.neo-poster__field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n >\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-poster-check\">\n <input\n class=\"neo-poster-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\n <label class=\"neo-poster-check__label\" [for]=\"control\">\n <span class=\"neo-poster-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-poster-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-poster__input neo-poster__input_textarea\"\n [class.neo-poster__input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-poster-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-poster__input neo-poster__input_select\"\n [class.neo-poster__input_error]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-poster__input\"\n [class.neo-poster__input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-poster__error\">{{ erMessage }}</div>\n }\n </div>\n</div>\n", styles: [":host{display:block}.neo-poster{display:grid;grid-template-columns:88px 1fr;border:4px solid var(--dd-neo-ink);background:var(--dd-
|
|
662
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalPoster, isStandalone: true, selector: "duck-dev-input-neobrutal-poster", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<div class=\"neo-poster\">\n <label [for]=\"control\" class=\"neo-poster__label\">{{ label() }}</label>\n\n <div\n class=\"neo-poster__field\"\n [class.neo-poster__field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n >\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-poster-check\">\n <input\n class=\"neo-poster-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\n <label class=\"neo-poster-check__label\" [for]=\"control\">\n <span class=\"neo-poster-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-poster-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-poster__input neo-poster__input_textarea\"\n [class.neo-poster__input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-poster-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-poster__input neo-poster__input_select\"\n [class.neo-poster__input_error]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-poster__input\"\n [class.neo-poster__input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-poster__error\">{{ erMessage }}</div>\n }\n </div>\n</div>\n", styles: [":host{display:block}.neo-poster{display:grid;grid-template-columns:88px 1fr;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-poster__label{display:grid;place-items:center;padding:14px 8px;border-right:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}.neo-poster__field{position:relative;padding:12px 12px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-poster__field_checkbox{padding-bottom:32px}.neo-poster__input{width:100%;padding:12px 14px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-100);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700}.neo-poster__input:focus{outline:none;background:var(--dd-neo-paper)}.neo-poster__input::placeholder{color:var(--dd-base-400)}.neo-poster__input_textarea{min-height:136px;resize:vertical}.neo-poster__input_select{appearance:none;padding-right:50px;cursor:pointer}.neo-poster-select{position:relative}.neo-poster-select:after{content:\"GO\";position:absolute;top:50%;right:8px;transform:translateY(-50%);padding:4px 6px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:9px;font-weight:900;letter-spacing:.12em}.neo-poster__input_error{border-color:var(--dd-base-accent-orange)}.neo-poster__error{position:absolute;left:12px;bottom:6px;color:var(--dd-base-accent-orange);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-poster-check__input{display:none}.neo-poster-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-poster-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-100)}.neo-poster-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-poster-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box{background:var(--dd-base-accent-yellow)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box svg{stroke-dashoffset:0}@media(max-width:640px){.neo-poster{grid-template-columns:1fr}.neo-poster__label{writing-mode:horizontal-tb;transform:none;border-right:0;border-bottom:4px solid var(--dd-neo-ink)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
663
663
|
}
|
|
664
664
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalPoster, decorators: [{
|
|
665
665
|
type: Component,
|
|
666
|
-
args: [{ selector: 'duck-dev-input-neobrutal-poster', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<div class=\"neo-poster\">\n <label [for]=\"control\" class=\"neo-poster__label\">{{ label() }}</label>\n\n <div\n class=\"neo-poster__field\"\n [class.neo-poster__field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n >\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-poster-check\">\n <input\n class=\"neo-poster-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\n <label class=\"neo-poster-check__label\" [for]=\"control\">\n <span class=\"neo-poster-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-poster-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-poster__input neo-poster__input_textarea\"\n [class.neo-poster__input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-poster-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-poster__input neo-poster__input_select\"\n [class.neo-poster__input_error]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-poster__input\"\n [class.neo-poster__input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-poster__error\">{{ erMessage }}</div>\n }\n </div>\n</div>\n", styles: [":host{display:block}.neo-poster{display:grid;grid-template-columns:88px 1fr;border:4px solid var(--dd-neo-ink);background:var(--dd-
|
|
666
|
+
args: [{ selector: 'duck-dev-input-neobrutal-poster', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<div class=\"neo-poster\">\n <label [for]=\"control\" class=\"neo-poster__label\">{{ label() }}</label>\n\n <div\n class=\"neo-poster__field\"\n [class.neo-poster__field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n >\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-poster-check\">\n <input\n class=\"neo-poster-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\n <label class=\"neo-poster-check__label\" [for]=\"control\">\n <span class=\"neo-poster-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-poster-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-poster__input neo-poster__input_textarea\"\n [class.neo-poster__input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-poster-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-poster__input neo-poster__input_select\"\n [class.neo-poster__input_error]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-poster__input\"\n [class.neo-poster__input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-poster__error\">{{ erMessage }}</div>\n }\n </div>\n</div>\n", styles: [":host{display:block}.neo-poster{display:grid;grid-template-columns:88px 1fr;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-poster__label{display:grid;place-items:center;padding:14px 8px;border-right:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}.neo-poster__field{position:relative;padding:12px 12px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-poster__field_checkbox{padding-bottom:32px}.neo-poster__input{width:100%;padding:12px 14px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-100);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700}.neo-poster__input:focus{outline:none;background:var(--dd-neo-paper)}.neo-poster__input::placeholder{color:var(--dd-base-400)}.neo-poster__input_textarea{min-height:136px;resize:vertical}.neo-poster__input_select{appearance:none;padding-right:50px;cursor:pointer}.neo-poster-select{position:relative}.neo-poster-select:after{content:\"GO\";position:absolute;top:50%;right:8px;transform:translateY(-50%);padding:4px 6px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:9px;font-weight:900;letter-spacing:.12em}.neo-poster__input_error{border-color:var(--dd-base-accent-orange)}.neo-poster__error{position:absolute;left:12px;bottom:6px;color:var(--dd-base-accent-orange);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-poster-check__input{display:none}.neo-poster-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-poster-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-100)}.neo-poster-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-poster-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box{background:var(--dd-base-accent-yellow)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box svg{stroke-dashoffset:0}@media(max-width:640px){.neo-poster{grid-template-columns:1fr}.neo-poster__label{writing-mode:horizontal-tb;transform:none;border-right:0;border-bottom:4px solid var(--dd-neo-ink)}}\n"] }]
|
|
667
667
|
}], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
|
|
668
668
|
|
|
669
669
|
class DuckDevInputNeobrutalRadio {
|
|
@@ -674,11 +674,11 @@ class DuckDevInputNeobrutalRadio {
|
|
|
674
674
|
options = input.required({ ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
675
675
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
676
676
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
677
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalRadio, isStandalone: true, selector: "duck-dev-input-neobrutal-radio", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n <div class=\"neo-radio__copy\">\n <label class=\"neo-radio__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n }\n </div>\n\n <div\n class=\"neo-radio__group\"\n [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n role=\"radiogroup\"\n [attr.aria-describedby]=\"describedBy\"\n >\n @for (option of options(); track option.value; let index = $index) {\n <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n <input\n class=\"neo-radio__input\"\n type=\"radio\"\n [id]=\"control + '-' + index\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n formControlName=\"{{ control }}\"\n />\n <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n <span class=\"neo-radio__text\">{{ option.label }}</span>\n </label>\n }\n </div>\n\n @if (erMessage) {\n <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-neo-ink);background:var(--dd-
|
|
677
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalRadio, isStandalone: true, selector: "duck-dev-input-neobrutal-radio", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n <div class=\"neo-radio__copy\">\n <label class=\"neo-radio__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n }\n </div>\n\n <div\n class=\"neo-radio__group\"\n [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n role=\"radiogroup\"\n [attr.aria-describedby]=\"describedBy\"\n >\n @for (option of options(); track option.value; let index = $index) {\n <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n <input\n class=\"neo-radio__input\"\n type=\"radio\"\n [id]=\"control + '-' + index\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n formControlName=\"{{ control }}\"\n />\n <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n <span class=\"neo-radio__text\">{{ option.label }}</span>\n </label>\n }\n </div>\n\n @if (erMessage) {\n <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-neo-paper)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,var(--dd-neo-paper));box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-radio__option:hover,.neo-radio__option:has(.neo-radio__input:focus-visible){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-radio__group_error .neo-radio__option{border-color:var(--dd-base-accent-orange)}.neo-radio__option_disabled{opacity:.55;cursor:not-allowed}.neo-radio__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
678
678
|
}
|
|
679
679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalRadio, decorators: [{
|
|
680
680
|
type: Component,
|
|
681
|
-
args: [{ selector: 'duck-dev-input-neobrutal-radio', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n <div class=\"neo-radio__copy\">\n <label class=\"neo-radio__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n }\n </div>\n\n <div\n class=\"neo-radio__group\"\n [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n role=\"radiogroup\"\n [attr.aria-describedby]=\"describedBy\"\n >\n @for (option of options(); track option.value; let index = $index) {\n <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n <input\n class=\"neo-radio__input\"\n type=\"radio\"\n [id]=\"control + '-' + index\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n formControlName=\"{{ control }}\"\n />\n <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n <span class=\"neo-radio__text\">{{ option.label }}</span>\n </label>\n }\n </div>\n\n @if (erMessage) {\n <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-neo-ink);background:var(--dd-
|
|
681
|
+
args: [{ selector: 'duck-dev-input-neobrutal-radio', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n <div class=\"neo-radio__copy\">\n <label class=\"neo-radio__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n }\n </div>\n\n <div\n class=\"neo-radio__group\"\n [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n role=\"radiogroup\"\n [attr.aria-describedby]=\"describedBy\"\n >\n @for (option of options(); track option.value; let index = $index) {\n <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n <input\n class=\"neo-radio__input\"\n type=\"radio\"\n [id]=\"control + '-' + index\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n formControlName=\"{{ control }}\"\n />\n <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n <span class=\"neo-radio__text\">{{ option.label }}</span>\n </label>\n }\n </div>\n\n @if (erMessage) {\n <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-neo-paper)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,var(--dd-neo-paper));box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-radio__option:hover,.neo-radio__option:has(.neo-radio__input:focus-visible){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-radio__group_error .neo-radio__option{border-color:var(--dd-base-accent-orange)}.neo-radio__option_disabled{opacity:.55;cursor:not-allowed}.neo-radio__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}\n"] }]
|
|
682
682
|
}], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
|
|
683
683
|
|
|
684
684
|
class DuckDevInputNeobrutalSlab {
|
|
@@ -691,11 +691,11 @@ class DuckDevInputNeobrutalSlab {
|
|
|
691
691
|
options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
692
692
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
693
693
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
694
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalSlab, isStandalone: true, selector: "duck-dev-input-neobrutal-slab", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n <span>{{ label() }}</span>\n</label>\n\n<div\n class=\"neo-field neo-field_slab\"\n [class.neo-field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-check\">\n <input\n class=\"neo-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\n <label class=\"neo-check__label\" [for]=\"control\">\n <span class=\"neo-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-input neo-input_textarea\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-input neo-input_select\"\n [class.neo-input_error]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-input\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-
|
|
694
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalSlab, isStandalone: true, selector: "duck-dev-input-neobrutal-slab", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n <span>{{ label() }}</span>\n</label>\n\n<div\n class=\"neo-field neo-field_slab\"\n [class.neo-field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-check\">\n <input\n class=\"neo-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\n <label class=\"neo-check__label\" [for]=\"control\">\n <span class=\"neo-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-input neo-input_textarea\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-input neo-input_select\"\n [class.neo-input_error]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-input\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-base-accent-orange);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-neo-paper);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-neo-ink);border-bottom:4px solid var(--dd-neo-ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
695
695
|
}
|
|
696
696
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, decorators: [{
|
|
697
697
|
type: Component,
|
|
698
|
-
args: [{ selector: 'duck-dev-input-neobrutal-slab', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n <span>{{ label() }}</span>\n</label>\n\n<div\n class=\"neo-field neo-field_slab\"\n [class.neo-field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-check\">\n <input\n class=\"neo-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\n <label class=\"neo-check__label\" [for]=\"control\">\n <span class=\"neo-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-input neo-input_textarea\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-input neo-input_select\"\n [class.neo-input_error]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-input\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-
|
|
698
|
+
args: [{ selector: 'duck-dev-input-neobrutal-slab', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n <span>{{ label() }}</span>\n</label>\n\n<div\n class=\"neo-field neo-field_slab\"\n [class.neo-field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-check\">\n <input\n class=\"neo-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\n <label class=\"neo-check__label\" [for]=\"control\">\n <span class=\"neo-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-input neo-input_textarea\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-input neo-input_select\"\n [class.neo-input_error]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-input\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-base-accent-orange);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-neo-paper);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-neo-ink);border-bottom:4px solid var(--dd-neo-ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"] }]
|
|
699
699
|
}], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
|
|
700
700
|
|
|
701
701
|
class DuckDevInputNeobrutalStrip {
|
|
@@ -708,11 +708,11 @@ class DuckDevInputNeobrutalStrip {
|
|
|
708
708
|
options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
709
709
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
710
710
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalStrip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
711
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalStrip, isStandalone: true, selector: "duck-dev-input-neobrutal-strip", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n <span>{{ label() }}</span>\n <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div\n class=\"neo-strip-field\"\n [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-strip-check\">\n <input\n class=\"neo-strip-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\n <label class=\"neo-strip-check__label\" [for]=\"control\">\n <span class=\"neo-strip-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-strip-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input neo-strip-input_textarea\"\n [class.neo-strip-input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-strip-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-strip-input neo-strip-input_select\"\n [class.neo-strip-input_error]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input\"\n [class.neo-strip-input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-strip-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-neo-shadow)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-neo-ink);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-
|
|
711
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalStrip, isStandalone: true, selector: "duck-dev-input-neobrutal-strip", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n <span>{{ label() }}</span>\n <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div\n class=\"neo-strip-field\"\n [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-strip-check\">\n <input\n class=\"neo-strip-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\n <label class=\"neo-strip-check__label\" [for]=\"control\">\n <span class=\"neo-strip-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-strip-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input neo-strip-input_textarea\"\n [class.neo-strip-input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-strip-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-strip-input neo-strip-input_select\"\n [class.neo-strip-input_error]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input\"\n [class.neo-strip-input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-strip-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-neo-shadow)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-neo-ink);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-strip-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-strip-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box{background:var(--dd-base-accent-orange)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box svg{stroke-dashoffset:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
712
712
|
}
|
|
713
713
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalStrip, decorators: [{
|
|
714
714
|
type: Component,
|
|
715
|
-
args: [{ selector: 'duck-dev-input-neobrutal-strip', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n <span>{{ label() }}</span>\n <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div\n class=\"neo-strip-field\"\n [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-strip-check\">\n <input\n class=\"neo-strip-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\n <label class=\"neo-strip-check__label\" [for]=\"control\">\n <span class=\"neo-strip-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-strip-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input neo-strip-input_textarea\"\n [class.neo-strip-input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-strip-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-strip-input neo-strip-input_select\"\n [class.neo-strip-input_error]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input\"\n [class.neo-strip-input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-strip-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-neo-shadow)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-neo-ink);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-
|
|
715
|
+
args: [{ selector: 'duck-dev-input-neobrutal-strip', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n <span>{{ label() }}</span>\n <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div\n class=\"neo-strip-field\"\n [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-strip-check\">\n <input\n class=\"neo-strip-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\n <label class=\"neo-strip-check__label\" [for]=\"control\">\n <span class=\"neo-strip-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-strip-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input neo-strip-input_textarea\"\n [class.neo-strip-input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-strip-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-strip-input neo-strip-input_select\"\n [class.neo-strip-input_error]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input\"\n [class.neo-strip-input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-strip-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-neo-shadow)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-neo-ink);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-strip-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-strip-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box{background:var(--dd-base-accent-orange)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box svg{stroke-dashoffset:0}\n"] }]
|
|
716
716
|
}], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
|
|
717
717
|
|
|
718
718
|
class DuckDevInputNeobrutalToggle {
|
|
@@ -724,11 +724,11 @@ class DuckDevInputNeobrutalToggle {
|
|
|
724
724
|
onLabel = input.required({ ...(ngDevMode ? { debugName: "onLabel" } : {}) });
|
|
725
725
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
726
726
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
727
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalToggle, isStandalone: true, selector: "duck-dev-input-neobrutal-toggle", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: true, transformFunction: null }, onLabel: { classPropertyName: "onLabel", publicName: "onLabel", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let toggleControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-toggle\" [formGroup]=\"formName\">\n <div class=\"neo-toggle__copy\">\n <label [for]=\"control\" class=\"neo-toggle__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-toggle__description\" [id]=\"control + '-description'\">\n {{ description() }}\n </p>\n }\n </div>\n\n <label\n class=\"neo-toggle__switch\"\n [class.neo-toggle__switch_checked]=\"toggleControl?.value\"\n [class.neo-toggle__switch_error]=\"toggleControl?.invalid && toggleControl?.touched\"\n [for]=\"control\"\n >\n <input\n class=\"neo-toggle__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n [attr.aria-describedby]=\"describedBy\"\n />\n\n <span class=\"neo-toggle__rail\" aria-hidden=\"true\">\n <span class=\"neo-toggle__thumb\"></span>\n </span>\n\n <span class=\"neo-toggle__state\">\n <span class=\"neo-toggle__chip neo-toggle__chip_off\">{{ offLabel() }}</span>\n <span class=\"neo-toggle__chip neo-toggle__chip_on\">{{ onLabel() }}</span>\n </span>\n </label>\n\n @if (erMessage) {\n <div class=\"neo-toggle__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-toggle{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-toggle__copy{display:grid;gap:6px}.neo-toggle__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-toggle__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-toggle__switch{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;cursor:pointer}.neo-toggle__input{position:absolute;opacity:0;pointer-events:none}.neo-toggle__rail{position:relative;display:block;width:92px;height:48px;box-sizing:border-box;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:6px 6px 0 var(--dd-base-accent-blue);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-toggle__thumb{position:absolute;top:6px;left:6px;width:28px;height:28px;border:4px solid var(--dd-neo-ink);background:var(--dd-
|
|
727
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalToggle, isStandalone: true, selector: "duck-dev-input-neobrutal-toggle", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: true, transformFunction: null }, onLabel: { classPropertyName: "onLabel", publicName: "onLabel", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let toggleControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-toggle\" [formGroup]=\"formName\">\n <div class=\"neo-toggle__copy\">\n <label [for]=\"control\" class=\"neo-toggle__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-toggle__description\" [id]=\"control + '-description'\">\n {{ description() }}\n </p>\n }\n </div>\n\n <label\n class=\"neo-toggle__switch\"\n [class.neo-toggle__switch_checked]=\"toggleControl?.value\"\n [class.neo-toggle__switch_error]=\"toggleControl?.invalid && toggleControl?.touched\"\n [for]=\"control\"\n >\n <input\n class=\"neo-toggle__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n [attr.aria-describedby]=\"describedBy\"\n />\n\n <span class=\"neo-toggle__rail\" aria-hidden=\"true\">\n <span class=\"neo-toggle__thumb\"></span>\n </span>\n\n <span class=\"neo-toggle__state\">\n <span class=\"neo-toggle__chip neo-toggle__chip_off\">{{ offLabel() }}</span>\n <span class=\"neo-toggle__chip neo-toggle__chip_on\">{{ onLabel() }}</span>\n </span>\n </label>\n\n @if (erMessage) {\n <div class=\"neo-toggle__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-toggle{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-toggle__copy{display:grid;gap:6px}.neo-toggle__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-toggle__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-toggle__switch{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;cursor:pointer}.neo-toggle__input{position:absolute;opacity:0;pointer-events:none}.neo-toggle__rail{position:relative;display:block;width:92px;height:48px;box-sizing:border-box;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:6px 6px 0 var(--dd-base-accent-blue);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-toggle__thumb{position:absolute;top:6px;left:6px;width:28px;height:28px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);transition:transform .18s ease}.neo-toggle__state{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.neo-toggle__chip{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px 4px;border:3px solid var(--dd-neo-ink);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase}.neo-toggle__chip_off{background:var(--dd-neo-paper)}.neo-toggle__chip_on{background:var(--dd-base-accent-green)}.neo-toggle__switch_checked .neo-toggle__rail{background:var(--dd-base-accent-green);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_checked .neo-toggle__thumb{transform:translate(36px)}.neo-toggle__switch:hover .neo-toggle__rail,.neo-toggle__input:focus-visible+.neo-toggle__rail{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_error .neo-toggle__rail{border-color:var(--dd-base-accent-orange)}.neo-toggle__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}@media(max-width:640px){.neo-toggle__switch{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
728
728
|
}
|
|
729
729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalToggle, decorators: [{
|
|
730
730
|
type: Component,
|
|
731
|
-
args: [{ selector: 'duck-dev-input-neobrutal-toggle', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let toggleControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-toggle\" [formGroup]=\"formName\">\n <div class=\"neo-toggle__copy\">\n <label [for]=\"control\" class=\"neo-toggle__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-toggle__description\" [id]=\"control + '-description'\">\n {{ description() }}\n </p>\n }\n </div>\n\n <label\n class=\"neo-toggle__switch\"\n [class.neo-toggle__switch_checked]=\"toggleControl?.value\"\n [class.neo-toggle__switch_error]=\"toggleControl?.invalid && toggleControl?.touched\"\n [for]=\"control\"\n >\n <input\n class=\"neo-toggle__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n [attr.aria-describedby]=\"describedBy\"\n />\n\n <span class=\"neo-toggle__rail\" aria-hidden=\"true\">\n <span class=\"neo-toggle__thumb\"></span>\n </span>\n\n <span class=\"neo-toggle__state\">\n <span class=\"neo-toggle__chip neo-toggle__chip_off\">{{ offLabel() }}</span>\n <span class=\"neo-toggle__chip neo-toggle__chip_on\">{{ onLabel() }}</span>\n </span>\n </label>\n\n @if (erMessage) {\n <div class=\"neo-toggle__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-toggle{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-toggle__copy{display:grid;gap:6px}.neo-toggle__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-toggle__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-toggle__switch{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;cursor:pointer}.neo-toggle__input{position:absolute;opacity:0;pointer-events:none}.neo-toggle__rail{position:relative;display:block;width:92px;height:48px;box-sizing:border-box;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:6px 6px 0 var(--dd-base-accent-blue);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-toggle__thumb{position:absolute;top:6px;left:6px;width:28px;height:28px;border:4px solid var(--dd-neo-ink);background:var(--dd-
|
|
731
|
+
args: [{ selector: 'duck-dev-input-neobrutal-toggle', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let toggleControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-toggle\" [formGroup]=\"formName\">\n <div class=\"neo-toggle__copy\">\n <label [for]=\"control\" class=\"neo-toggle__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-toggle__description\" [id]=\"control + '-description'\">\n {{ description() }}\n </p>\n }\n </div>\n\n <label\n class=\"neo-toggle__switch\"\n [class.neo-toggle__switch_checked]=\"toggleControl?.value\"\n [class.neo-toggle__switch_error]=\"toggleControl?.invalid && toggleControl?.touched\"\n [for]=\"control\"\n >\n <input\n class=\"neo-toggle__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n [attr.aria-describedby]=\"describedBy\"\n />\n\n <span class=\"neo-toggle__rail\" aria-hidden=\"true\">\n <span class=\"neo-toggle__thumb\"></span>\n </span>\n\n <span class=\"neo-toggle__state\">\n <span class=\"neo-toggle__chip neo-toggle__chip_off\">{{ offLabel() }}</span>\n <span class=\"neo-toggle__chip neo-toggle__chip_on\">{{ onLabel() }}</span>\n </span>\n </label>\n\n @if (erMessage) {\n <div class=\"neo-toggle__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-toggle{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-toggle__copy{display:grid;gap:6px}.neo-toggle__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-toggle__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-toggle__switch{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;cursor:pointer}.neo-toggle__input{position:absolute;opacity:0;pointer-events:none}.neo-toggle__rail{position:relative;display:block;width:92px;height:48px;box-sizing:border-box;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:6px 6px 0 var(--dd-base-accent-blue);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-toggle__thumb{position:absolute;top:6px;left:6px;width:28px;height:28px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);transition:transform .18s ease}.neo-toggle__state{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.neo-toggle__chip{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px 4px;border:3px solid var(--dd-neo-ink);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase}.neo-toggle__chip_off{background:var(--dd-neo-paper)}.neo-toggle__chip_on{background:var(--dd-base-accent-green)}.neo-toggle__switch_checked .neo-toggle__rail{background:var(--dd-base-accent-green);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_checked .neo-toggle__thumb{transform:translate(36px)}.neo-toggle__switch:hover .neo-toggle__rail,.neo-toggle__input:focus-visible+.neo-toggle__rail{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_error .neo-toggle__rail{border-color:var(--dd-base-accent-orange)}.neo-toggle__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}@media(max-width:640px){.neo-toggle__switch{grid-template-columns:1fr}}\n"] }]
|
|
732
732
|
}], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: true }] }], onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: true }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
|
|
733
733
|
|
|
734
734
|
const duckDevDockMedium = `
|
|
@@ -2550,11 +2550,11 @@ class DuckDevAccordionNeobrutalComponent {
|
|
|
2550
2550
|
this.isOpen.update((prev) => !prev);
|
|
2551
2551
|
}
|
|
2552
2552
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2553
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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]=\"ariaLabel()\"\n (click)=\"toggle()\"\n >\n @if (titleTemplate(); as headerTemplate) {\n <span class=\"dd-accordion-brutal__custom-header\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" />\n </span>\n } @else {\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\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\n class=\"dd-accordion-brutal__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\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-neo-ink);--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-
|
|
2553
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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]=\"ariaLabel()\"\n (click)=\"toggle()\"\n >\n @if (titleTemplate(); as headerTemplate) {\n <span class=\"dd-accordion-brutal__custom-header\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" />\n </span>\n } @else {\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\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\n class=\"dd-accordion-brutal__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\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-neo-ink);--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-neo-paper);box-shadow:4px 4px 0 var(--dd-accordion-brutal-accent);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)}:host-context([ddTheme=dark]) .dd-accordion-brutal__stamp{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.dd-accordion-brutal__headline{display:grid;gap:8px;min-width:0}.dd-accordion-brutal__custom-header{display:block;grid-column:1/-2;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-accordion-brutal-bg));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-neo-paper);box-shadow:4px 4px 0 var(--dd-accordion-brutal-accent);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-neo-paper));box-shadow:2px 2px 0 var(--dd-accordion-brutal-accent)}:host-context([ddTheme=dark]) .dd-accordion-brutal__action{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.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:var(--dd-accordion-brutal-shadow)}.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 });
|
|
2554
2554
|
}
|
|
2555
2555
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, decorators: [{
|
|
2556
2556
|
type: Component,
|
|
2557
|
-
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]=\"ariaLabel()\"\n (click)=\"toggle()\"\n >\n @if (titleTemplate(); as headerTemplate) {\n <span class=\"dd-accordion-brutal__custom-header\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" />\n </span>\n } @else {\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\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\n class=\"dd-accordion-brutal__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\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-neo-ink);--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-
|
|
2557
|
+
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]=\"ariaLabel()\"\n (click)=\"toggle()\"\n >\n @if (titleTemplate(); as headerTemplate) {\n <span class=\"dd-accordion-brutal__custom-header\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" />\n </span>\n } @else {\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\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\n class=\"dd-accordion-brutal__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\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-neo-ink);--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-neo-paper);box-shadow:4px 4px 0 var(--dd-accordion-brutal-accent);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)}:host-context([ddTheme=dark]) .dd-accordion-brutal__stamp{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.dd-accordion-brutal__headline{display:grid;gap:8px;min-width:0}.dd-accordion-brutal__custom-header{display:block;grid-column:1/-2;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-accordion-brutal-bg));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-neo-paper);box-shadow:4px 4px 0 var(--dd-accordion-brutal-accent);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-neo-paper));box-shadow:2px 2px 0 var(--dd-accordion-brutal-accent)}:host-context([ddTheme=dark]) .dd-accordion-brutal__action{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.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:var(--dd-accordion-brutal-shadow)}.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"] }]
|
|
2558
2558
|
}], 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 }] }] } });
|
|
2559
2559
|
|
|
2560
2560
|
class DuckDevAccordionNeobrutalTapeComponent {
|
|
@@ -2567,11 +2567,11 @@ class DuckDevAccordionNeobrutalTapeComponent {
|
|
|
2567
2567
|
this.isOpen.update((prev) => !prev);
|
|
2568
2568
|
}
|
|
2569
2569
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2570
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevAccordionNeobrutalTapeComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal-tape", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-tape__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"title()\"\n (click)=\"toggle()\"\n >\n <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n <span class=\"dd-accordion-tape__title-area\">\n <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </span>\n\n <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n </button>\n\n <div\n class=\"dd-accordion-tape__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\n <div class=\"dd-accordion-tape__body-frame\">\n <div class=\"dd-accordion-tape__body-content\">\n <ng-container [ngTemplateOutlet]=\"content()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [".dd-accordion-tape{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange);--dd-tape-border: var(--dd-neo-ink);--dd-tape-text: var(--dd-base-600);--dd-tape-shadow: 4px 4px 0 var(--dd-
|
|
2570
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevAccordionNeobrutalTapeComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal-tape", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-tape__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"title()\"\n (click)=\"toggle()\"\n >\n <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n <span class=\"dd-accordion-tape__title-area\">\n <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </span>\n\n <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n </button>\n\n <div\n class=\"dd-accordion-tape__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\n <div class=\"dd-accordion-tape__body-frame\">\n <div class=\"dd-accordion-tape__body-content\">\n <ng-container [ngTemplateOutlet]=\"content()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [".dd-accordion-tape{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange);--dd-tape-border: var(--dd-neo-ink);--dd-tape-text: var(--dd-base-600);--dd-tape-shadow: 4px 4px 0 var(--dd-tape-accent);--dd-tape-body-shadow: 4px 4px 0 var(--dd-tape-accent);display:block;position:relative}.dd-accordion-tape[data-color=violet]{--dd-tape-accent: var(--dd-base-secondary);--dd-tape-bg: color-mix(in srgb, var(--dd-base-secondary) 20%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-secondary)}.dd-accordion-tape[data-color=orange]{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange)}.dd-accordion-tape[data-color=gray]{--dd-tape-accent: var(--dd-base-500);--dd-tape-bg: var(--dd-base-200);--dd-tape-stripe: var(--dd-base-400)}.dd-accordion-tape[data-color=dark]{--dd-tape-accent: var(--dd-base-accent-yellow);--dd-tape-bg: var(--dd-base-600);--dd-tape-stripe: var(--dd-base-500);--dd-tape-text: var(--dd-base-0);--dd-tape-border: var(--dd-neo-ink)}.dd-accordion-tape[data-color=white]{--dd-tape-accent: var(--dd-base-accent-blue);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-blue) 12%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-blue)}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-tape-bg);border:3px solid var(--dd-tape-border);cursor:pointer;color:var(--dd-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:var(--dd-tape-shadow);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__header:hover{transform:rotate(-.8deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--dd-tape-accent)}.dd-accordion-tape.is-open .dd-accordion-tape__header{transform:rotate(-.4deg)}.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{display:block;width:28px;flex-shrink:0}.dd-accordion-tape__stripe-left{background:repeating-linear-gradient(-45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-tape-border)}.dd-accordion-tape__title-area{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;min-width:0}.dd-accordion-tape__title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-wrap:balance}.dd-accordion-tape__action{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;transition:transform .38s cubic-bezier(.22,1.2,.36,1)}.dd-accordion-tape__action.is-open{transform:rotate(90deg)}.dd-accordion-tape__body-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1)}.dd-accordion-tape__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-tape__body-frame{min-height:0;overflow:hidden}.dd-accordion-tape__body-content{border:3px solid var(--dd-tape-border);border-top:none;background:var(--dd-neo-paper);padding:0 20px;margin-top:-2px;position:relative;box-shadow:var(--dd-tape-body-shadow);opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__body-content:before{content:\"\";position:absolute;top:0;left:16px;right:16px;height:3px;background:repeating-linear-gradient(90deg,var(--dd-tape-stripe) 0 6px,transparent 6px 12px)}.dd-accordion-tape__body-shell.is-open .dd-accordion-tape__body-content{padding-top:18px;padding-bottom:18px;opacity:1;transform:translateY(0);transition-delay:40ms,0ms,0ms}.dd-accordion-tape__body-content :first-child{margin-top:0}.dd-accordion-tape__body-content :last-child{margin-bottom:0}:host-context([ddTheme=dark]) .dd-accordion-tape__body-content{background:var(--dd-base-100)}@media(max-width:640px){.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{width:20px}.dd-accordion-tape__title{font-size:14px}.dd-accordion-tape__title-area{padding:12px 10px}.dd-accordion-tape__body-content{padding-left:16px;padding-right:16px}}\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 });
|
|
2571
2571
|
}
|
|
2572
2572
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, decorators: [{
|
|
2573
2573
|
type: Component,
|
|
2574
|
-
args: [{ selector: 'duck-dev-accordion-neobrutal-tape', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-tape__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"title()\"\n (click)=\"toggle()\"\n >\n <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n <span class=\"dd-accordion-tape__title-area\">\n <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </span>\n\n <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n </button>\n\n <div\n class=\"dd-accordion-tape__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\n <div class=\"dd-accordion-tape__body-frame\">\n <div class=\"dd-accordion-tape__body-content\">\n <ng-container [ngTemplateOutlet]=\"content()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [".dd-accordion-tape{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange);--dd-tape-border: var(--dd-neo-ink);--dd-tape-text: var(--dd-base-600);--dd-tape-shadow: 4px 4px 0 var(--dd-
|
|
2574
|
+
args: [{ selector: 'duck-dev-accordion-neobrutal-tape', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-tape__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"title()\"\n (click)=\"toggle()\"\n >\n <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n <span class=\"dd-accordion-tape__title-area\">\n <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </span>\n\n <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n </button>\n\n <div\n class=\"dd-accordion-tape__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\n <div class=\"dd-accordion-tape__body-frame\">\n <div class=\"dd-accordion-tape__body-content\">\n <ng-container [ngTemplateOutlet]=\"content()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [".dd-accordion-tape{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange);--dd-tape-border: var(--dd-neo-ink);--dd-tape-text: var(--dd-base-600);--dd-tape-shadow: 4px 4px 0 var(--dd-tape-accent);--dd-tape-body-shadow: 4px 4px 0 var(--dd-tape-accent);display:block;position:relative}.dd-accordion-tape[data-color=violet]{--dd-tape-accent: var(--dd-base-secondary);--dd-tape-bg: color-mix(in srgb, var(--dd-base-secondary) 20%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-secondary)}.dd-accordion-tape[data-color=orange]{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange)}.dd-accordion-tape[data-color=gray]{--dd-tape-accent: var(--dd-base-500);--dd-tape-bg: var(--dd-base-200);--dd-tape-stripe: var(--dd-base-400)}.dd-accordion-tape[data-color=dark]{--dd-tape-accent: var(--dd-base-accent-yellow);--dd-tape-bg: var(--dd-base-600);--dd-tape-stripe: var(--dd-base-500);--dd-tape-text: var(--dd-base-0);--dd-tape-border: var(--dd-neo-ink)}.dd-accordion-tape[data-color=white]{--dd-tape-accent: var(--dd-base-accent-blue);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-blue) 12%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-blue)}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-tape-bg);border:3px solid var(--dd-tape-border);cursor:pointer;color:var(--dd-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:var(--dd-tape-shadow);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__header:hover{transform:rotate(-.8deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--dd-tape-accent)}.dd-accordion-tape.is-open .dd-accordion-tape__header{transform:rotate(-.4deg)}.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{display:block;width:28px;flex-shrink:0}.dd-accordion-tape__stripe-left{background:repeating-linear-gradient(-45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-tape-border)}.dd-accordion-tape__title-area{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;min-width:0}.dd-accordion-tape__title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-wrap:balance}.dd-accordion-tape__action{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;transition:transform .38s cubic-bezier(.22,1.2,.36,1)}.dd-accordion-tape__action.is-open{transform:rotate(90deg)}.dd-accordion-tape__body-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1)}.dd-accordion-tape__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-tape__body-frame{min-height:0;overflow:hidden}.dd-accordion-tape__body-content{border:3px solid var(--dd-tape-border);border-top:none;background:var(--dd-neo-paper);padding:0 20px;margin-top:-2px;position:relative;box-shadow:var(--dd-tape-body-shadow);opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__body-content:before{content:\"\";position:absolute;top:0;left:16px;right:16px;height:3px;background:repeating-linear-gradient(90deg,var(--dd-tape-stripe) 0 6px,transparent 6px 12px)}.dd-accordion-tape__body-shell.is-open .dd-accordion-tape__body-content{padding-top:18px;padding-bottom:18px;opacity:1;transform:translateY(0);transition-delay:40ms,0ms,0ms}.dd-accordion-tape__body-content :first-child{margin-top:0}.dd-accordion-tape__body-content :last-child{margin-bottom:0}:host-context([ddTheme=dark]) .dd-accordion-tape__body-content{background:var(--dd-base-100)}@media(max-width:640px){.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{width:20px}.dd-accordion-tape__title{font-size:14px}.dd-accordion-tape__title-area{padding:12px 10px}.dd-accordion-tape__body-content{padding-left:16px;padding-right:16px}}\n"] }]
|
|
2575
2575
|
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
2576
2576
|
|
|
2577
2577
|
class SliderClassic {
|
|
@@ -3047,11 +3047,11 @@ class DuckDevCardNeobrutalSlab {
|
|
|
3047
3047
|
return Math.min(Math.max(value, min), max);
|
|
3048
3048
|
}
|
|
3049
3049
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3050
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalSlab, isStandalone: true, selector: "dd-card-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strapLabel: { classPropertyName: "strapLabel", publicName: "strapLabel", isSignal: true, isRequired: true, transformFunction: null }, swipeable: { classPropertyName: "swipeable", publicName: "swipeable", isSignal: true, isRequired: false, transformFunction: null }, swipeThreshold: { classPropertyName: "swipeThreshold", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { swipedLeft: "swipedLeft", swipedRight: "swipedRight" }, ngImport: i0, template: "<article\n class=\"dd-card-neo-slab\"\n [class.dd-card-neo-slab--dragging]=\"isDragging()\"\n [class.dd-card-neo-slab--swipeable]=\"swipeable()\"\n [ngStyle]=\"cardStyle()\"\n [style.cursor]=\"cursorStyle()\"\n [style.touch-action]=\"touchActionStyle()\"\n [style.transform]=\"transformStyle()\"\n [style.transition]=\"dragTransition()\"\n (pointercancel)=\"onPointerCancel($event)\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n>\n <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n <div class=\"dd-card-neo-slab__panel\">\n <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n <div class=\"dd-card-neo-slab__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);transform-origin:center bottom;will-change:transform}.dd-card-neo-slab.dd-card-neo-slab--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-slab.dd-card-neo-slab--dragging{z-index:1}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-shadow);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3050
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalSlab, isStandalone: true, selector: "dd-card-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strapLabel: { classPropertyName: "strapLabel", publicName: "strapLabel", isSignal: true, isRequired: true, transformFunction: null }, swipeable: { classPropertyName: "swipeable", publicName: "swipeable", isSignal: true, isRequired: false, transformFunction: null }, swipeThreshold: { classPropertyName: "swipeThreshold", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { swipedLeft: "swipedLeft", swipedRight: "swipedRight" }, ngImport: i0, template: "<article\n class=\"dd-card-neo-slab\"\n [class.dd-card-neo-slab--dragging]=\"isDragging()\"\n [class.dd-card-neo-slab--swipeable]=\"swipeable()\"\n [ngStyle]=\"cardStyle()\"\n [style.cursor]=\"cursorStyle()\"\n [style.touch-action]=\"touchActionStyle()\"\n [style.transform]=\"transformStyle()\"\n [style.transition]=\"dragTransition()\"\n (pointercancel)=\"onPointerCancel($event)\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n>\n <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n <div class=\"dd-card-neo-slab__panel\">\n <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n <div class=\"dd-card-neo-slab__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);transform-origin:center bottom;will-change:transform}.dd-card-neo-slab.dd-card-neo-slab--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-slab.dd-card-neo-slab--dragging{z-index:1}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3051
3051
|
}
|
|
3052
3052
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalSlab, decorators: [{
|
|
3053
3053
|
type: Component,
|
|
3054
|
-
args: [{ selector: 'dd-card-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<article\n class=\"dd-card-neo-slab\"\n [class.dd-card-neo-slab--dragging]=\"isDragging()\"\n [class.dd-card-neo-slab--swipeable]=\"swipeable()\"\n [ngStyle]=\"cardStyle()\"\n [style.cursor]=\"cursorStyle()\"\n [style.touch-action]=\"touchActionStyle()\"\n [style.transform]=\"transformStyle()\"\n [style.transition]=\"dragTransition()\"\n (pointercancel)=\"onPointerCancel($event)\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n>\n <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n <div class=\"dd-card-neo-slab__panel\">\n <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n <div class=\"dd-card-neo-slab__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);transform-origin:center bottom;will-change:transform}.dd-card-neo-slab.dd-card-neo-slab--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-slab.dd-card-neo-slab--dragging{z-index:1}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-shadow);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"] }]
|
|
3054
|
+
args: [{ selector: 'dd-card-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<article\n class=\"dd-card-neo-slab\"\n [class.dd-card-neo-slab--dragging]=\"isDragging()\"\n [class.dd-card-neo-slab--swipeable]=\"swipeable()\"\n [ngStyle]=\"cardStyle()\"\n [style.cursor]=\"cursorStyle()\"\n [style.touch-action]=\"touchActionStyle()\"\n [style.transform]=\"transformStyle()\"\n [style.transition]=\"dragTransition()\"\n (pointercancel)=\"onPointerCancel($event)\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n>\n <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n <div class=\"dd-card-neo-slab__panel\">\n <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n <div class=\"dd-card-neo-slab__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);transform-origin:center bottom;will-change:transform}.dd-card-neo-slab.dd-card-neo-slab--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-slab.dd-card-neo-slab--dragging{z-index:1}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"] }]
|
|
3055
3055
|
}], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "strapLabel", required: true }] }], swipeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeable", required: false }] }], swipeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeThreshold", required: false }] }], swipedLeft: [{ type: i0.Output, args: ["swipedLeft"] }], swipedRight: [{ type: i0.Output, args: ["swipedRight"] }] } });
|
|
3056
3056
|
|
|
3057
3057
|
class DuckDevCardNeobrutalStamp {
|
|
@@ -3061,11 +3061,11 @@ class DuckDevCardNeobrutalStamp {
|
|
|
3061
3061
|
sealLabel = input.required({ ...(ngDevMode ? { debugName: "sealLabel" } : {}) });
|
|
3062
3062
|
cardStyle = computed(() => getNeobrutalCardStyle(this.color()), { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
|
|
3063
3063
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3064
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalStamp, isStandalone: true, selector: "dd-card-neobrutal-stamp", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, chromeStart: { classPropertyName: "chromeStart", publicName: "chromeStart", isSignal: true, isRequired: true, transformFunction: null }, chromeEnd: { classPropertyName: "chromeEnd", publicName: "chromeEnd", isSignal: true, isRequired: true, transformFunction: null }, sealLabel: { classPropertyName: "sealLabel", publicName: "sealLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-stamp\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-stamp__chrome\" aria-hidden=\"true\">\n <span>{{ chromeStart() }}</span>\n <span>{{ chromeEnd() }}</span>\n </div>\n\n <div class=\"dd-card-neo-stamp__body\">\n <div class=\"dd-card-neo-stamp__seal\" aria-hidden=\"true\">{{ sealLabel() }}</div>\n <div class=\"dd-card-neo-stamp__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-stamp{display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-stamp__chrome{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase}.dd-card-neo-stamp__body{position:relative;padding:22px;background:linear-gradient(45deg,color-mix(in srgb,var(--dd-neo-card-accent) 18%,transparent) 0 12%,transparent 12% 100%),repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--dd-neo-card-border) 6%,transparent) 12px 14px),var(--dd-neo-card-panel)}.dd-card-neo-stamp__seal{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface);box-shadow:4px 4px 0 var(--dd-neo-shadow);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(14deg)}.dd-card-neo-stamp__content{max-width:calc(100% - 92px);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-stamp__content :first-child{margin-top:0}.dd-card-neo-stamp__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-stamp{box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-stamp__body{padding-top:96px}.dd-card-neo-stamp__seal{top:16px;left:16px;right:auto}.dd-card-neo-stamp__content{max-width:100%}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3064
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalStamp, isStandalone: true, selector: "dd-card-neobrutal-stamp", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, chromeStart: { classPropertyName: "chromeStart", publicName: "chromeStart", isSignal: true, isRequired: true, transformFunction: null }, chromeEnd: { classPropertyName: "chromeEnd", publicName: "chromeEnd", isSignal: true, isRequired: true, transformFunction: null }, sealLabel: { classPropertyName: "sealLabel", publicName: "sealLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-stamp\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-stamp__chrome\" aria-hidden=\"true\">\n <span>{{ chromeStart() }}</span>\n <span>{{ chromeEnd() }}</span>\n </div>\n\n <div class=\"dd-card-neo-stamp__body\">\n <div class=\"dd-card-neo-stamp__seal\" aria-hidden=\"true\">{{ sealLabel() }}</div>\n <div class=\"dd-card-neo-stamp__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-stamp{display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-stamp__chrome{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase}.dd-card-neo-stamp__body{position:relative;padding:22px;background:linear-gradient(45deg,color-mix(in srgb,var(--dd-neo-card-accent) 18%,transparent) 0 12%,transparent 12% 100%),repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--dd-neo-card-border) 6%,transparent) 12px 14px),var(--dd-neo-card-panel)}.dd-card-neo-stamp__seal{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(14deg)}.dd-card-neo-stamp__content{max-width:calc(100% - 92px);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-stamp__content :first-child{margin-top:0}.dd-card-neo-stamp__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-stamp{box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-stamp__body{padding-top:96px}.dd-card-neo-stamp__seal{top:16px;left:16px;right:auto}.dd-card-neo-stamp__content{max-width:100%}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3065
3065
|
}
|
|
3066
3066
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalStamp, decorators: [{
|
|
3067
3067
|
type: Component,
|
|
3068
|
-
args: [{ selector: 'dd-card-neobrutal-stamp', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-stamp\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-stamp__chrome\" aria-hidden=\"true\">\n <span>{{ chromeStart() }}</span>\n <span>{{ chromeEnd() }}</span>\n </div>\n\n <div class=\"dd-card-neo-stamp__body\">\n <div class=\"dd-card-neo-stamp__seal\" aria-hidden=\"true\">{{ sealLabel() }}</div>\n <div class=\"dd-card-neo-stamp__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-stamp{display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-stamp__chrome{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase}.dd-card-neo-stamp__body{position:relative;padding:22px;background:linear-gradient(45deg,color-mix(in srgb,var(--dd-neo-card-accent) 18%,transparent) 0 12%,transparent 12% 100%),repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--dd-neo-card-border) 6%,transparent) 12px 14px),var(--dd-neo-card-panel)}.dd-card-neo-stamp__seal{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface);box-shadow:4px 4px 0 var(--dd-neo-shadow);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(14deg)}.dd-card-neo-stamp__content{max-width:calc(100% - 92px);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-stamp__content :first-child{margin-top:0}.dd-card-neo-stamp__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-stamp{box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-stamp__body{padding-top:96px}.dd-card-neo-stamp__seal{top:16px;left:16px;right:auto}.dd-card-neo-stamp__content{max-width:100%}}\n"] }]
|
|
3068
|
+
args: [{ selector: 'dd-card-neobrutal-stamp', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-stamp\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-stamp__chrome\" aria-hidden=\"true\">\n <span>{{ chromeStart() }}</span>\n <span>{{ chromeEnd() }}</span>\n </div>\n\n <div class=\"dd-card-neo-stamp__body\">\n <div class=\"dd-card-neo-stamp__seal\" aria-hidden=\"true\">{{ sealLabel() }}</div>\n <div class=\"dd-card-neo-stamp__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-stamp{display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-stamp__chrome{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase}.dd-card-neo-stamp__body{position:relative;padding:22px;background:linear-gradient(45deg,color-mix(in srgb,var(--dd-neo-card-accent) 18%,transparent) 0 12%,transparent 12% 100%),repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--dd-neo-card-border) 6%,transparent) 12px 14px),var(--dd-neo-card-panel)}.dd-card-neo-stamp__seal{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(14deg)}.dd-card-neo-stamp__content{max-width:calc(100% - 92px);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-stamp__content :first-child{margin-top:0}.dd-card-neo-stamp__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-stamp{box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-stamp__body{padding-top:96px}.dd-card-neo-stamp__seal{top:16px;left:16px;right:auto}.dd-card-neo-stamp__content{max-width:100%}}\n"] }]
|
|
3069
3069
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], chromeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chromeStart", required: true }] }], chromeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "chromeEnd", required: true }] }], sealLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sealLabel", required: true }] }] } });
|
|
3070
3070
|
|
|
3071
3071
|
class DuckDevCardNeobrutalTicket {
|
|
@@ -3283,11 +3283,11 @@ class DuckDevTooltipNeobrutalComponent {
|
|
|
3283
3283
|
this.closeTimer = setTimeout(() => this.open.set(false), delay);
|
|
3284
3284
|
}
|
|
3285
3285
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTooltipNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3286
|
-
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-neo-ink);--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-
|
|
3286
|
+
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-neo-ink);--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-neo-paper);box-shadow:3px 3px 0 var(--dd-tooltip-brutal-shadow);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"] });
|
|
3287
3287
|
}
|
|
3288
3288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTooltipNeobrutalComponent, decorators: [{
|
|
3289
3289
|
type: Component,
|
|
3290
|
-
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-neo-ink);--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-
|
|
3290
|
+
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-neo-ink);--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-neo-paper);box-shadow:3px 3px 0 var(--dd-tooltip-brutal-shadow);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"] }]
|
|
3291
3291
|
}], 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 }] }] } });
|
|
3292
3292
|
|
|
3293
3293
|
class DuckDevModalClassic {
|
|
@@ -3370,11 +3370,11 @@ class DuckDevProgressNeobrutalSlab {
|
|
|
3370
3370
|
color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
3371
3371
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
3372
3372
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3373
|
-
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-
|
|
3373
|
+
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-progress-fill)}.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-progress-panel);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:color-mix(in srgb,var(--dd-progress-panel) 50%,var(--dd-base-200));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-yellow) 32%, 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"] });
|
|
3374
3374
|
}
|
|
3375
3375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
|
|
3376
3376
|
type: Component,
|
|
3377
|
-
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-
|
|
3377
|
+
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-progress-fill)}.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-progress-panel);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:color-mix(in srgb,var(--dd-progress-panel) 50%,var(--dd-base-200));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-yellow) 32%, 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"] }]
|
|
3378
3378
|
}], 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 }] }] } });
|
|
3379
3379
|
|
|
3380
3380
|
class DuckDevProgressNeobrutalStamp {
|
|
@@ -3384,11 +3384,11 @@ class DuckDevProgressNeobrutalStamp {
|
|
|
3384
3384
|
color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
3385
3385
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
3386
3386
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3387
|
-
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:8px 8px 0 var(--dd-
|
|
3387
|
+
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:8px 8px 0 var(--dd-progress-fill)}.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:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200));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"] });
|
|
3388
3388
|
}
|
|
3389
3389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, decorators: [{
|
|
3390
3390
|
type: Component,
|
|
3391
|
-
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:8px 8px 0 var(--dd-
|
|
3391
|
+
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:8px 8px 0 var(--dd-progress-fill)}.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:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200));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"] }]
|
|
3392
3392
|
}], 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 }] }] } });
|
|
3393
3393
|
|
|
3394
3394
|
class DuckDevProgressNeobrutalTicket {
|
|
@@ -3399,11 +3399,11 @@ class DuckDevProgressNeobrutalTicket {
|
|
|
3399
3399
|
color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
3400
3400
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
3401
3401
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3402
|
-
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-
|
|
3402
|
+
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-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.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-neo-paper));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:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200))}.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"] });
|
|
3403
3403
|
}
|
|
3404
3404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, decorators: [{
|
|
3405
3405
|
type: Component,
|
|
3406
|
-
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-
|
|
3406
|
+
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-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.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-neo-paper));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:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200))}.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"] }]
|
|
3407
3407
|
}], 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 }] }] } });
|
|
3408
3408
|
|
|
3409
3409
|
class DuckDevSegmentButton {
|
|
@@ -3668,11 +3668,11 @@ class DuckDevSegmentNeobrutal {
|
|
|
3668
3668
|
}
|
|
3669
3669
|
}
|
|
3670
3670
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3671
|
-
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:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0;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-
|
|
3671
|
+
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:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0;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-segment-neo-accent);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"] }] });
|
|
3672
3672
|
}
|
|
3673
3673
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, decorators: [{
|
|
3674
3674
|
type: Component,
|
|
3675
|
-
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:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0;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-
|
|
3675
|
+
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:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0;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-segment-neo-accent);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"] }]
|
|
3676
3676
|
}], 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: [{
|
|
3677
3677
|
type: ContentChildren,
|
|
3678
3678
|
args: [DuckDevSegmentButton]
|
|
@@ -3791,11 +3791,11 @@ class DuckDevSegmentNeobrutalVertical {
|
|
|
3791
3791
|
}
|
|
3792
3792
|
}
|
|
3793
3793
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutalVertical, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3794
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentNeobrutalVertical, isStandalone: true, selector: "duck-dev-segment-neobrutal-vertical", 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-v\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo-v__indicator-shell\">\n <div\n class=\"dd-segment-neo-v__indicator\"\n [style.transform]=\"'translateY(' + indicatorPosition + 'px)'\"\n [style.height.px]=\"indicatorHeight\"\n >\n <span class=\"dd-segment-neo-v__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo-v__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo-v__button\"\n [class.dd-segment-neo-v__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo-v__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;min-width:220px}.dd-segment-neo-v{--dd-segment-neo-v-surface: var(--dd-base-0);--dd-segment-neo-v-panel: var(--dd-base-100);--dd-segment-neo-v-accent: var(--dd-base-accent-blue);--dd-segment-neo-v-shadow: var(--dd-base-accent-orange);--dd-segment-neo-v-text: var(--dd-base-600);--dd-segment-neo-v-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(160deg,color-mix(in srgb,var(--dd-segment-neo-v-accent) 24%,transparent) 0 8%,transparent 8% 100%),var(--dd-segment-neo-v-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-v-shadow);overflow:clip}.dd-segment-neo-v:before{content:\"\";position:absolute;right:-4px;top:16px;width:8px;height:40px;background:var(--dd-segment-neo-v-accent);border:3px solid var(--dd-neo-ink);border-right:0;z-index:0}.dd-segment-neo-v:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-v-accent);border:3px solid var(--dd-neo-ink);z-index:0;right:20px;bottom:-9px;transform:rotate(12deg)}.dd-segment-neo-v__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo-v__indicator{position:absolute;top:0;left:0;right:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(160deg,color-mix(in srgb,var(--dd-segment-neo-v-accent) 36%,transparent) 0 14%,transparent 14% 100%),var(--dd-segment-neo-v-panel);box-shadow:4px 4px 0 var(--dd-neo-
|
|
3794
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentNeobrutalVertical, isStandalone: true, selector: "duck-dev-segment-neobrutal-vertical", 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-v\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo-v__indicator-shell\">\n <div\n class=\"dd-segment-neo-v__indicator\"\n [style.transform]=\"'translateY(' + indicatorPosition + 'px)'\"\n [style.height.px]=\"indicatorHeight\"\n >\n <span class=\"dd-segment-neo-v__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo-v__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo-v__button\"\n [class.dd-segment-neo-v__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo-v__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;min-width:220px}.dd-segment-neo-v{--dd-segment-neo-v-surface: var(--dd-base-0);--dd-segment-neo-v-panel: var(--dd-base-100);--dd-segment-neo-v-accent: var(--dd-base-accent-blue);--dd-segment-neo-v-shadow: var(--dd-base-accent-orange);--dd-segment-neo-v-text: var(--dd-base-600);--dd-segment-neo-v-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(160deg,color-mix(in srgb,var(--dd-segment-neo-v-accent) 24%,transparent) 0 8%,transparent 8% 100%),var(--dd-segment-neo-v-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-v-shadow);overflow:clip}.dd-segment-neo-v:before{content:\"\";position:absolute;right:-4px;top:16px;width:8px;height:40px;background:var(--dd-segment-neo-v-accent);border:3px solid var(--dd-neo-ink);border-right:0;z-index:0}.dd-segment-neo-v:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-v-accent);border:3px solid var(--dd-neo-ink);z-index:0;right:20px;bottom:-9px;transform:rotate(12deg)}.dd-segment-neo-v__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo-v__indicator{position:absolute;top:0;left:0;right:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(160deg,color-mix(in srgb,var(--dd-segment-neo-v-accent) 36%,transparent) 0 14%,transparent 14% 100%),var(--dd-segment-neo-v-panel);box-shadow:4px 4px 0 var(--dd-segment-neo-v-accent);transition:transform .3s cubic-bezier(.22,1,.36,1),height .3s cubic-bezier(.22,1,.36,1)}.dd-segment-neo-v__indicator-notch{position:absolute;top:14px;left:-3px;width:16px;height:16px;border-right:3px solid var(--dd-neo-ink);border-top:3px solid var(--dd-neo-ink);background:var(--dd-segment-neo-v-accent)}.dd-segment-neo-v__buttons{position:relative;z-index:2;display:flex;flex-direction:column;width:100%;gap:6px}.dd-segment-neo-v__button{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:56px;padding:14px 20px;border:0;background:transparent;color:var(--dd-segment-neo-v-muted);cursor:pointer;text-align:left;font:inherit;width:100%;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo-v__button:hover{transform:translate(3px)}.dd-segment-neo-v__button:focus-visible{outline:3px solid var(--dd-segment-neo-v-accent);outline-offset:-3px}.dd-segment-neo-v__button-copy{position:relative;display:inline-flex;align-items:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.12em;line-height:1.3;text-transform:uppercase;text-wrap:balance}.dd-segment-neo-v__button--checked{color:var(--dd-segment-neo-v-text)}@media(max-width:640px){:host{min-width:180px}.dd-segment-neo-v{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-v-shadow)}.dd-segment-neo-v__indicator-shell{inset:8px}.dd-segment-neo-v__buttons{gap:2px}.dd-segment-neo-v__button{min-height:48px;padding:10px 16px}.dd-segment-neo-v__button-copy{font-size:.72rem;letter-spacing:.1em}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3795
3795
|
}
|
|
3796
3796
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutalVertical, decorators: [{
|
|
3797
3797
|
type: Component,
|
|
3798
|
-
args: [{ selector: 'duck-dev-segment-neobrutal-vertical', imports: [NgTemplateOutlet, NgStyle], template: "<div class=\"dd-segment-neo-v\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo-v__indicator-shell\">\n <div\n class=\"dd-segment-neo-v__indicator\"\n [style.transform]=\"'translateY(' + indicatorPosition + 'px)'\"\n [style.height.px]=\"indicatorHeight\"\n >\n <span class=\"dd-segment-neo-v__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo-v__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo-v__button\"\n [class.dd-segment-neo-v__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo-v__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;min-width:220px}.dd-segment-neo-v{--dd-segment-neo-v-surface: var(--dd-base-0);--dd-segment-neo-v-panel: var(--dd-base-100);--dd-segment-neo-v-accent: var(--dd-base-accent-blue);--dd-segment-neo-v-shadow: var(--dd-base-accent-orange);--dd-segment-neo-v-text: var(--dd-base-600);--dd-segment-neo-v-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(160deg,color-mix(in srgb,var(--dd-segment-neo-v-accent) 24%,transparent) 0 8%,transparent 8% 100%),var(--dd-segment-neo-v-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-v-shadow);overflow:clip}.dd-segment-neo-v:before{content:\"\";position:absolute;right:-4px;top:16px;width:8px;height:40px;background:var(--dd-segment-neo-v-accent);border:3px solid var(--dd-neo-ink);border-right:0;z-index:0}.dd-segment-neo-v:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-v-accent);border:3px solid var(--dd-neo-ink);z-index:0;right:20px;bottom:-9px;transform:rotate(12deg)}.dd-segment-neo-v__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo-v__indicator{position:absolute;top:0;left:0;right:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(160deg,color-mix(in srgb,var(--dd-segment-neo-v-accent) 36%,transparent) 0 14%,transparent 14% 100%),var(--dd-segment-neo-v-panel);box-shadow:4px 4px 0 var(--dd-neo-
|
|
3798
|
+
args: [{ selector: 'duck-dev-segment-neobrutal-vertical', imports: [NgTemplateOutlet, NgStyle], template: "<div class=\"dd-segment-neo-v\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo-v__indicator-shell\">\n <div\n class=\"dd-segment-neo-v__indicator\"\n [style.transform]=\"'translateY(' + indicatorPosition + 'px)'\"\n [style.height.px]=\"indicatorHeight\"\n >\n <span class=\"dd-segment-neo-v__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo-v__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo-v__button\"\n [class.dd-segment-neo-v__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo-v__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;min-width:220px}.dd-segment-neo-v{--dd-segment-neo-v-surface: var(--dd-base-0);--dd-segment-neo-v-panel: var(--dd-base-100);--dd-segment-neo-v-accent: var(--dd-base-accent-blue);--dd-segment-neo-v-shadow: var(--dd-base-accent-orange);--dd-segment-neo-v-text: var(--dd-base-600);--dd-segment-neo-v-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(160deg,color-mix(in srgb,var(--dd-segment-neo-v-accent) 24%,transparent) 0 8%,transparent 8% 100%),var(--dd-segment-neo-v-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-v-shadow);overflow:clip}.dd-segment-neo-v:before{content:\"\";position:absolute;right:-4px;top:16px;width:8px;height:40px;background:var(--dd-segment-neo-v-accent);border:3px solid var(--dd-neo-ink);border-right:0;z-index:0}.dd-segment-neo-v:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-v-accent);border:3px solid var(--dd-neo-ink);z-index:0;right:20px;bottom:-9px;transform:rotate(12deg)}.dd-segment-neo-v__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo-v__indicator{position:absolute;top:0;left:0;right:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(160deg,color-mix(in srgb,var(--dd-segment-neo-v-accent) 36%,transparent) 0 14%,transparent 14% 100%),var(--dd-segment-neo-v-panel);box-shadow:4px 4px 0 var(--dd-segment-neo-v-accent);transition:transform .3s cubic-bezier(.22,1,.36,1),height .3s cubic-bezier(.22,1,.36,1)}.dd-segment-neo-v__indicator-notch{position:absolute;top:14px;left:-3px;width:16px;height:16px;border-right:3px solid var(--dd-neo-ink);border-top:3px solid var(--dd-neo-ink);background:var(--dd-segment-neo-v-accent)}.dd-segment-neo-v__buttons{position:relative;z-index:2;display:flex;flex-direction:column;width:100%;gap:6px}.dd-segment-neo-v__button{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:56px;padding:14px 20px;border:0;background:transparent;color:var(--dd-segment-neo-v-muted);cursor:pointer;text-align:left;font:inherit;width:100%;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo-v__button:hover{transform:translate(3px)}.dd-segment-neo-v__button:focus-visible{outline:3px solid var(--dd-segment-neo-v-accent);outline-offset:-3px}.dd-segment-neo-v__button-copy{position:relative;display:inline-flex;align-items:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.12em;line-height:1.3;text-transform:uppercase;text-wrap:balance}.dd-segment-neo-v__button--checked{color:var(--dd-segment-neo-v-text)}@media(max-width:640px){:host{min-width:180px}.dd-segment-neo-v{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-v-shadow)}.dd-segment-neo-v__indicator-shell{inset:8px}.dd-segment-neo-v__buttons{gap:2px}.dd-segment-neo-v__button{min-height:48px;padding:10px 16px}.dd-segment-neo-v__button-copy{font-size:.72rem;letter-spacing:.1em}}\n"] }]
|
|
3799
3799
|
}], 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: [{
|
|
3800
3800
|
type: ContentChildren,
|
|
3801
3801
|
args: [DuckDevSegmentButton]
|
|
@@ -5467,11 +5467,11 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5467
5467
|
}
|
|
5468
5468
|
}
|
|
5469
5469
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5470
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbNeobrutal, isStandalone: true, selector: "dd-breadcrumb-neobrutal", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, viewQueries: [{ propertyName: "listRef", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav\n class=\"neo-bc\"\n [class.neo-bc--mobile]=\"isMobile()\"\n aria-label=\"Breadcrumb\"\n [ngStyle]=\"breadcrumbStyle()\"\n>\n <ol\n class=\"neo-bc__list\"\n #listEl\n [class.neo-bc__list--dragging]=\"isDragging()\"\n (mousedown)=\"onListMouseDown($event)\"\n >\n @for (item of visibleItems(); track $index; let last = $last) {\n <li\n class=\"neo-bc__item\"\n animate.enter=\"neo-bc__item--enter\"\n animate.leave=\"neo-bc__item--leave\"\n >\n @if (!last && item.url) {\n <button\n class=\"neo-bc__link\"\n [class.neo-bc__link--popover-open]=\"isPopoverOpen($index)\"\n type=\"button\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onNavigate(item, $index)\"\n (keydown.escape)=\"closePopover()\"\n >\n <span class=\"neo-bc__chip\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </button>\n } @else {\n <span\n class=\"neo-bc__current\"\n [class.neo-bc__current--popover-open]=\"isPopoverOpen($index)\"\n tabindex=\"0\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onCurrentClick($index)\"\n (keydown.enter)=\"onCurrentClick($index)\"\n (keydown.space)=\"$event.preventDefault(); onCurrentClick($index)\"\n (keydown.escape)=\"closePopover()\"\n >\n <span class=\"neo-bc__chip neo-bc__chip--active\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </span>\n }\n <span\n class=\"neo-bc__arrow\"\n [class.neo-bc__arrow--visible]=\"!last\"\n aria-hidden=\"true\"\n ></span>\n </li>\n }\n </ol>\n</nav>\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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );display:block;width:100%;height:calc(var(--neo-bc-row-height) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y));box-sizing:border-box;padding:10px 14px;border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{display:flex;align-items:center;width:100%;height:100%;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}.neo-bc__list--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neo-bc__item{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:pan-x}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--dd-neo-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;touch-action:pan-x}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-right:var(--neo-bc-arrow-gap);margin-left:var(--neo-bc-arrow-gap);border-width:var(--neo-bc-arrow-top) 0 var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.neo-bc__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-link);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:scale(.96)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:scale(1)}50%{opacity:0}to{opacity:0;transform:scale(.96)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{--neo-bc-row-height: 28px;--neo-bc-block-padding-y: 16px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;padding:8px 10px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}}@media(max-width:480px){.neo-bc{--neo-bc-border-y: 4px;--neo-bc-arrow-gap: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 6px;padding:8px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__popover{max-width:min(260px,100vw - 24px);font-size:.68rem}}@media(max-width:360px){.neo-bc{--neo-bc-row-height: 24px;--neo-bc-block-padding-y: 12px;--neo-bc-arrow-gap: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px;padding:6px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
5470
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbNeobrutal, isStandalone: true, selector: "dd-breadcrumb-neobrutal", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, viewQueries: [{ propertyName: "listRef", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav\n class=\"neo-bc\"\n [class.neo-bc--mobile]=\"isMobile()\"\n aria-label=\"Breadcrumb\"\n [ngStyle]=\"breadcrumbStyle()\"\n>\n <ol\n class=\"neo-bc__list\"\n #listEl\n [class.neo-bc__list--dragging]=\"isDragging()\"\n (mousedown)=\"onListMouseDown($event)\"\n >\n @for (item of visibleItems(); track $index; let last = $last) {\n <li\n class=\"neo-bc__item\"\n animate.enter=\"neo-bc__item--enter\"\n animate.leave=\"neo-bc__item--leave\"\n >\n @if (!last && item.url) {\n <button\n class=\"neo-bc__link\"\n [class.neo-bc__link--popover-open]=\"isPopoverOpen($index)\"\n type=\"button\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onNavigate(item, $index)\"\n (keydown.escape)=\"closePopover()\"\n >\n <span class=\"neo-bc__chip\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </button>\n } @else {\n <span\n class=\"neo-bc__current\"\n [class.neo-bc__current--popover-open]=\"isPopoverOpen($index)\"\n tabindex=\"0\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onCurrentClick($index)\"\n (keydown.enter)=\"onCurrentClick($index)\"\n (keydown.space)=\"$event.preventDefault(); onCurrentClick($index)\"\n (keydown.escape)=\"closePopover()\"\n >\n <span class=\"neo-bc__chip neo-bc__chip--active\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </span>\n }\n <span\n class=\"neo-bc__arrow\"\n [class.neo-bc__arrow--visible]=\"!last\"\n aria-hidden=\"true\"\n ></span>\n </li>\n }\n </ol>\n</nav>\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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );display:block;width:100%;height:calc(var(--neo-bc-row-height) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y));box-sizing:border-box;padding:10px 14px;border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{display:flex;align-items:center;width:100%;height:100%;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}.neo-bc__list--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neo-bc__item{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:pan-x}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--neo-bc-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;touch-action:pan-x}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-right:var(--neo-bc-arrow-gap);margin-left:var(--neo-bc-arrow-gap);border-width:var(--neo-bc-arrow-top) 0 var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.neo-bc__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-link);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:scale(.96)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:scale(1)}50%{opacity:0}to{opacity:0;transform:scale(.96)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{--neo-bc-row-height: 28px;--neo-bc-block-padding-y: 16px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;padding:8px 10px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}}@media(max-width:480px){.neo-bc{--neo-bc-border-y: 4px;--neo-bc-arrow-gap: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 6px;padding:8px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__popover{max-width:min(260px,100vw - 24px);font-size:.68rem}}@media(max-width:360px){.neo-bc{--neo-bc-row-height: 24px;--neo-bc-block-padding-y: 12px;--neo-bc-arrow-gap: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px;padding:6px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
5471
5471
|
}
|
|
5472
5472
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, decorators: [{
|
|
5473
5473
|
type: Component,
|
|
5474
|
-
args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<nav\n class=\"neo-bc\"\n [class.neo-bc--mobile]=\"isMobile()\"\n aria-label=\"Breadcrumb\"\n [ngStyle]=\"breadcrumbStyle()\"\n>\n <ol\n class=\"neo-bc__list\"\n #listEl\n [class.neo-bc__list--dragging]=\"isDragging()\"\n (mousedown)=\"onListMouseDown($event)\"\n >\n @for (item of visibleItems(); track $index; let last = $last) {\n <li\n class=\"neo-bc__item\"\n animate.enter=\"neo-bc__item--enter\"\n animate.leave=\"neo-bc__item--leave\"\n >\n @if (!last && item.url) {\n <button\n class=\"neo-bc__link\"\n [class.neo-bc__link--popover-open]=\"isPopoverOpen($index)\"\n type=\"button\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onNavigate(item, $index)\"\n (keydown.escape)=\"closePopover()\"\n >\n <span class=\"neo-bc__chip\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </button>\n } @else {\n <span\n class=\"neo-bc__current\"\n [class.neo-bc__current--popover-open]=\"isPopoverOpen($index)\"\n tabindex=\"0\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onCurrentClick($index)\"\n (keydown.enter)=\"onCurrentClick($index)\"\n (keydown.space)=\"$event.preventDefault(); onCurrentClick($index)\"\n (keydown.escape)=\"closePopover()\"\n >\n <span class=\"neo-bc__chip neo-bc__chip--active\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </span>\n }\n <span\n class=\"neo-bc__arrow\"\n [class.neo-bc__arrow--visible]=\"!last\"\n aria-hidden=\"true\"\n ></span>\n </li>\n }\n </ol>\n</nav>\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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );display:block;width:100%;height:calc(var(--neo-bc-row-height) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y));box-sizing:border-box;padding:10px 14px;border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{display:flex;align-items:center;width:100%;height:100%;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}.neo-bc__list--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neo-bc__item{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:pan-x}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--
|
|
5474
|
+
args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<nav\n class=\"neo-bc\"\n [class.neo-bc--mobile]=\"isMobile()\"\n aria-label=\"Breadcrumb\"\n [ngStyle]=\"breadcrumbStyle()\"\n>\n <ol\n class=\"neo-bc__list\"\n #listEl\n [class.neo-bc__list--dragging]=\"isDragging()\"\n (mousedown)=\"onListMouseDown($event)\"\n >\n @for (item of visibleItems(); track $index; let last = $last) {\n <li\n class=\"neo-bc__item\"\n animate.enter=\"neo-bc__item--enter\"\n animate.leave=\"neo-bc__item--leave\"\n >\n @if (!last && item.url) {\n <button\n class=\"neo-bc__link\"\n [class.neo-bc__link--popover-open]=\"isPopoverOpen($index)\"\n type=\"button\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onNavigate(item, $index)\"\n (keydown.escape)=\"closePopover()\"\n >\n <span class=\"neo-bc__chip\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </button>\n } @else {\n <span\n class=\"neo-bc__current\"\n [class.neo-bc__current--popover-open]=\"isPopoverOpen($index)\"\n tabindex=\"0\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onCurrentClick($index)\"\n (keydown.enter)=\"onCurrentClick($index)\"\n (keydown.space)=\"$event.preventDefault(); onCurrentClick($index)\"\n (keydown.escape)=\"closePopover()\"\n >\n <span class=\"neo-bc__chip neo-bc__chip--active\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </span>\n }\n <span\n class=\"neo-bc__arrow\"\n [class.neo-bc__arrow--visible]=\"!last\"\n aria-hidden=\"true\"\n ></span>\n </li>\n }\n </ol>\n</nav>\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);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );display:block;width:100%;height:calc(var(--neo-bc-row-height) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y));box-sizing:border-box;padding:10px 14px;border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{display:flex;align-items:center;width:100%;height:100%;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}.neo-bc__list--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neo-bc__item{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:pan-x}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--neo-bc-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;touch-action:pan-x}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-right:var(--neo-bc-arrow-gap);margin-left:var(--neo-bc-arrow-gap);border-width:var(--neo-bc-arrow-top) 0 var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.neo-bc__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-link);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:scale(.96)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:scale(1)}50%{opacity:0}to{opacity:0;transform:scale(.96)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{--neo-bc-row-height: 28px;--neo-bc-block-padding-y: 16px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;padding:8px 10px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}}@media(max-width:480px){.neo-bc{--neo-bc-border-y: 4px;--neo-bc-arrow-gap: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 6px;padding:8px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__popover{max-width:min(260px,100vw - 24px);font-size:.68rem}}@media(max-width:360px){.neo-bc{--neo-bc-row-height: 24px;--neo-bc-block-padding-y: 12px;--neo-bc-arrow-gap: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px;padding:6px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"] }]
|
|
5475
5475
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], listRef: [{ type: i0.ViewChild, args: ['listEl', { isSignal: true }] }] } });
|
|
5476
5476
|
|
|
5477
5477
|
class DuckDevSelectorOption {
|