duck-dev-lib 0.0.78 → 0.0.79
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.
|
@@ -142,11 +142,11 @@ class ButtonBlurLift {
|
|
|
142
142
|
return hover ? hover.split('').map((char) => (char === ' ' ? '\u00A0' : char)) : [];
|
|
143
143
|
}, { ...(ngDevMode ? { debugName: "hoverTextLetters" } : {}) });
|
|
144
144
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlurLift, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ButtonBlurLift, isStandalone: true, selector: "duck-dev-button-blur-lift", inputs: { textButton: { classPropertyName: "textButton", publicName: "textButton", isSignal: true, isRequired: true, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hoverText: { classPropertyName: "hoverText", publicName: "hoverText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button type=\"button\" class=\"rounded-button rounded-button--blur-lift\" [style]=\"buttonStyle()\">\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span aria-hidden=\"true\" class=\"button-blur-lift__container\">\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span [style.--index-outer]=\"$index\" class=\"button-blur-lift__letter-outer\">\n <span [style.--index]=\"2\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"1\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"0\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n </span>\n }\n </span>\n\n @if (hoverText()) {\n <div class=\"button-blur-lift__hover-text\">\n @for (letter of hoverTextLetters(); track $index) {\n <span [style.--index-outer]=\"$index\" class=\"button-blur-lift__hover-letter-outer\">\n <span [style.--index]=\"2\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"1\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"0\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n </span>\n }\n </div>\n }\n </span>\n <span class=\"button-blur-lift__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";: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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:2}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}\n"] });
|
|
145
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ButtonBlurLift, isStandalone: true, selector: "duck-dev-button-blur-lift", inputs: { textButton: { classPropertyName: "textButton", publicName: "textButton", isSignal: true, isRequired: true, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hoverText: { classPropertyName: "hoverText", publicName: "hoverText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button type=\"button\" class=\"rounded-button rounded-button--blur-lift\" [style]=\"buttonStyle()\">\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span aria-hidden=\"true\" class=\"button-blur-lift__container\">\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span [style.--index-outer]=\"$index\" class=\"button-blur-lift__letter-outer\">\n <span [style.--index]=\"2\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"1\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"0\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n </span>\n }\n </span>\n\n @if (hoverText()) {\n <div class=\"button-blur-lift__hover-text\">\n @for (letter of hoverTextLetters(); track $index) {\n <span [style.--index-outer]=\"$index\" class=\"button-blur-lift__hover-letter-outer\">\n <span [style.--index]=\"2\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"1\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"0\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n </span>\n }\n </div>\n }\n </span>\n <span class=\"button-blur-lift__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";: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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:2}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}\n"] });
|
|
146
146
|
}
|
|
147
147
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlurLift, decorators: [{
|
|
148
148
|
type: Component,
|
|
149
|
-
args: [{ selector: 'duck-dev-button-blur-lift', imports: [], template: "<button type=\"button\" class=\"rounded-button rounded-button--blur-lift\" [style]=\"buttonStyle()\">\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span aria-hidden=\"true\" class=\"button-blur-lift__container\">\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span [style.--index-outer]=\"$index\" class=\"button-blur-lift__letter-outer\">\n <span [style.--index]=\"2\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"1\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"0\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n </span>\n }\n </span>\n\n @if (hoverText()) {\n <div class=\"button-blur-lift__hover-text\">\n @for (letter of hoverTextLetters(); track $index) {\n <span [style.--index-outer]=\"$index\" class=\"button-blur-lift__hover-letter-outer\">\n <span [style.--index]=\"2\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"1\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"0\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n </span>\n }\n </div>\n }\n </span>\n <span class=\"button-blur-lift__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";: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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:2}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}\n"] }]
|
|
149
|
+
args: [{ selector: 'duck-dev-button-blur-lift', imports: [], template: "<button type=\"button\" class=\"rounded-button rounded-button--blur-lift\" [style]=\"buttonStyle()\">\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span aria-hidden=\"true\" class=\"button-blur-lift__container\">\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span [style.--index-outer]=\"$index\" class=\"button-blur-lift__letter-outer\">\n <span [style.--index]=\"2\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"1\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"0\" class=\"button-blur-lift__letter\">\n {{ letter }}\n </span>\n </span>\n }\n </span>\n\n @if (hoverText()) {\n <div class=\"button-blur-lift__hover-text\">\n @for (letter of hoverTextLetters(); track $index) {\n <span [style.--index-outer]=\"$index\" class=\"button-blur-lift__hover-letter-outer\">\n <span [style.--index]=\"2\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"1\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n <span [style.--index]=\"0\" class=\"button-blur-lift__hover-letter\">\n {{ letter }}\n </span>\n </span>\n }\n </div>\n }\n </span>\n <span class=\"button-blur-lift__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";: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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:2}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}\n"] }]
|
|
150
150
|
}], propDecorators: { textButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "textButton", required: true }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hoverText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverText", required: false }] }] } });
|
|
151
151
|
|
|
152
152
|
class ButtonGlideOver {
|
|
@@ -217,11 +217,11 @@ class ButtonGlideOver {
|
|
|
217
217
|
};
|
|
218
218
|
}, { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
219
219
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonGlideOver, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
220
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonGlideOver, isStandalone: true, selector: "duck-dev-button-glide-over", inputs: { textButton: { classPropertyName: "textButton", publicName: "textButton", isSignal: true, isRequired: true, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button type=\"button\" class=\"rounded-button rounded-button--glide-over\" [style]=\"buttonStyle()\">\n <span class=\"button-glide-over__container\">\n <span class=\"button-glide-over__icon is-first\">\n <svg class=\"button-glide-over__icon-item\" style=\"--index: 3\" viewBox=\"0 0 256 256\">\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"24\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n\n <span class=\"button-glide-over__text\">{{ textButton() }}</span>\n\n <span class=\"button-glide-over__icon is-last\">\n <svg class=\"button-glide-over__icon-item\" style=\"--index: 0\" viewBox=\"0 0 256 256\">\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"20\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n </span>\n\n <span class=\"button-glide-over__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";: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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:1}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}.button-glide-over__text{white-space:normal;word-break:break-word;text-align:center;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] });
|
|
220
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonGlideOver, isStandalone: true, selector: "duck-dev-button-glide-over", inputs: { textButton: { classPropertyName: "textButton", publicName: "textButton", isSignal: true, isRequired: true, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button type=\"button\" class=\"rounded-button rounded-button--glide-over\" [style]=\"buttonStyle()\">\n <span class=\"button-glide-over__container\">\n <span class=\"button-glide-over__icon is-first\">\n <svg class=\"button-glide-over__icon-item\" style=\"--index: 3\" viewBox=\"0 0 256 256\">\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"24\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n\n <span class=\"button-glide-over__text\">{{ textButton() }}</span>\n\n <span class=\"button-glide-over__icon is-last\">\n <svg class=\"button-glide-over__icon-item\" style=\"--index: 0\" viewBox=\"0 0 256 256\">\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"20\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n </span>\n\n <span class=\"button-glide-over__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";: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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:1}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}.button-glide-over__text{white-space:normal;word-break:break-word;text-align:center;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] });
|
|
221
221
|
}
|
|
222
222
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonGlideOver, decorators: [{
|
|
223
223
|
type: Component,
|
|
224
|
-
args: [{ selector: 'duck-dev-button-glide-over', standalone: true, imports: [], template: "<button type=\"button\" class=\"rounded-button rounded-button--glide-over\" [style]=\"buttonStyle()\">\n <span class=\"button-glide-over__container\">\n <span class=\"button-glide-over__icon is-first\">\n <svg class=\"button-glide-over__icon-item\" style=\"--index: 3\" viewBox=\"0 0 256 256\">\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"24\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n\n <span class=\"button-glide-over__text\">{{ textButton() }}</span>\n\n <span class=\"button-glide-over__icon is-last\">\n <svg class=\"button-glide-over__icon-item\" style=\"--index: 0\" viewBox=\"0 0 256 256\">\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"20\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n </span>\n\n <span class=\"button-glide-over__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";: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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:1}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}.button-glide-over__text{white-space:normal;word-break:break-word;text-align:center;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] }]
|
|
224
|
+
args: [{ selector: 'duck-dev-button-glide-over', standalone: true, imports: [], template: "<button type=\"button\" class=\"rounded-button rounded-button--glide-over\" [style]=\"buttonStyle()\">\n <span class=\"button-glide-over__container\">\n <span class=\"button-glide-over__icon is-first\">\n <svg class=\"button-glide-over__icon-item\" style=\"--index: 3\" viewBox=\"0 0 256 256\">\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"24\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n\n <span class=\"button-glide-over__text\">{{ textButton() }}</span>\n\n <span class=\"button-glide-over__icon is-last\">\n <svg class=\"button-glide-over__icon-item\" style=\"--index: 0\" viewBox=\"0 0 256 256\">\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"20\"\n d=\"M40 128h176M144 56l72 72-72 72\"\n />\n </svg>\n </span>\n </span>\n\n <span class=\"button-glide-over__background\"></span>\n</button>\n", styles: ["@charset \"UTF-8\";: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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.rounded-button{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);padding:var(--btn-padding);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out}.rounded-button:hover{background-color:var(--btn-hover-color);box-shadow:0 2px 6px var(--dd-base-300)}.rounded-button:active{background-color:var(--btn-active-color);transform:scale(.98)}.rounded-button:focus{outline:none}.rounded-button:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.rounded-button:disabled:hover,.rounded-button:disabled:active,.rounded-button:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.rounded-button--blur-lift{position:relative;overflow:hidden;padding:0}.rounded-button--blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.rounded-button--blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.rounded-button--glide-over{display:grid;place-content:center;position:relative;overflow:hidden;padding:0;background:transparent;border:none;cursor:pointer}.rounded-button--glide-over:hover,.rounded-button--glide-over:active{background:transparent;box-shadow:none}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.rounded-button--blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.rounded-button--blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.rounded-button--blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.rounded-button--blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.rounded-button--blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}.rounded-button--glide-over{display:inline-grid;place-content:center;position:relative;overflow:hidden;border:none;background:transparent;cursor:pointer;border-radius:9999px;transition:all .4s ease;--opacity-ease: ease-in-out;--transform-ease: cubic-bezier(.19, 1, .22, 1);--elastic-ease: cubic-bezier(.68, -.55, .27, 1.55)}.rounded-button--glide-over:hover,.rounded-button--glide-over:focus{outline:none}.button-glide-over__container{display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);position:relative;z-index:1}.button-glide-over__text{position:relative;z-index:1;transition:transform .6s var(--transform-ease);transform:translate(-.375rem)}.button-glide-over__icon{width:1.25rem;height:1.25rem;flex-shrink:0;display:block;position:relative}.button-glide-over__icon svg{width:100%;height:100%;stroke:currentColor;fill:none}.button-glide-over__icon.is-last{margin-left:.5rem;transition:opacity .5s ease,transform .6s var(--elastic-ease);opacity:1}.button-glide-over__icon.is-first{position:absolute;left:0;top:50%;transform:translateY(-50%) translate(-120%);opacity:0;transition:opacity .6s ease,transform .9s var(--elastic-ease)}.button-glide-over__background{position:absolute;inset:0;border-radius:inherit;background:var(--btn-bg-color);transition:background-color .4s ease;z-index:0}.rounded-button--glide-over:hover .button-glide-over__text{transform:translate(2rem)}.rounded-button--glide-over:hover .button-glide-over__icon.is-first{opacity:1;transform:translateY(-50%) translate(100%)}.rounded-button--glide-over:hover .button-glide-over__icon.is-last{opacity:0;transform:translate(100%)}.button-glide-over__text{white-space:normal;word-break:break-word;text-align:center;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] }]
|
|
225
225
|
}], propDecorators: { textButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "textButton", required: true }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }] } });
|
|
226
226
|
|
|
227
227
|
class ButtonFlip {
|
|
@@ -312,50 +312,50 @@ class ButtonCasper {
|
|
|
312
312
|
};
|
|
313
313
|
}, { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
314
314
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonCasper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
315
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonCasper, isStandalone: true, selector: "duck-dev-button-casper", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"button-default is-casper\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"content\">\n {{ text() }}\n </span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.button-default{position:relative;overflow:hidden;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid currentColor;background:transparent;cursor:pointer;color:var(--dd-base-600);font:inherit}.button-default.is-casper{--ease: cubic-bezier(.21, 1, .34, 1);--color-ease: cubic-bezier(.215, .61, .355, 1);--color-speed: .2s;--speed: .45s;--speed-fast: .3s;--speed-faster: .15s;transition:transform var(--speed-fast) var(--ease),color var(--color-speed) var(--color-ease)}@media(hover:hover)and (pointer:fine){.button-default.is-casper:before{content:\"\";position:absolute;inset:0;background-color:var(--color, currentColor);clip-path:inset(.75rem .75rem .75rem .75rem round .5rem);opacity:0;transition:clip-path var(--speed) var(--ease),opacity var(--color-speed) var(--color-ease);z-index:0}.button-default.is-casper:hover:before,.button-default.is-casper:focus-visible:before{clip-path:inset(0 0 0 0 round .25rem);opacity:1}.button-default.is-casper:hover,.button-default.is-casper:focus-visible{color:var(--dd-base-200)}}.content{position:relative;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
315
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonCasper, isStandalone: true, selector: "duck-dev-button-casper", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"button-default is-casper\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"content\">\n {{ text() }}\n </span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.button-default{position:relative;overflow:hidden;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid currentColor;background:transparent;cursor:pointer;color:var(--dd-base-600);font:inherit}.button-default.is-casper{--ease: cubic-bezier(.21, 1, .34, 1);--color-ease: cubic-bezier(.215, .61, .355, 1);--color-speed: .2s;--speed: .45s;--speed-fast: .3s;--speed-faster: .15s;transition:transform var(--speed-fast) var(--ease),color var(--color-speed) var(--color-ease)}@media(hover:hover)and (pointer:fine){.button-default.is-casper:before{content:\"\";position:absolute;inset:0;background-color:var(--color, currentColor);clip-path:inset(.75rem .75rem .75rem .75rem round .5rem);opacity:0;transition:clip-path var(--speed) var(--ease),opacity var(--color-speed) var(--color-ease);z-index:0}.button-default.is-casper:hover:before,.button-default.is-casper:focus-visible:before{clip-path:inset(0 0 0 0 round .25rem);opacity:1}.button-default.is-casper:hover,.button-default.is-casper:focus-visible{color:var(--dd-base-200)}}.content{position:relative;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
316
316
|
}
|
|
317
317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonCasper, decorators: [{
|
|
318
318
|
type: Component,
|
|
319
|
-
args: [{ selector: 'duck-dev-button-casper', standalone: true, imports: [NgStyle], template: "<button class=\"button-default is-casper\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"content\">\n {{ text() }}\n </span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.button-default{position:relative;overflow:hidden;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid currentColor;background:transparent;cursor:pointer;color:var(--dd-base-600);font:inherit}.button-default.is-casper{--ease: cubic-bezier(.21, 1, .34, 1);--color-ease: cubic-bezier(.215, .61, .355, 1);--color-speed: .2s;--speed: .45s;--speed-fast: .3s;--speed-faster: .15s;transition:transform var(--speed-fast) var(--ease),color var(--color-speed) var(--color-ease)}@media(hover:hover)and (pointer:fine){.button-default.is-casper:before{content:\"\";position:absolute;inset:0;background-color:var(--color, currentColor);clip-path:inset(.75rem .75rem .75rem .75rem round .5rem);opacity:0;transition:clip-path var(--speed) var(--ease),opacity var(--color-speed) var(--color-ease);z-index:0}.button-default.is-casper:hover:before,.button-default.is-casper:focus-visible:before{clip-path:inset(0 0 0 0 round .25rem);opacity:1}.button-default.is-casper:hover,.button-default.is-casper:focus-visible{color:var(--dd-base-200)}}.content{position:relative;z-index:1}\n"] }]
|
|
319
|
+
args: [{ selector: 'duck-dev-button-casper', standalone: true, imports: [NgStyle], template: "<button class=\"button-default is-casper\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"content\">\n {{ text() }}\n </span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.button-default{position:relative;overflow:hidden;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid currentColor;background:transparent;cursor:pointer;color:var(--dd-base-600);font:inherit}.button-default.is-casper{--ease: cubic-bezier(.21, 1, .34, 1);--color-ease: cubic-bezier(.215, .61, .355, 1);--color-speed: .2s;--speed: .45s;--speed-fast: .3s;--speed-faster: .15s;transition:transform var(--speed-fast) var(--ease),color var(--color-speed) var(--color-ease)}@media(hover:hover)and (pointer:fine){.button-default.is-casper:before{content:\"\";position:absolute;inset:0;background-color:var(--color, currentColor);clip-path:inset(.75rem .75rem .75rem .75rem round .5rem);opacity:0;transition:clip-path var(--speed) var(--ease),opacity var(--color-speed) var(--color-ease);z-index:0}.button-default.is-casper:hover:before,.button-default.is-casper:focus-visible:before{clip-path:inset(0 0 0 0 round .25rem);opacity:1}.button-default.is-casper:hover,.button-default.is-casper:focus-visible{color:var(--dd-base-200)}}.content{position:relative;z-index:1}\n"] }]
|
|
320
320
|
}], propDecorators: { isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
321
321
|
|
|
322
322
|
function getNeobrutalButtonStyle(color) {
|
|
323
323
|
switch (color) {
|
|
324
324
|
case AccentEnumColor.Violet:
|
|
325
325
|
return {
|
|
326
|
-
'--neo-surface': 'var(--dd-
|
|
327
|
-
'--neo-text': 'var(--dd-
|
|
328
|
-
'--neo-shadow': 'var(--dd-
|
|
329
|
-
'--neo-accent': 'var(--dd-
|
|
326
|
+
'--neo-surface': 'var(--dd-neo-ana-3)',
|
|
327
|
+
'--neo-text': 'var(--dd-neo-ana-3-contrast)',
|
|
328
|
+
'--neo-shadow': 'var(--dd-neo-ana-6)',
|
|
329
|
+
'--neo-accent': 'var(--dd-neo-ana-1)',
|
|
330
330
|
};
|
|
331
331
|
case AccentEnumColor.Orange:
|
|
332
332
|
return {
|
|
333
|
-
'--neo-surface': 'var(--dd-
|
|
334
|
-
'--neo-text': 'var(--dd-
|
|
335
|
-
'--neo-shadow': 'var(--dd-
|
|
336
|
-
'--neo-accent': 'var(--dd-
|
|
333
|
+
'--neo-surface': 'var(--dd-neo-ana-2)',
|
|
334
|
+
'--neo-text': 'var(--dd-neo-ana-2-contrast)',
|
|
335
|
+
'--neo-shadow': 'var(--dd-neo-ana-5)',
|
|
336
|
+
'--neo-accent': 'var(--dd-neo-ana-1)',
|
|
337
337
|
};
|
|
338
338
|
case AccentEnumColor.Gray:
|
|
339
339
|
return {
|
|
340
340
|
'--neo-surface': 'var(--dd-base-200)',
|
|
341
341
|
'--neo-text': 'var(--dd-base-600)',
|
|
342
|
-
'--neo-shadow': 'var(--dd-
|
|
343
|
-
'--neo-accent': 'var(--dd-
|
|
342
|
+
'--neo-shadow': 'var(--dd-neo-ana-6)',
|
|
343
|
+
'--neo-accent': 'var(--dd-neo-ana-2)',
|
|
344
344
|
};
|
|
345
345
|
case AccentEnumColor.Dark:
|
|
346
346
|
return {
|
|
347
|
-
'--neo-surface': 'var(--dd-
|
|
348
|
-
'--neo-text': 'var(--dd-
|
|
349
|
-
'--neo-shadow': 'var(--dd-
|
|
350
|
-
'--neo-accent': 'var(--dd-
|
|
347
|
+
'--neo-surface': 'var(--dd-neo-ana-4)',
|
|
348
|
+
'--neo-text': 'var(--dd-neo-ana-4-contrast)',
|
|
349
|
+
'--neo-shadow': 'var(--dd-neo-ana-3)',
|
|
350
|
+
'--neo-accent': 'var(--dd-neo-ana-1)',
|
|
351
351
|
};
|
|
352
352
|
case AccentEnumColor.White:
|
|
353
353
|
default:
|
|
354
354
|
return {
|
|
355
355
|
'--neo-surface': 'var(--dd-base-0)',
|
|
356
356
|
'--neo-text': 'var(--dd-base-600)',
|
|
357
|
-
'--neo-shadow': 'var(--dd-
|
|
358
|
-
'--neo-accent': 'var(--dd-
|
|
357
|
+
'--neo-shadow': 'var(--dd-neo-ana-5)',
|
|
358
|
+
'--neo-accent': 'var(--dd-neo-ana-6)',
|
|
359
359
|
};
|
|
360
360
|
}
|
|
361
361
|
}
|
|
@@ -367,11 +367,11 @@ class ButtonNeobrutalBurst {
|
|
|
367
367
|
colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
368
368
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
369
369
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBurst, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
370
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalBurst, isStandalone: true, selector: "duck-dev-button-neobrutal-burst", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-burst\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"burst-pill\">{{ subtext() }}</span>\n <span class=\"burst-text\">{{ text() }}</span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-burst{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:190px;min-height:64px;padding:.95rem 1.35rem;border:3px solid var(--dd-neo-ink);border-radius:20px 8px 18px 10px;background:var(--neo-surface);box-shadow:6px 6px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-burst:focus-visible{outline:3px solid var(--neo-accent);outline-offset:4px}@media(hover:hover)and (pointer:fine){.neo-burst:hover,.neo-burst:focus-visible{transform:translate(3px,3px) rotate(-1deg);box-shadow:3px 3px 0 var(--neo-shadow)}}.neo-burst:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--neo-shadow)}@media(hover:none),(pointer:coarse){.neo-burst:hover,.neo-burst:focus,.neo-burst:focus-visible{transform:none;box-shadow:6px 6px 0 var(--neo-shadow)}.neo-burst:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--neo-shadow)}}.neo-burst:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:3px 3px 0 var(--dd-base-300)}.burst-pill{position:absolute;top:-14px;right:12px;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.72rem;line-height:1;transform:rotate(8deg)}.burst-text{display:inline-block;max-width:100%;text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
370
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalBurst, isStandalone: true, selector: "duck-dev-button-neobrutal-burst", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-burst\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"burst-pill\">{{ subtext() }}</span>\n <span class=\"burst-text\">{{ text() }}</span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-burst{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:190px;min-height:64px;padding:.95rem 1.35rem;border:3px solid var(--dd-neo-ink);border-radius:20px 8px 18px 10px;background:var(--neo-surface);box-shadow:6px 6px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-burst:focus-visible{outline:3px solid var(--neo-accent);outline-offset:4px}@media(hover:hover)and (pointer:fine){.neo-burst:hover,.neo-burst:focus-visible{transform:translate(3px,3px) rotate(-1deg);box-shadow:3px 3px 0 var(--neo-shadow)}}.neo-burst:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--neo-shadow)}@media(hover:none),(pointer:coarse){.neo-burst:hover,.neo-burst:focus,.neo-burst:focus-visible{transform:none;box-shadow:6px 6px 0 var(--neo-shadow)}.neo-burst:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--neo-shadow)}}.neo-burst:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:3px 3px 0 var(--dd-base-300)}.burst-pill{position:absolute;top:-14px;right:12px;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.72rem;line-height:1;transform:rotate(8deg)}.burst-text{display:inline-block;max-width:100%;text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
371
371
|
}
|
|
372
372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBurst, decorators: [{
|
|
373
373
|
type: Component,
|
|
374
|
-
args: [{ selector: 'duck-dev-button-neobrutal-burst', standalone: true, imports: [NgStyle], template: "<button class=\"neo-burst\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"burst-pill\">{{ subtext() }}</span>\n <span class=\"burst-text\">{{ text() }}</span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-burst{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:190px;min-height:64px;padding:.95rem 1.35rem;border:3px solid var(--dd-neo-ink);border-radius:20px 8px 18px 10px;background:var(--neo-surface);box-shadow:6px 6px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-burst:focus-visible{outline:3px solid var(--neo-accent);outline-offset:4px}@media(hover:hover)and (pointer:fine){.neo-burst:hover,.neo-burst:focus-visible{transform:translate(3px,3px) rotate(-1deg);box-shadow:3px 3px 0 var(--neo-shadow)}}.neo-burst:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--neo-shadow)}@media(hover:none),(pointer:coarse){.neo-burst:hover,.neo-burst:focus,.neo-burst:focus-visible{transform:none;box-shadow:6px 6px 0 var(--neo-shadow)}.neo-burst:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--neo-shadow)}}.neo-burst:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:3px 3px 0 var(--dd-base-300)}.burst-pill{position:absolute;top:-14px;right:12px;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.72rem;line-height:1;transform:rotate(8deg)}.burst-text{display:inline-block;max-width:100%;text-align:center}\n"] }]
|
|
374
|
+
args: [{ selector: 'duck-dev-button-neobrutal-burst', standalone: true, imports: [NgStyle], template: "<button class=\"neo-burst\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"burst-pill\">{{ subtext() }}</span>\n <span class=\"burst-text\">{{ text() }}</span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-burst{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:190px;min-height:64px;padding:.95rem 1.35rem;border:3px solid var(--dd-neo-ink);border-radius:20px 8px 18px 10px;background:var(--neo-surface);box-shadow:6px 6px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-burst:focus-visible{outline:3px solid var(--neo-accent);outline-offset:4px}@media(hover:hover)and (pointer:fine){.neo-burst:hover,.neo-burst:focus-visible{transform:translate(3px,3px) rotate(-1deg);box-shadow:3px 3px 0 var(--neo-shadow)}}.neo-burst:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--neo-shadow)}@media(hover:none),(pointer:coarse){.neo-burst:hover,.neo-burst:focus,.neo-burst:focus-visible{transform:none;box-shadow:6px 6px 0 var(--neo-shadow)}.neo-burst:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--neo-shadow)}}.neo-burst:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:3px 3px 0 var(--dd-base-300)}.burst-pill{position:absolute;top:-14px;right:12px;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.72rem;line-height:1;transform:rotate(8deg)}.burst-text{display:inline-block;max-width:100%;text-align:center}\n"] }]
|
|
375
375
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
376
376
|
|
|
377
377
|
class ButtonNeobrutalSlab {
|
|
@@ -381,11 +381,11 @@ class ButtonNeobrutalSlab {
|
|
|
381
381
|
colorButton = input(AccentEnumColor.Gray, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
382
382
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
383
383
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
384
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalSlab, isStandalone: true, selector: "duck-dev-button-neobrutal-slab", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"slab-stripe\" aria-hidden=\"true\"></span>\n <span class=\"slab-content\">\n <span class=\"slab-text\">{{ text() }}</span>\n <span class=\"slab-helper\">{{ helperText() }}</span>\n </span>\n <span class=\"slab-dot\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-slab{position:relative;display:flex;align-items:stretch;min-width:220px;padding:0;border:3px solid var(--dd-neo-ink);border-radius:0;background:var(--neo-surface);box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow);color:var(--neo-text);cursor:pointer;text-align:left;font:inherit;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.neo-slab:hover,.neo-slab:focus-visible{transform:translate(-3px,-3px) rotate(-.5deg);box-shadow:10px 10px 0 var(--neo-shadow),10px 10px 0 3px var(--dd-neo-shadow)}.neo-slab:hover .slab-stripe,.neo-slab:focus-visible .slab-stripe{width:14px}.neo-slab:hover .slab-dot,.neo-slab:focus-visible .slab-dot{transform:scale(1.3) rotate(45deg)}.neo-slab:hover .slab-helper,.neo-slab:focus-visible .slab-helper{letter-spacing:.2em}.neo-slab:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-slab:disabled{cursor:not-allowed;opacity:.6;transform:none}.slab-stripe{display:block;width:10px;flex-shrink:0;background:repeating-linear-gradient(-45deg,var(--neo-accent),var(--neo-accent) 3px,var(--neo-shadow) 3px,var(--neo-shadow) 6px);border-right:3px solid var(--dd-neo-ink);transition:width .2s ease}.slab-content{display:grid;gap:.2rem;flex:1;padding:.9rem 1.1rem}.slab-text{font-size:1rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.slab-helper{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.6;transition:letter-spacing .2s ease}.slab-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--neo-accent);border:2px solid var(--dd-neo-ink);transition:transform .2s ease}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
384
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalSlab, isStandalone: true, selector: "duck-dev-button-neobrutal-slab", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"slab-stripe\" aria-hidden=\"true\"></span>\n <span class=\"slab-content\">\n <span class=\"slab-text\">{{ text() }}</span>\n <span class=\"slab-helper\">{{ helperText() }}</span>\n </span>\n <span class=\"slab-dot\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-slab{position:relative;display:flex;align-items:stretch;min-width:220px;padding:0;border:3px solid var(--dd-neo-ink);border-radius:0;background:var(--neo-surface);box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow);color:var(--neo-text);cursor:pointer;text-align:left;font:inherit;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.neo-slab:hover,.neo-slab:focus-visible{transform:translate(-3px,-3px) rotate(-.5deg);box-shadow:10px 10px 0 var(--neo-shadow),10px 10px 0 3px var(--dd-neo-shadow)}.neo-slab:hover .slab-stripe,.neo-slab:focus-visible .slab-stripe{width:14px}.neo-slab:hover .slab-dot,.neo-slab:focus-visible .slab-dot{transform:scale(1.3) rotate(45deg)}.neo-slab:hover .slab-helper,.neo-slab:focus-visible .slab-helper{letter-spacing:.2em}.neo-slab:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-slab:disabled{cursor:not-allowed;opacity:.6;transform:none}.slab-stripe{display:block;width:10px;flex-shrink:0;background:repeating-linear-gradient(-45deg,var(--neo-accent),var(--neo-accent) 3px,var(--neo-shadow) 3px,var(--neo-shadow) 6px);border-right:3px solid var(--dd-neo-ink);transition:width .2s ease}.slab-content{display:grid;gap:.2rem;flex:1;padding:.9rem 1.1rem}.slab-text{font-size:1rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.slab-helper{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.6;transition:letter-spacing .2s ease}.slab-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--neo-accent);border:2px solid var(--dd-neo-ink);transition:transform .2s ease}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
385
385
|
}
|
|
386
386
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSlab, decorators: [{
|
|
387
387
|
type: Component,
|
|
388
|
-
args: [{ selector: 'duck-dev-button-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"slab-stripe\" aria-hidden=\"true\"></span>\n <span class=\"slab-content\">\n <span class=\"slab-text\">{{ text() }}</span>\n <span class=\"slab-helper\">{{ helperText() }}</span>\n </span>\n <span class=\"slab-dot\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-slab{position:relative;display:flex;align-items:stretch;min-width:220px;padding:0;border:3px solid var(--dd-neo-ink);border-radius:0;background:var(--neo-surface);box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow);color:var(--neo-text);cursor:pointer;text-align:left;font:inherit;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.neo-slab:hover,.neo-slab:focus-visible{transform:translate(-3px,-3px) rotate(-.5deg);box-shadow:10px 10px 0 var(--neo-shadow),10px 10px 0 3px var(--dd-neo-shadow)}.neo-slab:hover .slab-stripe,.neo-slab:focus-visible .slab-stripe{width:14px}.neo-slab:hover .slab-dot,.neo-slab:focus-visible .slab-dot{transform:scale(1.3) rotate(45deg)}.neo-slab:hover .slab-helper,.neo-slab:focus-visible .slab-helper{letter-spacing:.2em}.neo-slab:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-slab:disabled{cursor:not-allowed;opacity:.6;transform:none}.slab-stripe{display:block;width:10px;flex-shrink:0;background:repeating-linear-gradient(-45deg,var(--neo-accent),var(--neo-accent) 3px,var(--neo-shadow) 3px,var(--neo-shadow) 6px);border-right:3px solid var(--dd-neo-ink);transition:width .2s ease}.slab-content{display:grid;gap:.2rem;flex:1;padding:.9rem 1.1rem}.slab-text{font-size:1rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.slab-helper{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.6;transition:letter-spacing .2s ease}.slab-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--neo-accent);border:2px solid var(--dd-neo-ink);transition:transform .2s ease}\n"] }]
|
|
388
|
+
args: [{ selector: 'duck-dev-button-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"slab-stripe\" aria-hidden=\"true\"></span>\n <span class=\"slab-content\">\n <span class=\"slab-text\">{{ text() }}</span>\n <span class=\"slab-helper\">{{ helperText() }}</span>\n </span>\n <span class=\"slab-dot\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-slab{position:relative;display:flex;align-items:stretch;min-width:220px;padding:0;border:3px solid var(--dd-neo-ink);border-radius:0;background:var(--neo-surface);box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow);color:var(--neo-text);cursor:pointer;text-align:left;font:inherit;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.neo-slab:hover,.neo-slab:focus-visible{transform:translate(-3px,-3px) rotate(-.5deg);box-shadow:10px 10px 0 var(--neo-shadow),10px 10px 0 3px var(--dd-neo-shadow)}.neo-slab:hover .slab-stripe,.neo-slab:focus-visible .slab-stripe{width:14px}.neo-slab:hover .slab-dot,.neo-slab:focus-visible .slab-dot{transform:scale(1.3) rotate(45deg)}.neo-slab:hover .slab-helper,.neo-slab:focus-visible .slab-helper{letter-spacing:.2em}.neo-slab:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-slab:disabled{cursor:not-allowed;opacity:.6;transform:none}.slab-stripe{display:block;width:10px;flex-shrink:0;background:repeating-linear-gradient(-45deg,var(--neo-accent),var(--neo-accent) 3px,var(--neo-shadow) 3px,var(--neo-shadow) 6px);border-right:3px solid var(--dd-neo-ink);transition:width .2s ease}.slab-content{display:grid;gap:.2rem;flex:1;padding:.9rem 1.1rem}.slab-text{font-size:1rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.slab-helper{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.6;transition:letter-spacing .2s ease}.slab-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--neo-accent);border:2px solid var(--dd-neo-ink);transition:transform .2s ease}\n"] }]
|
|
389
389
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
390
390
|
|
|
391
391
|
class ButtonNeobrutalTag {
|
|
@@ -395,11 +395,11 @@ class ButtonNeobrutalTag {
|
|
|
395
395
|
colorButton = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
396
396
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
397
397
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
398
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalTag, isStandalone: true, selector: "duck-dev-button-neobrutal-tag", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-tag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tag-chip\">{{ tag() }}</span>\n <span class=\"tag-text\">{{ text() }}</span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-tag{position:relative;display:inline-flex;align-items:stretch;min-width:210px;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-surface);box-shadow:0 8px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;overflow:hidden;font:inherit;transition:transform .18s ease,box-shadow .18s ease}.neo-tag:hover,.neo-tag:focus-visible{transform:translateY(-3px);box-shadow:0 11px 0 var(--neo-shadow)}.neo-tag:active{transform:translateY(4px);box-shadow:0 4px 0 var(--neo-shadow)}.neo-tag:disabled{cursor:not-allowed;opacity:.6}.tag-chip{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:.9rem .75rem;border-right:3px solid var(--dd-neo-ink);background:var(--neo-accent);color:var(--dd-base-600);font-size:.88rem;font-weight:900;letter-spacing:.08em}.tag-text{display:inline-flex;align-items:center;justify-content:center;flex:1;padding:.9rem 1.15rem;font-size:.95rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
398
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalTag, isStandalone: true, selector: "duck-dev-button-neobrutal-tag", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-tag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tag-chip\">{{ tag() }}</span>\n <span class=\"tag-text\">{{ text() }}</span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-tag{position:relative;display:inline-flex;align-items:stretch;min-width:210px;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-surface);box-shadow:0 8px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;overflow:hidden;font:inherit;transition:transform .18s ease,box-shadow .18s ease}.neo-tag:hover,.neo-tag:focus-visible{transform:translateY(-3px);box-shadow:0 11px 0 var(--neo-shadow)}.neo-tag:active{transform:translateY(4px);box-shadow:0 4px 0 var(--neo-shadow)}.neo-tag:disabled{cursor:not-allowed;opacity:.6}.tag-chip{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:.9rem .75rem;border-right:3px solid var(--dd-neo-ink);background:var(--neo-accent);color:var(--dd-base-600);font-size:.88rem;font-weight:900;letter-spacing:.08em}.tag-text{display:inline-flex;align-items:center;justify-content:center;flex:1;padding:.9rem 1.15rem;font-size:.95rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
399
399
|
}
|
|
400
400
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTag, decorators: [{
|
|
401
401
|
type: Component,
|
|
402
|
-
args: [{ selector: 'duck-dev-button-neobrutal-tag', standalone: true, imports: [NgStyle], template: "<button class=\"neo-tag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tag-chip\">{{ tag() }}</span>\n <span class=\"tag-text\">{{ text() }}</span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-tag{position:relative;display:inline-flex;align-items:stretch;min-width:210px;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-surface);box-shadow:0 8px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;overflow:hidden;font:inherit;transition:transform .18s ease,box-shadow .18s ease}.neo-tag:hover,.neo-tag:focus-visible{transform:translateY(-3px);box-shadow:0 11px 0 var(--neo-shadow)}.neo-tag:active{transform:translateY(4px);box-shadow:0 4px 0 var(--neo-shadow)}.neo-tag:disabled{cursor:not-allowed;opacity:.6}.tag-chip{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:.9rem .75rem;border-right:3px solid var(--dd-neo-ink);background:var(--neo-accent);color:var(--dd-base-600);font-size:.88rem;font-weight:900;letter-spacing:.08em}.tag-text{display:inline-flex;align-items:center;justify-content:center;flex:1;padding:.9rem 1.15rem;font-size:.95rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}\n"] }]
|
|
402
|
+
args: [{ selector: 'duck-dev-button-neobrutal-tag', standalone: true, imports: [NgStyle], template: "<button class=\"neo-tag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tag-chip\">{{ tag() }}</span>\n <span class=\"tag-text\">{{ text() }}</span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-tag{position:relative;display:inline-flex;align-items:stretch;min-width:210px;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-surface);box-shadow:0 8px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;overflow:hidden;font:inherit;transition:transform .18s ease,box-shadow .18s ease}.neo-tag:hover,.neo-tag:focus-visible{transform:translateY(-3px);box-shadow:0 11px 0 var(--neo-shadow)}.neo-tag:active{transform:translateY(4px);box-shadow:0 4px 0 var(--neo-shadow)}.neo-tag:disabled{cursor:not-allowed;opacity:.6}.tag-chip{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:.9rem .75rem;border-right:3px solid var(--dd-neo-ink);background:var(--neo-accent);color:var(--dd-base-600);font-size:.88rem;font-weight:900;letter-spacing:.08em}.tag-text{display:inline-flex;align-items:center;justify-content:center;flex:1;padding:.9rem 1.15rem;font-size:.95rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}\n"] }]
|
|
403
403
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
404
404
|
|
|
405
405
|
class ButtonNeobrutalSticker {
|
|
@@ -409,11 +409,11 @@ class ButtonNeobrutalSticker {
|
|
|
409
409
|
colorButton = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
410
410
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
411
411
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSticker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
412
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalSticker, isStandalone: true, selector: "duck-dev-button-neobrutal-sticker", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-sticker\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"sticker-text\">{{ text() }}</span>\n <span class=\"sticker-badge\">{{ subtext() }}</span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-sticker{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-width:200px;min-height:60px;padding:.9rem 2.8rem .9rem 1.3rem;border:3px solid var(--dd-neo-ink);border-radius:6px;background:var(--neo-surface);box-shadow:5px 5px 0 var(--neo-shadow),5px 5px 0 3px var(--dd-neo-shadow);color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;transition:transform .22s ease,box-shadow .22s ease}.neo-sticker:hover,.neo-sticker:focus-visible{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:8px 8px 0 var(--neo-shadow),8px 8px 0 3px var(--dd-neo-shadow)}.neo-sticker:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-sticker:disabled{cursor:not-allowed;opacity:.6;transform:none}.sticker-text{position:relative;z-index:1;font-size:.95rem}.sticker-badge{position:absolute;top:-10px;left:-8px;padding:.15rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.65rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-6deg);z-index:2}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
412
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalSticker, isStandalone: true, selector: "duck-dev-button-neobrutal-sticker", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-sticker\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"sticker-text\">{{ text() }}</span>\n <span class=\"sticker-badge\">{{ subtext() }}</span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-sticker{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-width:200px;min-height:60px;padding:.9rem 2.8rem .9rem 1.3rem;border:3px solid var(--dd-neo-ink);border-radius:6px;background:var(--neo-surface);box-shadow:5px 5px 0 var(--neo-shadow),5px 5px 0 3px var(--dd-neo-shadow);color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;transition:transform .22s ease,box-shadow .22s ease}.neo-sticker:hover,.neo-sticker:focus-visible{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:8px 8px 0 var(--neo-shadow),8px 8px 0 3px var(--dd-neo-shadow)}.neo-sticker:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-sticker:disabled{cursor:not-allowed;opacity:.6;transform:none}.sticker-text{position:relative;z-index:1;font-size:.95rem}.sticker-badge{position:absolute;top:-10px;left:-8px;padding:.15rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.65rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-6deg);z-index:2}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
413
413
|
}
|
|
414
414
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSticker, decorators: [{
|
|
415
415
|
type: Component,
|
|
416
|
-
args: [{ selector: 'duck-dev-button-neobrutal-sticker', standalone: true, imports: [NgStyle], template: "<button class=\"neo-sticker\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"sticker-text\">{{ text() }}</span>\n <span class=\"sticker-badge\">{{ subtext() }}</span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-sticker{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-width:200px;min-height:60px;padding:.9rem 2.8rem .9rem 1.3rem;border:3px solid var(--dd-neo-ink);border-radius:6px;background:var(--neo-surface);box-shadow:5px 5px 0 var(--neo-shadow),5px 5px 0 3px var(--dd-neo-shadow);color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;transition:transform .22s ease,box-shadow .22s ease}.neo-sticker:hover,.neo-sticker:focus-visible{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:8px 8px 0 var(--neo-shadow),8px 8px 0 3px var(--dd-neo-shadow)}.neo-sticker:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-sticker:disabled{cursor:not-allowed;opacity:.6;transform:none}.sticker-text{position:relative;z-index:1;font-size:.95rem}.sticker-badge{position:absolute;top:-10px;left:-8px;padding:.15rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.65rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-6deg);z-index:2}\n"] }]
|
|
416
|
+
args: [{ selector: 'duck-dev-button-neobrutal-sticker', standalone: true, imports: [NgStyle], template: "<button class=\"neo-sticker\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"sticker-text\">{{ text() }}</span>\n <span class=\"sticker-badge\">{{ subtext() }}</span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-sticker{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-width:200px;min-height:60px;padding:.9rem 2.8rem .9rem 1.3rem;border:3px solid var(--dd-neo-ink);border-radius:6px;background:var(--neo-surface);box-shadow:5px 5px 0 var(--neo-shadow),5px 5px 0 3px var(--dd-neo-shadow);color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;transition:transform .22s ease,box-shadow .22s ease}.neo-sticker:hover,.neo-sticker:focus-visible{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:8px 8px 0 var(--neo-shadow),8px 8px 0 3px var(--dd-neo-shadow)}.neo-sticker:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-sticker:disabled{cursor:not-allowed;opacity:.6;transform:none}.sticker-text{position:relative;z-index:1;font-size:.95rem}.sticker-badge{position:absolute;top:-10px;left:-8px;padding:.15rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.65rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-6deg);z-index:2}\n"] }]
|
|
417
417
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
418
418
|
|
|
419
419
|
class ButtonNeobrutalZigzag {
|
|
@@ -423,11 +423,11 @@ class ButtonNeobrutalZigzag {
|
|
|
423
423
|
colorButton = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
424
424
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
425
425
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalZigzag, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
426
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalZigzag, isStandalone: true, selector: "duck-dev-button-neobrutal-zigzag", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">{{ text() }}</span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-zigzag{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:200px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--neo-text);transition:transform .2s ease}.neo-zigzag:hover,.neo-zigzag:focus-visible{transform:translateY(-4px)}.neo-zigzag:hover .zigzag-body,.neo-zigzag:focus-visible .zigzag-body{box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow)}.neo-zigzag:hover .zigzag-edge,.neo-zigzag:focus-visible .zigzag-edge{transform:translateY(2px)}.neo-zigzag:active{transform:translateY(2px)}.neo-zigzag:active .zigzag-body{box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-zigzag:disabled{cursor:not-allowed;opacity:.6;transform:none}.zigzag-body{position:relative;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.3rem;border:3px solid var(--dd-neo-ink);border-bottom:none;border-radius:8px 8px 0 0;background:var(--neo-surface);box-shadow:4px 4px 0 var(--neo-shadow),4px 4px 0 3px var(--dd-neo-shadow);transition:box-shadow .2s ease}.zigzag-label{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.zigzag-text{font-size:.95rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.zigzag-edge{display:block;width:100%;height:14px;background:var(--neo-surface);border-left:3px solid var(--dd-neo-ink);border-right:3px solid var(--dd-neo-ink);clip-path:polygon(0% 0%,5% 100%,10% 0%,15% 100%,20% 0%,25% 100%,30% 0%,35% 100%,40% 0%,45% 100%,50% 0%,55% 100%,60% 0%,65% 100%,70% 0%,75% 100%,80% 0%,85% 100%,90% 0%,95% 100%,100% 0%);transition:transform .2s ease}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
426
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalZigzag, isStandalone: true, selector: "duck-dev-button-neobrutal-zigzag", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">{{ text() }}</span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-zigzag{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:200px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--neo-text);transition:transform .2s ease}.neo-zigzag:hover,.neo-zigzag:focus-visible{transform:translateY(-4px)}.neo-zigzag:hover .zigzag-body,.neo-zigzag:focus-visible .zigzag-body{box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow)}.neo-zigzag:hover .zigzag-edge,.neo-zigzag:focus-visible .zigzag-edge{transform:translateY(2px)}.neo-zigzag:active{transform:translateY(2px)}.neo-zigzag:active .zigzag-body{box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-zigzag:disabled{cursor:not-allowed;opacity:.6;transform:none}.zigzag-body{position:relative;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.3rem;border:3px solid var(--dd-neo-ink);border-bottom:none;border-radius:8px 8px 0 0;background:var(--neo-surface);box-shadow:4px 4px 0 var(--neo-shadow),4px 4px 0 3px var(--dd-neo-shadow);transition:box-shadow .2s ease}.zigzag-label{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.zigzag-text{font-size:.95rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.zigzag-edge{display:block;width:100%;height:14px;background:var(--neo-surface);border-left:3px solid var(--dd-neo-ink);border-right:3px solid var(--dd-neo-ink);clip-path:polygon(0% 0%,5% 100%,10% 0%,15% 100%,20% 0%,25% 100%,30% 0%,35% 100%,40% 0%,45% 100%,50% 0%,55% 100%,60% 0%,65% 100%,70% 0%,75% 100%,80% 0%,85% 100%,90% 0%,95% 100%,100% 0%);transition:transform .2s ease}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
427
427
|
}
|
|
428
428
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalZigzag, decorators: [{
|
|
429
429
|
type: Component,
|
|
430
|
-
args: [{ selector: 'duck-dev-button-neobrutal-zigzag', standalone: true, imports: [NgStyle], template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">{{ text() }}</span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-zigzag{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:200px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--neo-text);transition:transform .2s ease}.neo-zigzag:hover,.neo-zigzag:focus-visible{transform:translateY(-4px)}.neo-zigzag:hover .zigzag-body,.neo-zigzag:focus-visible .zigzag-body{box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow)}.neo-zigzag:hover .zigzag-edge,.neo-zigzag:focus-visible .zigzag-edge{transform:translateY(2px)}.neo-zigzag:active{transform:translateY(2px)}.neo-zigzag:active .zigzag-body{box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-zigzag:disabled{cursor:not-allowed;opacity:.6;transform:none}.zigzag-body{position:relative;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.3rem;border:3px solid var(--dd-neo-ink);border-bottom:none;border-radius:8px 8px 0 0;background:var(--neo-surface);box-shadow:4px 4px 0 var(--neo-shadow),4px 4px 0 3px var(--dd-neo-shadow);transition:box-shadow .2s ease}.zigzag-label{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.zigzag-text{font-size:.95rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.zigzag-edge{display:block;width:100%;height:14px;background:var(--neo-surface);border-left:3px solid var(--dd-neo-ink);border-right:3px solid var(--dd-neo-ink);clip-path:polygon(0% 0%,5% 100%,10% 0%,15% 100%,20% 0%,25% 100%,30% 0%,35% 100%,40% 0%,45% 100%,50% 0%,55% 100%,60% 0%,65% 100%,70% 0%,75% 100%,80% 0%,85% 100%,90% 0%,95% 100%,100% 0%);transition:transform .2s ease}\n"] }]
|
|
430
|
+
args: [{ selector: 'duck-dev-button-neobrutal-zigzag', standalone: true, imports: [NgStyle], template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">{{ text() }}</span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-zigzag{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:200px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--neo-text);transition:transform .2s ease}.neo-zigzag:hover,.neo-zigzag:focus-visible{transform:translateY(-4px)}.neo-zigzag:hover .zigzag-body,.neo-zigzag:focus-visible .zigzag-body{box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow)}.neo-zigzag:hover .zigzag-edge,.neo-zigzag:focus-visible .zigzag-edge{transform:translateY(2px)}.neo-zigzag:active{transform:translateY(2px)}.neo-zigzag:active .zigzag-body{box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-zigzag:disabled{cursor:not-allowed;opacity:.6;transform:none}.zigzag-body{position:relative;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.3rem;border:3px solid var(--dd-neo-ink);border-bottom:none;border-radius:8px 8px 0 0;background:var(--neo-surface);box-shadow:4px 4px 0 var(--neo-shadow),4px 4px 0 3px var(--dd-neo-shadow);transition:box-shadow .2s ease}.zigzag-label{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.zigzag-text{font-size:.95rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.zigzag-edge{display:block;width:100%;height:14px;background:var(--neo-surface);border-left:3px solid var(--dd-neo-ink);border-right:3px solid var(--dd-neo-ink);clip-path:polygon(0% 0%,5% 100%,10% 0%,15% 100%,20% 0%,25% 100%,30% 0%,35% 100%,40% 0%,45% 100%,50% 0%,55% 100%,60% 0%,65% 100%,70% 0%,75% 100%,80% 0%,85% 100%,90% 0%,95% 100%,100% 0%);transition:transform .2s ease}\n"] }]
|
|
431
431
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
432
432
|
|
|
433
433
|
class ButtonNeobrutalTape {
|
|
@@ -437,11 +437,11 @@ class ButtonNeobrutalTape {
|
|
|
437
437
|
colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
438
438
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
439
439
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTape, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
440
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalTape, isStandalone: true, selector: "duck-dev-button-neobrutal-tape", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-tape\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tape-stripe tape-stripe--left\" aria-hidden=\"true\"></span>\n <span class=\"tape-body\">\n <span class=\"tape-text\">{{ text() }}</span>\n <span class=\"tape-icon\">{{ icon() }}</span>\n </span>\n <span class=\"tape-stripe tape-stripe--right\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-tape{position:relative;display:inline-flex;align-items:stretch;min-width:230px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;transform:rotate(-1.5deg);transition:transform .22s ease,filter .22s ease}.neo-tape:hover,.neo-tape:focus-visible{transform:rotate(0) scale(1.03)}.neo-tape:hover .tape-stripe--left,.neo-tape:focus-visible .tape-stripe--left{width:22px}.neo-tape:hover .tape-stripe--right,.neo-tape:focus-visible .tape-stripe--right{width:22px}.neo-tape:hover .tape-icon,.neo-tape:focus-visible .tape-icon{transform:translate(4px)}.neo-tape:active{transform:rotate(-.5deg) scale(.97)}.neo-tape:disabled{cursor:not-allowed;opacity:.6;transform:rotate(-1.5deg)}.tape-body{display:flex;align-items:center;justify-content:center;gap:.6rem;flex:1;padding:.85rem 1.2rem;border-top:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--neo-surface);color:var(--neo-text);box-shadow:0 5px 0 var(--neo-shadow),0 5px 0 3px var(--dd-neo-shadow);transition:box-shadow .22s ease}.tape-text{font-size:.95rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.tape-icon{font-size:.85rem;font-weight:900;opacity:.7;transition:transform .22s ease}.tape-stripe{display:block;width:16px;flex-shrink:0;border:3px solid var(--dd-neo-ink);background:var(--neo-accent);transition:width .22s ease}.tape-stripe--left{border-right:none;border-radius:4px 0 0 4px;background:repeating-linear-gradient(-45deg,var(--neo-accent),var(--neo-accent) 3px,transparent 3px,transparent 6px)}.tape-stripe--right{border-left:none;border-radius:0 4px 4px 0;background:repeating-linear-gradient(45deg,var(--neo-accent),var(--neo-accent) 3px,transparent 3px,transparent 6px)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
440
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalTape, isStandalone: true, selector: "duck-dev-button-neobrutal-tape", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-tape\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tape-stripe tape-stripe--left\" aria-hidden=\"true\"></span>\n <span class=\"tape-body\">\n <span class=\"tape-text\">{{ text() }}</span>\n <span class=\"tape-icon\">{{ icon() }}</span>\n </span>\n <span class=\"tape-stripe tape-stripe--right\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-tape{position:relative;display:inline-flex;align-items:stretch;min-width:230px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;transform:rotate(-1.5deg);transition:transform .22s ease,filter .22s ease}.neo-tape:hover,.neo-tape:focus-visible{transform:rotate(0) scale(1.03)}.neo-tape:hover .tape-stripe--left,.neo-tape:focus-visible .tape-stripe--left{width:22px}.neo-tape:hover .tape-stripe--right,.neo-tape:focus-visible .tape-stripe--right{width:22px}.neo-tape:hover .tape-icon,.neo-tape:focus-visible .tape-icon{transform:translate(4px)}.neo-tape:active{transform:rotate(-.5deg) scale(.97)}.neo-tape:disabled{cursor:not-allowed;opacity:.6;transform:rotate(-1.5deg)}.tape-body{display:flex;align-items:center;justify-content:center;gap:.6rem;flex:1;padding:.85rem 1.2rem;border-top:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--neo-surface);color:var(--neo-text);box-shadow:0 5px 0 var(--neo-shadow),0 5px 0 3px var(--dd-neo-shadow);transition:box-shadow .22s ease}.tape-text{font-size:.95rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.tape-icon{font-size:.85rem;font-weight:900;opacity:.7;transition:transform .22s ease}.tape-stripe{display:block;width:16px;flex-shrink:0;border:3px solid var(--dd-neo-ink);background:var(--neo-accent);transition:width .22s ease}.tape-stripe--left{border-right:none;border-radius:4px 0 0 4px;background:repeating-linear-gradient(-45deg,var(--neo-accent),var(--neo-accent) 3px,transparent 3px,transparent 6px)}.tape-stripe--right{border-left:none;border-radius:0 4px 4px 0;background:repeating-linear-gradient(45deg,var(--neo-accent),var(--neo-accent) 3px,transparent 3px,transparent 6px)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
441
441
|
}
|
|
442
442
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTape, decorators: [{
|
|
443
443
|
type: Component,
|
|
444
|
-
args: [{ selector: 'duck-dev-button-neobrutal-tape', standalone: true, imports: [NgStyle], template: "<button class=\"neo-tape\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tape-stripe tape-stripe--left\" aria-hidden=\"true\"></span>\n <span class=\"tape-body\">\n <span class=\"tape-text\">{{ text() }}</span>\n <span class=\"tape-icon\">{{ icon() }}</span>\n </span>\n <span class=\"tape-stripe tape-stripe--right\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-tape{position:relative;display:inline-flex;align-items:stretch;min-width:230px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;transform:rotate(-1.5deg);transition:transform .22s ease,filter .22s ease}.neo-tape:hover,.neo-tape:focus-visible{transform:rotate(0) scale(1.03)}.neo-tape:hover .tape-stripe--left,.neo-tape:focus-visible .tape-stripe--left{width:22px}.neo-tape:hover .tape-stripe--right,.neo-tape:focus-visible .tape-stripe--right{width:22px}.neo-tape:hover .tape-icon,.neo-tape:focus-visible .tape-icon{transform:translate(4px)}.neo-tape:active{transform:rotate(-.5deg) scale(.97)}.neo-tape:disabled{cursor:not-allowed;opacity:.6;transform:rotate(-1.5deg)}.tape-body{display:flex;align-items:center;justify-content:center;gap:.6rem;flex:1;padding:.85rem 1.2rem;border-top:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--neo-surface);color:var(--neo-text);box-shadow:0 5px 0 var(--neo-shadow),0 5px 0 3px var(--dd-neo-shadow);transition:box-shadow .22s ease}.tape-text{font-size:.95rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.tape-icon{font-size:.85rem;font-weight:900;opacity:.7;transition:transform .22s ease}.tape-stripe{display:block;width:16px;flex-shrink:0;border:3px solid var(--dd-neo-ink);background:var(--neo-accent);transition:width .22s ease}.tape-stripe--left{border-right:none;border-radius:4px 0 0 4px;background:repeating-linear-gradient(-45deg,var(--neo-accent),var(--neo-accent) 3px,transparent 3px,transparent 6px)}.tape-stripe--right{border-left:none;border-radius:0 4px 4px 0;background:repeating-linear-gradient(45deg,var(--neo-accent),var(--neo-accent) 3px,transparent 3px,transparent 6px)}\n"] }]
|
|
444
|
+
args: [{ selector: 'duck-dev-button-neobrutal-tape', standalone: true, imports: [NgStyle], template: "<button class=\"neo-tape\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tape-stripe tape-stripe--left\" aria-hidden=\"true\"></span>\n <span class=\"tape-body\">\n <span class=\"tape-text\">{{ text() }}</span>\n <span class=\"tape-icon\">{{ icon() }}</span>\n </span>\n <span class=\"tape-stripe tape-stripe--right\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-tape{position:relative;display:inline-flex;align-items:stretch;min-width:230px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;transform:rotate(-1.5deg);transition:transform .22s ease,filter .22s ease}.neo-tape:hover,.neo-tape:focus-visible{transform:rotate(0) scale(1.03)}.neo-tape:hover .tape-stripe--left,.neo-tape:focus-visible .tape-stripe--left{width:22px}.neo-tape:hover .tape-stripe--right,.neo-tape:focus-visible .tape-stripe--right{width:22px}.neo-tape:hover .tape-icon,.neo-tape:focus-visible .tape-icon{transform:translate(4px)}.neo-tape:active{transform:rotate(-.5deg) scale(.97)}.neo-tape:disabled{cursor:not-allowed;opacity:.6;transform:rotate(-1.5deg)}.tape-body{display:flex;align-items:center;justify-content:center;gap:.6rem;flex:1;padding:.85rem 1.2rem;border-top:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--neo-surface);color:var(--neo-text);box-shadow:0 5px 0 var(--neo-shadow),0 5px 0 3px var(--dd-neo-shadow);transition:box-shadow .22s ease}.tape-text{font-size:.95rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.tape-icon{font-size:.85rem;font-weight:900;opacity:.7;transition:transform .22s ease}.tape-stripe{display:block;width:16px;flex-shrink:0;border:3px solid var(--dd-neo-ink);background:var(--neo-accent);transition:width .22s ease}.tape-stripe--left{border-right:none;border-radius:4px 0 0 4px;background:repeating-linear-gradient(-45deg,var(--neo-accent),var(--neo-accent) 3px,transparent 3px,transparent 6px)}.tape-stripe--right{border-left:none;border-radius:0 4px 4px 0;background:repeating-linear-gradient(45deg,var(--neo-accent),var(--neo-accent) 3px,transparent 3px,transparent 6px)}\n"] }]
|
|
445
445
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
446
446
|
|
|
447
447
|
class DuckDevCardSection {
|
|
@@ -470,35 +470,35 @@ function getNeobrutalBadgeStyle(color) {
|
|
|
470
470
|
switch (color) {
|
|
471
471
|
case AccentEnumColor.Violet:
|
|
472
472
|
return {
|
|
473
|
-
'--dd-neo-badge-surface': 'color-mix(in srgb, var(--dd-
|
|
473
|
+
'--dd-neo-badge-surface': 'color-mix(in srgb, var(--dd-neo-ana-3) 14%, var(--dd-base-0))',
|
|
474
474
|
'--dd-neo-badge-text': 'var(--dd-base-600)',
|
|
475
475
|
'--dd-neo-badge-border': 'var(--dd-neo-ink)',
|
|
476
|
-
'--dd-neo-badge-shadow': 'var(--dd-
|
|
477
|
-
'--dd-neo-badge-accent': 'var(--dd-
|
|
476
|
+
'--dd-neo-badge-shadow': 'var(--dd-neo-ana-6)',
|
|
477
|
+
'--dd-neo-badge-accent': 'var(--dd-neo-ana-1)',
|
|
478
478
|
};
|
|
479
479
|
case AccentEnumColor.Orange:
|
|
480
480
|
return {
|
|
481
|
-
'--dd-neo-badge-surface': 'color-mix(in srgb, var(--dd-
|
|
481
|
+
'--dd-neo-badge-surface': 'color-mix(in srgb, var(--dd-neo-ana-2) 16%, var(--dd-base-0))',
|
|
482
482
|
'--dd-neo-badge-text': 'var(--dd-base-600)',
|
|
483
483
|
'--dd-neo-badge-border': 'var(--dd-neo-ink)',
|
|
484
|
-
'--dd-neo-badge-shadow': 'var(--dd-
|
|
485
|
-
'--dd-neo-badge-accent': 'var(--dd-
|
|
484
|
+
'--dd-neo-badge-shadow': 'var(--dd-neo-ana-5)',
|
|
485
|
+
'--dd-neo-badge-accent': 'var(--dd-neo-ana-1)',
|
|
486
486
|
};
|
|
487
487
|
case AccentEnumColor.Gray:
|
|
488
488
|
return {
|
|
489
489
|
'--dd-neo-badge-surface': 'var(--dd-base-100)',
|
|
490
490
|
'--dd-neo-badge-text': 'var(--dd-base-600)',
|
|
491
491
|
'--dd-neo-badge-border': 'var(--dd-neo-ink)',
|
|
492
|
-
'--dd-neo-badge-shadow': 'var(--dd-
|
|
493
|
-
'--dd-neo-badge-accent': 'var(--dd-
|
|
492
|
+
'--dd-neo-badge-shadow': 'var(--dd-neo-ana-6)',
|
|
493
|
+
'--dd-neo-badge-accent': 'var(--dd-neo-ana-2)',
|
|
494
494
|
};
|
|
495
495
|
case AccentEnumColor.Dark:
|
|
496
496
|
return {
|
|
497
|
-
'--dd-neo-badge-surface': 'var(--dd-
|
|
498
|
-
'--dd-neo-badge-text': 'var(--dd-
|
|
497
|
+
'--dd-neo-badge-surface': 'var(--dd-neo-ana-4)',
|
|
498
|
+
'--dd-neo-badge-text': 'var(--dd-neo-ana-4-contrast)',
|
|
499
499
|
'--dd-neo-badge-border': 'var(--dd-neo-ink)',
|
|
500
|
-
'--dd-neo-badge-shadow': 'var(--dd-
|
|
501
|
-
'--dd-neo-badge-accent': 'var(--dd-
|
|
500
|
+
'--dd-neo-badge-shadow': 'var(--dd-neo-ana-3)',
|
|
501
|
+
'--dd-neo-badge-accent': 'var(--dd-neo-ana-1)',
|
|
502
502
|
};
|
|
503
503
|
case AccentEnumColor.White:
|
|
504
504
|
default:
|
|
@@ -506,8 +506,8 @@ function getNeobrutalBadgeStyle(color) {
|
|
|
506
506
|
'--dd-neo-badge-surface': 'var(--dd-base-0)',
|
|
507
507
|
'--dd-neo-badge-text': 'var(--dd-base-600)',
|
|
508
508
|
'--dd-neo-badge-border': 'var(--dd-neo-ink)',
|
|
509
|
-
'--dd-neo-badge-shadow': 'var(--dd-
|
|
510
|
-
'--dd-neo-badge-accent': 'var(--dd-
|
|
509
|
+
'--dd-neo-badge-shadow': 'var(--dd-neo-ana-5)',
|
|
510
|
+
'--dd-neo-badge-accent': 'var(--dd-neo-ana-6)',
|
|
511
511
|
};
|
|
512
512
|
}
|
|
513
513
|
}
|
|
@@ -2071,11 +2071,11 @@ class DuckDevAccordionComponent {
|
|
|
2071
2071
|
this.isOpen.update((prev) => !prev);
|
|
2072
2072
|
}
|
|
2073
2073
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2074
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevAccordionComponent, isStandalone: true, selector: "duck-dev-accordion", 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=\"duck-dev-accordion\">\n <button\n type=\"button\"\n class=\"accordion-header\"\n [class.open]=\"isOpen()\"\n [attr.data-color]=\"color()\"\n (click)=\"toggle()\"\n >\n {{ title() }}\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" [class.open-chevron]=\"isOpen()\" />\n </button>\n @if (isOpen()) {\n <div class=\"accordion-content\" animate.enter=\"enter-animation\" animate.leave=\"leaving\">\n <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";: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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-accordion{border:1px solid var(--dd-base-200);border-radius:12px;background:var(--dd-base-300);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;background:var(--dd-base-0);border:none;cursor:pointer;position:relative;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;color:var(--dd-base-600)}.accordion-header[data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue)}.accordion-header[data-color=violet]:hover{background:color-mix(in srgb,var(--dd-base-accent-blue) 24%,transparent)}.accordion-header[data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange)}.accordion-header[data-color=orange]:hover{background:color-mix(in srgb,var(--dd-base-accent-orange) 24%,transparent)}.accordion-header[data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600)}.accordion-header[data-color=gray]:hover{background:var(--dd-base-200)}.accordion-header[data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700)}.accordion-header[data-color=dark]:hover{background:var(--dd-base-300)}.accordion-header[data-color=white],.accordion-header:not([data-color]){background:var(--dd-base-0);color:var(--dd-base-600)}.accordion-header[data-color=white]:hover,.accordion-header:not([data-color]):hover{background:var(--dd-base-100)}.accordion-content{overflow:hidden;background-color:var(--dd-base-100);line-height:1.5}duck-dev-icon{transition:transform .3s}.open-chevron{transform:rotate(90deg)}.enter-animation{animation:slideDown .5s forwards}@keyframes slideDown{0%{max-height:0}to{max-height:500px}}.leaving{animation:slideUp .3s forwards}@keyframes slideUp{0%{max-height:300px}to{max-height:0}}\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 });
|
|
2074
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevAccordionComponent, isStandalone: true, selector: "duck-dev-accordion", 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=\"duck-dev-accordion\">\n <button\n type=\"button\"\n class=\"accordion-header\"\n [class.open]=\"isOpen()\"\n [attr.data-color]=\"color()\"\n (click)=\"toggle()\"\n >\n {{ title() }}\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" [class.open-chevron]=\"isOpen()\" />\n </button>\n @if (isOpen()) {\n <div class=\"accordion-content\" animate.enter=\"enter-animation\" animate.leave=\"leaving\">\n <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";: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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-accordion{border:1px solid var(--dd-base-200);border-radius:12px;background:var(--dd-base-300);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;background:var(--dd-base-0);border:none;cursor:pointer;position:relative;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;color:var(--dd-base-600)}.accordion-header[data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue)}.accordion-header[data-color=violet]:hover{background:color-mix(in srgb,var(--dd-base-accent-blue) 24%,transparent)}.accordion-header[data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange)}.accordion-header[data-color=orange]:hover{background:color-mix(in srgb,var(--dd-base-accent-orange) 24%,transparent)}.accordion-header[data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600)}.accordion-header[data-color=gray]:hover{background:var(--dd-base-200)}.accordion-header[data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700)}.accordion-header[data-color=dark]:hover{background:var(--dd-base-300)}.accordion-header[data-color=white],.accordion-header:not([data-color]){background:var(--dd-base-0);color:var(--dd-base-600)}.accordion-header[data-color=white]:hover,.accordion-header:not([data-color]):hover{background:var(--dd-base-100)}.accordion-content{overflow:hidden;background-color:var(--dd-base-100);line-height:1.5}duck-dev-icon{transition:transform .3s}.open-chevron{transform:rotate(90deg)}.enter-animation{animation:slideDown .5s forwards}@keyframes slideDown{0%{max-height:0}to{max-height:500px}}.leaving{animation:slideUp .3s forwards}@keyframes slideUp{0%{max-height:300px}to{max-height:0}}\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 });
|
|
2075
2075
|
}
|
|
2076
2076
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionComponent, decorators: [{
|
|
2077
2077
|
type: Component,
|
|
2078
|
-
args: [{ selector: 'duck-dev-accordion', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"duck-dev-accordion\">\n <button\n type=\"button\"\n class=\"accordion-header\"\n [class.open]=\"isOpen()\"\n [attr.data-color]=\"color()\"\n (click)=\"toggle()\"\n >\n {{ title() }}\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" [class.open-chevron]=\"isOpen()\" />\n </button>\n @if (isOpen()) {\n <div class=\"accordion-content\" animate.enter=\"enter-animation\" animate.leave=\"leaving\">\n <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";: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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-accordion{border:1px solid var(--dd-base-200);border-radius:12px;background:var(--dd-base-300);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;background:var(--dd-base-0);border:none;cursor:pointer;position:relative;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;color:var(--dd-base-600)}.accordion-header[data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue)}.accordion-header[data-color=violet]:hover{background:color-mix(in srgb,var(--dd-base-accent-blue) 24%,transparent)}.accordion-header[data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange)}.accordion-header[data-color=orange]:hover{background:color-mix(in srgb,var(--dd-base-accent-orange) 24%,transparent)}.accordion-header[data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600)}.accordion-header[data-color=gray]:hover{background:var(--dd-base-200)}.accordion-header[data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700)}.accordion-header[data-color=dark]:hover{background:var(--dd-base-300)}.accordion-header[data-color=white],.accordion-header:not([data-color]){background:var(--dd-base-0);color:var(--dd-base-600)}.accordion-header[data-color=white]:hover,.accordion-header:not([data-color]):hover{background:var(--dd-base-100)}.accordion-content{overflow:hidden;background-color:var(--dd-base-100);line-height:1.5}duck-dev-icon{transition:transform .3s}.open-chevron{transform:rotate(90deg)}.enter-animation{animation:slideDown .5s forwards}@keyframes slideDown{0%{max-height:0}to{max-height:500px}}.leaving{animation:slideUp .3s forwards}@keyframes slideUp{0%{max-height:300px}to{max-height:0}}\n"] }]
|
|
2078
|
+
args: [{ selector: 'duck-dev-accordion', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"duck-dev-accordion\">\n <button\n type=\"button\"\n class=\"accordion-header\"\n [class.open]=\"isOpen()\"\n [attr.data-color]=\"color()\"\n (click)=\"toggle()\"\n >\n {{ title() }}\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" [class.open-chevron]=\"isOpen()\" />\n </button>\n @if (isOpen()) {\n <div class=\"accordion-content\" animate.enter=\"enter-animation\" animate.leave=\"leaving\">\n <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";: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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-accordion{border:1px solid var(--dd-base-200);border-radius:12px;background:var(--dd-base-300);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;background:var(--dd-base-0);border:none;cursor:pointer;position:relative;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;color:var(--dd-base-600)}.accordion-header[data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue)}.accordion-header[data-color=violet]:hover{background:color-mix(in srgb,var(--dd-base-accent-blue) 24%,transparent)}.accordion-header[data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange)}.accordion-header[data-color=orange]:hover{background:color-mix(in srgb,var(--dd-base-accent-orange) 24%,transparent)}.accordion-header[data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600)}.accordion-header[data-color=gray]:hover{background:var(--dd-base-200)}.accordion-header[data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700)}.accordion-header[data-color=dark]:hover{background:var(--dd-base-300)}.accordion-header[data-color=white],.accordion-header:not([data-color]){background:var(--dd-base-0);color:var(--dd-base-600)}.accordion-header[data-color=white]:hover,.accordion-header:not([data-color]):hover{background:var(--dd-base-100)}.accordion-content{overflow:hidden;background-color:var(--dd-base-100);line-height:1.5}duck-dev-icon{transition:transform .3s}.open-chevron{transform:rotate(90deg)}.enter-animation{animation:slideDown .5s forwards}@keyframes slideDown{0%{max-height:0}to{max-height:500px}}.leaving{animation:slideUp .3s forwards}@keyframes slideUp{0%{max-height:300px}to{max-height:0}}\n"] }]
|
|
2079
2079
|
}], 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 }] }] } });
|
|
2080
2080
|
|
|
2081
2081
|
function getClassicSpeakerBubbleStyle(color) {
|
|
@@ -2132,21 +2132,21 @@ function getNeobrutalSpeakerBubbleStyle(color) {
|
|
|
2132
2132
|
switch (color) {
|
|
2133
2133
|
case AccentEnumColor.Violet:
|
|
2134
2134
|
return {
|
|
2135
|
-
'--dd-speaker-surface': 'color-mix(in srgb, var(--dd-
|
|
2136
|
-
'--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-
|
|
2135
|
+
'--dd-speaker-surface': 'color-mix(in srgb, var(--dd-neo-ana-3) 14%, var(--dd-base-0))',
|
|
2136
|
+
'--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-neo-ana-3) 7%, var(--dd-base-0))',
|
|
2137
2137
|
'--dd-speaker-text': 'var(--dd-base-600)',
|
|
2138
2138
|
'--dd-speaker-border': 'var(--dd-neo-ink)',
|
|
2139
|
-
'--dd-speaker-accent': 'var(--dd-
|
|
2140
|
-
'--dd-speaker-shadow': 'var(--dd-
|
|
2139
|
+
'--dd-speaker-accent': 'var(--dd-neo-ana-1)',
|
|
2140
|
+
'--dd-speaker-shadow': 'var(--dd-neo-ana-6)',
|
|
2141
2141
|
};
|
|
2142
2142
|
case AccentEnumColor.Orange:
|
|
2143
2143
|
return {
|
|
2144
|
-
'--dd-speaker-surface': 'color-mix(in srgb, var(--dd-
|
|
2145
|
-
'--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-
|
|
2144
|
+
'--dd-speaker-surface': 'color-mix(in srgb, var(--dd-neo-ana-2) 16%, var(--dd-base-0))',
|
|
2145
|
+
'--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-neo-ana-2) 8%, var(--dd-base-0))',
|
|
2146
2146
|
'--dd-speaker-text': 'var(--dd-base-600)',
|
|
2147
2147
|
'--dd-speaker-border': 'var(--dd-neo-ink)',
|
|
2148
|
-
'--dd-speaker-accent': 'var(--dd-
|
|
2149
|
-
'--dd-speaker-shadow': 'var(--dd-
|
|
2148
|
+
'--dd-speaker-accent': 'var(--dd-neo-ana-1)',
|
|
2149
|
+
'--dd-speaker-shadow': 'var(--dd-neo-ana-5)',
|
|
2150
2150
|
};
|
|
2151
2151
|
case AccentEnumColor.Gray:
|
|
2152
2152
|
return {
|
|
@@ -2154,17 +2154,17 @@ function getNeobrutalSpeakerBubbleStyle(color) {
|
|
|
2154
2154
|
'--dd-speaker-surface-muted': 'var(--dd-base-0)',
|
|
2155
2155
|
'--dd-speaker-text': 'var(--dd-base-600)',
|
|
2156
2156
|
'--dd-speaker-border': 'var(--dd-neo-ink)',
|
|
2157
|
-
'--dd-speaker-accent': 'var(--dd-
|
|
2158
|
-
'--dd-speaker-shadow': 'var(--dd-
|
|
2157
|
+
'--dd-speaker-accent': 'var(--dd-neo-ana-2)',
|
|
2158
|
+
'--dd-speaker-shadow': 'var(--dd-neo-ana-6)',
|
|
2159
2159
|
};
|
|
2160
2160
|
case AccentEnumColor.Dark:
|
|
2161
2161
|
return {
|
|
2162
|
-
'--dd-speaker-surface': 'var(--dd-
|
|
2163
|
-
'--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-
|
|
2164
|
-
'--dd-speaker-text': 'var(--dd-
|
|
2162
|
+
'--dd-speaker-surface': 'var(--dd-neo-ana-4)',
|
|
2163
|
+
'--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-neo-ana-4) 90%, var(--dd-neo-ana-3))',
|
|
2164
|
+
'--dd-speaker-text': 'var(--dd-neo-ana-4-contrast)',
|
|
2165
2165
|
'--dd-speaker-border': 'var(--dd-neo-ink)',
|
|
2166
|
-
'--dd-speaker-accent': 'var(--dd-
|
|
2167
|
-
'--dd-speaker-shadow': 'var(--dd-
|
|
2166
|
+
'--dd-speaker-accent': 'var(--dd-neo-ana-1)',
|
|
2167
|
+
'--dd-speaker-shadow': 'var(--dd-neo-ana-3)',
|
|
2168
2168
|
};
|
|
2169
2169
|
case AccentEnumColor.White:
|
|
2170
2170
|
default:
|
|
@@ -2173,8 +2173,8 @@ function getNeobrutalSpeakerBubbleStyle(color) {
|
|
|
2173
2173
|
'--dd-speaker-surface-muted': 'var(--dd-base-100)',
|
|
2174
2174
|
'--dd-speaker-text': 'var(--dd-base-600)',
|
|
2175
2175
|
'--dd-speaker-border': 'var(--dd-neo-ink)',
|
|
2176
|
-
'--dd-speaker-accent': 'var(--dd-
|
|
2177
|
-
'--dd-speaker-shadow': 'var(--dd-
|
|
2176
|
+
'--dd-speaker-accent': 'var(--dd-neo-ana-6)',
|
|
2177
|
+
'--dd-speaker-shadow': 'var(--dd-neo-ana-5)',
|
|
2178
2178
|
};
|
|
2179
2179
|
}
|
|
2180
2180
|
}
|
|
@@ -3613,7 +3613,7 @@ class ButtonNeobrutalBlock {
|
|
|
3613
3613
|
colorGray = AccentEnumColor.Gray;
|
|
3614
3614
|
colorDark = AccentEnumColor.Dark;
|
|
3615
3615
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3616
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ButtonNeobrutalBlock, isStandalone: true, selector: "app-button-neobrutal-block", ngImport: i0, template: "<dd-card-section>\n <h2>{{ 'buttons.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-neobrutal-burst\n [text]=\"'Launch'\"\n [subtext]=\"'HOT DROP'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-slab\n [text]=\"'Drop Zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tape\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n [colorButton]=\"buttonColor\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.neobrutal.inputText' | transloco }}</li>\n <li><strong>subtext</strong> - {{ 'buttons.neobrutal.inputSubtext' | transloco }}</li>\n <li><strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}</li>\n <li><strong>tag</strong> - {{ 'buttons.neobrutal.inputTag' | transloco }}</li>\n <li><strong>label</strong> - {{ 'buttons.neobrutal.inputLabel' | transloco }}</li>\n <li><strong>icon</strong> - {{ 'buttons.neobrutal.inputIcon' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}</li>\n <li><strong>isDisabled</strong> - {{ 'buttons.neobrutal.inputIsDisabled' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.neobrutal.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-burst [text]=\"'Launch'\" [subtext]=\"'Hot drop'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Open beta'\"\n [subtext]=\"'Beta'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstDark' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Night mode'\"\n [subtext]=\"'Sharp'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabGray' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Drop zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Fast lane'\"\n [helperText]=\"'priority queue'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabDisabled' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Read only'\"\n [helperText]=\"'disabled'\"\n [isDisabled]=\"true\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Join crew'\"\n [tag]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Pay later'\"\n [tag]=\"'02'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Sticker -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Grab this'\"\n [subtext]=\"'sale'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerDark' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Dark peel'\"\n [subtext]=\"'pro'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Zigzag -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Claim it'\"\n [label]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Rip here'\"\n [label]=\"'GO'\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <!-- Tape -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-tape [text]=\"'Stick it'\" [icon]=\"'>>'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Attach'\"\n [icon]=\"'+'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Pin down'\"\n [icon]=\"'>>'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n</dd-card-section>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-200));border:3px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}h2{font-size:28px;font-weight:700;color:var(--dd-base-600);margin-bottom:15px;text-transform:uppercase}h3{font-size:20px;font-weight:700;color:var(--dd-base-600);margin:25px 0 15px;text-transform:uppercase}.usage-block{margin-bottom:25px}.usage-block pre{margin:0;padding:20px;overflow-x:auto;border:3px solid var(--dd-neo-ink);border-radius:12px;background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);color:var(--dd-base-0)}.usage-block code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}.inputs-block{margin-bottom:25px}.inputs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.inputs-block li{padding:14px 16px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-300);color:var(--dd-base-500);font-size:15px;line-height:1.5}.inputs-block strong{color:var(--dd-base-600)}.examples-block .example-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.examples-block .example-item{flex:1;min-width:250px;padding:22px 18px 20px;border:3px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,var(--dd-base-accent-yellow) 0 22px,transparent 23px),var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-neo-shadow);display:flex;flex-direction:column;align-items:center;gap:18px}.examples-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}.examples-block duck-dev-button-neobrutal-burst,.examples-block duck-dev-button-neobrutal-slab,.examples-block duck-dev-button-neobrutal-tag,.examples-block duck-dev-button-neobrutal-sticker,.examples-block duck-dev-button-neobrutal-zigzag,.examples-block duck-dev-button-neobrutal-tape{width:100%;max-width:320px}@media(max-width:768px){.examples-block .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonNeobrutalBurst, selector: "duck-dev-button-neobrutal-burst", inputs: ["text", "subtext", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTag, selector: "duck-dev-button-neobrutal-tag", inputs: ["text", "tag", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSticker, selector: "duck-dev-button-neobrutal-sticker", inputs: ["text", "subtext", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalZigzag, selector: "duck-dev-button-neobrutal-zigzag", inputs: ["text", "label", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTape, selector: "duck-dev-button-neobrutal-tape", inputs: ["text", "icon", "isDisabled", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
3616
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ButtonNeobrutalBlock, isStandalone: true, selector: "app-button-neobrutal-block", ngImport: i0, template: "<dd-card-section>\n <h2>{{ 'buttons.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-neobrutal-burst\n [text]=\"'Launch'\"\n [subtext]=\"'HOT DROP'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-slab\n [text]=\"'Drop Zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tape\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n [colorButton]=\"buttonColor\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.neobrutal.inputText' | transloco }}</li>\n <li><strong>subtext</strong> - {{ 'buttons.neobrutal.inputSubtext' | transloco }}</li>\n <li><strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}</li>\n <li><strong>tag</strong> - {{ 'buttons.neobrutal.inputTag' | transloco }}</li>\n <li><strong>label</strong> - {{ 'buttons.neobrutal.inputLabel' | transloco }}</li>\n <li><strong>icon</strong> - {{ 'buttons.neobrutal.inputIcon' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}</li>\n <li><strong>isDisabled</strong> - {{ 'buttons.neobrutal.inputIsDisabled' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.neobrutal.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-burst [text]=\"'Launch'\" [subtext]=\"'Hot drop'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Open beta'\"\n [subtext]=\"'Beta'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstDark' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Night mode'\"\n [subtext]=\"'Sharp'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabGray' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Drop zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Fast lane'\"\n [helperText]=\"'priority queue'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabDisabled' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Read only'\"\n [helperText]=\"'disabled'\"\n [isDisabled]=\"true\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Join crew'\"\n [tag]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Pay later'\"\n [tag]=\"'02'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Sticker -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Grab this'\"\n [subtext]=\"'sale'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerDark' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Dark peel'\"\n [subtext]=\"'pro'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Zigzag -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Claim it'\"\n [label]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Rip here'\"\n [label]=\"'GO'\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <!-- Tape -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-tape [text]=\"'Stick it'\" [icon]=\"'>>'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Attach'\"\n [icon]=\"'+'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Pin down'\"\n [icon]=\"'>>'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n</dd-card-section>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-200));border:3px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}h2{font-size:28px;font-weight:700;color:var(--dd-base-600);margin-bottom:15px;text-transform:uppercase}h3{font-size:20px;font-weight:700;color:var(--dd-base-600);margin:25px 0 15px;text-transform:uppercase}.usage-block{margin-bottom:25px}.usage-block pre{margin:0;padding:20px;overflow-x:auto;border:3px solid var(--dd-neo-ink);border-radius:12px;background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);color:var(--dd-base-0)}.usage-block code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}.inputs-block{margin-bottom:25px}.inputs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.inputs-block li{padding:14px 16px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-300);color:var(--dd-base-500);font-size:15px;line-height:1.5}.inputs-block strong{color:var(--dd-base-600)}.examples-block .example-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.examples-block .example-item{flex:1;min-width:250px;padding:22px 18px 20px;border:3px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,var(--dd-base-accent-yellow) 0 22px,transparent 23px),var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-neo-shadow);display:flex;flex-direction:column;align-items:center;gap:18px}.examples-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}.examples-block duck-dev-button-neobrutal-burst,.examples-block duck-dev-button-neobrutal-slab,.examples-block duck-dev-button-neobrutal-tag,.examples-block duck-dev-button-neobrutal-sticker,.examples-block duck-dev-button-neobrutal-zigzag,.examples-block duck-dev-button-neobrutal-tape{width:100%;max-width:320px}@media(max-width:768px){.examples-block .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonNeobrutalBurst, selector: "duck-dev-button-neobrutal-burst", inputs: ["text", "subtext", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTag, selector: "duck-dev-button-neobrutal-tag", inputs: ["text", "tag", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSticker, selector: "duck-dev-button-neobrutal-sticker", inputs: ["text", "subtext", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalZigzag, selector: "duck-dev-button-neobrutal-zigzag", inputs: ["text", "label", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTape, selector: "duck-dev-button-neobrutal-tape", inputs: ["text", "icon", "isDisabled", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
3617
3617
|
}
|
|
3618
3618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBlock, decorators: [{
|
|
3619
3619
|
type: Component,
|
|
@@ -3626,7 +3626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3626
3626
|
ButtonNeobrutalTape,
|
|
3627
3627
|
DuckDevCardSection,
|
|
3628
3628
|
TranslocoPipe,
|
|
3629
|
-
], template: "<dd-card-section>\n <h2>{{ 'buttons.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-neobrutal-burst\n [text]=\"'Launch'\"\n [subtext]=\"'HOT DROP'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-slab\n [text]=\"'Drop Zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tape\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n [colorButton]=\"buttonColor\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.neobrutal.inputText' | transloco }}</li>\n <li><strong>subtext</strong> - {{ 'buttons.neobrutal.inputSubtext' | transloco }}</li>\n <li><strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}</li>\n <li><strong>tag</strong> - {{ 'buttons.neobrutal.inputTag' | transloco }}</li>\n <li><strong>label</strong> - {{ 'buttons.neobrutal.inputLabel' | transloco }}</li>\n <li><strong>icon</strong> - {{ 'buttons.neobrutal.inputIcon' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}</li>\n <li><strong>isDisabled</strong> - {{ 'buttons.neobrutal.inputIsDisabled' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.neobrutal.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-burst [text]=\"'Launch'\" [subtext]=\"'Hot drop'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Open beta'\"\n [subtext]=\"'Beta'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstDark' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Night mode'\"\n [subtext]=\"'Sharp'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabGray' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Drop zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Fast lane'\"\n [helperText]=\"'priority queue'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabDisabled' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Read only'\"\n [helperText]=\"'disabled'\"\n [isDisabled]=\"true\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Join crew'\"\n [tag]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Pay later'\"\n [tag]=\"'02'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Sticker -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Grab this'\"\n [subtext]=\"'sale'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerDark' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Dark peel'\"\n [subtext]=\"'pro'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Zigzag -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Claim it'\"\n [label]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Rip here'\"\n [label]=\"'GO'\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <!-- Tape -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-tape [text]=\"'Stick it'\" [icon]=\"'>>'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Attach'\"\n [icon]=\"'+'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Pin down'\"\n [icon]=\"'>>'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n</dd-card-section>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-200));border:3px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}h2{font-size:28px;font-weight:700;color:var(--dd-base-600);margin-bottom:15px;text-transform:uppercase}h3{font-size:20px;font-weight:700;color:var(--dd-base-600);margin:25px 0 15px;text-transform:uppercase}.usage-block{margin-bottom:25px}.usage-block pre{margin:0;padding:20px;overflow-x:auto;border:3px solid var(--dd-neo-ink);border-radius:12px;background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);color:var(--dd-base-0)}.usage-block code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}.inputs-block{margin-bottom:25px}.inputs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.inputs-block li{padding:14px 16px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-300);color:var(--dd-base-500);font-size:15px;line-height:1.5}.inputs-block strong{color:var(--dd-base-600)}.examples-block .example-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.examples-block .example-item{flex:1;min-width:250px;padding:22px 18px 20px;border:3px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,var(--dd-base-accent-yellow) 0 22px,transparent 23px),var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-neo-shadow);display:flex;flex-direction:column;align-items:center;gap:18px}.examples-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}.examples-block duck-dev-button-neobrutal-burst,.examples-block duck-dev-button-neobrutal-slab,.examples-block duck-dev-button-neobrutal-tag,.examples-block duck-dev-button-neobrutal-sticker,.examples-block duck-dev-button-neobrutal-zigzag,.examples-block duck-dev-button-neobrutal-tape{width:100%;max-width:320px}@media(max-width:768px){.examples-block .example-item{min-width:100%}}\n"] }]
|
|
3629
|
+
], template: "<dd-card-section>\n <h2>{{ 'buttons.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-neobrutal-burst\n [text]=\"'Launch'\"\n [subtext]=\"'HOT DROP'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-slab\n [text]=\"'Drop Zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tape\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n [colorButton]=\"buttonColor\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.neobrutal.inputText' | transloco }}</li>\n <li><strong>subtext</strong> - {{ 'buttons.neobrutal.inputSubtext' | transloco }}</li>\n <li><strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}</li>\n <li><strong>tag</strong> - {{ 'buttons.neobrutal.inputTag' | transloco }}</li>\n <li><strong>label</strong> - {{ 'buttons.neobrutal.inputLabel' | transloco }}</li>\n <li><strong>icon</strong> - {{ 'buttons.neobrutal.inputIcon' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}</li>\n <li><strong>isDisabled</strong> - {{ 'buttons.neobrutal.inputIsDisabled' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.neobrutal.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-burst [text]=\"'Launch'\" [subtext]=\"'Hot drop'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Open beta'\"\n [subtext]=\"'Beta'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstDark' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Night mode'\"\n [subtext]=\"'Sharp'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabGray' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Drop zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Fast lane'\"\n [helperText]=\"'priority queue'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabDisabled' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Read only'\"\n [helperText]=\"'disabled'\"\n [isDisabled]=\"true\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Join crew'\"\n [tag]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Pay later'\"\n [tag]=\"'02'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Sticker -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Grab this'\"\n [subtext]=\"'sale'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerDark' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Dark peel'\"\n [subtext]=\"'pro'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Zigzag -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Claim it'\"\n [label]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Rip here'\"\n [label]=\"'GO'\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <!-- Tape -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-tape [text]=\"'Stick it'\" [icon]=\"'>>'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Attach'\"\n [icon]=\"'+'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Pin down'\"\n [icon]=\"'>>'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n</dd-card-section>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-200));border:3px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}h2{font-size:28px;font-weight:700;color:var(--dd-base-600);margin-bottom:15px;text-transform:uppercase}h3{font-size:20px;font-weight:700;color:var(--dd-base-600);margin:25px 0 15px;text-transform:uppercase}.usage-block{margin-bottom:25px}.usage-block pre{margin:0;padding:20px;overflow-x:auto;border:3px solid var(--dd-neo-ink);border-radius:12px;background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);color:var(--dd-base-0)}.usage-block code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}.inputs-block{margin-bottom:25px}.inputs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.inputs-block li{padding:14px 16px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-300);color:var(--dd-base-500);font-size:15px;line-height:1.5}.inputs-block strong{color:var(--dd-base-600)}.examples-block .example-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.examples-block .example-item{flex:1;min-width:250px;padding:22px 18px 20px;border:3px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,var(--dd-base-accent-yellow) 0 22px,transparent 23px),var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-neo-shadow);display:flex;flex-direction:column;align-items:center;gap:18px}.examples-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}.examples-block duck-dev-button-neobrutal-burst,.examples-block duck-dev-button-neobrutal-slab,.examples-block duck-dev-button-neobrutal-tag,.examples-block duck-dev-button-neobrutal-sticker,.examples-block duck-dev-button-neobrutal-zigzag,.examples-block duck-dev-button-neobrutal-tape{width:100%;max-width:320px}@media(max-width:768px){.examples-block .example-item{min-width:100%}}\n"] }]
|
|
3630
3630
|
}] });
|
|
3631
3631
|
|
|
3632
3632
|
class DuckDevTab {
|
|
@@ -3647,11 +3647,11 @@ class DuckDevTab {
|
|
|
3647
3647
|
return this.activeTabIndex() === index;
|
|
3648
3648
|
}
|
|
3649
3649
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3650
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTab, isStandalone: true, selector: "duck-dev-tab", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: "<div class=\"duck-dev-tab\">\n <div class=\"tab-header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button class=\"tab-button\" [class.active]=\"isActive(i)\" (click)=\"selectTab(i)\" type=\"button\">\n {{ tab.label }}\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.transform]=\"'translateX(' + activeTabIndex() * 100 + '%)'\"\n [style.width]=\"'calc(100% / ' + tabs().length + ')'\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-left]=\"animationDirection() === 'left'\"\n [class.slide-right]=\"animationDirection() === 'right'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab{width:100%;display:flex;flex-direction:column}.tab-header{position:relative;display:flex;border-bottom:2px solid var(--dd-base-300);background:transparent}.tab-button{flex:1;padding:12px 24px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:color .3s ease;position:relative;z-index:1;outline:none}.tab-button:hover{color:var(--dd-base-500)}.tab-button.active{color:var(--dd-base-accent-blue)}.tab-indicator{position:absolute;bottom:-2px;left:0;height:2px;background:var(--dd-base-accent-blue);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;overflow:hidden;padding:20px}.tab-content{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-right{animation-name:slideInRight}.tab-content.slide-left{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
3650
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTab, isStandalone: true, selector: "duck-dev-tab", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, ngImport: i0, template: "<div class=\"duck-dev-tab\">\n <div class=\"tab-header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button class=\"tab-button\" [class.active]=\"isActive(i)\" (click)=\"selectTab(i)\" type=\"button\">\n {{ tab.label }}\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.transform]=\"'translateX(' + activeTabIndex() * 100 + '%)'\"\n [style.width]=\"'calc(100% / ' + tabs().length + ')'\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-left]=\"animationDirection() === 'left'\"\n [class.slide-right]=\"animationDirection() === 'right'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab{width:100%;display:flex;flex-direction:column}.tab-header{position:relative;display:flex;border-bottom:2px solid var(--dd-base-300);background:transparent}.tab-button{flex:1;padding:12px 24px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:color .3s ease;position:relative;z-index:1;outline:none}.tab-button:hover{color:var(--dd-base-500)}.tab-button.active{color:var(--dd-base-accent-blue)}.tab-indicator{position:absolute;bottom:-2px;left:0;height:2px;background:var(--dd-base-accent-blue);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;overflow:hidden;padding:20px}.tab-content{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-right{animation-name:slideInRight}.tab-content.slide-left{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
3651
3651
|
}
|
|
3652
3652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTab, decorators: [{
|
|
3653
3653
|
type: Component,
|
|
3654
|
-
args: [{ selector: 'duck-dev-tab', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab\">\n <div class=\"tab-header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button class=\"tab-button\" [class.active]=\"isActive(i)\" (click)=\"selectTab(i)\" type=\"button\">\n {{ tab.label }}\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.transform]=\"'translateX(' + activeTabIndex() * 100 + '%)'\"\n [style.width]=\"'calc(100% / ' + tabs().length + ')'\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-left]=\"animationDirection() === 'left'\"\n [class.slide-right]=\"animationDirection() === 'right'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab{width:100%;display:flex;flex-direction:column}.tab-header{position:relative;display:flex;border-bottom:2px solid var(--dd-base-300);background:transparent}.tab-button{flex:1;padding:12px 24px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:color .3s ease;position:relative;z-index:1;outline:none}.tab-button:hover{color:var(--dd-base-500)}.tab-button.active{color:var(--dd-base-accent-blue)}.tab-indicator{position:absolute;bottom:-2px;left:0;height:2px;background:var(--dd-base-accent-blue);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;overflow:hidden;padding:20px}.tab-content{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-right{animation-name:slideInRight}.tab-content.slide-left{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}\n"] }]
|
|
3654
|
+
args: [{ selector: 'duck-dev-tab', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab\">\n <div class=\"tab-header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button class=\"tab-button\" [class.active]=\"isActive(i)\" (click)=\"selectTab(i)\" type=\"button\">\n {{ tab.label }}\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.transform]=\"'translateX(' + activeTabIndex() * 100 + '%)'\"\n [style.width]=\"'calc(100% / ' + tabs().length + ')'\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-left]=\"animationDirection() === 'left'\"\n [class.slide-right]=\"animationDirection() === 'right'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab{width:100%;display:flex;flex-direction:column}.tab-header{position:relative;display:flex;border-bottom:2px solid var(--dd-base-300);background:transparent}.tab-button{flex:1;padding:12px 24px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:color .3s ease;position:relative;z-index:1;outline:none}.tab-button:hover{color:var(--dd-base-500)}.tab-button.active{color:var(--dd-base-accent-blue)}.tab-indicator{position:absolute;bottom:-2px;left:0;height:2px;background:var(--dd-base-accent-blue);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;overflow:hidden;padding:20px}.tab-content{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-right{animation-name:slideInRight}.tab-content.slide-left{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}\n"] }]
|
|
3655
3655
|
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
|
|
3656
3656
|
|
|
3657
3657
|
class DuckDevTabVertical {
|
|
@@ -3694,11 +3694,11 @@ class DuckDevTabVertical {
|
|
|
3694
3694
|
return this.activeTabIndex() === index;
|
|
3695
3695
|
}
|
|
3696
3696
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3697
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabVertical, isStandalone: true, selector: "duck-dev-tab-vertical", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"duck-dev-tab-vertical\">\n <div class=\"tab-sidebar\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n @if (tab.icon) {\n <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.top.px]=\"indicatorTop()\"\n [style.height.px]=\"indicatorHeight()\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-up]=\"animationDirection() === 'up'\"\n [class.slide-down]=\"animationDirection() === 'down'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n [attr.data-animation-key]=\"animationKey()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0;overflow-y:auto}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;min-height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
3697
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabVertical, isStandalone: true, selector: "duck-dev-tab-vertical", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"duck-dev-tab-vertical\">\n <div class=\"tab-sidebar\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n @if (tab.icon) {\n <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.top.px]=\"indicatorTop()\"\n [style.height.px]=\"indicatorHeight()\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-up]=\"animationDirection() === 'up'\"\n [class.slide-down]=\"animationDirection() === 'down'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n [attr.data-animation-key]=\"animationKey()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0;overflow-y:auto}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;min-height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
3698
3698
|
}
|
|
3699
3699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, decorators: [{
|
|
3700
3700
|
type: Component,
|
|
3701
|
-
args: [{ selector: 'duck-dev-tab-vertical', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab-vertical\">\n <div class=\"tab-sidebar\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n @if (tab.icon) {\n <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.top.px]=\"indicatorTop()\"\n [style.height.px]=\"indicatorHeight()\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-up]=\"animationDirection() === 'up'\"\n [class.slide-down]=\"animationDirection() === 'down'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n [attr.data-animation-key]=\"animationKey()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0;overflow-y:auto}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;min-height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"] }]
|
|
3701
|
+
args: [{ selector: 'duck-dev-tab-vertical', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab-vertical\">\n <div class=\"tab-sidebar\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n @if (tab.icon) {\n <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.top.px]=\"indicatorTop()\"\n [style.height.px]=\"indicatorHeight()\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-up]=\"animationDirection() === 'up'\"\n [class.slide-down]=\"animationDirection() === 'down'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n [attr.data-animation-key]=\"animationKey()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0;overflow-y:auto}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;min-height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"] }]
|
|
3702
3702
|
}], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] } });
|
|
3703
3703
|
|
|
3704
3704
|
class DdTabPanel {
|
|
@@ -3758,11 +3758,11 @@ class DuckDevTabNeobrutal {
|
|
|
3758
3758
|
return 'hidden';
|
|
3759
3759
|
}
|
|
3760
3760
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3761
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabNeobrutal, isStandalone: true, selector: "duck-dev-tab-neobrutal", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, queries: [{ propertyName: "panels", predicate: DdTabPanel, isSignal: true }], ngImport: i0, template: "<div class=\"dd-tab-neo\" [attr.data-color]=\"color()\">\n <div class=\"dd-tab-neo__header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"dd-tab-neo__button\"\n [class.dd-tab-neo__button--active]=\"activeIndex() === i\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n <span class=\"dd-tab-neo__number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span class=\"dd-tab-neo__label\">{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"dd-tab-neo__viewport\">\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-base-0);--dd-tab-neo-accent: var(--dd-base-accent-orange);--dd-tab-neo-btn-shadow: var(--dd-base-accent-blue);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-secondary);--dd-tab-neo-number-bg: var(--dd-base-accent-orange);--dd-tab-neo-text: var(--dd-base-600);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: color-mix(in srgb, var(--dd-base-secondary) 10%, var(--dd-base-0));--dd-tab-neo-btn-shadow: var(--dd-base-secondary);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-secondary);--dd-tab-neo-number-bg: var(--dd-base-secondary)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: color-mix(in srgb, var(--dd-base-accent-orange) 12%, var(--dd-base-0));--dd-tab-neo-accent: var(--dd-base-accent-pink);--dd-tab-neo-btn-shadow: var(--dd-base-accent-blue);--dd-tab-neo-active-bg: var(--dd-base-accent-orange);--dd-tab-neo-active-shadow: var(--dd-base-secondary);--dd-tab-neo-content-shadow: var(--dd-base-accent-blue);--dd-tab-neo-number-bg: var(--dd-base-accent-pink)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-base-100);--dd-tab-neo-accent: var(--dd-base-accent-orange);--dd-tab-neo-btn-shadow: var(--dd-base-400);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-orange);--dd-tab-neo-content-shadow: var(--dd-base-accent-blue)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-base-600);--dd-tab-neo-accent: var(--dd-base-accent-yellow);--dd-tab-neo-btn-shadow: var(--dd-base-accent-orange);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-accent-orange);--dd-tab-neo-number-bg: var(--dd-base-accent-yellow);--dd-tab-neo-text: var(--dd-base-0)}.dd-tab-neo__header{display:flex;flex-wrap:wrap;gap:.85rem}.dd-tab-neo__button{display:inline-flex;align-items:center;gap:.75rem;min-width:140px;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-tab-neo-surface);color:var(--dd-tab-neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:6px 6px 0 var(--dd-tab-neo-btn-shadow);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;-webkit-tap-highlight-color:transparent}.dd-tab-neo__button:hover,.dd-tab-neo__button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button:focus-visible{outline:3px solid var(--dd-tab-neo-accent);outline-offset:2px}.dd-tab-neo__button--active{background:var(--dd-tab-neo-active-bg);box-shadow:8px 8px 0 var(--dd-tab-neo-active-shadow);transform:translate(-3px,-3px) rotate(-1deg)}.dd-tab-neo__button--active:hover{transform:translate(-4px,-4px) rotate(-1.5deg);box-shadow:10px 10px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:3px solid currentColor;border-radius:12px;background:var(--dd-tab-neo-number-bg);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.dd-tab-neo__label{font-size:.82rem}.dd-tab-neo__viewport{position:relative;overflow:hidden;perspective:1200px;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tab-neo-accent) 40%,transparent) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-tab-neo-surface);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow);min-height:100px}.dd-tab-neo__panel{padding:1.25rem}.dd-tab-neo__panel--active{position:relative}.dd-tab-neo__panel--hidden{display:none}.dd-tab-neo__panel--leave-left,.dd-tab-neo__panel--leave-right{position:absolute;top:0;left:0;right:0;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--leave-left{animation-name:neoFlipLeaveLeft}.dd-tab-neo__panel--leave-right{animation-name:neoFlipLeaveRight}.dd-tab-neo__panel--enter-right,.dd-tab-neo__panel--enter-left{position:relative;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--enter-right{animation-name:neoFlipEnterRight}.dd-tab-neo__panel--enter-left{animation-name:neoFlipEnterLeft}@keyframes neoFlipEnterRight{0%{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveLeft{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}}@keyframes neoFlipEnterLeft{0%{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveRight{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}}@media(max-width:640px){.dd-tab-neo__header{gap:.6rem}.dd-tab-neo__button{min-width:110px;padding:.7rem .85rem;box-shadow:4px 4px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button--active{box-shadow:6px 6px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{width:32px;height:32px}.dd-tab-neo__viewport{border-radius:22px;box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}.dd-tab-neo__panel{padding:1rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
3761
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabNeobrutal, isStandalone: true, selector: "duck-dev-tab-neobrutal", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, queries: [{ propertyName: "panels", predicate: DdTabPanel, isSignal: true }], ngImport: i0, template: "<div class=\"dd-tab-neo\" [attr.data-color]=\"color()\">\n <div class=\"dd-tab-neo__header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"dd-tab-neo__button\"\n [class.dd-tab-neo__button--active]=\"activeIndex() === i\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n <span class=\"dd-tab-neo__number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span class=\"dd-tab-neo__label\">{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"dd-tab-neo__viewport\">\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-base-0);--dd-tab-neo-accent: var(--dd-base-accent-orange);--dd-tab-neo-btn-shadow: var(--dd-base-accent-blue);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-secondary);--dd-tab-neo-number-bg: var(--dd-base-accent-orange);--dd-tab-neo-text: var(--dd-base-600);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: color-mix(in srgb, var(--dd-base-secondary) 10%, var(--dd-base-0));--dd-tab-neo-btn-shadow: var(--dd-base-secondary);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-secondary);--dd-tab-neo-number-bg: var(--dd-base-secondary)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: color-mix(in srgb, var(--dd-base-accent-orange) 12%, var(--dd-base-0));--dd-tab-neo-accent: var(--dd-base-accent-pink);--dd-tab-neo-btn-shadow: var(--dd-base-accent-blue);--dd-tab-neo-active-bg: var(--dd-base-accent-orange);--dd-tab-neo-active-shadow: var(--dd-base-secondary);--dd-tab-neo-content-shadow: var(--dd-base-accent-blue);--dd-tab-neo-number-bg: var(--dd-base-accent-pink)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-base-100);--dd-tab-neo-accent: var(--dd-base-accent-orange);--dd-tab-neo-btn-shadow: var(--dd-base-400);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-orange);--dd-tab-neo-content-shadow: var(--dd-base-accent-blue)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-base-600);--dd-tab-neo-accent: var(--dd-base-accent-yellow);--dd-tab-neo-btn-shadow: var(--dd-base-accent-orange);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-accent-orange);--dd-tab-neo-number-bg: var(--dd-base-accent-yellow);--dd-tab-neo-text: var(--dd-base-0)}.dd-tab-neo__header{display:flex;flex-wrap:wrap;gap:.85rem}.dd-tab-neo__button{display:inline-flex;align-items:center;gap:.75rem;min-width:140px;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-tab-neo-surface);color:var(--dd-tab-neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:6px 6px 0 var(--dd-tab-neo-btn-shadow);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;-webkit-tap-highlight-color:transparent}.dd-tab-neo__button:hover,.dd-tab-neo__button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button:focus-visible{outline:3px solid var(--dd-tab-neo-accent);outline-offset:2px}.dd-tab-neo__button--active{background:var(--dd-tab-neo-active-bg);box-shadow:8px 8px 0 var(--dd-tab-neo-active-shadow);transform:translate(-3px,-3px) rotate(-1deg)}.dd-tab-neo__button--active:hover{transform:translate(-4px,-4px) rotate(-1.5deg);box-shadow:10px 10px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:3px solid currentColor;border-radius:12px;background:var(--dd-tab-neo-number-bg);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.dd-tab-neo__label{font-size:.82rem}.dd-tab-neo__viewport{position:relative;overflow:hidden;perspective:1200px;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tab-neo-accent) 40%,transparent) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-tab-neo-surface);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow);min-height:100px}.dd-tab-neo__panel{padding:1.25rem}.dd-tab-neo__panel--active{position:relative}.dd-tab-neo__panel--hidden{display:none}.dd-tab-neo__panel--leave-left,.dd-tab-neo__panel--leave-right{position:absolute;top:0;left:0;right:0;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--leave-left{animation-name:neoFlipLeaveLeft}.dd-tab-neo__panel--leave-right{animation-name:neoFlipLeaveRight}.dd-tab-neo__panel--enter-right,.dd-tab-neo__panel--enter-left{position:relative;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--enter-right{animation-name:neoFlipEnterRight}.dd-tab-neo__panel--enter-left{animation-name:neoFlipEnterLeft}@keyframes neoFlipEnterRight{0%{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveLeft{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}}@keyframes neoFlipEnterLeft{0%{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveRight{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}}@media(max-width:640px){.dd-tab-neo__header{gap:.6rem}.dd-tab-neo__button{min-width:110px;padding:.7rem .85rem;box-shadow:4px 4px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button--active{box-shadow:6px 6px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{width:32px;height:32px}.dd-tab-neo__viewport{border-radius:22px;box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}.dd-tab-neo__panel{padding:1rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
3762
3762
|
}
|
|
3763
3763
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabNeobrutal, decorators: [{
|
|
3764
3764
|
type: Component,
|
|
3765
|
-
args: [{ selector: 'duck-dev-tab-neobrutal', standalone: true, imports: [NgTemplateOutlet], template: "<div class=\"dd-tab-neo\" [attr.data-color]=\"color()\">\n <div class=\"dd-tab-neo__header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"dd-tab-neo__button\"\n [class.dd-tab-neo__button--active]=\"activeIndex() === i\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n <span class=\"dd-tab-neo__number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span class=\"dd-tab-neo__label\">{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"dd-tab-neo__viewport\">\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-base-0);--dd-tab-neo-accent: var(--dd-base-accent-orange);--dd-tab-neo-btn-shadow: var(--dd-base-accent-blue);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-secondary);--dd-tab-neo-number-bg: var(--dd-base-accent-orange);--dd-tab-neo-text: var(--dd-base-600);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: color-mix(in srgb, var(--dd-base-secondary) 10%, var(--dd-base-0));--dd-tab-neo-btn-shadow: var(--dd-base-secondary);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-secondary);--dd-tab-neo-number-bg: var(--dd-base-secondary)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: color-mix(in srgb, var(--dd-base-accent-orange) 12%, var(--dd-base-0));--dd-tab-neo-accent: var(--dd-base-accent-pink);--dd-tab-neo-btn-shadow: var(--dd-base-accent-blue);--dd-tab-neo-active-bg: var(--dd-base-accent-orange);--dd-tab-neo-active-shadow: var(--dd-base-secondary);--dd-tab-neo-content-shadow: var(--dd-base-accent-blue);--dd-tab-neo-number-bg: var(--dd-base-accent-pink)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-base-100);--dd-tab-neo-accent: var(--dd-base-accent-orange);--dd-tab-neo-btn-shadow: var(--dd-base-400);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-orange);--dd-tab-neo-content-shadow: var(--dd-base-accent-blue)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-base-600);--dd-tab-neo-accent: var(--dd-base-accent-yellow);--dd-tab-neo-btn-shadow: var(--dd-base-accent-orange);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-accent-orange);--dd-tab-neo-number-bg: var(--dd-base-accent-yellow);--dd-tab-neo-text: var(--dd-base-0)}.dd-tab-neo__header{display:flex;flex-wrap:wrap;gap:.85rem}.dd-tab-neo__button{display:inline-flex;align-items:center;gap:.75rem;min-width:140px;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-tab-neo-surface);color:var(--dd-tab-neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:6px 6px 0 var(--dd-tab-neo-btn-shadow);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;-webkit-tap-highlight-color:transparent}.dd-tab-neo__button:hover,.dd-tab-neo__button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button:focus-visible{outline:3px solid var(--dd-tab-neo-accent);outline-offset:2px}.dd-tab-neo__button--active{background:var(--dd-tab-neo-active-bg);box-shadow:8px 8px 0 var(--dd-tab-neo-active-shadow);transform:translate(-3px,-3px) rotate(-1deg)}.dd-tab-neo__button--active:hover{transform:translate(-4px,-4px) rotate(-1.5deg);box-shadow:10px 10px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:3px solid currentColor;border-radius:12px;background:var(--dd-tab-neo-number-bg);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.dd-tab-neo__label{font-size:.82rem}.dd-tab-neo__viewport{position:relative;overflow:hidden;perspective:1200px;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tab-neo-accent) 40%,transparent) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-tab-neo-surface);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow);min-height:100px}.dd-tab-neo__panel{padding:1.25rem}.dd-tab-neo__panel--active{position:relative}.dd-tab-neo__panel--hidden{display:none}.dd-tab-neo__panel--leave-left,.dd-tab-neo__panel--leave-right{position:absolute;top:0;left:0;right:0;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--leave-left{animation-name:neoFlipLeaveLeft}.dd-tab-neo__panel--leave-right{animation-name:neoFlipLeaveRight}.dd-tab-neo__panel--enter-right,.dd-tab-neo__panel--enter-left{position:relative;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--enter-right{animation-name:neoFlipEnterRight}.dd-tab-neo__panel--enter-left{animation-name:neoFlipEnterLeft}@keyframes neoFlipEnterRight{0%{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveLeft{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}}@keyframes neoFlipEnterLeft{0%{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveRight{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}}@media(max-width:640px){.dd-tab-neo__header{gap:.6rem}.dd-tab-neo__button{min-width:110px;padding:.7rem .85rem;box-shadow:4px 4px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button--active{box-shadow:6px 6px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{width:32px;height:32px}.dd-tab-neo__viewport{border-radius:22px;box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}.dd-tab-neo__panel{padding:1rem}}\n"] }]
|
|
3765
|
+
args: [{ selector: 'duck-dev-tab-neobrutal', standalone: true, imports: [NgTemplateOutlet], template: "<div class=\"dd-tab-neo\" [attr.data-color]=\"color()\">\n <div class=\"dd-tab-neo__header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"dd-tab-neo__button\"\n [class.dd-tab-neo__button--active]=\"activeIndex() === i\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n <span class=\"dd-tab-neo__number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span class=\"dd-tab-neo__label\">{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"dd-tab-neo__viewport\">\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-base-0);--dd-tab-neo-accent: var(--dd-base-accent-orange);--dd-tab-neo-btn-shadow: var(--dd-base-accent-blue);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-secondary);--dd-tab-neo-number-bg: var(--dd-base-accent-orange);--dd-tab-neo-text: var(--dd-base-600);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: color-mix(in srgb, var(--dd-base-secondary) 10%, var(--dd-base-0));--dd-tab-neo-btn-shadow: var(--dd-base-secondary);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-secondary);--dd-tab-neo-number-bg: var(--dd-base-secondary)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: color-mix(in srgb, var(--dd-base-accent-orange) 12%, var(--dd-base-0));--dd-tab-neo-accent: var(--dd-base-accent-pink);--dd-tab-neo-btn-shadow: var(--dd-base-accent-blue);--dd-tab-neo-active-bg: var(--dd-base-accent-orange);--dd-tab-neo-active-shadow: var(--dd-base-secondary);--dd-tab-neo-content-shadow: var(--dd-base-accent-blue);--dd-tab-neo-number-bg: var(--dd-base-accent-pink)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-base-100);--dd-tab-neo-accent: var(--dd-base-accent-orange);--dd-tab-neo-btn-shadow: var(--dd-base-400);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-orange);--dd-tab-neo-content-shadow: var(--dd-base-accent-blue)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-base-600);--dd-tab-neo-accent: var(--dd-base-accent-yellow);--dd-tab-neo-btn-shadow: var(--dd-base-accent-orange);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-accent-orange);--dd-tab-neo-number-bg: var(--dd-base-accent-yellow);--dd-tab-neo-text: var(--dd-base-0)}.dd-tab-neo__header{display:flex;flex-wrap:wrap;gap:.85rem}.dd-tab-neo__button{display:inline-flex;align-items:center;gap:.75rem;min-width:140px;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-tab-neo-surface);color:var(--dd-tab-neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:6px 6px 0 var(--dd-tab-neo-btn-shadow);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;-webkit-tap-highlight-color:transparent}.dd-tab-neo__button:hover,.dd-tab-neo__button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button:focus-visible{outline:3px solid var(--dd-tab-neo-accent);outline-offset:2px}.dd-tab-neo__button--active{background:var(--dd-tab-neo-active-bg);box-shadow:8px 8px 0 var(--dd-tab-neo-active-shadow);transform:translate(-3px,-3px) rotate(-1deg)}.dd-tab-neo__button--active:hover{transform:translate(-4px,-4px) rotate(-1.5deg);box-shadow:10px 10px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:3px solid currentColor;border-radius:12px;background:var(--dd-tab-neo-number-bg);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.dd-tab-neo__label{font-size:.82rem}.dd-tab-neo__viewport{position:relative;overflow:hidden;perspective:1200px;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tab-neo-accent) 40%,transparent) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-tab-neo-surface);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow);min-height:100px}.dd-tab-neo__panel{padding:1.25rem}.dd-tab-neo__panel--active{position:relative}.dd-tab-neo__panel--hidden{display:none}.dd-tab-neo__panel--leave-left,.dd-tab-neo__panel--leave-right{position:absolute;top:0;left:0;right:0;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--leave-left{animation-name:neoFlipLeaveLeft}.dd-tab-neo__panel--leave-right{animation-name:neoFlipLeaveRight}.dd-tab-neo__panel--enter-right,.dd-tab-neo__panel--enter-left{position:relative;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--enter-right{animation-name:neoFlipEnterRight}.dd-tab-neo__panel--enter-left{animation-name:neoFlipEnterLeft}@keyframes neoFlipEnterRight{0%{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveLeft{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}}@keyframes neoFlipEnterLeft{0%{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveRight{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}}@media(max-width:640px){.dd-tab-neo__header{gap:.6rem}.dd-tab-neo__button{min-width:110px;padding:.7rem .85rem;box-shadow:4px 4px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button--active{box-shadow:6px 6px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{width:32px;height:32px}.dd-tab-neo__viewport{border-radius:22px;box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}.dd-tab-neo__panel{padding:1rem}}\n"] }]
|
|
3766
3766
|
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DdTabPanel), { isSignal: true }] }] } });
|
|
3767
3767
|
|
|
3768
3768
|
class ButtonBlock {
|
|
@@ -3781,7 +3781,7 @@ class ButtonBlock {
|
|
|
3781
3781
|
this.activeStyleTab.set(tab);
|
|
3782
3782
|
}
|
|
3783
3783
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3784
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ButtonBlock, isStandalone: true, selector: "app-button-block", ngImport: i0, template: "<div class=\"buttons-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'5 colors'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'buttons.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 GLIDE OVER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.glideOver.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #glideOverCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-glide-over\n textButton=\"Click me\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.glideOver.usage' | transloco\"\n [content]=\"glideOverCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'buttons.glideOver.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.glideOver.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.glideOver.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleWhite' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Click me\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Violet\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Orange\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleGray' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Gray\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleDark' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Dark\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 BLUR LIFT \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.blurLift.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #blurLiftCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-blur-lift\n textButton=\"Hover me\"\n [hoverText]=\"'Hello!'\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.blurLift.usage' | transloco\"\n [content]=\"blurLiftCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'buttons.blurLift.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>hoverText</strong>\n <span>{{ 'buttons.blurLift.inputHoverText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.blurLift.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.blurLift.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleWhiteHover' | transloco\n }}</span>\n <duck-dev-button-blur-lift textButton=\"Hover me\" [hoverText]=\"'Hello!'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Click\"\n [hoverText]=\"'Action!'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Hover\"\n [hoverText]=\"'Orange!'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleGray' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Gray\"\n [hoverText]=\"'Hover'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleDark' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Dark\"\n [hoverText]=\"'Magic!'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.flip.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-flip\n [text]=\"'Next'\"\n [colorButton]=\"colorViolet\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.flip.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.flip.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.flip.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>direction</strong>\n <span>{{ 'buttons.flip.inputDirection' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>disabled</strong>\n <span>{{ 'buttons.flip.inputDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleWhite' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.flip.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-flip [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.flip.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-flip [text]=\"'Orange'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.examplePrev' | transloco }}</span>\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n [direction]=\"'previous'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleNext' | transloco }}</span>\n <duck-dev-button-flip\n [text]=\"'Next'\"\n [direction]=\"'next'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleDark' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Dark'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CASPER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.casper.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #casperCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-casper\n [text]=\"'Casper'\"\n [colorButton]=\"colorViolet\"\n [isDisabled]=\"false\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.casper.usage' | transloco\"\n [content]=\"casperCode\"\n [color]=\"colorDark\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.casper.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.casper.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>isDisabled</strong>\n <span>{{ 'buttons.casper.inputIsDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleWhite' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleGray' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleDark' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 COLOR PALETTE TIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'buttons.classicTip.title' | transloco }}</strong>\n {{ 'buttons.classicTip.text' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n } @else {\n <app-button-neobrutal-block />\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.buttons-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.btn-section{margin-bottom:16px}.btn-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.btn-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.btn-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:200px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:14px;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em}.example-card duck-dev-button-glide-over,.example-card duck-dev-button-blur-lift{width:100%;max-width:280px}@media(max-width:768px){.buttons-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.btn-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonBlurLift, selector: "duck-dev-button-blur-lift", inputs: ["textButton", "colorButton", "padding", "hoverText"] }, { kind: "component", type: ButtonGlideOver, selector: "duck-dev-button-glide-over", inputs: ["textButton", "colorButton", "padding"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: ButtonNeobrutalBlock, selector: "app-button-neobrutal-block" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
3784
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ButtonBlock, isStandalone: true, selector: "app-button-block", ngImport: i0, template: "<div class=\"buttons-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'5 colors'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'buttons.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 GLIDE OVER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.glideOver.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #glideOverCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-glide-over\n textButton=\"Click me\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.glideOver.usage' | transloco\"\n [content]=\"glideOverCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'buttons.glideOver.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.glideOver.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.glideOver.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleWhite' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Click me\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Violet\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Orange\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleGray' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Gray\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleDark' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Dark\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 BLUR LIFT \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.blurLift.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #blurLiftCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-blur-lift\n textButton=\"Hover me\"\n [hoverText]=\"'Hello!'\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.blurLift.usage' | transloco\"\n [content]=\"blurLiftCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'buttons.blurLift.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>hoverText</strong>\n <span>{{ 'buttons.blurLift.inputHoverText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.blurLift.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.blurLift.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleWhiteHover' | transloco\n }}</span>\n <duck-dev-button-blur-lift textButton=\"Hover me\" [hoverText]=\"'Hello!'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Click\"\n [hoverText]=\"'Action!'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Hover\"\n [hoverText]=\"'Orange!'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleGray' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Gray\"\n [hoverText]=\"'Hover'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleDark' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Dark\"\n [hoverText]=\"'Magic!'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.flip.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-flip\n [text]=\"'Next'\"\n [colorButton]=\"colorViolet\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.flip.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.flip.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.flip.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>direction</strong>\n <span>{{ 'buttons.flip.inputDirection' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>disabled</strong>\n <span>{{ 'buttons.flip.inputDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleWhite' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.flip.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-flip [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.flip.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-flip [text]=\"'Orange'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.examplePrev' | transloco }}</span>\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n [direction]=\"'previous'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleNext' | transloco }}</span>\n <duck-dev-button-flip\n [text]=\"'Next'\"\n [direction]=\"'next'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleDark' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Dark'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CASPER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.casper.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #casperCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-casper\n [text]=\"'Casper'\"\n [colorButton]=\"colorViolet\"\n [isDisabled]=\"false\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.casper.usage' | transloco\"\n [content]=\"casperCode\"\n [color]=\"colorDark\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.casper.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.casper.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>isDisabled</strong>\n <span>{{ 'buttons.casper.inputIsDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleWhite' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleGray' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleDark' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 COLOR PALETTE TIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'buttons.classicTip.title' | transloco }}</strong>\n {{ 'buttons.classicTip.text' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n } @else {\n <app-button-neobrutal-block />\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.buttons-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.btn-section{margin-bottom:16px}.btn-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.btn-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.btn-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:200px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:14px;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em}.example-card duck-dev-button-glide-over,.example-card duck-dev-button-blur-lift{width:100%;max-width:280px}@media(max-width:768px){.buttons-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.btn-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonBlurLift, selector: "duck-dev-button-blur-lift", inputs: ["textButton", "colorButton", "padding", "hoverText"] }, { kind: "component", type: ButtonGlideOver, selector: "duck-dev-button-glide-over", inputs: ["textButton", "colorButton", "padding"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: ButtonNeobrutalBlock, selector: "app-button-neobrutal-block" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
3785
3785
|
}
|
|
3786
3786
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, decorators: [{
|
|
3787
3787
|
type: Component,
|
|
@@ -3797,61 +3797,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3797
3797
|
DuckDevSpeakerBubbleSoft,
|
|
3798
3798
|
ButtonNeobrutalBlock,
|
|
3799
3799
|
DuckDevTab,
|
|
3800
|
-
], template: "<div class=\"buttons-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'5 colors'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'buttons.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 GLIDE OVER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.glideOver.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #glideOverCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-glide-over\n textButton=\"Click me\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.glideOver.usage' | transloco\"\n [content]=\"glideOverCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'buttons.glideOver.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.glideOver.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.glideOver.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleWhite' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Click me\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Violet\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Orange\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleGray' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Gray\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleDark' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Dark\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 BLUR LIFT \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.blurLift.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #blurLiftCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-blur-lift\n textButton=\"Hover me\"\n [hoverText]=\"'Hello!'\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.blurLift.usage' | transloco\"\n [content]=\"blurLiftCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'buttons.blurLift.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>hoverText</strong>\n <span>{{ 'buttons.blurLift.inputHoverText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.blurLift.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.blurLift.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleWhiteHover' | transloco\n }}</span>\n <duck-dev-button-blur-lift textButton=\"Hover me\" [hoverText]=\"'Hello!'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Click\"\n [hoverText]=\"'Action!'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Hover\"\n [hoverText]=\"'Orange!'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleGray' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Gray\"\n [hoverText]=\"'Hover'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleDark' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Dark\"\n [hoverText]=\"'Magic!'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.flip.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-flip\n [text]=\"'Next'\"\n [colorButton]=\"colorViolet\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.flip.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.flip.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.flip.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>direction</strong>\n <span>{{ 'buttons.flip.inputDirection' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>disabled</strong>\n <span>{{ 'buttons.flip.inputDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleWhite' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.flip.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-flip [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.flip.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-flip [text]=\"'Orange'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.examplePrev' | transloco }}</span>\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n [direction]=\"'previous'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleNext' | transloco }}</span>\n <duck-dev-button-flip\n [text]=\"'Next'\"\n [direction]=\"'next'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleDark' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Dark'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CASPER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.casper.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #casperCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-casper\n [text]=\"'Casper'\"\n [colorButton]=\"colorViolet\"\n [isDisabled]=\"false\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.casper.usage' | transloco\"\n [content]=\"casperCode\"\n [color]=\"colorDark\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.casper.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.casper.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>isDisabled</strong>\n <span>{{ 'buttons.casper.inputIsDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleWhite' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleGray' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleDark' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 COLOR PALETTE TIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'buttons.classicTip.title' | transloco }}</strong>\n {{ 'buttons.classicTip.text' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n } @else {\n <app-button-neobrutal-block />\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.buttons-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.btn-section{margin-bottom:16px}.btn-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.btn-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.btn-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:200px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:14px;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em}.example-card duck-dev-button-glide-over,.example-card duck-dev-button-blur-lift{width:100%;max-width:280px}@media(max-width:768px){.buttons-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.btn-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"] }]
|
|
3800
|
+
], template: "<div class=\"buttons-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'5 colors'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'buttons.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 GLIDE OVER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.glideOver.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #glideOverCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-glide-over\n textButton=\"Click me\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.glideOver.usage' | transloco\"\n [content]=\"glideOverCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'buttons.glideOver.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.glideOver.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.glideOver.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleWhite' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Click me\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Violet\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Orange\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleGray' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Gray\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleDark' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Dark\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 BLUR LIFT \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.blurLift.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #blurLiftCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-blur-lift\n textButton=\"Hover me\"\n [hoverText]=\"'Hello!'\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.blurLift.usage' | transloco\"\n [content]=\"blurLiftCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'buttons.blurLift.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>hoverText</strong>\n <span>{{ 'buttons.blurLift.inputHoverText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.blurLift.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.blurLift.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleWhiteHover' | transloco\n }}</span>\n <duck-dev-button-blur-lift textButton=\"Hover me\" [hoverText]=\"'Hello!'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Click\"\n [hoverText]=\"'Action!'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Hover\"\n [hoverText]=\"'Orange!'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleGray' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Gray\"\n [hoverText]=\"'Hover'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleDark' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Dark\"\n [hoverText]=\"'Magic!'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.flip.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-flip\n [text]=\"'Next'\"\n [colorButton]=\"colorViolet\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.flip.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.flip.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.flip.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>direction</strong>\n <span>{{ 'buttons.flip.inputDirection' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>disabled</strong>\n <span>{{ 'buttons.flip.inputDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleWhite' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.flip.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-flip [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.flip.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-flip [text]=\"'Orange'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.examplePrev' | transloco }}</span>\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n [direction]=\"'previous'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleNext' | transloco }}</span>\n <duck-dev-button-flip\n [text]=\"'Next'\"\n [direction]=\"'next'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleDark' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Dark'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CASPER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.casper.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #casperCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-casper\n [text]=\"'Casper'\"\n [colorButton]=\"colorViolet\"\n [isDisabled]=\"false\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.casper.usage' | transloco\"\n [content]=\"casperCode\"\n [color]=\"colorDark\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.casper.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.casper.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>isDisabled</strong>\n <span>{{ 'buttons.casper.inputIsDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleWhite' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleGray' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleDark' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 COLOR PALETTE TIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'buttons.classicTip.title' | transloco }}</strong>\n {{ 'buttons.classicTip.text' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n } @else {\n <app-button-neobrutal-block />\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.buttons-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.btn-section{margin-bottom:16px}.btn-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.btn-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.btn-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:200px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:14px;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em}.example-card duck-dev-button-glide-over,.example-card duck-dev-button-blur-lift{width:100%;max-width:280px}@media(max-width:768px){.buttons-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.btn-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"] }]
|
|
3801
3801
|
}] });
|
|
3802
3802
|
|
|
3803
3803
|
class LoaderLoadingBubble {
|
|
3804
3804
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3805
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderLoadingBubble, isStandalone: true, selector: "duck-dev-loader-loading-bubble", ngImport: i0, template: "<div class=\"container\">\n <div class=\"main\">\n <span class=\"loader\">Load ng</span>\n </div>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.loader{color:var(--btn-text-color);position:relative;display:inline-block;margin-top:40px;font-family:Arial,Helvetica,sans-serif;font-size:48px;letter-spacing:4px;box-sizing:border-box}.loader:before{content:\"\";position:absolute;right:70.55px;bottom:10px;height:28px;width:4.45px;background:currentColor;box-sizing:border-box;animation:animloader1 1s linear infinite alternate}.loader:after{content:\"\";width:10px;height:10px;position:absolute;left:125px;top:2px;border-radius:50%;background:var(--dd-accent-orange);box-sizing:border-box;animation:animloader 1s linear infinite alternate}@keyframes animloader{0%{transform:translate(0) scaleX(1)}14%{transform:translate(-12px,-16px) scaleX(1.05)}28%{transform:translate(-27px,-28px) scaleX(1.07)}42%{transform:translate(-46px,-35px) scaleX(1.1)}57%{transform:translate(-70px,-37px) scaleX(1.1)}71%{transform:translate(-94px,-32px) scaleX(1.07)}85%{transform:translate(-111px,-22px) scaleX(1.05)}to{transform:translate(-125px,-9px) scaleX(1)}}@keyframes animloader1{0%{box-shadow:0 -6px,-122.9px -8px}25%,75%{box-shadow:0 0,-122.9px -8px}to{box-shadow:0 0,-122.9px -16px}}\n"] });
|
|
3805
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderLoadingBubble, isStandalone: true, selector: "duck-dev-loader-loading-bubble", ngImport: i0, template: "<div class=\"container\">\n <div class=\"main\">\n <span class=\"loader\">Load ng</span>\n </div>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.loader{color:var(--btn-text-color);position:relative;display:inline-block;margin-top:40px;font-family:Arial,Helvetica,sans-serif;font-size:48px;letter-spacing:4px;box-sizing:border-box}.loader:before{content:\"\";position:absolute;right:70.55px;bottom:10px;height:28px;width:4.45px;background:currentColor;box-sizing:border-box;animation:animloader1 1s linear infinite alternate}.loader:after{content:\"\";width:10px;height:10px;position:absolute;left:125px;top:2px;border-radius:50%;background:var(--dd-accent-orange);box-sizing:border-box;animation:animloader 1s linear infinite alternate}@keyframes animloader{0%{transform:translate(0) scaleX(1)}14%{transform:translate(-12px,-16px) scaleX(1.05)}28%{transform:translate(-27px,-28px) scaleX(1.07)}42%{transform:translate(-46px,-35px) scaleX(1.1)}57%{transform:translate(-70px,-37px) scaleX(1.1)}71%{transform:translate(-94px,-32px) scaleX(1.07)}85%{transform:translate(-111px,-22px) scaleX(1.05)}to{transform:translate(-125px,-9px) scaleX(1)}}@keyframes animloader1{0%{box-shadow:0 -6px,-122.9px -8px}25%,75%{box-shadow:0 0,-122.9px -8px}to{box-shadow:0 0,-122.9px -16px}}\n"] });
|
|
3806
3806
|
}
|
|
3807
3807
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, decorators: [{
|
|
3808
3808
|
type: Component,
|
|
3809
|
-
args: [{ selector: 'duck-dev-loader-loading-bubble', imports: [], template: "<div class=\"container\">\n <div class=\"main\">\n <span class=\"loader\">Load ng</span>\n </div>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.loader{color:var(--btn-text-color);position:relative;display:inline-block;margin-top:40px;font-family:Arial,Helvetica,sans-serif;font-size:48px;letter-spacing:4px;box-sizing:border-box}.loader:before{content:\"\";position:absolute;right:70.55px;bottom:10px;height:28px;width:4.45px;background:currentColor;box-sizing:border-box;animation:animloader1 1s linear infinite alternate}.loader:after{content:\"\";width:10px;height:10px;position:absolute;left:125px;top:2px;border-radius:50%;background:var(--dd-accent-orange);box-sizing:border-box;animation:animloader 1s linear infinite alternate}@keyframes animloader{0%{transform:translate(0) scaleX(1)}14%{transform:translate(-12px,-16px) scaleX(1.05)}28%{transform:translate(-27px,-28px) scaleX(1.07)}42%{transform:translate(-46px,-35px) scaleX(1.1)}57%{transform:translate(-70px,-37px) scaleX(1.1)}71%{transform:translate(-94px,-32px) scaleX(1.07)}85%{transform:translate(-111px,-22px) scaleX(1.05)}to{transform:translate(-125px,-9px) scaleX(1)}}@keyframes animloader1{0%{box-shadow:0 -6px,-122.9px -8px}25%,75%{box-shadow:0 0,-122.9px -8px}to{box-shadow:0 0,-122.9px -16px}}\n"] }]
|
|
3809
|
+
args: [{ selector: 'duck-dev-loader-loading-bubble', imports: [], template: "<div class=\"container\">\n <div class=\"main\">\n <span class=\"loader\">Load ng</span>\n </div>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.loader{color:var(--btn-text-color);position:relative;display:inline-block;margin-top:40px;font-family:Arial,Helvetica,sans-serif;font-size:48px;letter-spacing:4px;box-sizing:border-box}.loader:before{content:\"\";position:absolute;right:70.55px;bottom:10px;height:28px;width:4.45px;background:currentColor;box-sizing:border-box;animation:animloader1 1s linear infinite alternate}.loader:after{content:\"\";width:10px;height:10px;position:absolute;left:125px;top:2px;border-radius:50%;background:var(--dd-accent-orange);box-sizing:border-box;animation:animloader 1s linear infinite alternate}@keyframes animloader{0%{transform:translate(0) scaleX(1)}14%{transform:translate(-12px,-16px) scaleX(1.05)}28%{transform:translate(-27px,-28px) scaleX(1.07)}42%{transform:translate(-46px,-35px) scaleX(1.1)}57%{transform:translate(-70px,-37px) scaleX(1.1)}71%{transform:translate(-94px,-32px) scaleX(1.07)}85%{transform:translate(-111px,-22px) scaleX(1.05)}to{transform:translate(-125px,-9px) scaleX(1)}}@keyframes animloader1{0%{box-shadow:0 -6px,-122.9px -8px}25%,75%{box-shadow:0 0,-122.9px -8px}to{box-shadow:0 0,-122.9px -16px}}\n"] }]
|
|
3810
3810
|
}] });
|
|
3811
3811
|
|
|
3812
3812
|
class LoaderClassic {
|
|
3813
3813
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3814
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderClassic, isStandalone: true, selector: "duck-dev-loader-classic", ngImport: i0, template: "<span class=\"loader\"></span>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid var(--dd-base-600);border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] });
|
|
3814
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderClassic, isStandalone: true, selector: "duck-dev-loader-classic", ngImport: i0, template: "<span class=\"loader\"></span>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid var(--dd-base-600);border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] });
|
|
3815
3815
|
}
|
|
3816
3816
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderClassic, decorators: [{
|
|
3817
3817
|
type: Component,
|
|
3818
|
-
args: [{ selector: 'duck-dev-loader-classic', imports: [], template: "<span class=\"loader\"></span>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid var(--dd-base-600);border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3818
|
+
args: [{ selector: 'duck-dev-loader-classic', imports: [], template: "<span class=\"loader\"></span>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid var(--dd-base-600);border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3819
3819
|
}] });
|
|
3820
3820
|
|
|
3821
3821
|
class LoaderThreeDots {
|
|
3822
3822
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderThreeDots, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3823
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderThreeDots, isStandalone: true, selector: "duck-dev-loader-three-dots", ngImport: i0, template: "<span class=\"loader\"></span>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader,.loader:before,.loader:after{border-radius:50%;width:2.5em;height:2.5em;animation-fill-mode:both;animation:bblFadInOut 1.8s infinite ease-in-out}.loader{color:var(--dd-base-600);font-size:7px;position:relative;text-indent:-9999em;transform:translateZ(0);animation-delay:-.16s}.loader:before,.loader:after{content:\"\";position:absolute;top:0}.loader:before{left:-3.5em;animation-delay:-.32s}.loader:after{left:3.5em}@keyframes bblFadInOut{0%,80%,to{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em}}\n"] });
|
|
3823
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderThreeDots, isStandalone: true, selector: "duck-dev-loader-three-dots", ngImport: i0, template: "<span class=\"loader\"></span>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader,.loader:before,.loader:after{border-radius:50%;width:2.5em;height:2.5em;animation-fill-mode:both;animation:bblFadInOut 1.8s infinite ease-in-out}.loader{color:var(--dd-base-600);font-size:7px;position:relative;text-indent:-9999em;transform:translateZ(0);animation-delay:-.16s}.loader:before,.loader:after{content:\"\";position:absolute;top:0}.loader:before{left:-3.5em;animation-delay:-.32s}.loader:after{left:3.5em}@keyframes bblFadInOut{0%,80%,to{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em}}\n"] });
|
|
3824
3824
|
}
|
|
3825
3825
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderThreeDots, decorators: [{
|
|
3826
3826
|
type: Component,
|
|
3827
|
-
args: [{ selector: 'duck-dev-loader-three-dots', imports: [], template: "<span class=\"loader\"></span>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader,.loader:before,.loader:after{border-radius:50%;width:2.5em;height:2.5em;animation-fill-mode:both;animation:bblFadInOut 1.8s infinite ease-in-out}.loader{color:var(--dd-base-600);font-size:7px;position:relative;text-indent:-9999em;transform:translateZ(0);animation-delay:-.16s}.loader:before,.loader:after{content:\"\";position:absolute;top:0}.loader:before{left:-3.5em;animation-delay:-.32s}.loader:after{left:3.5em}@keyframes bblFadInOut{0%,80%,to{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em}}\n"] }]
|
|
3827
|
+
args: [{ selector: 'duck-dev-loader-three-dots', imports: [], template: "<span class=\"loader\"></span>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.loader,.loader:before,.loader:after{border-radius:50%;width:2.5em;height:2.5em;animation-fill-mode:both;animation:bblFadInOut 1.8s infinite ease-in-out}.loader{color:var(--dd-base-600);font-size:7px;position:relative;text-indent:-9999em;transform:translateZ(0);animation-delay:-.16s}.loader:before,.loader:after{content:\"\";position:absolute;top:0}.loader:before{left:-3.5em;animation-delay:-.32s}.loader:after{left:3.5em}@keyframes bblFadInOut{0%,80%,to{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em}}\n"] }]
|
|
3828
3828
|
}] });
|
|
3829
3829
|
|
|
3830
3830
|
class LoaderNeobrutalStamp {
|
|
3831
3831
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3832
|
-
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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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-base-0);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-base-0);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"] });
|
|
3832
|
+
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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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-base-0);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-base-0);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"] });
|
|
3833
3833
|
}
|
|
3834
3834
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalStamp, decorators: [{
|
|
3835
3835
|
type: Component,
|
|
3836
|
-
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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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-base-0);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-base-0);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"] }]
|
|
3836
|
+
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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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-base-0);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-base-0);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"] }]
|
|
3837
3837
|
}] });
|
|
3838
3838
|
|
|
3839
3839
|
class LoaderNeobrutalBars {
|
|
3840
3840
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalBars, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3841
|
-
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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-neo-ink);border-radius:24px;background:var(--dd-base-0);box-shadow:7px 7px 0 var(--dd-base-accent-blue);transform:rotate(-2deg)}.bars-label{align-self:flex-start;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.2em}.bars-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:.5rem;height:54px}.bar{display:block;height:100%;border:3px solid var(--dd-neo-ink);border-radius:12px 12px 4px 4px;transform-origin:bottom center;animation:bar-bounce .9s steps(2) infinite}.bar-one{background:var(--dd-base-accent-pink);animation-delay:0s}.bar-two{background:var(--dd-base-accent-blue);animation-delay:.16s}.bar-three{background:var(--dd-base-secondary);animation-delay:.32s}.bar-four{background:var(--dd-base-accent-orange);animation-delay:.48s}@keyframes bar-bounce{0%,to{transform:scaleY(.38) translateY(0)}50%{transform:scaleY(1) translateY(-2px)}}\n"] });
|
|
3841
|
+
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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-neo-ink);border-radius:24px;background:var(--dd-base-0);box-shadow:7px 7px 0 var(--dd-base-accent-blue);transform:rotate(-2deg)}.bars-label{align-self:flex-start;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.2em}.bars-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:.5rem;height:54px}.bar{display:block;height:100%;border:3px solid var(--dd-neo-ink);border-radius:12px 12px 4px 4px;transform-origin:bottom center;animation:bar-bounce .9s steps(2) infinite}.bar-one{background:var(--dd-base-accent-pink);animation-delay:0s}.bar-two{background:var(--dd-base-accent-blue);animation-delay:.16s}.bar-three{background:var(--dd-base-secondary);animation-delay:.32s}.bar-four{background:var(--dd-base-accent-orange);animation-delay:.48s}@keyframes bar-bounce{0%,to{transform:scaleY(.38) translateY(0)}50%{transform:scaleY(1) translateY(-2px)}}\n"] });
|
|
3842
3842
|
}
|
|
3843
3843
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalBars, decorators: [{
|
|
3844
3844
|
type: Component,
|
|
3845
|
-
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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-neo-ink);border-radius:24px;background:var(--dd-base-0);box-shadow:7px 7px 0 var(--dd-base-accent-blue);transform:rotate(-2deg)}.bars-label{align-self:flex-start;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.2em}.bars-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:.5rem;height:54px}.bar{display:block;height:100%;border:3px solid var(--dd-neo-ink);border-radius:12px 12px 4px 4px;transform-origin:bottom center;animation:bar-bounce .9s steps(2) infinite}.bar-one{background:var(--dd-base-accent-pink);animation-delay:0s}.bar-two{background:var(--dd-base-accent-blue);animation-delay:.16s}.bar-three{background:var(--dd-base-secondary);animation-delay:.32s}.bar-four{background:var(--dd-base-accent-orange);animation-delay:.48s}@keyframes bar-bounce{0%,to{transform:scaleY(.38) translateY(0)}50%{transform:scaleY(1) translateY(-2px)}}\n"] }]
|
|
3845
|
+
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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-neo-ink);border-radius:24px;background:var(--dd-base-0);box-shadow:7px 7px 0 var(--dd-base-accent-blue);transform:rotate(-2deg)}.bars-label{align-self:flex-start;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.2em}.bars-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:.5rem;height:54px}.bar{display:block;height:100%;border:3px solid var(--dd-neo-ink);border-radius:12px 12px 4px 4px;transform-origin:bottom center;animation:bar-bounce .9s steps(2) infinite}.bar-one{background:var(--dd-base-accent-pink);animation-delay:0s}.bar-two{background:var(--dd-base-accent-blue);animation-delay:.16s}.bar-three{background:var(--dd-base-secondary);animation-delay:.32s}.bar-four{background:var(--dd-base-accent-orange);animation-delay:.48s}@keyframes bar-bounce{0%,to{transform:scaleY(.38) translateY(0)}50%{transform:scaleY(1) translateY(-2px)}}\n"] }]
|
|
3846
3846
|
}] });
|
|
3847
3847
|
|
|
3848
3848
|
class LoaderNeobrutalMarquee {
|
|
3849
3849
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalMarquee, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3850
|
-
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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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-base-0) 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"] });
|
|
3850
|
+
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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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-base-0) 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"] });
|
|
3851
3851
|
}
|
|
3852
3852
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalMarquee, decorators: [{
|
|
3853
3853
|
type: Component,
|
|
3854
|
-
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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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-base-0) 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"] }]
|
|
3854
|
+
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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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-base-0) 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"] }]
|
|
3855
3855
|
}] });
|
|
3856
3856
|
|
|
3857
3857
|
class DuckDevInput {
|
|
@@ -3864,11 +3864,11 @@ class DuckDevInput {
|
|
|
3864
3864
|
options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
3865
3865
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
3866
3866
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3867
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInput, isStandalone: true, selector: "duck-dev-input", 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=\"form-label\">\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input class=\"inp-cbx\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"cbx\" [for]=\"control\">\n <span>\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><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"select-wrapper\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_select\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\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=\"form-input\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"error-message\">\n {{ erMessage }}\n </div>\n }\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;min-height:132px;resize:none;border-radius:24px}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.select-wrapper{position:relative}.select-wrapper:after{content:\"\";position:absolute;top:50%;right:20px;width:10px;height:10px;border-right:2px solid var(--dd-base-400);border-bottom:2px solid var(--dd-base-400);transform:translateY(-65%) rotate(45deg);pointer-events:none}.form-input_select{appearance:none;padding-right:52px;cursor:pointer}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-inout-field{padding-bottom:24px}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:6px;align-items:flex-start;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px;color:var(--dd-base-500);line-height:1.45}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}@media(max-width:768px){.form-input,.form-input_textarea{border-radius:18px}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
3867
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInput, isStandalone: true, selector: "duck-dev-input", 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=\"form-label\">\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input class=\"inp-cbx\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"cbx\" [for]=\"control\">\n <span>\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><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"select-wrapper\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_select\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\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=\"form-input\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"error-message\">\n {{ erMessage }}\n </div>\n }\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;min-height:132px;resize:none;border-radius:24px}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.select-wrapper{position:relative}.select-wrapper:after{content:\"\";position:absolute;top:50%;right:20px;width:10px;height:10px;border-right:2px solid var(--dd-base-400);border-bottom:2px solid var(--dd-base-400);transform:translateY(-65%) rotate(45deg);pointer-events:none}.form-input_select{appearance:none;padding-right:52px;cursor:pointer}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-inout-field{padding-bottom:24px}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:6px;align-items:flex-start;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px;color:var(--dd-base-500);line-height:1.45}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}@media(max-width:768px){.form-input,.form-input_textarea{border-radius:18px}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
3868
3868
|
}
|
|
3869
3869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, decorators: [{
|
|
3870
3870
|
type: Component,
|
|
3871
|
-
args: [{ selector: 'duck-dev-input', 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=\"form-label\">\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input class=\"inp-cbx\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"cbx\" [for]=\"control\">\n <span>\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><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"select-wrapper\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_select\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\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=\"form-input\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"error-message\">\n {{ erMessage }}\n </div>\n }\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;min-height:132px;resize:none;border-radius:24px}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.select-wrapper{position:relative}.select-wrapper:after{content:\"\";position:absolute;top:50%;right:20px;width:10px;height:10px;border-right:2px solid var(--dd-base-400);border-bottom:2px solid var(--dd-base-400);transform:translateY(-65%) rotate(45deg);pointer-events:none}.form-input_select{appearance:none;padding-right:52px;cursor:pointer}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-inout-field{padding-bottom:24px}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:6px;align-items:flex-start;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px;color:var(--dd-base-500);line-height:1.45}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}@media(max-width:768px){.form-input,.form-input_textarea{border-radius:18px}}\n"] }]
|
|
3871
|
+
args: [{ selector: 'duck-dev-input', 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=\"form-label\">\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input class=\"inp-cbx\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"cbx\" [for]=\"control\">\n <span>\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><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"select-wrapper\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_select\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\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=\"form-input\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"error-message\">\n {{ erMessage }}\n </div>\n }\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;min-height:132px;resize:none;border-radius:24px}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.select-wrapper{position:relative}.select-wrapper:after{content:\"\";position:absolute;top:50%;right:20px;width:10px;height:10px;border-right:2px solid var(--dd-base-400);border-bottom:2px solid var(--dd-base-400);transform:translateY(-65%) rotate(45deg);pointer-events:none}.form-input_select{appearance:none;padding-right:52px;cursor:pointer}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-inout-field{padding-bottom:24px}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:6px;align-items:flex-start;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px;color:var(--dd-base-500);line-height:1.45}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}@media(max-width:768px){.form-input,.form-input_textarea{border-radius:18px}}\n"] }]
|
|
3872
3872
|
}], 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 }] }] } });
|
|
3873
3873
|
|
|
3874
3874
|
class DuckDevInputNeobrutalPoster {
|
|
@@ -4315,21 +4315,21 @@ function getNeobrutalCardStyle(color) {
|
|
|
4315
4315
|
switch (color) {
|
|
4316
4316
|
case AccentEnumColor.Violet:
|
|
4317
4317
|
return {
|
|
4318
|
-
'--dd-neo-card-surface': 'color-mix(in srgb, var(--dd-
|
|
4319
|
-
'--dd-neo-card-panel': 'color-mix(in srgb, var(--dd-
|
|
4318
|
+
'--dd-neo-card-surface': 'color-mix(in srgb, var(--dd-neo-ana-3) 14%, var(--dd-base-0))',
|
|
4319
|
+
'--dd-neo-card-panel': 'color-mix(in srgb, var(--dd-neo-ana-3) 7%, var(--dd-base-0))',
|
|
4320
4320
|
'--dd-neo-card-text': 'var(--dd-base-600)',
|
|
4321
4321
|
'--dd-neo-card-border': 'var(--dd-neo-ink)',
|
|
4322
|
-
'--dd-neo-card-shadow': 'var(--dd-
|
|
4323
|
-
'--dd-neo-card-accent': 'var(--dd-
|
|
4322
|
+
'--dd-neo-card-shadow': 'var(--dd-neo-ana-6)',
|
|
4323
|
+
'--dd-neo-card-accent': 'var(--dd-neo-ana-1)',
|
|
4324
4324
|
};
|
|
4325
4325
|
case AccentEnumColor.Orange:
|
|
4326
4326
|
return {
|
|
4327
|
-
'--dd-neo-card-surface': 'color-mix(in srgb, var(--dd-
|
|
4328
|
-
'--dd-neo-card-panel': 'color-mix(in srgb, var(--dd-
|
|
4327
|
+
'--dd-neo-card-surface': 'color-mix(in srgb, var(--dd-neo-ana-2) 16%, var(--dd-base-0))',
|
|
4328
|
+
'--dd-neo-card-panel': 'color-mix(in srgb, var(--dd-neo-ana-2) 8%, var(--dd-base-0))',
|
|
4329
4329
|
'--dd-neo-card-text': 'var(--dd-base-600)',
|
|
4330
4330
|
'--dd-neo-card-border': 'var(--dd-neo-ink)',
|
|
4331
|
-
'--dd-neo-card-shadow': 'var(--dd-
|
|
4332
|
-
'--dd-neo-card-accent': 'var(--dd-
|
|
4331
|
+
'--dd-neo-card-shadow': 'var(--dd-neo-ana-5)',
|
|
4332
|
+
'--dd-neo-card-accent': 'var(--dd-neo-ana-1)',
|
|
4333
4333
|
};
|
|
4334
4334
|
case AccentEnumColor.Gray:
|
|
4335
4335
|
return {
|
|
@@ -4337,17 +4337,17 @@ function getNeobrutalCardStyle(color) {
|
|
|
4337
4337
|
'--dd-neo-card-panel': 'var(--dd-base-0)',
|
|
4338
4338
|
'--dd-neo-card-text': 'var(--dd-base-600)',
|
|
4339
4339
|
'--dd-neo-card-border': 'var(--dd-neo-ink)',
|
|
4340
|
-
'--dd-neo-card-shadow': 'var(--dd-
|
|
4341
|
-
'--dd-neo-card-accent': 'var(--dd-
|
|
4340
|
+
'--dd-neo-card-shadow': 'var(--dd-neo-ana-6)',
|
|
4341
|
+
'--dd-neo-card-accent': 'var(--dd-neo-ana-2)',
|
|
4342
4342
|
};
|
|
4343
4343
|
case AccentEnumColor.Dark:
|
|
4344
4344
|
return {
|
|
4345
|
-
'--dd-neo-card-surface': 'var(--dd-
|
|
4346
|
-
'--dd-neo-card-panel': 'color-mix(in srgb, var(--dd-
|
|
4347
|
-
'--dd-neo-card-text': 'var(--dd-
|
|
4345
|
+
'--dd-neo-card-surface': 'var(--dd-neo-ana-4)',
|
|
4346
|
+
'--dd-neo-card-panel': 'color-mix(in srgb, var(--dd-neo-ana-4) 92%, var(--dd-neo-ana-3))',
|
|
4347
|
+
'--dd-neo-card-text': 'var(--dd-neo-ana-4-contrast)',
|
|
4348
4348
|
'--dd-neo-card-border': 'var(--dd-neo-ink)',
|
|
4349
|
-
'--dd-neo-card-shadow': 'var(--dd-
|
|
4350
|
-
'--dd-neo-card-accent': 'var(--dd-
|
|
4349
|
+
'--dd-neo-card-shadow': 'var(--dd-neo-ana-3)',
|
|
4350
|
+
'--dd-neo-card-accent': 'var(--dd-neo-ana-1)',
|
|
4351
4351
|
};
|
|
4352
4352
|
case AccentEnumColor.White:
|
|
4353
4353
|
default:
|
|
@@ -4356,8 +4356,8 @@ function getNeobrutalCardStyle(color) {
|
|
|
4356
4356
|
'--dd-neo-card-panel': 'var(--dd-base-100)',
|
|
4357
4357
|
'--dd-neo-card-text': 'var(--dd-base-600)',
|
|
4358
4358
|
'--dd-neo-card-border': 'var(--dd-neo-ink)',
|
|
4359
|
-
'--dd-neo-card-shadow': 'var(--dd-
|
|
4360
|
-
'--dd-neo-card-accent': 'var(--dd-
|
|
4359
|
+
'--dd-neo-card-shadow': 'var(--dd-neo-ana-5)',
|
|
4360
|
+
'--dd-neo-card-accent': 'var(--dd-neo-ana-6)',
|
|
4361
4361
|
};
|
|
4362
4362
|
}
|
|
4363
4363
|
}
|
|
@@ -4994,11 +4994,11 @@ class DuckDevSegmentButton {
|
|
|
4994
4994
|
contentId = input(undefined, { ...(ngDevMode ? { debugName: "contentId" } : {}) });
|
|
4995
4995
|
templateRef = viewChild.required('contentTpl');
|
|
4996
4996
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4997
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: DuckDevSegmentButton, isStandalone: true, selector: "dd-segment-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #contentTpl>\n <ng-content />\n</ng-template>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] });
|
|
4997
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: DuckDevSegmentButton, isStandalone: true, selector: "dd-segment-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #contentTpl>\n <ng-content />\n</ng-template>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] });
|
|
4998
4998
|
}
|
|
4999
4999
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentButton, decorators: [{
|
|
5000
5000
|
type: Component,
|
|
5001
|
-
args: [{ selector: 'dd-segment-button', imports: [], template: "<ng-template #contentTpl>\n <ng-content />\n</ng-template>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
|
|
5001
|
+
args: [{ selector: 'dd-segment-button', imports: [], template: "<ng-template #contentTpl>\n <ng-content />\n</ng-template>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
|
|
5002
5002
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentId", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ['contentTpl', { isSignal: true }] }] } });
|
|
5003
5003
|
|
|
5004
5004
|
class DuckDevSegmentClassic {
|
|
@@ -5062,11 +5062,11 @@ class DuckDevSegmentClassic {
|
|
|
5062
5062
|
}
|
|
5063
5063
|
}
|
|
5064
5064
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5065
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentClassic, isStandalone: true, selector: "dd-segment-classic", inputs: { value: { classPropertyName: "value", publicName: "value", 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=\"segment-container\">\n <div class=\"segment-background\"></div>\n <div\n class=\"segment-indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n ></div>\n <div class=\"segment-buttons\" #buttonsContainer>\n @for (button of buttons; track button; let i = $index) {\n <button\n class=\"segment-button\"\n [class.segment-button-checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </button>\n }\n </div>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
5065
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentClassic, isStandalone: true, selector: "dd-segment-classic", inputs: { value: { classPropertyName: "value", publicName: "value", 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=\"segment-container\">\n <div class=\"segment-background\"></div>\n <div\n class=\"segment-indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n ></div>\n <div class=\"segment-buttons\" #buttonsContainer>\n @for (button of buttons; track button; let i = $index) {\n <button\n class=\"segment-button\"\n [class.segment-button-checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </button>\n }\n </div>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
5066
5066
|
}
|
|
5067
5067
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, decorators: [{
|
|
5068
5068
|
type: Component,
|
|
5069
|
-
args: [{ selector: 'dd-segment-classic', imports: [NgTemplateOutlet], template: "<div class=\"segment-container\">\n <div class=\"segment-background\"></div>\n <div\n class=\"segment-indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n ></div>\n <div class=\"segment-buttons\" #buttonsContainer>\n @for (button of buttons; track button; let i = $index) {\n <button\n class=\"segment-button\"\n [class.segment-button-checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </button>\n }\n </div>\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
|
|
5069
|
+
args: [{ selector: 'dd-segment-classic', imports: [NgTemplateOutlet], template: "<div class=\"segment-container\">\n <div class=\"segment-background\"></div>\n <div\n class=\"segment-indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n ></div>\n <div class=\"segment-buttons\" #buttonsContainer>\n @for (button of buttons; track button; let i = $index) {\n <button\n class=\"segment-button\"\n [class.segment-button-checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </button>\n }\n </div>\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
|
|
5070
5070
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ionChange: [{ type: i0.Output, args: ["ionChange"] }], segmentButtons: [{
|
|
5071
5071
|
type: ContentChildren,
|
|
5072
5072
|
args: [DuckDevSegmentButton]
|
|
@@ -5389,11 +5389,11 @@ class DuckDevBreadcrumbClassic {
|
|
|
5389
5389
|
separator = input('/', { ...(ngDevMode ? { debugName: "separator" } : {}) });
|
|
5390
5390
|
navigate = output();
|
|
5391
5391
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5392
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbClassic, isStandalone: true, selector: "dd-breadcrumb-classic", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__list\">\n @for (item of items(); track $index; let last = $last) {\n <li\n class=\"breadcrumb__item\"\n animate.enter=\"breadcrumb__item--enter\"\n animate.leave=\"breadcrumb__item--leave\"\n >\n @if (!last && item.url) {\n <button class=\"breadcrumb__link\" type=\"button\" (click)=\"navigate.emit(item)\">\n {{ item.label }}\n </button>\n } @else {\n <span class=\"breadcrumb__current\" [attr.aria-current]=\"last ? 'page' : null\">{{\n item.label\n }}</span>\n }\n @if (!last) {\n <span class=\"breadcrumb__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n }\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;height:40px;box-sizing:border-box}.breadcrumb__list{display:flex;flex-wrap:nowrap;align-items:center;margin:0;padding:0;list-style:none;height:100%;overflow-x:auto;scrollbar-width:none}.breadcrumb__list::-webkit-scrollbar{display:none}.breadcrumb__item{display:inline-flex;align-items:center;min-width:0}.breadcrumb__link{display:inline-block;max-width:200px;padding:6px 4px;border:none;background:transparent;color:var(--dd-base-accent-blue);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s ease,opacity .18s ease}.breadcrumb__link:hover{color:var(--dd-base-secondary);text-decoration:underline}.breadcrumb__link:focus-visible{outline:2px solid var(--dd-base-accent-blue);outline-offset:2px;border-radius:3px}.breadcrumb__current{display:inline-block;max-width:220px;padding:6px 4px;color:var(--dd-base-500);font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.breadcrumb__separator{flex-shrink:0;margin:0 8px;color:var(--dd-base-400);font-size:.8rem;-webkit-user-select:none;user-select:none}@keyframes breadcrumb-item-enter{0%{opacity:0;max-width:0;transform:translate(-8px)}50%{opacity:.4;max-width:250px}to{opacity:1;max-width:250px;transform:translate(0)}}@keyframes breadcrumb-item-leave{0%{opacity:1;max-width:250px;transform:translate(0)}50%{opacity:0;max-width:250px}to{opacity:0;max-width:0;transform:translate(-8px)}}.breadcrumb__item--enter{animation:breadcrumb-item-enter .3s cubic-bezier(.16,1,.3,1) both}.breadcrumb__item--leave{animation:breadcrumb-item-leave .22s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.breadcrumb__link{max-width:160px;font-size:.84rem}.breadcrumb__current{max-width:180px;font-size:.84rem}.breadcrumb__separator{margin:0 6px}}@media(max-width:480px){:host{height:36px}.breadcrumb__link{max-width:120px;padding:8px 2px;font-size:.8rem}.breadcrumb__current{max-width:140px;padding:8px 2px;font-size:.8rem}.breadcrumb__separator{margin:0 4px;font-size:.72rem}}@media(max-width:360px){.breadcrumb__link{max-width:90px;font-size:.75rem}.breadcrumb__current{max-width:110px;font-size:.75rem}.breadcrumb__separator{margin:0 3px}}\n"] });
|
|
5392
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbClassic, isStandalone: true, selector: "dd-breadcrumb-classic", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__list\">\n @for (item of items(); track $index; let last = $last) {\n <li\n class=\"breadcrumb__item\"\n animate.enter=\"breadcrumb__item--enter\"\n animate.leave=\"breadcrumb__item--leave\"\n >\n @if (!last && item.url) {\n <button class=\"breadcrumb__link\" type=\"button\" (click)=\"navigate.emit(item)\">\n {{ item.label }}\n </button>\n } @else {\n <span class=\"breadcrumb__current\" [attr.aria-current]=\"last ? 'page' : null\">{{\n item.label\n }}</span>\n }\n @if (!last) {\n <span class=\"breadcrumb__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n }\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;height:40px;box-sizing:border-box}.breadcrumb__list{display:flex;flex-wrap:nowrap;align-items:center;margin:0;padding:0;list-style:none;height:100%;overflow-x:auto;scrollbar-width:none}.breadcrumb__list::-webkit-scrollbar{display:none}.breadcrumb__item{display:inline-flex;align-items:center;min-width:0}.breadcrumb__link{display:inline-block;max-width:200px;padding:6px 4px;border:none;background:transparent;color:var(--dd-base-accent-blue);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s ease,opacity .18s ease}.breadcrumb__link:hover{color:var(--dd-base-secondary);text-decoration:underline}.breadcrumb__link:focus-visible{outline:2px solid var(--dd-base-accent-blue);outline-offset:2px;border-radius:3px}.breadcrumb__current{display:inline-block;max-width:220px;padding:6px 4px;color:var(--dd-base-500);font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.breadcrumb__separator{flex-shrink:0;margin:0 8px;color:var(--dd-base-400);font-size:.8rem;-webkit-user-select:none;user-select:none}@keyframes breadcrumb-item-enter{0%{opacity:0;max-width:0;transform:translate(-8px)}50%{opacity:.4;max-width:250px}to{opacity:1;max-width:250px;transform:translate(0)}}@keyframes breadcrumb-item-leave{0%{opacity:1;max-width:250px;transform:translate(0)}50%{opacity:0;max-width:250px}to{opacity:0;max-width:0;transform:translate(-8px)}}.breadcrumb__item--enter{animation:breadcrumb-item-enter .3s cubic-bezier(.16,1,.3,1) both}.breadcrumb__item--leave{animation:breadcrumb-item-leave .22s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.breadcrumb__link{max-width:160px;font-size:.84rem}.breadcrumb__current{max-width:180px;font-size:.84rem}.breadcrumb__separator{margin:0 6px}}@media(max-width:480px){:host{height:36px}.breadcrumb__link{max-width:120px;padding:8px 2px;font-size:.8rem}.breadcrumb__current{max-width:140px;padding:8px 2px;font-size:.8rem}.breadcrumb__separator{margin:0 4px;font-size:.72rem}}@media(max-width:360px){.breadcrumb__link{max-width:90px;font-size:.75rem}.breadcrumb__current{max-width:110px;font-size:.75rem}.breadcrumb__separator{margin:0 3px}}\n"] });
|
|
5393
5393
|
}
|
|
5394
5394
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbClassic, decorators: [{
|
|
5395
5395
|
type: Component,
|
|
5396
|
-
args: [{ selector: 'dd-breadcrumb-classic', standalone: true, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__list\">\n @for (item of items(); track $index; let last = $last) {\n <li\n class=\"breadcrumb__item\"\n animate.enter=\"breadcrumb__item--enter\"\n animate.leave=\"breadcrumb__item--leave\"\n >\n @if (!last && item.url) {\n <button class=\"breadcrumb__link\" type=\"button\" (click)=\"navigate.emit(item)\">\n {{ item.label }}\n </button>\n } @else {\n <span class=\"breadcrumb__current\" [attr.aria-current]=\"last ? 'page' : null\">{{\n item.label\n }}</span>\n }\n @if (!last) {\n <span class=\"breadcrumb__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n }\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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;height:40px;box-sizing:border-box}.breadcrumb__list{display:flex;flex-wrap:nowrap;align-items:center;margin:0;padding:0;list-style:none;height:100%;overflow-x:auto;scrollbar-width:none}.breadcrumb__list::-webkit-scrollbar{display:none}.breadcrumb__item{display:inline-flex;align-items:center;min-width:0}.breadcrumb__link{display:inline-block;max-width:200px;padding:6px 4px;border:none;background:transparent;color:var(--dd-base-accent-blue);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s ease,opacity .18s ease}.breadcrumb__link:hover{color:var(--dd-base-secondary);text-decoration:underline}.breadcrumb__link:focus-visible{outline:2px solid var(--dd-base-accent-blue);outline-offset:2px;border-radius:3px}.breadcrumb__current{display:inline-block;max-width:220px;padding:6px 4px;color:var(--dd-base-500);font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.breadcrumb__separator{flex-shrink:0;margin:0 8px;color:var(--dd-base-400);font-size:.8rem;-webkit-user-select:none;user-select:none}@keyframes breadcrumb-item-enter{0%{opacity:0;max-width:0;transform:translate(-8px)}50%{opacity:.4;max-width:250px}to{opacity:1;max-width:250px;transform:translate(0)}}@keyframes breadcrumb-item-leave{0%{opacity:1;max-width:250px;transform:translate(0)}50%{opacity:0;max-width:250px}to{opacity:0;max-width:0;transform:translate(-8px)}}.breadcrumb__item--enter{animation:breadcrumb-item-enter .3s cubic-bezier(.16,1,.3,1) both}.breadcrumb__item--leave{animation:breadcrumb-item-leave .22s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.breadcrumb__link{max-width:160px;font-size:.84rem}.breadcrumb__current{max-width:180px;font-size:.84rem}.breadcrumb__separator{margin:0 6px}}@media(max-width:480px){:host{height:36px}.breadcrumb__link{max-width:120px;padding:8px 2px;font-size:.8rem}.breadcrumb__current{max-width:140px;padding:8px 2px;font-size:.8rem}.breadcrumb__separator{margin:0 4px;font-size:.72rem}}@media(max-width:360px){.breadcrumb__link{max-width:90px;font-size:.75rem}.breadcrumb__current{max-width:110px;font-size:.75rem}.breadcrumb__separator{margin:0 3px}}\n"] }]
|
|
5396
|
+
args: [{ selector: 'dd-breadcrumb-classic', standalone: true, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__list\">\n @for (item of items(); track $index; let last = $last) {\n <li\n class=\"breadcrumb__item\"\n animate.enter=\"breadcrumb__item--enter\"\n animate.leave=\"breadcrumb__item--leave\"\n >\n @if (!last && item.url) {\n <button class=\"breadcrumb__link\" type=\"button\" (click)=\"navigate.emit(item)\">\n {{ item.label }}\n </button>\n } @else {\n <span class=\"breadcrumb__current\" [attr.aria-current]=\"last ? 'page' : null\">{{\n item.label\n }}</span>\n }\n @if (!last) {\n <span class=\"breadcrumb__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n }\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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;height:40px;box-sizing:border-box}.breadcrumb__list{display:flex;flex-wrap:nowrap;align-items:center;margin:0;padding:0;list-style:none;height:100%;overflow-x:auto;scrollbar-width:none}.breadcrumb__list::-webkit-scrollbar{display:none}.breadcrumb__item{display:inline-flex;align-items:center;min-width:0}.breadcrumb__link{display:inline-block;max-width:200px;padding:6px 4px;border:none;background:transparent;color:var(--dd-base-accent-blue);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s ease,opacity .18s ease}.breadcrumb__link:hover{color:var(--dd-base-secondary);text-decoration:underline}.breadcrumb__link:focus-visible{outline:2px solid var(--dd-base-accent-blue);outline-offset:2px;border-radius:3px}.breadcrumb__current{display:inline-block;max-width:220px;padding:6px 4px;color:var(--dd-base-500);font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.breadcrumb__separator{flex-shrink:0;margin:0 8px;color:var(--dd-base-400);font-size:.8rem;-webkit-user-select:none;user-select:none}@keyframes breadcrumb-item-enter{0%{opacity:0;max-width:0;transform:translate(-8px)}50%{opacity:.4;max-width:250px}to{opacity:1;max-width:250px;transform:translate(0)}}@keyframes breadcrumb-item-leave{0%{opacity:1;max-width:250px;transform:translate(0)}50%{opacity:0;max-width:250px}to{opacity:0;max-width:0;transform:translate(-8px)}}.breadcrumb__item--enter{animation:breadcrumb-item-enter .3s cubic-bezier(.16,1,.3,1) both}.breadcrumb__item--leave{animation:breadcrumb-item-leave .22s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.breadcrumb__link{max-width:160px;font-size:.84rem}.breadcrumb__current{max-width:180px;font-size:.84rem}.breadcrumb__separator{margin:0 6px}}@media(max-width:480px){:host{height:36px}.breadcrumb__link{max-width:120px;padding:8px 2px;font-size:.8rem}.breadcrumb__current{max-width:140px;padding:8px 2px;font-size:.8rem}.breadcrumb__separator{margin:0 4px;font-size:.72rem}}@media(max-width:360px){.breadcrumb__link{max-width:90px;font-size:.75rem}.breadcrumb__current{max-width:110px;font-size:.75rem}.breadcrumb__separator{margin:0 3px}}\n"] }]
|
|
5397
5397
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }] } });
|
|
5398
5398
|
|
|
5399
5399
|
class DuckDevBreadcrumbNeobrutal {
|
|
@@ -5522,11 +5522,11 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5522
5522
|
}
|
|
5523
5523
|
}
|
|
5524
5524
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5525
|
-
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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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"] }] });
|
|
5525
|
+
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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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"] }] });
|
|
5526
5526
|
}
|
|
5527
5527
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, decorators: [{
|
|
5528
5528
|
type: Component,
|
|
5529
|
-
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)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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"] }]
|
|
5529
|
+
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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[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"] }]
|
|
5530
5530
|
}], 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 }] }] } });
|
|
5531
5531
|
|
|
5532
5532
|
class DuckDevSelectorOption {
|
|
@@ -5553,44 +5553,44 @@ function getNeobrutalSelectorStyle(color) {
|
|
|
5553
5553
|
switch (color) {
|
|
5554
5554
|
case AccentEnumColor.Violet:
|
|
5555
5555
|
return {
|
|
5556
|
-
'--neo-selector-surface': 'var(--dd-
|
|
5557
|
-
'--neo-selector-active': 'color-mix(in srgb, var(--dd-
|
|
5558
|
-
'--neo-selector-text': 'var(--dd-
|
|
5559
|
-
'--neo-selector-shadow': 'var(--dd-
|
|
5560
|
-
'--neo-selector-accent': 'var(--dd-
|
|
5556
|
+
'--neo-selector-surface': 'var(--dd-neo-ana-3)',
|
|
5557
|
+
'--neo-selector-active': 'color-mix(in srgb, var(--dd-neo-ana-3) 78%, var(--dd-base-0))',
|
|
5558
|
+
'--neo-selector-text': 'var(--dd-neo-ana-3-contrast)',
|
|
5559
|
+
'--neo-selector-shadow': 'var(--dd-neo-ana-6)',
|
|
5560
|
+
'--neo-selector-accent': 'var(--dd-neo-ana-1)',
|
|
5561
5561
|
};
|
|
5562
5562
|
case AccentEnumColor.Orange:
|
|
5563
5563
|
return {
|
|
5564
|
-
'--neo-selector-surface': 'var(--dd-
|
|
5565
|
-
'--neo-selector-active': 'color-mix(in srgb, var(--dd-
|
|
5566
|
-
'--neo-selector-text': 'var(--dd-
|
|
5567
|
-
'--neo-selector-shadow': 'var(--dd-
|
|
5568
|
-
'--neo-selector-accent': 'var(--dd-
|
|
5564
|
+
'--neo-selector-surface': 'var(--dd-neo-ana-2)',
|
|
5565
|
+
'--neo-selector-active': 'color-mix(in srgb, var(--dd-neo-ana-1) 68%, var(--dd-base-0))',
|
|
5566
|
+
'--neo-selector-text': 'var(--dd-neo-ana-2-contrast)',
|
|
5567
|
+
'--neo-selector-shadow': 'var(--dd-neo-ana-5)',
|
|
5568
|
+
'--neo-selector-accent': 'var(--dd-neo-ana-1)',
|
|
5569
5569
|
};
|
|
5570
5570
|
case AccentEnumColor.Gray:
|
|
5571
5571
|
return {
|
|
5572
5572
|
'--neo-selector-surface': 'var(--dd-base-200)',
|
|
5573
5573
|
'--neo-selector-active': 'var(--dd-base-0)',
|
|
5574
5574
|
'--neo-selector-text': 'var(--dd-base-600)',
|
|
5575
|
-
'--neo-selector-shadow': 'var(--dd-
|
|
5576
|
-
'--neo-selector-accent': 'var(--dd-
|
|
5575
|
+
'--neo-selector-shadow': 'var(--dd-neo-ana-6)',
|
|
5576
|
+
'--neo-selector-accent': 'var(--dd-neo-ana-2)',
|
|
5577
5577
|
};
|
|
5578
5578
|
case AccentEnumColor.Dark:
|
|
5579
5579
|
return {
|
|
5580
|
-
'--neo-selector-surface': 'var(--dd-
|
|
5581
|
-
'--neo-selector-active': 'color-mix(in srgb, var(--dd-
|
|
5582
|
-
'--neo-selector-text': 'var(--dd-
|
|
5583
|
-
'--neo-selector-shadow': 'var(--dd-
|
|
5584
|
-
'--neo-selector-accent': 'var(--dd-
|
|
5580
|
+
'--neo-selector-surface': 'var(--dd-neo-ana-4)',
|
|
5581
|
+
'--neo-selector-active': 'color-mix(in srgb, var(--dd-neo-ana-4) 84%, var(--dd-neo-ana-3))',
|
|
5582
|
+
'--neo-selector-text': 'var(--dd-neo-ana-4-contrast)',
|
|
5583
|
+
'--neo-selector-shadow': 'var(--dd-neo-ana-5)',
|
|
5584
|
+
'--neo-selector-accent': 'var(--dd-neo-ana-1)',
|
|
5585
5585
|
};
|
|
5586
5586
|
case AccentEnumColor.White:
|
|
5587
5587
|
default:
|
|
5588
5588
|
return {
|
|
5589
5589
|
'--neo-selector-surface': 'var(--dd-base-0)',
|
|
5590
|
-
'--neo-selector-active': 'var(--dd-
|
|
5590
|
+
'--neo-selector-active': 'var(--dd-neo-ana-1)',
|
|
5591
5591
|
'--neo-selector-text': 'var(--dd-base-600)',
|
|
5592
|
-
'--neo-selector-shadow': 'var(--dd-
|
|
5593
|
-
'--neo-selector-accent': 'var(--dd-
|
|
5592
|
+
'--neo-selector-shadow': 'var(--dd-neo-ana-4)',
|
|
5593
|
+
'--neo-selector-accent': 'var(--dd-neo-ana-5)',
|
|
5594
5594
|
};
|
|
5595
5595
|
}
|
|
5596
5596
|
}
|
|
@@ -5805,7 +5805,7 @@ class LoaderBlock {
|
|
|
5805
5805
|
this.activeStyleTab.set(tab);
|
|
5806
5806
|
}
|
|
5807
5807
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5808
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: LoaderBlock, isStandalone: true, selector: "app-loader-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-classic /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-loading-bubble /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code><lib-loader-three-dots /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-neobrutal-stamp />\n<duck-dev-loader-neobrutal-bars />\n<duck-dev-loader-neobrutal-marquee /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-three-dots,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-stamp,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-bars,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-marquee{display:flex;justify-content:center;align-items:center}.demo-container .component-section .examples-block .example-row .example-item.example-item-neobrutal{background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 35%,var(--dd-base-0) 35% 100%);border-width:3px;border-color:var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: LoaderClassic, selector: "duck-dev-loader-classic" }, { kind: "component", type: LoaderLoadingBubble, selector: "duck-dev-loader-loading-bubble" }, { kind: "component", type: LoaderThreeDots, selector: "duck-dev-loader-three-dots" }, { kind: "component", type: LoaderNeobrutalStamp, selector: "duck-dev-loader-neobrutal-stamp" }, { kind: "component", type: LoaderNeobrutalBars, selector: "duck-dev-loader-neobrutal-bars" }, { kind: "component", type: LoaderNeobrutalMarquee, selector: "duck-dev-loader-neobrutal-marquee" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5808
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: LoaderBlock, isStandalone: true, selector: "app-loader-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-classic /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-loading-bubble /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code><lib-loader-three-dots /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-neobrutal-stamp />\n<duck-dev-loader-neobrutal-bars />\n<duck-dev-loader-neobrutal-marquee /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-three-dots,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-stamp,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-bars,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-marquee{display:flex;justify-content:center;align-items:center}.demo-container .component-section .examples-block .example-row .example-item.example-item-neobrutal{background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 35%,var(--dd-base-0) 35% 100%);border-width:3px;border-color:var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: LoaderClassic, selector: "duck-dev-loader-classic" }, { kind: "component", type: LoaderLoadingBubble, selector: "duck-dev-loader-loading-bubble" }, { kind: "component", type: LoaderThreeDots, selector: "duck-dev-loader-three-dots" }, { kind: "component", type: LoaderNeobrutalStamp, selector: "duck-dev-loader-neobrutal-stamp" }, { kind: "component", type: LoaderNeobrutalBars, selector: "duck-dev-loader-neobrutal-bars" }, { kind: "component", type: LoaderNeobrutalMarquee, selector: "duck-dev-loader-neobrutal-marquee" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5809
5809
|
}
|
|
5810
5810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, decorators: [{
|
|
5811
5811
|
type: Component,
|
|
@@ -5818,7 +5818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5818
5818
|
LoaderNeobrutalMarquee,
|
|
5819
5819
|
TranslocoPipe,
|
|
5820
5820
|
DuckDevTab,
|
|
5821
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-classic /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-loading-bubble /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code><lib-loader-three-dots /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-neobrutal-stamp />\n<duck-dev-loader-neobrutal-bars />\n<duck-dev-loader-neobrutal-marquee /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-three-dots,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-stamp,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-bars,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-marquee{display:flex;justify-content:center;align-items:center}.demo-container .component-section .examples-block .example-row .example-item.example-item-neobrutal{background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 35%,var(--dd-base-0) 35% 100%);border-width:3px;border-color:var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
5821
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-classic /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-loading-bubble /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code><lib-loader-three-dots /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-neobrutal-stamp />\n<duck-dev-loader-neobrutal-bars />\n<duck-dev-loader-neobrutal-marquee /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-three-dots,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-stamp,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-bars,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-marquee{display:flex;justify-content:center;align-items:center}.demo-container .component-section .examples-block .example-row .example-item.example-item-neobrutal{background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 35%,var(--dd-base-0) 35% 100%);border-width:3px;border-color:var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
5822
5822
|
}] });
|
|
5823
5823
|
|
|
5824
5824
|
class TabsBlock {
|
|
@@ -5866,7 +5866,7 @@ class TabsBlock {
|
|
|
5866
5866
|
this.activeVerticalTab.set(tab);
|
|
5867
5867
|
}
|
|
5868
5868
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5869
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"tabs-page\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeStyleTab().id === 'classic') {\n <!-- Description -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"feature-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorGray\">\n <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n\n <!-- API -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>tabs</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>tabChange</strong>\n <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"sub-title\">DuckDevTabItem</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>id</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>label</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>content</strong>\n <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Code -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n </div>\n\n <ng-template #tabsUsageTemplate>\n <pre class=\"accordion-code\"><code><duck-dev-tab\n [tabs]=\"tabs\"\n (tabChange)=\"onTabChange($event)\"\n>\n @if (activeTab().id === 'first') {{ '{' }}\n <p>First tab content</p>\n {{ '}' }}\n @if (activeTab().id === 'second') {{ '{' }}\n <p>Second tab content</p>\n {{ '}' }}\n</duck-dev-tab></code></pre>\n </ng-template>\n\n <ng-template #tabsUsageComponent>\n <pre\n class=\"accordion-code\"\n ><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '@angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '@jsverse/transloco';\n\n@Component({{ '{' }}\n imports: [DuckDevTab],\n // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n private readonly t = inject(TranslocoService);\n\n tabs: DuckDevTabItem[] = [\n {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n ];\n\n activeTab = signal<DuckDevTabItem>(this.tabs[0]);\n\n onTabChange(tab: DuckDevTabItem) {{ '{' }}\n this.activeTab.set(tab);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n [content]=\"tabsUsageTemplate\"\n [color]=\"colorOrange\"\n />\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n [content]=\"tabsUsageComponent\"\n [color]=\"colorViolet\"\n />\n </div>\n </dd-card-section>\n </section>\n\n <!-- Live demo -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n </div>\n\n <div class=\"live-demo\">\n <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n @if (activeDemoTab().id === 'overview') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'features') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'api') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n </div>\n }\n </duck-dev-tab>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Tip -->\n <section class=\"tab-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong>\n {{ 'tabsComponent.classicTip.text' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n } @else {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <duck-dev-tab-neobrutal\n [tabs]=\"neoHorizontalTabs\"\n (tabChange)=\"onHorizontalTabChange($event)\"\n >\n <ng-template ddTabPanel>\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerRush' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerDrop' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerReview' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n </ng-template>\n </duck-dev-tab-neobrutal>\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <div class=\"neo-demo-vertical\">\n <div class=\"neo-demo-vertical__sidebar\">\n @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-vertical-button\"\n [class.active]=\"activeVerticalTab().id === tab.id\"\n (click)=\"onVerticalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{\n i + 1 < 10 ? '0' + (i + 1) : i + 1\n }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-vertical__content\">\n @if (activeVerticalTab().id === 'pulse') {\n <article class=\"neo-story\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyPulseChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'stack') {\n <article class=\"neo-story neo-story-alt\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyStackChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'blast') {\n <article class=\"neo-story neo-story-dark\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyBlastChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\n </div>\n </dd-card-section>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevTabNeobrutal, selector: "duck-dev-tab-neobrutal", inputs: ["tabs", "color"], outputs: ["tabChange"] }, { kind: "directive", type: DdTabPanel, selector: "[ddTabPanel]" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5869
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"tabs-page\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeStyleTab().id === 'classic') {\n <!-- Description -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"feature-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorGray\">\n <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n\n <!-- API -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>tabs</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>tabChange</strong>\n <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"sub-title\">DuckDevTabItem</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>id</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>label</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>content</strong>\n <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Code -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n </div>\n\n <ng-template #tabsUsageTemplate>\n <pre class=\"accordion-code\"><code><duck-dev-tab\n [tabs]=\"tabs\"\n (tabChange)=\"onTabChange($event)\"\n>\n @if (activeTab().id === 'first') {{ '{' }}\n <p>First tab content</p>\n {{ '}' }}\n @if (activeTab().id === 'second') {{ '{' }}\n <p>Second tab content</p>\n {{ '}' }}\n</duck-dev-tab></code></pre>\n </ng-template>\n\n <ng-template #tabsUsageComponent>\n <pre\n class=\"accordion-code\"\n ><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '@angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '@jsverse/transloco';\n\n@Component({{ '{' }}\n imports: [DuckDevTab],\n // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n private readonly t = inject(TranslocoService);\n\n tabs: DuckDevTabItem[] = [\n {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n ];\n\n activeTab = signal<DuckDevTabItem>(this.tabs[0]);\n\n onTabChange(tab: DuckDevTabItem) {{ '{' }}\n this.activeTab.set(tab);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n [content]=\"tabsUsageTemplate\"\n [color]=\"colorOrange\"\n />\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n [content]=\"tabsUsageComponent\"\n [color]=\"colorViolet\"\n />\n </div>\n </dd-card-section>\n </section>\n\n <!-- Live demo -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n </div>\n\n <div class=\"live-demo\">\n <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n @if (activeDemoTab().id === 'overview') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'features') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'api') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n </div>\n }\n </duck-dev-tab>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Tip -->\n <section class=\"tab-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong>\n {{ 'tabsComponent.classicTip.text' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n } @else {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <duck-dev-tab-neobrutal\n [tabs]=\"neoHorizontalTabs\"\n (tabChange)=\"onHorizontalTabChange($event)\"\n >\n <ng-template ddTabPanel>\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerRush' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerDrop' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerReview' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n </ng-template>\n </duck-dev-tab-neobrutal>\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <div class=\"neo-demo-vertical\">\n <div class=\"neo-demo-vertical__sidebar\">\n @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-vertical-button\"\n [class.active]=\"activeVerticalTab().id === tab.id\"\n (click)=\"onVerticalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{\n i + 1 < 10 ? '0' + (i + 1) : i + 1\n }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-vertical__content\">\n @if (activeVerticalTab().id === 'pulse') {\n <article class=\"neo-story\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyPulseChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'stack') {\n <article class=\"neo-story neo-story-alt\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyStackChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'blast') {\n <article class=\"neo-story neo-story-dark\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyBlastChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\n </div>\n </dd-card-section>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevTabNeobrutal, selector: "duck-dev-tab-neobrutal", inputs: ["tabs", "color"], outputs: ["tabChange"] }, { kind: "directive", type: DdTabPanel, selector: "[ddTabPanel]" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5870
5870
|
}
|
|
5871
5871
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, decorators: [{
|
|
5872
5872
|
type: Component,
|
|
@@ -5880,7 +5880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5880
5880
|
Badge,
|
|
5881
5881
|
DuckDevAccordionComponent,
|
|
5882
5882
|
DuckDevSpeakerBubbleSoft,
|
|
5883
|
-
], template: "<div class=\"tabs-page\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeStyleTab().id === 'classic') {\n <!-- Description -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"feature-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorGray\">\n <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n\n <!-- API -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>tabs</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>tabChange</strong>\n <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"sub-title\">DuckDevTabItem</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>id</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>label</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>content</strong>\n <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Code -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n </div>\n\n <ng-template #tabsUsageTemplate>\n <pre class=\"accordion-code\"><code><duck-dev-tab\n [tabs]=\"tabs\"\n (tabChange)=\"onTabChange($event)\"\n>\n @if (activeTab().id === 'first') {{ '{' }}\n <p>First tab content</p>\n {{ '}' }}\n @if (activeTab().id === 'second') {{ '{' }}\n <p>Second tab content</p>\n {{ '}' }}\n</duck-dev-tab></code></pre>\n </ng-template>\n\n <ng-template #tabsUsageComponent>\n <pre\n class=\"accordion-code\"\n ><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '@angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '@jsverse/transloco';\n\n@Component({{ '{' }}\n imports: [DuckDevTab],\n // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n private readonly t = inject(TranslocoService);\n\n tabs: DuckDevTabItem[] = [\n {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n ];\n\n activeTab = signal<DuckDevTabItem>(this.tabs[0]);\n\n onTabChange(tab: DuckDevTabItem) {{ '{' }}\n this.activeTab.set(tab);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n [content]=\"tabsUsageTemplate\"\n [color]=\"colorOrange\"\n />\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n [content]=\"tabsUsageComponent\"\n [color]=\"colorViolet\"\n />\n </div>\n </dd-card-section>\n </section>\n\n <!-- Live demo -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n </div>\n\n <div class=\"live-demo\">\n <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n @if (activeDemoTab().id === 'overview') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'features') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'api') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n </div>\n }\n </duck-dev-tab>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Tip -->\n <section class=\"tab-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong>\n {{ 'tabsComponent.classicTip.text' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n } @else {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <duck-dev-tab-neobrutal\n [tabs]=\"neoHorizontalTabs\"\n (tabChange)=\"onHorizontalTabChange($event)\"\n >\n <ng-template ddTabPanel>\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerRush' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerDrop' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerReview' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n </ng-template>\n </duck-dev-tab-neobrutal>\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <div class=\"neo-demo-vertical\">\n <div class=\"neo-demo-vertical__sidebar\">\n @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-vertical-button\"\n [class.active]=\"activeVerticalTab().id === tab.id\"\n (click)=\"onVerticalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{\n i + 1 < 10 ? '0' + (i + 1) : i + 1\n }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-vertical__content\">\n @if (activeVerticalTab().id === 'pulse') {\n <article class=\"neo-story\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyPulseChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'stack') {\n <article class=\"neo-story neo-story-alt\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyStackChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'blast') {\n <article class=\"neo-story neo-story-dark\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyBlastChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\n </div>\n </dd-card-section>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"] }]
|
|
5883
|
+
], template: "<div class=\"tabs-page\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeStyleTab().id === 'classic') {\n <!-- Description -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"feature-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorGray\">\n <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n\n <!-- API -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>tabs</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>tabChange</strong>\n <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"sub-title\">DuckDevTabItem</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>id</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>label</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>content</strong>\n <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Code -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n </div>\n\n <ng-template #tabsUsageTemplate>\n <pre class=\"accordion-code\"><code><duck-dev-tab\n [tabs]=\"tabs\"\n (tabChange)=\"onTabChange($event)\"\n>\n @if (activeTab().id === 'first') {{ '{' }}\n <p>First tab content</p>\n {{ '}' }}\n @if (activeTab().id === 'second') {{ '{' }}\n <p>Second tab content</p>\n {{ '}' }}\n</duck-dev-tab></code></pre>\n </ng-template>\n\n <ng-template #tabsUsageComponent>\n <pre\n class=\"accordion-code\"\n ><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '@angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '@jsverse/transloco';\n\n@Component({{ '{' }}\n imports: [DuckDevTab],\n // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n private readonly t = inject(TranslocoService);\n\n tabs: DuckDevTabItem[] = [\n {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n ];\n\n activeTab = signal<DuckDevTabItem>(this.tabs[0]);\n\n onTabChange(tab: DuckDevTabItem) {{ '{' }}\n this.activeTab.set(tab);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n [content]=\"tabsUsageTemplate\"\n [color]=\"colorOrange\"\n />\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n [content]=\"tabsUsageComponent\"\n [color]=\"colorViolet\"\n />\n </div>\n </dd-card-section>\n </section>\n\n <!-- Live demo -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n </div>\n\n <div class=\"live-demo\">\n <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n @if (activeDemoTab().id === 'overview') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'features') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'api') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n </div>\n }\n </duck-dev-tab>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Tip -->\n <section class=\"tab-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong>\n {{ 'tabsComponent.classicTip.text' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n } @else {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <duck-dev-tab-neobrutal\n [tabs]=\"neoHorizontalTabs\"\n (tabChange)=\"onHorizontalTabChange($event)\"\n >\n <ng-template ddTabPanel>\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerRush' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerDrop' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerReview' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n </ng-template>\n </duck-dev-tab-neobrutal>\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <div class=\"neo-demo-vertical\">\n <div class=\"neo-demo-vertical__sidebar\">\n @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-vertical-button\"\n [class.active]=\"activeVerticalTab().id === tab.id\"\n (click)=\"onVerticalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{\n i + 1 < 10 ? '0' + (i + 1) : i + 1\n }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-vertical__content\">\n @if (activeVerticalTab().id === 'pulse') {\n <article class=\"neo-story\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyPulseChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'stack') {\n <article class=\"neo-story neo-story-alt\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyStackChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'blast') {\n <article class=\"neo-story neo-story-dark\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyBlastChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\n </div>\n </dd-card-section>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"] }]
|
|
5884
5884
|
}] });
|
|
5885
5885
|
|
|
5886
5886
|
class DuckDevSvgBlock {
|
|
@@ -6106,7 +6106,7 @@ getError(controlName: string): string {
|
|
|
6106
6106
|
return this.t.translate('inputComponent.demo.errors.invalid');
|
|
6107
6107
|
}
|
|
6108
6108
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6109
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: InputBlock, isStandalone: true, selector: "app-input-block", ngImport: i0, template: "<div class=\"demo-container\">\n <section class=\"hero\">\n <span class=\"eyebrow\">{{ 'inputComponent.eyebrow' | transloco }}</span>\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n <p class=\"hero-description\">\n {{ 'inputComponent.description' | transloco }}\n </p>\n\n <div class=\"hero-points\">\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointType' | transloco }}</span>\n <span class=\"hero-point-value\">{{ 'inputComponent.heroPointTypeValue' | transloco }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{\n 'inputComponent.heroPointIntegration' | transloco\n }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointIntegrationValue' | transloco\n }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointUseCase' | transloco }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointUseCaseValue' | transloco\n }}</span>\n </div>\n </div>\n </section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <div class=\"overview-grid\">\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.overviewTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.overviewDescription' | transloco }}\n </p>\n </dd-card-section>\n\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.featuresTitle' | transloco }}</h2>\n <ul class=\"feature-list\">\n <li>{{ 'inputComponent.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.feature5' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <div class=\"examples-grid\">\n <dd-card-section class=\"example-card\">\n <h2>{{ 'inputComponent.examplesTitle' | transloco }}</h2>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleText' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textExampleForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName', textExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleSelect' | transloco }}</h3>\n <duck-dev-input\n [form]=\"selectExampleForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role', selectExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleSelectCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleTextarea' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textareaExampleForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextareaCaption' | transloco }}</p>\n </div>\n </dd-card-section>\n\n <dd-card-section class=\"api-card\">\n <h2>{{ 'inputComponent.apiTitle' | transloco }}</h2>\n <ul class=\"api-list\">\n <li><strong>form</strong> - {{ 'inputComponent.apiForm' | transloco }}</li>\n <li>\n <strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}\n </li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li>\n <strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}\n </li>\n <li><strong>type</strong> - {{ 'inputComponent.apiType' | transloco }}</li>\n <li>\n <strong>formInputType</strong> - {{ 'inputComponent.apiFormInputType' | transloco }}\n </li>\n <li><strong>options</strong> - {{ 'inputComponent.apiOptions' | transloco }}</li>\n <li>\n <strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}\n </li>\n </ul>\n </dd-card-section>\n </div>\n\n <dd-card-section class=\"showcase-card\">\n <div class=\"showcase-head\">\n <div>\n <h2>{{ 'inputComponent.showcaseTitle' | transloco }}</h2>\n <p class=\"showcase-caption\">\n {{ 'inputComponent.showcaseDescription' | transloco }}\n </p>\n </div>\n <div class=\"showcase-value\">\n {{ 'inputComponent.showcaseValue' | transloco }}:\n {{ demoForm.value | json }}\n </div>\n </div>\n\n <form class=\"demo-form\" [formGroup]=\"demoForm\">\n <div class=\"showcase-grid\">\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseSelect' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item_wide\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseTextarea' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseCheckbox' | transloco }}</p>\n <div class=\"showcase-inline\">\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input>\n </div>\n </div>\n </div>\n </form>\n </dd-card-section>\n } @else {\n <dd-card-section class=\"showcase-card showcase-card--neobrutal\">\n <div class=\"showcase-head\">\n <div>\n <h2>Neobrutalism Inputs</h2>\n <p class=\"showcase-caption\">\n Extra brutal variants for promo forms, loud dashboards and expressive settings\n screens.\n </p>\n </div>\n </div>\n\n <div class=\"showcase-grid showcase-grid--neobrutal\">\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Text</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Select</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Poster / Textarea</p>\n <duck-dev-input-neobrutal-poster\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Email</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Checkbox</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input-neobrutal-slab>\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Toggle / Boolean</p>\n <duck-dev-input-neobrutal-toggle\n [form]=\"demoForm\"\n controlName=\"instantSync\"\n label=\"Instant sync\"\n description=\"Push UI changes to the preview canvas the moment a control changes.\"\n offLabel=\"Paused\"\n onLabel=\"Live\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Radio / Mode</p>\n <duck-dev-input-neobrutal-radio\n [form]=\"demoForm\"\n controlName=\"launchMode\"\n label=\"Workspace mode\"\n description=\"Pick the brutal layout state the team sees first.\"\n [options]=\"workspaceModeOptions\"\n [errorMessage]=\"getError('launchMode')\"\n />\n </div>\n </div>\n </dd-card-section>\n }\n\n <div class=\"code-grid\">\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeTemplate' | transloco }}</h3>\n <pre><code>{{ exampleMarkup }}</code></pre>\n </dd-card-section>\n\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeLogic' | transloco }}</h3>\n <pre><code>{{ exampleLogic }}</code></pre>\n </dd-card-section>\n </div>\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px 72px;display:grid;gap:28px;color:var(--dd-base-600)}.demo-container h1{font-size:40px;font-weight:700;color:var(--dd-base-600);margin:0;text-align:left}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin:0 0 12px}.demo-container h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin:0 0 14px}.demo-container p{margin:0}.hero{padding:36px;border-radius:32px;background:radial-gradient(circle at top left,rgba(125,92,255,.18),transparent 34%),radial-gradient(circle at bottom right,rgba(255,146,43,.18),transparent 30%),linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid rgba(125,92,255,.12);box-shadow:0 28px 60px #12121714}.eyebrow{display:inline-flex;margin-bottom:16px;padding:8px 14px;border-radius:999px;background:#7d5cff1f;color:var(--dd-base-accent-blue);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hero-description{max-width:720px;margin-top:12px;font-size:17px;line-height:1.7;color:var(--dd-base-400)}.hero-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.hero-point{padding:18px 20px;border-radius:22px;background:#ffffffc2;border:1px solid rgba(18,18,23,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-point-label{display:block;margin-bottom:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dd-base-accent-blue)}.hero-point-value{font-size:15px;line-height:1.5;color:var(--dd-base-500)}.overview-grid,.examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:26px;border-radius:28px;background:var(--dd-base-0);border:1px solid rgba(18,18,23,.08);box-shadow:0 20px 40px #1212170f}.description{font-size:15px;line-height:1.7;color:var(--dd-base-400)}.feature-list,.api-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}.feature-list li,.api-list li{padding:16px 18px;border-radius:18px;background:var(--dd-base-100);border:1px solid rgba(18,18,23,.04);line-height:1.6;color:var(--dd-base-500)}.api-list strong{color:var(--dd-base-accent-blue)}.examples-grid{align-items:start}.example-card{display:grid;gap:16px}.example-preview{padding:20px;border-radius:22px;background:linear-gradient(180deg,rgba(125,92,255,.08),transparent),var(--dd-base-100);border:1px solid rgba(125,92,255,.08)}.demo-form{display:grid;gap:18px}.checkbox-note{font-size:14px;line-height:1.5;color:var(--dd-base-400)}.showcase-card{background:radial-gradient(circle at top right,rgba(255,146,43,.12),transparent 26%),var(--dd-base-0)}.showcase-card--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 22%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.showcase-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:22px}.showcase-caption{font-size:14px;line-height:1.6;color:var(--dd-base-400)}.showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-item{padding:20px;border-radius:24px;background:linear-gradient(180deg,var(--dd-base-100),rgba(255,255,255,.92));border:1px solid rgba(18,18,23,.05)}.showcase-item--neobrutal{border:4px solid var(--dd-neo-ink);border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 16%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-yellow)}.showcase-item_wide{grid-column:1/-1}.showcase-label{margin-bottom:14px;font-size:14px;font-weight:600;color:var(--dd-base-400)}.showcase-inline{display:flex;align-items:center;gap:14px}.showcase-value{margin-top:12px;font-size:14px;color:var(--dd-base-accent-blue)}.code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-grid--neobrutal{align-items:start}.code-card pre{margin:0;padding:20px;overflow-x:auto;border-radius:22px;background:#141821}.code-card code{color:#f6f7fb;font-size:13px;line-height:1.7}@media(max-width:900px){.hero-points,.overview-grid,.examples-grid,.showcase-grid,.code-grid{grid-template-columns:1fr}}@media(max-width:768px){.demo-container{padding:24px 14px 56px}.demo-container h1{font-size:30px}.hero,.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:20px;border-radius:22px}.showcase-head,.showcase-inline{flex-direction:column;align-items:stretch}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalPoster, selector: "duck-dev-input-neobrutal-poster", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalRadio, selector: "duck-dev-input-neobrutal-radio", inputs: ["form", "controlName", "label", "description", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalSlab, selector: "duck-dev-input-neobrutal-slab", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalStrip, selector: "duck-dev-input-neobrutal-strip", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalToggle, selector: "duck-dev-input-neobrutal-toggle", inputs: ["form", "controlName", "label", "description", "offLabel", "onLabel", "errorMessage"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: JsonPipe, name: "json" }] });
|
|
6109
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: InputBlock, isStandalone: true, selector: "app-input-block", ngImport: i0, template: "<div class=\"demo-container\">\n <section class=\"hero\">\n <span class=\"eyebrow\">{{ 'inputComponent.eyebrow' | transloco }}</span>\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n <p class=\"hero-description\">\n {{ 'inputComponent.description' | transloco }}\n </p>\n\n <div class=\"hero-points\">\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointType' | transloco }}</span>\n <span class=\"hero-point-value\">{{ 'inputComponent.heroPointTypeValue' | transloco }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{\n 'inputComponent.heroPointIntegration' | transloco\n }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointIntegrationValue' | transloco\n }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointUseCase' | transloco }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointUseCaseValue' | transloco\n }}</span>\n </div>\n </div>\n </section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <div class=\"overview-grid\">\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.overviewTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.overviewDescription' | transloco }}\n </p>\n </dd-card-section>\n\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.featuresTitle' | transloco }}</h2>\n <ul class=\"feature-list\">\n <li>{{ 'inputComponent.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.feature5' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <div class=\"examples-grid\">\n <dd-card-section class=\"example-card\">\n <h2>{{ 'inputComponent.examplesTitle' | transloco }}</h2>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleText' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textExampleForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName', textExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleSelect' | transloco }}</h3>\n <duck-dev-input\n [form]=\"selectExampleForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role', selectExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleSelectCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleTextarea' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textareaExampleForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextareaCaption' | transloco }}</p>\n </div>\n </dd-card-section>\n\n <dd-card-section class=\"api-card\">\n <h2>{{ 'inputComponent.apiTitle' | transloco }}</h2>\n <ul class=\"api-list\">\n <li><strong>form</strong> - {{ 'inputComponent.apiForm' | transloco }}</li>\n <li>\n <strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}\n </li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li>\n <strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}\n </li>\n <li><strong>type</strong> - {{ 'inputComponent.apiType' | transloco }}</li>\n <li>\n <strong>formInputType</strong> - {{ 'inputComponent.apiFormInputType' | transloco }}\n </li>\n <li><strong>options</strong> - {{ 'inputComponent.apiOptions' | transloco }}</li>\n <li>\n <strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}\n </li>\n </ul>\n </dd-card-section>\n </div>\n\n <dd-card-section class=\"showcase-card\">\n <div class=\"showcase-head\">\n <div>\n <h2>{{ 'inputComponent.showcaseTitle' | transloco }}</h2>\n <p class=\"showcase-caption\">\n {{ 'inputComponent.showcaseDescription' | transloco }}\n </p>\n </div>\n <div class=\"showcase-value\">\n {{ 'inputComponent.showcaseValue' | transloco }}:\n {{ demoForm.value | json }}\n </div>\n </div>\n\n <form class=\"demo-form\" [formGroup]=\"demoForm\">\n <div class=\"showcase-grid\">\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseSelect' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item_wide\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseTextarea' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseCheckbox' | transloco }}</p>\n <div class=\"showcase-inline\">\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input>\n </div>\n </div>\n </div>\n </form>\n </dd-card-section>\n } @else {\n <dd-card-section class=\"showcase-card showcase-card--neobrutal\">\n <div class=\"showcase-head\">\n <div>\n <h2>Neobrutalism Inputs</h2>\n <p class=\"showcase-caption\">\n Extra brutal variants for promo forms, loud dashboards and expressive settings\n screens.\n </p>\n </div>\n </div>\n\n <div class=\"showcase-grid showcase-grid--neobrutal\">\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Text</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Select</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Poster / Textarea</p>\n <duck-dev-input-neobrutal-poster\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Email</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Checkbox</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input-neobrutal-slab>\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Toggle / Boolean</p>\n <duck-dev-input-neobrutal-toggle\n [form]=\"demoForm\"\n controlName=\"instantSync\"\n label=\"Instant sync\"\n description=\"Push UI changes to the preview canvas the moment a control changes.\"\n offLabel=\"Paused\"\n onLabel=\"Live\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Radio / Mode</p>\n <duck-dev-input-neobrutal-radio\n [form]=\"demoForm\"\n controlName=\"launchMode\"\n label=\"Workspace mode\"\n description=\"Pick the brutal layout state the team sees first.\"\n [options]=\"workspaceModeOptions\"\n [errorMessage]=\"getError('launchMode')\"\n />\n </div>\n </div>\n </dd-card-section>\n }\n\n <div class=\"code-grid\">\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeTemplate' | transloco }}</h3>\n <pre><code>{{ exampleMarkup }}</code></pre>\n </dd-card-section>\n\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeLogic' | transloco }}</h3>\n <pre><code>{{ exampleLogic }}</code></pre>\n </dd-card-section>\n </div>\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px 72px;display:grid;gap:28px;color:var(--dd-base-600)}.demo-container h1{font-size:40px;font-weight:700;color:var(--dd-base-600);margin:0;text-align:left}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin:0 0 12px}.demo-container h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin:0 0 14px}.demo-container p{margin:0}.hero{padding:36px;border-radius:32px;background:radial-gradient(circle at top left,rgba(125,92,255,.18),transparent 34%),radial-gradient(circle at bottom right,rgba(255,146,43,.18),transparent 30%),linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid rgba(125,92,255,.12);box-shadow:0 28px 60px #12121714}.eyebrow{display:inline-flex;margin-bottom:16px;padding:8px 14px;border-radius:999px;background:#7d5cff1f;color:var(--dd-base-accent-blue);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hero-description{max-width:720px;margin-top:12px;font-size:17px;line-height:1.7;color:var(--dd-base-400)}.hero-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.hero-point{padding:18px 20px;border-radius:22px;background:#ffffffc2;border:1px solid rgba(18,18,23,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-point-label{display:block;margin-bottom:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dd-base-accent-blue)}.hero-point-value{font-size:15px;line-height:1.5;color:var(--dd-base-500)}.overview-grid,.examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:26px;border-radius:28px;background:var(--dd-base-0);border:1px solid rgba(18,18,23,.08);box-shadow:0 20px 40px #1212170f}.description{font-size:15px;line-height:1.7;color:var(--dd-base-400)}.feature-list,.api-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}.feature-list li,.api-list li{padding:16px 18px;border-radius:18px;background:var(--dd-base-100);border:1px solid rgba(18,18,23,.04);line-height:1.6;color:var(--dd-base-500)}.api-list strong{color:var(--dd-base-accent-blue)}.examples-grid{align-items:start}.example-card{display:grid;gap:16px}.example-preview{padding:20px;border-radius:22px;background:linear-gradient(180deg,rgba(125,92,255,.08),transparent),var(--dd-base-100);border:1px solid rgba(125,92,255,.08)}.demo-form{display:grid;gap:18px}.checkbox-note{font-size:14px;line-height:1.5;color:var(--dd-base-400)}.showcase-card{background:radial-gradient(circle at top right,rgba(255,146,43,.12),transparent 26%),var(--dd-base-0)}.showcase-card--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 22%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.showcase-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:22px}.showcase-caption{font-size:14px;line-height:1.6;color:var(--dd-base-400)}.showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-item{padding:20px;border-radius:24px;background:linear-gradient(180deg,var(--dd-base-100),rgba(255,255,255,.92));border:1px solid rgba(18,18,23,.05)}.showcase-item--neobrutal{border:4px solid var(--dd-neo-ink);border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 16%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-yellow)}.showcase-item_wide{grid-column:1/-1}.showcase-label{margin-bottom:14px;font-size:14px;font-weight:600;color:var(--dd-base-400)}.showcase-inline{display:flex;align-items:center;gap:14px}.showcase-value{margin-top:12px;font-size:14px;color:var(--dd-base-accent-blue)}.code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-grid--neobrutal{align-items:start}.code-card pre{margin:0;padding:20px;overflow-x:auto;border-radius:22px;background:#141821}.code-card code{color:#f6f7fb;font-size:13px;line-height:1.7}@media(max-width:900px){.hero-points,.overview-grid,.examples-grid,.showcase-grid,.code-grid{grid-template-columns:1fr}}@media(max-width:768px){.demo-container{padding:24px 14px 56px}.demo-container h1{font-size:30px}.hero,.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:20px;border-radius:22px}.showcase-head,.showcase-inline{flex-direction:column;align-items:stretch}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalPoster, selector: "duck-dev-input-neobrutal-poster", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalRadio, selector: "duck-dev-input-neobrutal-radio", inputs: ["form", "controlName", "label", "description", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalSlab, selector: "duck-dev-input-neobrutal-slab", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalStrip, selector: "duck-dev-input-neobrutal-strip", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalToggle, selector: "duck-dev-input-neobrutal-toggle", inputs: ["form", "controlName", "label", "description", "offLabel", "onLabel", "errorMessage"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: JsonPipe, name: "json" }] });
|
|
6110
6110
|
}
|
|
6111
6111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, decorators: [{
|
|
6112
6112
|
type: Component,
|
|
@@ -6122,7 +6122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6122
6122
|
ReactiveFormsModule,
|
|
6123
6123
|
JsonPipe,
|
|
6124
6124
|
DuckDevTab,
|
|
6125
|
-
], template: "<div class=\"demo-container\">\n <section class=\"hero\">\n <span class=\"eyebrow\">{{ 'inputComponent.eyebrow' | transloco }}</span>\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n <p class=\"hero-description\">\n {{ 'inputComponent.description' | transloco }}\n </p>\n\n <div class=\"hero-points\">\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointType' | transloco }}</span>\n <span class=\"hero-point-value\">{{ 'inputComponent.heroPointTypeValue' | transloco }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{\n 'inputComponent.heroPointIntegration' | transloco\n }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointIntegrationValue' | transloco\n }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointUseCase' | transloco }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointUseCaseValue' | transloco\n }}</span>\n </div>\n </div>\n </section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <div class=\"overview-grid\">\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.overviewTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.overviewDescription' | transloco }}\n </p>\n </dd-card-section>\n\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.featuresTitle' | transloco }}</h2>\n <ul class=\"feature-list\">\n <li>{{ 'inputComponent.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.feature5' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <div class=\"examples-grid\">\n <dd-card-section class=\"example-card\">\n <h2>{{ 'inputComponent.examplesTitle' | transloco }}</h2>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleText' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textExampleForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName', textExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleSelect' | transloco }}</h3>\n <duck-dev-input\n [form]=\"selectExampleForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role', selectExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleSelectCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleTextarea' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textareaExampleForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextareaCaption' | transloco }}</p>\n </div>\n </dd-card-section>\n\n <dd-card-section class=\"api-card\">\n <h2>{{ 'inputComponent.apiTitle' | transloco }}</h2>\n <ul class=\"api-list\">\n <li><strong>form</strong> - {{ 'inputComponent.apiForm' | transloco }}</li>\n <li>\n <strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}\n </li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li>\n <strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}\n </li>\n <li><strong>type</strong> - {{ 'inputComponent.apiType' | transloco }}</li>\n <li>\n <strong>formInputType</strong> - {{ 'inputComponent.apiFormInputType' | transloco }}\n </li>\n <li><strong>options</strong> - {{ 'inputComponent.apiOptions' | transloco }}</li>\n <li>\n <strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}\n </li>\n </ul>\n </dd-card-section>\n </div>\n\n <dd-card-section class=\"showcase-card\">\n <div class=\"showcase-head\">\n <div>\n <h2>{{ 'inputComponent.showcaseTitle' | transloco }}</h2>\n <p class=\"showcase-caption\">\n {{ 'inputComponent.showcaseDescription' | transloco }}\n </p>\n </div>\n <div class=\"showcase-value\">\n {{ 'inputComponent.showcaseValue' | transloco }}:\n {{ demoForm.value | json }}\n </div>\n </div>\n\n <form class=\"demo-form\" [formGroup]=\"demoForm\">\n <div class=\"showcase-grid\">\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseSelect' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item_wide\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseTextarea' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseCheckbox' | transloco }}</p>\n <div class=\"showcase-inline\">\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input>\n </div>\n </div>\n </div>\n </form>\n </dd-card-section>\n } @else {\n <dd-card-section class=\"showcase-card showcase-card--neobrutal\">\n <div class=\"showcase-head\">\n <div>\n <h2>Neobrutalism Inputs</h2>\n <p class=\"showcase-caption\">\n Extra brutal variants for promo forms, loud dashboards and expressive settings\n screens.\n </p>\n </div>\n </div>\n\n <div class=\"showcase-grid showcase-grid--neobrutal\">\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Text</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Select</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Poster / Textarea</p>\n <duck-dev-input-neobrutal-poster\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Email</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Checkbox</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input-neobrutal-slab>\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Toggle / Boolean</p>\n <duck-dev-input-neobrutal-toggle\n [form]=\"demoForm\"\n controlName=\"instantSync\"\n label=\"Instant sync\"\n description=\"Push UI changes to the preview canvas the moment a control changes.\"\n offLabel=\"Paused\"\n onLabel=\"Live\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Radio / Mode</p>\n <duck-dev-input-neobrutal-radio\n [form]=\"demoForm\"\n controlName=\"launchMode\"\n label=\"Workspace mode\"\n description=\"Pick the brutal layout state the team sees first.\"\n [options]=\"workspaceModeOptions\"\n [errorMessage]=\"getError('launchMode')\"\n />\n </div>\n </div>\n </dd-card-section>\n }\n\n <div class=\"code-grid\">\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeTemplate' | transloco }}</h3>\n <pre><code>{{ exampleMarkup }}</code></pre>\n </dd-card-section>\n\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeLogic' | transloco }}</h3>\n <pre><code>{{ exampleLogic }}</code></pre>\n </dd-card-section>\n </div>\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px 72px;display:grid;gap:28px;color:var(--dd-base-600)}.demo-container h1{font-size:40px;font-weight:700;color:var(--dd-base-600);margin:0;text-align:left}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin:0 0 12px}.demo-container h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin:0 0 14px}.demo-container p{margin:0}.hero{padding:36px;border-radius:32px;background:radial-gradient(circle at top left,rgba(125,92,255,.18),transparent 34%),radial-gradient(circle at bottom right,rgba(255,146,43,.18),transparent 30%),linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid rgba(125,92,255,.12);box-shadow:0 28px 60px #12121714}.eyebrow{display:inline-flex;margin-bottom:16px;padding:8px 14px;border-radius:999px;background:#7d5cff1f;color:var(--dd-base-accent-blue);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hero-description{max-width:720px;margin-top:12px;font-size:17px;line-height:1.7;color:var(--dd-base-400)}.hero-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.hero-point{padding:18px 20px;border-radius:22px;background:#ffffffc2;border:1px solid rgba(18,18,23,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-point-label{display:block;margin-bottom:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dd-base-accent-blue)}.hero-point-value{font-size:15px;line-height:1.5;color:var(--dd-base-500)}.overview-grid,.examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:26px;border-radius:28px;background:var(--dd-base-0);border:1px solid rgba(18,18,23,.08);box-shadow:0 20px 40px #1212170f}.description{font-size:15px;line-height:1.7;color:var(--dd-base-400)}.feature-list,.api-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}.feature-list li,.api-list li{padding:16px 18px;border-radius:18px;background:var(--dd-base-100);border:1px solid rgba(18,18,23,.04);line-height:1.6;color:var(--dd-base-500)}.api-list strong{color:var(--dd-base-accent-blue)}.examples-grid{align-items:start}.example-card{display:grid;gap:16px}.example-preview{padding:20px;border-radius:22px;background:linear-gradient(180deg,rgba(125,92,255,.08),transparent),var(--dd-base-100);border:1px solid rgba(125,92,255,.08)}.demo-form{display:grid;gap:18px}.checkbox-note{font-size:14px;line-height:1.5;color:var(--dd-base-400)}.showcase-card{background:radial-gradient(circle at top right,rgba(255,146,43,.12),transparent 26%),var(--dd-base-0)}.showcase-card--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 22%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.showcase-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:22px}.showcase-caption{font-size:14px;line-height:1.6;color:var(--dd-base-400)}.showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-item{padding:20px;border-radius:24px;background:linear-gradient(180deg,var(--dd-base-100),rgba(255,255,255,.92));border:1px solid rgba(18,18,23,.05)}.showcase-item--neobrutal{border:4px solid var(--dd-neo-ink);border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 16%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-yellow)}.showcase-item_wide{grid-column:1/-1}.showcase-label{margin-bottom:14px;font-size:14px;font-weight:600;color:var(--dd-base-400)}.showcase-inline{display:flex;align-items:center;gap:14px}.showcase-value{margin-top:12px;font-size:14px;color:var(--dd-base-accent-blue)}.code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-grid--neobrutal{align-items:start}.code-card pre{margin:0;padding:20px;overflow-x:auto;border-radius:22px;background:#141821}.code-card code{color:#f6f7fb;font-size:13px;line-height:1.7}@media(max-width:900px){.hero-points,.overview-grid,.examples-grid,.showcase-grid,.code-grid{grid-template-columns:1fr}}@media(max-width:768px){.demo-container{padding:24px 14px 56px}.demo-container h1{font-size:30px}.hero,.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:20px;border-radius:22px}.showcase-head,.showcase-inline{flex-direction:column;align-items:stretch}}\n"] }]
|
|
6125
|
+
], template: "<div class=\"demo-container\">\n <section class=\"hero\">\n <span class=\"eyebrow\">{{ 'inputComponent.eyebrow' | transloco }}</span>\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n <p class=\"hero-description\">\n {{ 'inputComponent.description' | transloco }}\n </p>\n\n <div class=\"hero-points\">\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointType' | transloco }}</span>\n <span class=\"hero-point-value\">{{ 'inputComponent.heroPointTypeValue' | transloco }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{\n 'inputComponent.heroPointIntegration' | transloco\n }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointIntegrationValue' | transloco\n }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointUseCase' | transloco }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointUseCaseValue' | transloco\n }}</span>\n </div>\n </div>\n </section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <div class=\"overview-grid\">\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.overviewTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.overviewDescription' | transloco }}\n </p>\n </dd-card-section>\n\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.featuresTitle' | transloco }}</h2>\n <ul class=\"feature-list\">\n <li>{{ 'inputComponent.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.feature5' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <div class=\"examples-grid\">\n <dd-card-section class=\"example-card\">\n <h2>{{ 'inputComponent.examplesTitle' | transloco }}</h2>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleText' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textExampleForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName', textExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleSelect' | transloco }}</h3>\n <duck-dev-input\n [form]=\"selectExampleForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role', selectExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleSelectCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleTextarea' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textareaExampleForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextareaCaption' | transloco }}</p>\n </div>\n </dd-card-section>\n\n <dd-card-section class=\"api-card\">\n <h2>{{ 'inputComponent.apiTitle' | transloco }}</h2>\n <ul class=\"api-list\">\n <li><strong>form</strong> - {{ 'inputComponent.apiForm' | transloco }}</li>\n <li>\n <strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}\n </li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li>\n <strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}\n </li>\n <li><strong>type</strong> - {{ 'inputComponent.apiType' | transloco }}</li>\n <li>\n <strong>formInputType</strong> - {{ 'inputComponent.apiFormInputType' | transloco }}\n </li>\n <li><strong>options</strong> - {{ 'inputComponent.apiOptions' | transloco }}</li>\n <li>\n <strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}\n </li>\n </ul>\n </dd-card-section>\n </div>\n\n <dd-card-section class=\"showcase-card\">\n <div class=\"showcase-head\">\n <div>\n <h2>{{ 'inputComponent.showcaseTitle' | transloco }}</h2>\n <p class=\"showcase-caption\">\n {{ 'inputComponent.showcaseDescription' | transloco }}\n </p>\n </div>\n <div class=\"showcase-value\">\n {{ 'inputComponent.showcaseValue' | transloco }}:\n {{ demoForm.value | json }}\n </div>\n </div>\n\n <form class=\"demo-form\" [formGroup]=\"demoForm\">\n <div class=\"showcase-grid\">\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseSelect' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item_wide\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseTextarea' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseCheckbox' | transloco }}</p>\n <div class=\"showcase-inline\">\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input>\n </div>\n </div>\n </div>\n </form>\n </dd-card-section>\n } @else {\n <dd-card-section class=\"showcase-card showcase-card--neobrutal\">\n <div class=\"showcase-head\">\n <div>\n <h2>Neobrutalism Inputs</h2>\n <p class=\"showcase-caption\">\n Extra brutal variants for promo forms, loud dashboards and expressive settings\n screens.\n </p>\n </div>\n </div>\n\n <div class=\"showcase-grid showcase-grid--neobrutal\">\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Text</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Select</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Poster / Textarea</p>\n <duck-dev-input-neobrutal-poster\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Email</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Checkbox</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input-neobrutal-slab>\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Toggle / Boolean</p>\n <duck-dev-input-neobrutal-toggle\n [form]=\"demoForm\"\n controlName=\"instantSync\"\n label=\"Instant sync\"\n description=\"Push UI changes to the preview canvas the moment a control changes.\"\n offLabel=\"Paused\"\n onLabel=\"Live\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Radio / Mode</p>\n <duck-dev-input-neobrutal-radio\n [form]=\"demoForm\"\n controlName=\"launchMode\"\n label=\"Workspace mode\"\n description=\"Pick the brutal layout state the team sees first.\"\n [options]=\"workspaceModeOptions\"\n [errorMessage]=\"getError('launchMode')\"\n />\n </div>\n </div>\n </dd-card-section>\n }\n\n <div class=\"code-grid\">\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeTemplate' | transloco }}</h3>\n <pre><code>{{ exampleMarkup }}</code></pre>\n </dd-card-section>\n\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeLogic' | transloco }}</h3>\n <pre><code>{{ exampleLogic }}</code></pre>\n </dd-card-section>\n </div>\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px 72px;display:grid;gap:28px;color:var(--dd-base-600)}.demo-container h1{font-size:40px;font-weight:700;color:var(--dd-base-600);margin:0;text-align:left}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin:0 0 12px}.demo-container h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin:0 0 14px}.demo-container p{margin:0}.hero{padding:36px;border-radius:32px;background:radial-gradient(circle at top left,rgba(125,92,255,.18),transparent 34%),radial-gradient(circle at bottom right,rgba(255,146,43,.18),transparent 30%),linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid rgba(125,92,255,.12);box-shadow:0 28px 60px #12121714}.eyebrow{display:inline-flex;margin-bottom:16px;padding:8px 14px;border-radius:999px;background:#7d5cff1f;color:var(--dd-base-accent-blue);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hero-description{max-width:720px;margin-top:12px;font-size:17px;line-height:1.7;color:var(--dd-base-400)}.hero-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.hero-point{padding:18px 20px;border-radius:22px;background:#ffffffc2;border:1px solid rgba(18,18,23,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-point-label{display:block;margin-bottom:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dd-base-accent-blue)}.hero-point-value{font-size:15px;line-height:1.5;color:var(--dd-base-500)}.overview-grid,.examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:26px;border-radius:28px;background:var(--dd-base-0);border:1px solid rgba(18,18,23,.08);box-shadow:0 20px 40px #1212170f}.description{font-size:15px;line-height:1.7;color:var(--dd-base-400)}.feature-list,.api-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}.feature-list li,.api-list li{padding:16px 18px;border-radius:18px;background:var(--dd-base-100);border:1px solid rgba(18,18,23,.04);line-height:1.6;color:var(--dd-base-500)}.api-list strong{color:var(--dd-base-accent-blue)}.examples-grid{align-items:start}.example-card{display:grid;gap:16px}.example-preview{padding:20px;border-radius:22px;background:linear-gradient(180deg,rgba(125,92,255,.08),transparent),var(--dd-base-100);border:1px solid rgba(125,92,255,.08)}.demo-form{display:grid;gap:18px}.checkbox-note{font-size:14px;line-height:1.5;color:var(--dd-base-400)}.showcase-card{background:radial-gradient(circle at top right,rgba(255,146,43,.12),transparent 26%),var(--dd-base-0)}.showcase-card--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 22%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.showcase-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:22px}.showcase-caption{font-size:14px;line-height:1.6;color:var(--dd-base-400)}.showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-item{padding:20px;border-radius:24px;background:linear-gradient(180deg,var(--dd-base-100),rgba(255,255,255,.92));border:1px solid rgba(18,18,23,.05)}.showcase-item--neobrutal{border:4px solid var(--dd-neo-ink);border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 16%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-yellow)}.showcase-item_wide{grid-column:1/-1}.showcase-label{margin-bottom:14px;font-size:14px;font-weight:600;color:var(--dd-base-400)}.showcase-inline{display:flex;align-items:center;gap:14px}.showcase-value{margin-top:12px;font-size:14px;color:var(--dd-base-accent-blue)}.code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-grid--neobrutal{align-items:start}.code-card pre{margin:0;padding:20px;overflow-x:auto;border-radius:22px;background:#141821}.code-card code{color:#f6f7fb;font-size:13px;line-height:1.7}@media(max-width:900px){.hero-points,.overview-grid,.examples-grid,.showcase-grid,.code-grid{grid-template-columns:1fr}}@media(max-width:768px){.demo-container{padding:24px 14px 56px}.demo-container h1{font-size:30px}.hero,.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:20px;border-radius:22px}.showcase-head,.showcase-inline{flex-direction:column;align-items:stretch}}\n"] }]
|
|
6126
6126
|
}] });
|
|
6127
6127
|
|
|
6128
6128
|
class NotificationBlock {
|
|
@@ -6190,7 +6190,7 @@ class NotificationBlock {
|
|
|
6190
6190
|
this.notify.clear();
|
|
6191
6191
|
}
|
|
6192
6192
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6193
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: NotificationBlock, isStandalone: true, selector: "app-notification-block", ngImport: i0, template: "<div class=\"notifications-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Service'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'notifications.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 QUICK DEMO \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"quick-actions\">\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.quickDemo' | transloco\"\n [colorButton]=\"colorViolet\"\n (clickButton)=\"showSample()\"\n />\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.clearAll' | transloco\"\n [colorButton]=\"colorGray\"\n (clickButton)=\"clearAll()\"\n />\n </div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 01 \u2014 BASICS \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.basic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #usageCode>\n <pre class=\"accordion-code\"><code><duck-dev-notification-container />\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) {}\n\nonSave() {\n this.notify.success('Saved successfully', {\n title: 'Done',\n position: 'top',\n duration: 3000\n });\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.basic.usage' | transloco\"\n [content]=\"usageCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>type</strong>\n <span>{{ 'notifications.basic.inputType' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>title</strong>\n <span>{{ 'notifications.basic.inputTitle' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>message</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'notifications.basic.inputMessage' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>duration</strong>\n <span>{{ 'notifications.basic.inputDuration' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>position</strong>\n <span>{{ 'notifications.basic.inputPosition' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'notifications.basic.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"successTop()\">\n <dd-badge [text]=\"'success'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.successTop' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"warningCenter()\">\n <dd-badge [text]=\"'warning'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.warningCenter' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"errorBottom()\">\n <dd-badge [text]=\"'error'\" [color]=\"colorDark\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.errorBottom' | transloco\n }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 02 \u2014 SERVICE & CONTAINER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.service.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.service.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #serviceCode>\n <pre class=\"accordion-code\"><code>// 1) Place container once in app layout\n<duck-dev-notification-container />\n\n// 2) Inject and use the service\nconstructor(private notify: DuckDevNotificationService) {}\n\nthis.notify.show({\n type: 'success',\n title: 'Done',\n message: 'Operation completed',\n position: 'top',\n duration: 3000\n});</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.service.install' | transloco\"\n [content]=\"serviceCode\"\n [color]=\"colorOrange\"\n />\n\n <h3 class=\"examples-title\">{{ 'notifications.api.title' | transloco }}</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>show(options)</strong>\n <span>{{ 'notifications.api.show' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>success(msg, opts?)</strong>\n <span>{{ 'notifications.api.success' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>warning(msg, opts?)</strong>\n <span>{{ 'notifications.api.warning' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>error(msg, opts?)</strong>\n <span>{{ 'notifications.api.error' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>remove(id)</strong>\n <span>{{ 'notifications.api.remove' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>clear()</strong>\n <span>{{ 'notifications.api.clear' | transloco }}</span>\n </div>\n </div>\n\n <ng-template #optionsCode>\n <pre class=\"accordion-code\"><code>interface NotificationOptions {\n type?: 'success' | 'warning' | 'error';\n title?: string;\n message: string;\n position?: 'top' | 'center' | 'bottom';\n duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.api.optionsTitle' | transloco\"\n [content]=\"optionsCode\"\n [color]=\"colorGray\"\n />\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 03 \u2014 POSITIONS & DURATION \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.positions.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"showTop()\">\n <dd-badge [text]=\"'top'\" [color]=\"colorViolet\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.positions.top' | transloco }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showCenterNoAuto()\">\n <dd-badge [text]=\"'center'\" [color]=\"colorOrange\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.positions.centerNoAuto' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showBottomLong()\">\n <dd-badge [text]=\"'bottom'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.positions.bottomLong' | transloco\n }}</span>\n </div>\n </div>\n\n <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 04 \u2014 ADVANCED \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n </div>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>CSS</strong>\n <span>{{ 'notifications.advanced.cssOnly' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Palette</strong>\n <span>{{ 'notifications.advanced.palette' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Stacking</strong>\n <span>{{ 'notifications.advanced.stacking' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>A11y</strong>\n <span>{{ 'notifications.advanced.accessibility' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.notifications-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.quick-actions{display:flex;justify-content:center;gap:14px;margin-bottom:32px;flex-wrap:wrap}.notif-section{margin-bottom:16px}.notif-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.notif-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.notif-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:160px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card:active{transform:translateY(0)}.example-card__label{font-size:13px;font-weight:600;color:var(--dd-base-400);text-align:center}.tip{margin-top:8px;font-size:13px;color:var(--dd-base-400);font-style:italic}@media(max-width:768px){.notifications-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.notif-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6193
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: NotificationBlock, isStandalone: true, selector: "app-notification-block", ngImport: i0, template: "<div class=\"notifications-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Service'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'notifications.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 QUICK DEMO \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"quick-actions\">\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.quickDemo' | transloco\"\n [colorButton]=\"colorViolet\"\n (clickButton)=\"showSample()\"\n />\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.clearAll' | transloco\"\n [colorButton]=\"colorGray\"\n (clickButton)=\"clearAll()\"\n />\n </div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 01 \u2014 BASICS \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.basic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #usageCode>\n <pre class=\"accordion-code\"><code><duck-dev-notification-container />\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) {}\n\nonSave() {\n this.notify.success('Saved successfully', {\n title: 'Done',\n position: 'top',\n duration: 3000\n });\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.basic.usage' | transloco\"\n [content]=\"usageCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>type</strong>\n <span>{{ 'notifications.basic.inputType' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>title</strong>\n <span>{{ 'notifications.basic.inputTitle' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>message</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'notifications.basic.inputMessage' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>duration</strong>\n <span>{{ 'notifications.basic.inputDuration' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>position</strong>\n <span>{{ 'notifications.basic.inputPosition' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'notifications.basic.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"successTop()\">\n <dd-badge [text]=\"'success'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.successTop' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"warningCenter()\">\n <dd-badge [text]=\"'warning'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.warningCenter' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"errorBottom()\">\n <dd-badge [text]=\"'error'\" [color]=\"colorDark\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.errorBottom' | transloco\n }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 02 \u2014 SERVICE & CONTAINER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.service.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.service.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #serviceCode>\n <pre class=\"accordion-code\"><code>// 1) Place container once in app layout\n<duck-dev-notification-container />\n\n// 2) Inject and use the service\nconstructor(private notify: DuckDevNotificationService) {}\n\nthis.notify.show({\n type: 'success',\n title: 'Done',\n message: 'Operation completed',\n position: 'top',\n duration: 3000\n});</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.service.install' | transloco\"\n [content]=\"serviceCode\"\n [color]=\"colorOrange\"\n />\n\n <h3 class=\"examples-title\">{{ 'notifications.api.title' | transloco }}</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>show(options)</strong>\n <span>{{ 'notifications.api.show' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>success(msg, opts?)</strong>\n <span>{{ 'notifications.api.success' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>warning(msg, opts?)</strong>\n <span>{{ 'notifications.api.warning' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>error(msg, opts?)</strong>\n <span>{{ 'notifications.api.error' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>remove(id)</strong>\n <span>{{ 'notifications.api.remove' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>clear()</strong>\n <span>{{ 'notifications.api.clear' | transloco }}</span>\n </div>\n </div>\n\n <ng-template #optionsCode>\n <pre class=\"accordion-code\"><code>interface NotificationOptions {\n type?: 'success' | 'warning' | 'error';\n title?: string;\n message: string;\n position?: 'top' | 'center' | 'bottom';\n duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.api.optionsTitle' | transloco\"\n [content]=\"optionsCode\"\n [color]=\"colorGray\"\n />\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 03 \u2014 POSITIONS & DURATION \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.positions.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"showTop()\">\n <dd-badge [text]=\"'top'\" [color]=\"colorViolet\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.positions.top' | transloco }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showCenterNoAuto()\">\n <dd-badge [text]=\"'center'\" [color]=\"colorOrange\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.positions.centerNoAuto' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showBottomLong()\">\n <dd-badge [text]=\"'bottom'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.positions.bottomLong' | transloco\n }}</span>\n </div>\n </div>\n\n <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 04 \u2014 ADVANCED \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n </div>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>CSS</strong>\n <span>{{ 'notifications.advanced.cssOnly' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Palette</strong>\n <span>{{ 'notifications.advanced.palette' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Stacking</strong>\n <span>{{ 'notifications.advanced.stacking' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>A11y</strong>\n <span>{{ 'notifications.advanced.accessibility' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.notifications-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.quick-actions{display:flex;justify-content:center;gap:14px;margin-bottom:32px;flex-wrap:wrap}.notif-section{margin-bottom:16px}.notif-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.notif-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.notif-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:160px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card:active{transform:translateY(0)}.example-card__label{font-size:13px;font-weight:600;color:var(--dd-base-400);text-align:center}.tip{margin-top:8px;font-size:13px;color:var(--dd-base-400);font-style:italic}@media(max-width:768px){.notifications-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.notif-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6194
6194
|
}
|
|
6195
6195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationBlock, decorators: [{
|
|
6196
6196
|
type: Component,
|
|
@@ -6200,7 +6200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6200
6200
|
Badge,
|
|
6201
6201
|
DuckDevAccordionComponent,
|
|
6202
6202
|
ButtonNeobrutalSlab,
|
|
6203
|
-
], template: "<div class=\"notifications-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Service'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'notifications.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 QUICK DEMO \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"quick-actions\">\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.quickDemo' | transloco\"\n [colorButton]=\"colorViolet\"\n (clickButton)=\"showSample()\"\n />\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.clearAll' | transloco\"\n [colorButton]=\"colorGray\"\n (clickButton)=\"clearAll()\"\n />\n </div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 01 \u2014 BASICS \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.basic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #usageCode>\n <pre class=\"accordion-code\"><code><duck-dev-notification-container />\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) {}\n\nonSave() {\n this.notify.success('Saved successfully', {\n title: 'Done',\n position: 'top',\n duration: 3000\n });\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.basic.usage' | transloco\"\n [content]=\"usageCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>type</strong>\n <span>{{ 'notifications.basic.inputType' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>title</strong>\n <span>{{ 'notifications.basic.inputTitle' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>message</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'notifications.basic.inputMessage' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>duration</strong>\n <span>{{ 'notifications.basic.inputDuration' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>position</strong>\n <span>{{ 'notifications.basic.inputPosition' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'notifications.basic.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"successTop()\">\n <dd-badge [text]=\"'success'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.successTop' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"warningCenter()\">\n <dd-badge [text]=\"'warning'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.warningCenter' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"errorBottom()\">\n <dd-badge [text]=\"'error'\" [color]=\"colorDark\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.errorBottom' | transloco\n }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 02 \u2014 SERVICE & CONTAINER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.service.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.service.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #serviceCode>\n <pre class=\"accordion-code\"><code>// 1) Place container once in app layout\n<duck-dev-notification-container />\n\n// 2) Inject and use the service\nconstructor(private notify: DuckDevNotificationService) {}\n\nthis.notify.show({\n type: 'success',\n title: 'Done',\n message: 'Operation completed',\n position: 'top',\n duration: 3000\n});</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.service.install' | transloco\"\n [content]=\"serviceCode\"\n [color]=\"colorOrange\"\n />\n\n <h3 class=\"examples-title\">{{ 'notifications.api.title' | transloco }}</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>show(options)</strong>\n <span>{{ 'notifications.api.show' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>success(msg, opts?)</strong>\n <span>{{ 'notifications.api.success' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>warning(msg, opts?)</strong>\n <span>{{ 'notifications.api.warning' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>error(msg, opts?)</strong>\n <span>{{ 'notifications.api.error' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>remove(id)</strong>\n <span>{{ 'notifications.api.remove' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>clear()</strong>\n <span>{{ 'notifications.api.clear' | transloco }}</span>\n </div>\n </div>\n\n <ng-template #optionsCode>\n <pre class=\"accordion-code\"><code>interface NotificationOptions {\n type?: 'success' | 'warning' | 'error';\n title?: string;\n message: string;\n position?: 'top' | 'center' | 'bottom';\n duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.api.optionsTitle' | transloco\"\n [content]=\"optionsCode\"\n [color]=\"colorGray\"\n />\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 03 \u2014 POSITIONS & DURATION \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.positions.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"showTop()\">\n <dd-badge [text]=\"'top'\" [color]=\"colorViolet\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.positions.top' | transloco }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showCenterNoAuto()\">\n <dd-badge [text]=\"'center'\" [color]=\"colorOrange\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.positions.centerNoAuto' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showBottomLong()\">\n <dd-badge [text]=\"'bottom'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.positions.bottomLong' | transloco\n }}</span>\n </div>\n </div>\n\n <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 04 \u2014 ADVANCED \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n </div>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>CSS</strong>\n <span>{{ 'notifications.advanced.cssOnly' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Palette</strong>\n <span>{{ 'notifications.advanced.palette' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Stacking</strong>\n <span>{{ 'notifications.advanced.stacking' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>A11y</strong>\n <span>{{ 'notifications.advanced.accessibility' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.notifications-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.quick-actions{display:flex;justify-content:center;gap:14px;margin-bottom:32px;flex-wrap:wrap}.notif-section{margin-bottom:16px}.notif-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.notif-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.notif-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:160px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card:active{transform:translateY(0)}.example-card__label{font-size:13px;font-weight:600;color:var(--dd-base-400);text-align:center}.tip{margin-top:8px;font-size:13px;color:var(--dd-base-400);font-style:italic}@media(max-width:768px){.notifications-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.notif-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"] }]
|
|
6203
|
+
], template: "<div class=\"notifications-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Service'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'notifications.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 QUICK DEMO \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"quick-actions\">\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.quickDemo' | transloco\"\n [colorButton]=\"colorViolet\"\n (clickButton)=\"showSample()\"\n />\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.clearAll' | transloco\"\n [colorButton]=\"colorGray\"\n (clickButton)=\"clearAll()\"\n />\n </div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 01 \u2014 BASICS \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.basic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #usageCode>\n <pre class=\"accordion-code\"><code><duck-dev-notification-container />\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) {}\n\nonSave() {\n this.notify.success('Saved successfully', {\n title: 'Done',\n position: 'top',\n duration: 3000\n });\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.basic.usage' | transloco\"\n [content]=\"usageCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>type</strong>\n <span>{{ 'notifications.basic.inputType' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>title</strong>\n <span>{{ 'notifications.basic.inputTitle' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>message</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'notifications.basic.inputMessage' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>duration</strong>\n <span>{{ 'notifications.basic.inputDuration' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>position</strong>\n <span>{{ 'notifications.basic.inputPosition' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'notifications.basic.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"successTop()\">\n <dd-badge [text]=\"'success'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.successTop' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"warningCenter()\">\n <dd-badge [text]=\"'warning'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.warningCenter' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"errorBottom()\">\n <dd-badge [text]=\"'error'\" [color]=\"colorDark\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.errorBottom' | transloco\n }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 02 \u2014 SERVICE & CONTAINER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.service.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.service.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #serviceCode>\n <pre class=\"accordion-code\"><code>// 1) Place container once in app layout\n<duck-dev-notification-container />\n\n// 2) Inject and use the service\nconstructor(private notify: DuckDevNotificationService) {}\n\nthis.notify.show({\n type: 'success',\n title: 'Done',\n message: 'Operation completed',\n position: 'top',\n duration: 3000\n});</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.service.install' | transloco\"\n [content]=\"serviceCode\"\n [color]=\"colorOrange\"\n />\n\n <h3 class=\"examples-title\">{{ 'notifications.api.title' | transloco }}</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>show(options)</strong>\n <span>{{ 'notifications.api.show' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>success(msg, opts?)</strong>\n <span>{{ 'notifications.api.success' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>warning(msg, opts?)</strong>\n <span>{{ 'notifications.api.warning' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>error(msg, opts?)</strong>\n <span>{{ 'notifications.api.error' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>remove(id)</strong>\n <span>{{ 'notifications.api.remove' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>clear()</strong>\n <span>{{ 'notifications.api.clear' | transloco }}</span>\n </div>\n </div>\n\n <ng-template #optionsCode>\n <pre class=\"accordion-code\"><code>interface NotificationOptions {\n type?: 'success' | 'warning' | 'error';\n title?: string;\n message: string;\n position?: 'top' | 'center' | 'bottom';\n duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.api.optionsTitle' | transloco\"\n [content]=\"optionsCode\"\n [color]=\"colorGray\"\n />\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 03 \u2014 POSITIONS & DURATION \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.positions.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"showTop()\">\n <dd-badge [text]=\"'top'\" [color]=\"colorViolet\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.positions.top' | transloco }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showCenterNoAuto()\">\n <dd-badge [text]=\"'center'\" [color]=\"colorOrange\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.positions.centerNoAuto' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showBottomLong()\">\n <dd-badge [text]=\"'bottom'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.positions.bottomLong' | transloco\n }}</span>\n </div>\n </div>\n\n <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 04 \u2014 ADVANCED \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n </div>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>CSS</strong>\n <span>{{ 'notifications.advanced.cssOnly' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Palette</strong>\n <span>{{ 'notifications.advanced.palette' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Stacking</strong>\n <span>{{ 'notifications.advanced.stacking' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>A11y</strong>\n <span>{{ 'notifications.advanced.accessibility' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.notifications-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.quick-actions{display:flex;justify-content:center;gap:14px;margin-bottom:32px;flex-wrap:wrap}.notif-section{margin-bottom:16px}.notif-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.notif-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.notif-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:160px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card:active{transform:translateY(0)}.example-card__label{font-size:13px;font-weight:600;color:var(--dd-base-400);text-align:center}.tip{margin-top:8px;font-size:13px;color:var(--dd-base-400);font-style:italic}@media(max-width:768px){.notifications-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.notif-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"] }]
|
|
6204
6204
|
}] });
|
|
6205
6205
|
|
|
6206
6206
|
class BadgeBlock {
|
|
@@ -6241,7 +6241,7 @@ class BadgeBlock {
|
|
|
6241
6241
|
return el;
|
|
6242
6242
|
}
|
|
6243
6243
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6244
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Badge</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Slab</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Stamp</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Ticket</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorDark\" />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: BadgeNeobrutalSlab, selector: "dd-badge-neobrutal-slab", inputs: ["text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalStamp, selector: "dd-badge-neobrutal-stamp", inputs: ["kicker", "text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalTicket, selector: "dd-badge-neobrutal-ticket", inputs: ["text", "color", "size"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6244
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Badge</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Slab</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Stamp</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Ticket</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorDark\" />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: BadgeNeobrutalSlab, selector: "dd-badge-neobrutal-slab", inputs: ["text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalStamp, selector: "dd-badge-neobrutal-stamp", inputs: ["kicker", "text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalTicket, selector: "dd-badge-neobrutal-ticket", inputs: ["text", "color", "size"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6245
6245
|
}
|
|
6246
6246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, decorators: [{
|
|
6247
6247
|
type: Component,
|
|
@@ -6255,7 +6255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6255
6255
|
DdFlexDirectionDirective,
|
|
6256
6256
|
DuckDevCardSection,
|
|
6257
6257
|
DuckDevTab,
|
|
6258
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Badge</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Slab</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Stamp</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Ticket</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorDark\" />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
6258
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Badge</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Slab</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Stamp</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Ticket</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorDark\" />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
6259
6259
|
}], ctorParameters: () => [] });
|
|
6260
6260
|
|
|
6261
6261
|
class DirectiveBlock {
|
|
@@ -6283,7 +6283,7 @@ class AccordionBlock {
|
|
|
6283
6283
|
this.activeStyleTab.set(tab);
|
|
6284
6284
|
}
|
|
6285
6285
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6286
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: AccordionBlock, isStandalone: true, selector: "app-accordion-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template\n reference with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray |\n Dark (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <!-- Neobrutal (stamp) -->\n <h3>{{ 'accordionDoc.neobrutal.stampTitle' | transloco }}</h3>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'Release status'\"\n [content]=\"tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n/>\n\n<duck-dev-accordion-neobrutal\n [title]=\"customHeaderTpl\"\n [content]=\"tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n/>\n\n<ng-template #customHeaderTpl>\n <span class=\"custom-accordion-header\">\n <span>Release status</span>\n <span>3 pending tasks</span>\n </span>\n</ng-template></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text or\n TemplateRef for custom header content\n </li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template\n reference with content\n </li>\n <li>\n <strong>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n text rendered in the header\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray |\n Dark (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Custom Header Template</p>\n <duck-dev-accordion-neobrutal\n [title]=\"customHeaderTpl\"\n [content]=\"q3Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n\n <!-- Neobrutal Tape -->\n <h3>{{ 'accordionDoc.neobrutal.tapeTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'accordionDoc.neobrutal.tapeDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal-tape\n [title]=\"'Installation steps'\"\n [content]=\"tpl\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template\n reference with content\n </li>\n <li>\n <strong>color</strong> \u2014 color from palette: Violet | Orange | White | Gray | Dark\n (default: Orange)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Orange</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Violet</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Gray</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Dark</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n <ng-template #customHeaderTpl>\n <span class=\"custom-accordion-header\">\n <span class=\"custom-accordion-header__main\">Release status</span>\n <span class=\"custom-accordion-header__meta\">3 pending tasks</span>\n </span>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item .custom-accordion-header{display:grid;gap:6px;min-width:0}.demo-container .examples-block .example-row .example-item .custom-accordion-header__main{font-size:18px;font-weight:900;line-height:1.1;text-transform:uppercase;color:var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .custom-accordion-header__meta{width:fit-content;padding:4px 8px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);font-size:11px;font-weight:800;line-height:1;text-transform:uppercase;color:var(--dd-base-600)}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-neo-ink);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevAccordionNeobrutalComponent, selector: "duck-dev-accordion-neobrutal", inputs: ["content", "title", "stampLabel", "color"] }, { kind: "component", type: DuckDevAccordionNeobrutalTapeComponent, selector: "duck-dev-accordion-neobrutal-tape", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6286
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: AccordionBlock, isStandalone: true, selector: "app-accordion-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template\n reference with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray |\n Dark (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <!-- Neobrutal (stamp) -->\n <h3>{{ 'accordionDoc.neobrutal.stampTitle' | transloco }}</h3>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'Release status'\"\n [content]=\"tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n/>\n\n<duck-dev-accordion-neobrutal\n [title]=\"customHeaderTpl\"\n [content]=\"tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n/>\n\n<ng-template #customHeaderTpl>\n <span class=\"custom-accordion-header\">\n <span>Release status</span>\n <span>3 pending tasks</span>\n </span>\n</ng-template></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text or\n TemplateRef for custom header content\n </li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template\n reference with content\n </li>\n <li>\n <strong>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n text rendered in the header\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray |\n Dark (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Custom Header Template</p>\n <duck-dev-accordion-neobrutal\n [title]=\"customHeaderTpl\"\n [content]=\"q3Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n\n <!-- Neobrutal Tape -->\n <h3>{{ 'accordionDoc.neobrutal.tapeTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'accordionDoc.neobrutal.tapeDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal-tape\n [title]=\"'Installation steps'\"\n [content]=\"tpl\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template\n reference with content\n </li>\n <li>\n <strong>color</strong> \u2014 color from palette: Violet | Orange | White | Gray | Dark\n (default: Orange)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Orange</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Violet</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Gray</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Dark</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n <ng-template #customHeaderTpl>\n <span class=\"custom-accordion-header\">\n <span class=\"custom-accordion-header__main\">Release status</span>\n <span class=\"custom-accordion-header__meta\">3 pending tasks</span>\n </span>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item .custom-accordion-header{display:grid;gap:6px;min-width:0}.demo-container .examples-block .example-row .example-item .custom-accordion-header__main{font-size:18px;font-weight:900;line-height:1.1;text-transform:uppercase;color:var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .custom-accordion-header__meta{width:fit-content;padding:4px 8px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);font-size:11px;font-weight:800;line-height:1;text-transform:uppercase;color:var(--dd-base-600)}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-neo-ink);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevAccordionNeobrutalComponent, selector: "duck-dev-accordion-neobrutal", inputs: ["content", "title", "stampLabel", "color"] }, { kind: "component", type: DuckDevAccordionNeobrutalTapeComponent, selector: "duck-dev-accordion-neobrutal-tape", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6287
6287
|
}
|
|
6288
6288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, decorators: [{
|
|
6289
6289
|
type: Component,
|
|
@@ -6294,7 +6294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6294
6294
|
DuckDevAccordionNeobrutalTapeComponent,
|
|
6295
6295
|
DuckDevCardSection,
|
|
6296
6296
|
DuckDevTab,
|
|
6297
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template\n reference with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray |\n Dark (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <!-- Neobrutal (stamp) -->\n <h3>{{ 'accordionDoc.neobrutal.stampTitle' | transloco }}</h3>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'Release status'\"\n [content]=\"tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n/>\n\n<duck-dev-accordion-neobrutal\n [title]=\"customHeaderTpl\"\n [content]=\"tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n/>\n\n<ng-template #customHeaderTpl>\n <span class=\"custom-accordion-header\">\n <span>Release status</span>\n <span>3 pending tasks</span>\n </span>\n</ng-template></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text or\n TemplateRef for custom header content\n </li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template\n reference with content\n </li>\n <li>\n <strong>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n text rendered in the header\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray |\n Dark (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Custom Header Template</p>\n <duck-dev-accordion-neobrutal\n [title]=\"customHeaderTpl\"\n [content]=\"q3Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n\n <!-- Neobrutal Tape -->\n <h3>{{ 'accordionDoc.neobrutal.tapeTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'accordionDoc.neobrutal.tapeDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal-tape\n [title]=\"'Installation steps'\"\n [content]=\"tpl\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template\n reference with content\n </li>\n <li>\n <strong>color</strong> \u2014 color from palette: Violet | Orange | White | Gray | Dark\n (default: Orange)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Orange</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Violet</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Gray</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Dark</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n <ng-template #customHeaderTpl>\n <span class=\"custom-accordion-header\">\n <span class=\"custom-accordion-header__main\">Release status</span>\n <span class=\"custom-accordion-header__meta\">3 pending tasks</span>\n </span>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item .custom-accordion-header{display:grid;gap:6px;min-width:0}.demo-container .examples-block .example-row .example-item .custom-accordion-header__main{font-size:18px;font-weight:900;line-height:1.1;text-transform:uppercase;color:var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .custom-accordion-header__meta{width:fit-content;padding:4px 8px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);font-size:11px;font-weight:800;line-height:1;text-transform:uppercase;color:var(--dd-base-600)}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-neo-ink);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
6297
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template\n reference with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray |\n Dark (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <!-- Neobrutal (stamp) -->\n <h3>{{ 'accordionDoc.neobrutal.stampTitle' | transloco }}</h3>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'Release status'\"\n [content]=\"tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n/>\n\n<duck-dev-accordion-neobrutal\n [title]=\"customHeaderTpl\"\n [content]=\"tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n/>\n\n<ng-template #customHeaderTpl>\n <span class=\"custom-accordion-header\">\n <span>Release status</span>\n <span>3 pending tasks</span>\n </span>\n</ng-template></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text or\n TemplateRef for custom header content\n </li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template\n reference with content\n </li>\n <li>\n <strong>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n text rendered in the header\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray |\n Dark (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Custom Header Template</p>\n <duck-dev-accordion-neobrutal\n [title]=\"customHeaderTpl\"\n [content]=\"q3Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n\n <!-- Neobrutal Tape -->\n <h3>{{ 'accordionDoc.neobrutal.tapeTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'accordionDoc.neobrutal.tapeDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal-tape\n [title]=\"'Installation steps'\"\n [content]=\"tpl\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template\n reference with content\n </li>\n <li>\n <strong>color</strong> \u2014 color from palette: Violet | Orange | White | Gray | Dark\n (default: Orange)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Orange</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Violet</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Gray</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Dark</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n <ng-template #customHeaderTpl>\n <span class=\"custom-accordion-header\">\n <span class=\"custom-accordion-header__main\">Release status</span>\n <span class=\"custom-accordion-header__meta\">3 pending tasks</span>\n </span>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item .custom-accordion-header{display:grid;gap:6px;min-width:0}.demo-container .examples-block .example-row .example-item .custom-accordion-header__main{font-size:18px;font-weight:900;line-height:1.1;text-transform:uppercase;color:var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .custom-accordion-header__meta{width:fit-content;padding:4px 8px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);font-size:11px;font-weight:800;line-height:1;text-transform:uppercase;color:var(--dd-base-600)}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-neo-ink);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
6298
6298
|
}] });
|
|
6299
6299
|
|
|
6300
6300
|
class SliderFlip {
|
|
@@ -6384,7 +6384,7 @@ class SliderBlock {
|
|
|
6384
6384
|
this.activeVariantTab.set(tab);
|
|
6385
6385
|
}
|
|
6386
6386
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6387
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SliderBlock, isStandalone: true, selector: "app-slider-block", viewQueries: [{ propertyName: "slideTemplates", predicate: ["slide"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"slider-page\">\n <!-- Shared slide templates (collected by viewChildren) -->\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--hero\">\n <h3 class=\"dd-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n <p class=\"dd-slide__subtitle\">{{ 'slider.demo.heroSubtitle' | transloco }}</p>\n <a class=\"dd-slide__cta\" href=\"#components\">{{ 'slider.demo.heroCta' | transloco }}</a>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--features\">\n <ul class=\"dd-feature-list\">\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n </li>\n </ul>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--code\">\n <h4 class=\"dd-slide__code-title\">{{ 'slider.demo.code.quickStartTitle' | transloco }}</h4>\n <pre class=\"dd-slide__pre\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n <p class=\"dd-slide__note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n </section>\n </ng-template>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Autoplay'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Templates'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'slider.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 VARIANT TABS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <duck-dev-tab [tabs]=\"variantTabs\" (tabChange)=\"onVariantTabChange($event)\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'flip') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.raindrops.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n [color]=\"colorWhite\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.raindrops.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'slider.raindrops.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.raindrops.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.raindrops.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.raindrops.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{\n 'slider.raindrops.exampleBasic' | transloco\n }}</span>\n <dd-slider-flip [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'slider.tip.title' | transloco }}</strong>\n {{ 'slider.tip.flipText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'classic') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.classic.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.classic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #classicCode>\n <pre class=\"accordion-code\"><code><dd-slider-classic\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.classic.usage' | transloco\"\n [content]=\"classicCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'slider.classic.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.classic.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.classic.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.classic.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{ 'slider.classic.exampleBasic' | transloco }}</span>\n <dd-slider-classic [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'slider.tip.title' | transloco }}</strong>\n {{ 'slider.tip.classicText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n }\n </duck-dev-tab>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 INTEGRATION EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'TS'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.integration.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.integration.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #integrationCode>\n <pre class=\"accordion-code\"><code>import {{ '{' }} Component, signal, TemplateRef,\n viewChildren, AfterViewInit {{ '}' }} from '@angular/core';\nimport {{ '{' }} SliderFlip {{ '}' }} from 'duck-dev-lib';\n\n@Component({{ '{' }}\n selector: 'app-demo',\n standalone: true,\n imports: [SliderFlip],\n template: `\n <ng-template #slide>\n <div>Slide content</div>\n </ng-template>\n\n <dd-slider-flip [items]=\"slides()\" />\n `\n{{ '}' }})\nexport class DemoComponent implements AfterViewInit {{ '{' }}\n slideTemplates = viewChildren<TemplateRef<any>>('slide');\n slides = signal<TemplateRef<any>[]>([]);\n\n ngAfterViewInit() {{ '{' }}\n this.slides.set([...this.slideTemplates()]);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.integration.accordionTitle' | transloco\"\n [content]=\"integrationCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"highlight-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'slider.integration.templatesEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.templatesTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.templatesText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'slider.integration.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.signalsTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.signalsText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.slider-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.slider-section{margin-bottom:16px}.slider-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.slider-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.slider-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.slider-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;display:flex;flex-direction:column;gap:14px;transition:border-color .25s ease,box-shadow .25s ease}.slider-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.slider-demo__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em;text-align:center}.slider-demo dd-slider-flip,.slider-demo dd-slider-classic{display:block;width:100%;aspect-ratio:16/9;max-height:min(55vh,400px)}.highlight-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.dd-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-slide--hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-slide--features{background:var(--dd-base-0)}.dd-slide--code{align-items:stretch}.dd-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300);transition:background .2s ease}.dd-slide__cta:hover{background:var(--dd-base-500)}.dd-slide__code-title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-slide__pre{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left;margin:0}.dd-slide__pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.6}.dd-slide__note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}.dd-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}@media(max-width:768px){.slider-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.slider-section__head h2{font-size:20px}.inputs-grid,.highlight-cards,.dd-feature-list{grid-template-columns:1fr}.dd-slide__title{font-size:20px}.dd-slide__subtitle{font-size:14px}}\n"], dependencies: [{ kind: "component", type: SliderFlip, selector: "dd-slider-flip", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "component", type: SliderClassic, selector: "dd-slider-classic", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6387
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SliderBlock, isStandalone: true, selector: "app-slider-block", viewQueries: [{ propertyName: "slideTemplates", predicate: ["slide"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"slider-page\">\n <!-- Shared slide templates (collected by viewChildren) -->\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--hero\">\n <h3 class=\"dd-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n <p class=\"dd-slide__subtitle\">{{ 'slider.demo.heroSubtitle' | transloco }}</p>\n <a class=\"dd-slide__cta\" href=\"#components\">{{ 'slider.demo.heroCta' | transloco }}</a>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--features\">\n <ul class=\"dd-feature-list\">\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n </li>\n </ul>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--code\">\n <h4 class=\"dd-slide__code-title\">{{ 'slider.demo.code.quickStartTitle' | transloco }}</h4>\n <pre class=\"dd-slide__pre\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n <p class=\"dd-slide__note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n </section>\n </ng-template>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Autoplay'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Templates'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'slider.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 VARIANT TABS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <duck-dev-tab [tabs]=\"variantTabs\" (tabChange)=\"onVariantTabChange($event)\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'flip') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.raindrops.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n [color]=\"colorWhite\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.raindrops.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'slider.raindrops.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.raindrops.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.raindrops.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.raindrops.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{\n 'slider.raindrops.exampleBasic' | transloco\n }}</span>\n <dd-slider-flip [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'slider.tip.title' | transloco }}</strong>\n {{ 'slider.tip.flipText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'classic') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.classic.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.classic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #classicCode>\n <pre class=\"accordion-code\"><code><dd-slider-classic\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.classic.usage' | transloco\"\n [content]=\"classicCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'slider.classic.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.classic.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.classic.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.classic.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{ 'slider.classic.exampleBasic' | transloco }}</span>\n <dd-slider-classic [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'slider.tip.title' | transloco }}</strong>\n {{ 'slider.tip.classicText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n }\n </duck-dev-tab>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 INTEGRATION EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'TS'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.integration.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.integration.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #integrationCode>\n <pre class=\"accordion-code\"><code>import {{ '{' }} Component, signal, TemplateRef,\n viewChildren, AfterViewInit {{ '}' }} from '@angular/core';\nimport {{ '{' }} SliderFlip {{ '}' }} from 'duck-dev-lib';\n\n@Component({{ '{' }}\n selector: 'app-demo',\n standalone: true,\n imports: [SliderFlip],\n template: `\n <ng-template #slide>\n <div>Slide content</div>\n </ng-template>\n\n <dd-slider-flip [items]=\"slides()\" />\n `\n{{ '}' }})\nexport class DemoComponent implements AfterViewInit {{ '{' }}\n slideTemplates = viewChildren<TemplateRef<any>>('slide');\n slides = signal<TemplateRef<any>[]>([]);\n\n ngAfterViewInit() {{ '{' }}\n this.slides.set([...this.slideTemplates()]);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.integration.accordionTitle' | transloco\"\n [content]=\"integrationCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"highlight-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'slider.integration.templatesEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.templatesTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.templatesText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'slider.integration.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.signalsTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.signalsText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.slider-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.slider-section{margin-bottom:16px}.slider-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.slider-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.slider-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.slider-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;display:flex;flex-direction:column;gap:14px;transition:border-color .25s ease,box-shadow .25s ease}.slider-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.slider-demo__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em;text-align:center}.slider-demo dd-slider-flip,.slider-demo dd-slider-classic{display:block;width:100%;aspect-ratio:16/9;max-height:min(55vh,400px)}.highlight-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.dd-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-slide--hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-slide--features{background:var(--dd-base-0)}.dd-slide--code{align-items:stretch}.dd-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300);transition:background .2s ease}.dd-slide__cta:hover{background:var(--dd-base-500)}.dd-slide__code-title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-slide__pre{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left;margin:0}.dd-slide__pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.6}.dd-slide__note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}.dd-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}@media(max-width:768px){.slider-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.slider-section__head h2{font-size:20px}.inputs-grid,.highlight-cards,.dd-feature-list{grid-template-columns:1fr}.dd-slide__title{font-size:20px}.dd-slide__subtitle{font-size:14px}}\n"], dependencies: [{ kind: "component", type: SliderFlip, selector: "dd-slider-flip", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "component", type: SliderClassic, selector: "dd-slider-classic", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6388
6388
|
}
|
|
6389
6389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, decorators: [{
|
|
6390
6390
|
type: Component,
|
|
@@ -6398,7 +6398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6398
6398
|
DuckDevAccordionComponent,
|
|
6399
6399
|
DuckDevSpeakerBubbleSoft,
|
|
6400
6400
|
DuckDevTab,
|
|
6401
|
-
], template: "<div class=\"slider-page\">\n <!-- Shared slide templates (collected by viewChildren) -->\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--hero\">\n <h3 class=\"dd-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n <p class=\"dd-slide__subtitle\">{{ 'slider.demo.heroSubtitle' | transloco }}</p>\n <a class=\"dd-slide__cta\" href=\"#components\">{{ 'slider.demo.heroCta' | transloco }}</a>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--features\">\n <ul class=\"dd-feature-list\">\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n </li>\n </ul>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--code\">\n <h4 class=\"dd-slide__code-title\">{{ 'slider.demo.code.quickStartTitle' | transloco }}</h4>\n <pre class=\"dd-slide__pre\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n <p class=\"dd-slide__note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n </section>\n </ng-template>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Autoplay'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Templates'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'slider.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 VARIANT TABS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <duck-dev-tab [tabs]=\"variantTabs\" (tabChange)=\"onVariantTabChange($event)\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'flip') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.raindrops.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n [color]=\"colorWhite\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.raindrops.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'slider.raindrops.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.raindrops.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.raindrops.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.raindrops.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{\n 'slider.raindrops.exampleBasic' | transloco\n }}</span>\n <dd-slider-flip [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'slider.tip.title' | transloco }}</strong>\n {{ 'slider.tip.flipText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'classic') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.classic.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.classic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #classicCode>\n <pre class=\"accordion-code\"><code><dd-slider-classic\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.classic.usage' | transloco\"\n [content]=\"classicCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'slider.classic.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.classic.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.classic.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.classic.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{ 'slider.classic.exampleBasic' | transloco }}</span>\n <dd-slider-classic [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'slider.tip.title' | transloco }}</strong>\n {{ 'slider.tip.classicText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n }\n </duck-dev-tab>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 INTEGRATION EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'TS'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.integration.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.integration.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #integrationCode>\n <pre class=\"accordion-code\"><code>import {{ '{' }} Component, signal, TemplateRef,\n viewChildren, AfterViewInit {{ '}' }} from '@angular/core';\nimport {{ '{' }} SliderFlip {{ '}' }} from 'duck-dev-lib';\n\n@Component({{ '{' }}\n selector: 'app-demo',\n standalone: true,\n imports: [SliderFlip],\n template: `\n <ng-template #slide>\n <div>Slide content</div>\n </ng-template>\n\n <dd-slider-flip [items]=\"slides()\" />\n `\n{{ '}' }})\nexport class DemoComponent implements AfterViewInit {{ '{' }}\n slideTemplates = viewChildren<TemplateRef<any>>('slide');\n slides = signal<TemplateRef<any>[]>([]);\n\n ngAfterViewInit() {{ '{' }}\n this.slides.set([...this.slideTemplates()]);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.integration.accordionTitle' | transloco\"\n [content]=\"integrationCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"highlight-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'slider.integration.templatesEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.templatesTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.templatesText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'slider.integration.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.signalsTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.signalsText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.slider-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.slider-section{margin-bottom:16px}.slider-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.slider-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.slider-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.slider-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;display:flex;flex-direction:column;gap:14px;transition:border-color .25s ease,box-shadow .25s ease}.slider-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.slider-demo__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em;text-align:center}.slider-demo dd-slider-flip,.slider-demo dd-slider-classic{display:block;width:100%;aspect-ratio:16/9;max-height:min(55vh,400px)}.highlight-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.dd-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-slide--hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-slide--features{background:var(--dd-base-0)}.dd-slide--code{align-items:stretch}.dd-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300);transition:background .2s ease}.dd-slide__cta:hover{background:var(--dd-base-500)}.dd-slide__code-title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-slide__pre{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left;margin:0}.dd-slide__pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.6}.dd-slide__note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}.dd-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}@media(max-width:768px){.slider-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.slider-section__head h2{font-size:20px}.inputs-grid,.highlight-cards,.dd-feature-list{grid-template-columns:1fr}.dd-slide__title{font-size:20px}.dd-slide__subtitle{font-size:14px}}\n"] }]
|
|
6401
|
+
], template: "<div class=\"slider-page\">\n <!-- Shared slide templates (collected by viewChildren) -->\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--hero\">\n <h3 class=\"dd-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n <p class=\"dd-slide__subtitle\">{{ 'slider.demo.heroSubtitle' | transloco }}</p>\n <a class=\"dd-slide__cta\" href=\"#components\">{{ 'slider.demo.heroCta' | transloco }}</a>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--features\">\n <ul class=\"dd-feature-list\">\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n </li>\n </ul>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--code\">\n <h4 class=\"dd-slide__code-title\">{{ 'slider.demo.code.quickStartTitle' | transloco }}</h4>\n <pre class=\"dd-slide__pre\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n <p class=\"dd-slide__note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n </section>\n </ng-template>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Autoplay'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Templates'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'slider.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 VARIANT TABS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <duck-dev-tab [tabs]=\"variantTabs\" (tabChange)=\"onVariantTabChange($event)\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'flip') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.raindrops.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n [color]=\"colorWhite\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.raindrops.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'slider.raindrops.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.raindrops.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.raindrops.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.raindrops.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{\n 'slider.raindrops.exampleBasic' | transloco\n }}</span>\n <dd-slider-flip [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'slider.tip.title' | transloco }}</strong>\n {{ 'slider.tip.flipText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'classic') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.classic.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.classic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #classicCode>\n <pre class=\"accordion-code\"><code><dd-slider-classic\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.classic.usage' | transloco\"\n [content]=\"classicCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'slider.classic.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.classic.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.classic.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.classic.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{ 'slider.classic.exampleBasic' | transloco }}</span>\n <dd-slider-classic [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'slider.tip.title' | transloco }}</strong>\n {{ 'slider.tip.classicText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n }\n </duck-dev-tab>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 INTEGRATION EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'TS'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.integration.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.integration.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #integrationCode>\n <pre class=\"accordion-code\"><code>import {{ '{' }} Component, signal, TemplateRef,\n viewChildren, AfterViewInit {{ '}' }} from '@angular/core';\nimport {{ '{' }} SliderFlip {{ '}' }} from 'duck-dev-lib';\n\n@Component({{ '{' }}\n selector: 'app-demo',\n standalone: true,\n imports: [SliderFlip],\n template: `\n <ng-template #slide>\n <div>Slide content</div>\n </ng-template>\n\n <dd-slider-flip [items]=\"slides()\" />\n `\n{{ '}' }})\nexport class DemoComponent implements AfterViewInit {{ '{' }}\n slideTemplates = viewChildren<TemplateRef<any>>('slide');\n slides = signal<TemplateRef<any>[]>([]);\n\n ngAfterViewInit() {{ '{' }}\n this.slides.set([...this.slideTemplates()]);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.integration.accordionTitle' | transloco\"\n [content]=\"integrationCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"highlight-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'slider.integration.templatesEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.templatesTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.templatesText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'slider.integration.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.signalsTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.signalsText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.slider-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.slider-section{margin-bottom:16px}.slider-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.slider-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.slider-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.slider-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;display:flex;flex-direction:column;gap:14px;transition:border-color .25s ease,box-shadow .25s ease}.slider-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.slider-demo__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em;text-align:center}.slider-demo dd-slider-flip,.slider-demo dd-slider-classic{display:block;width:100%;aspect-ratio:16/9;max-height:min(55vh,400px)}.highlight-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.dd-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-slide--hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-slide--features{background:var(--dd-base-0)}.dd-slide--code{align-items:stretch}.dd-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300);transition:background .2s ease}.dd-slide__cta:hover{background:var(--dd-base-500)}.dd-slide__code-title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-slide__pre{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left;margin:0}.dd-slide__pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.6}.dd-slide__note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}.dd-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}@media(max-width:768px){.slider-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.slider-section__head h2{font-size:20px}.inputs-grid,.highlight-cards,.dd-feature-list{grid-template-columns:1fr}.dd-slide__title{font-size:20px}.dd-slide__subtitle{font-size:14px}}\n"] }]
|
|
6402
6402
|
}], propDecorators: { slideTemplates: [{ type: i0.ViewChildren, args: ['slide', { isSignal: true }] }] } });
|
|
6403
6403
|
|
|
6404
6404
|
class NeobrutalTicketCardBlock {
|
|
@@ -6593,7 +6593,7 @@ class TooltipBlock {
|
|
|
6593
6593
|
this.activeStyleTab.set(tab);
|
|
6594
6594
|
}
|
|
6595
6595
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6596
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TooltipBlock, isStandalone: true, selector: "app-tooltip-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n>\n <button>Hover me</button>\n</dd-tooltip></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n\n <ul>\n <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n <li>\n <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange,\n Gray, White.\n </li>\n <li>\n <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start\n | top-end | bottom-start | bottom-end | left-start | left-end | right-start |\n right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after\n mouse leave (default: 120).\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n [color]=\"colorGray\"\n [placement]=\"'left-start'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n [color]=\"colorWhite\"\n [placement]=\"'bottom-end'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Tooltip</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-tooltip-neobrutal\n [text]=\"'Hot take inside brutal shell'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n>\n <button>Hover me</button>\n</duck-dev-tooltip-neobrutal></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Loud UI hint with brutal edge'\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Quick signal for actions and shortcuts'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-blue);border-radius:0}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-btn:active{transform:translateY(1px)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal{padding:12px 18px;border:3px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);box-shadow:4px 4px 0 var(--dd-base-600);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:hover{background:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevTooltip, selector: "dd-tooltip", inputs: ["text", "color", "placement", "delayCloseMs"] }, { kind: "component", type: DuckDevTooltipNeobrutalComponent, selector: "duck-dev-tooltip-neobrutal", inputs: ["text", "color", "placement", "delayCloseMs"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6596
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TooltipBlock, isStandalone: true, selector: "app-tooltip-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n>\n <button>Hover me</button>\n</dd-tooltip></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n\n <ul>\n <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n <li>\n <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange,\n Gray, White.\n </li>\n <li>\n <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start\n | top-end | bottom-start | bottom-end | left-start | left-end | right-start |\n right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after\n mouse leave (default: 120).\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n [color]=\"colorGray\"\n [placement]=\"'left-start'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n [color]=\"colorWhite\"\n [placement]=\"'bottom-end'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Tooltip</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-tooltip-neobrutal\n [text]=\"'Hot take inside brutal shell'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n>\n <button>Hover me</button>\n</duck-dev-tooltip-neobrutal></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Loud UI hint with brutal edge'\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Quick signal for actions and shortcuts'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-blue);border-radius:0}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-btn:active{transform:translateY(1px)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal{padding:12px 18px;border:3px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);box-shadow:4px 4px 0 var(--dd-base-600);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:hover{background:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevTooltip, selector: "dd-tooltip", inputs: ["text", "color", "placement", "delayCloseMs"] }, { kind: "component", type: DuckDevTooltipNeobrutalComponent, selector: "duck-dev-tooltip-neobrutal", inputs: ["text", "color", "placement", "delayCloseMs"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6597
6597
|
}
|
|
6598
6598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipBlock, decorators: [{
|
|
6599
6599
|
type: Component,
|
|
@@ -6605,7 +6605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6605
6605
|
DdFlexDirectionDirective,
|
|
6606
6606
|
DuckDevCardSection,
|
|
6607
6607
|
DuckDevTab,
|
|
6608
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n>\n <button>Hover me</button>\n</dd-tooltip></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n\n <ul>\n <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n <li>\n <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange,\n Gray, White.\n </li>\n <li>\n <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start\n | top-end | bottom-start | bottom-end | left-start | left-end | right-start |\n right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after\n mouse leave (default: 120).\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n [color]=\"colorGray\"\n [placement]=\"'left-start'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n [color]=\"colorWhite\"\n [placement]=\"'bottom-end'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Tooltip</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-tooltip-neobrutal\n [text]=\"'Hot take inside brutal shell'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n>\n <button>Hover me</button>\n</duck-dev-tooltip-neobrutal></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Loud UI hint with brutal edge'\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Quick signal for actions and shortcuts'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-blue);border-radius:0}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-btn:active{transform:translateY(1px)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal{padding:12px 18px;border:3px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);box-shadow:4px 4px 0 var(--dd-base-600);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:hover{background:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
6608
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n>\n <button>Hover me</button>\n</dd-tooltip></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n\n <ul>\n <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n <li>\n <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange,\n Gray, White.\n </li>\n <li>\n <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start\n | top-end | bottom-start | bottom-end | left-start | left-end | right-start |\n right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after\n mouse leave (default: 120).\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n [color]=\"colorGray\"\n [placement]=\"'left-start'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n [color]=\"colorWhite\"\n [placement]=\"'bottom-end'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Tooltip</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-tooltip-neobrutal\n [text]=\"'Hot take inside brutal shell'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n>\n <button>Hover me</button>\n</duck-dev-tooltip-neobrutal></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Loud UI hint with brutal edge'\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Quick signal for actions and shortcuts'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-blue);border-radius:0}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-btn:active{transform:translateY(1px)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal{padding:12px 18px;border:3px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);box-shadow:4px 4px 0 var(--dd-base-600);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:hover{background:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
6609
6609
|
}] });
|
|
6610
6610
|
|
|
6611
6611
|
class QuickStartBlock {
|
|
@@ -6725,7 +6725,7 @@ class ProgressBarBlock {
|
|
|
6725
6725
|
this.activeStyleTab.set(tab);
|
|
6726
6726
|
}
|
|
6727
6727
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ProgressBarBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6728
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ProgressBarBlock, isStandalone: true, selector: "app-progress-bar-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"72\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n <duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"lineProgress\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"56\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n <duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"stackProgress\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"84\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n <duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"meterProgress\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"68\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"slabProgress\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"91\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"stampProgress\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"47\"\n [color]=\"colorDark\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"ticketProgress\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section{margin-bottom:40px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevProgressLine, selector: "duck-dev-progress-line", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressStack, selector: "duck-dev-progress-stack", inputs: ["label", "value", "subtext", "color", "segmentCount"] }, { kind: "component", type: DuckDevProgressMeter, selector: "duck-dev-progress-meter", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalSlab, selector: "duck-dev-progress-neobrutal-slab", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalStamp, selector: "duck-dev-progress-neobrutal-stamp", inputs: ["kicker", "label", "value", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalTicket, selector: "duck-dev-progress-neobrutal-ticket", inputs: ["leftTag", "rightTag", "label", "value", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6728
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ProgressBarBlock, isStandalone: true, selector: "app-progress-bar-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"72\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n <duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"lineProgress\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"56\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n <duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"stackProgress\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"84\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n <duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"meterProgress\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"68\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"slabProgress\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"91\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"stampProgress\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"47\"\n [color]=\"colorDark\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"ticketProgress\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section{margin-bottom:40px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevProgressLine, selector: "duck-dev-progress-line", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressStack, selector: "duck-dev-progress-stack", inputs: ["label", "value", "subtext", "color", "segmentCount"] }, { kind: "component", type: DuckDevProgressMeter, selector: "duck-dev-progress-meter", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalSlab, selector: "duck-dev-progress-neobrutal-slab", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalStamp, selector: "duck-dev-progress-neobrutal-stamp", inputs: ["kicker", "label", "value", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalTicket, selector: "duck-dev-progress-neobrutal-ticket", inputs: ["leftTag", "rightTag", "label", "value", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6729
6729
|
}
|
|
6730
6730
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ProgressBarBlock, decorators: [{
|
|
6731
6731
|
type: Component,
|
|
@@ -6738,7 +6738,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6738
6738
|
DuckDevProgressNeobrutalSlab,
|
|
6739
6739
|
DuckDevProgressNeobrutalStamp,
|
|
6740
6740
|
DuckDevProgressNeobrutalTicket,
|
|
6741
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"72\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n <duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"lineProgress\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"56\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n <duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"stackProgress\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"84\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n <duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"meterProgress\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"68\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"slabProgress\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"91\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"stampProgress\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"47\"\n [color]=\"colorDark\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"ticketProgress\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section{margin-bottom:40px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-item{min-width:100%}}\n"] }]
|
|
6741
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"72\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n <duck-dev-progress-line\n label=\"Release sync\"\n [value]=\"lineProgress\"\n subtext=\"API schema is aligned\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"56\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n <duck-dev-progress-stack\n label=\"Content migration\"\n [value]=\"stackProgress\"\n subtext=\"6 of 10 blocks shipped\"\n [segmentCount]=\"10\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section\">\n <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"84\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n <duck-dev-progress-meter\n label=\"Regression sweep\"\n [value]=\"meterProgress\"\n subtext=\"Visual QA is nearly done\"\n [color]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"68\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-slab\n label=\"Build queue\"\n [value]=\"slabProgress\"\n subtext=\"Artifact pack is cooking\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"91\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-stamp\n kicker=\"Duck Dev\"\n label=\"Verification pass\"\n [value]=\"stampProgress\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section--neobrutal\">\n <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n <pre><code><duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"47\"\n [color]=\"colorDark\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n <ul>\n <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n <duck-dev-progress-neobrutal-ticket\n leftTag=\"phase 02\"\n rightTag=\"ui sync\"\n label=\"Neobrutal rollout\"\n [value]=\"ticketProgress\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--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-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(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(82.5% 43.2% 15.6%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(46.8% 48.9% 58%);--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(83.4% 44.2% 42.4%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section{margin-bottom:40px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-item{min-width:100%}}\n"] }]
|
|
6742
6742
|
}] });
|
|
6743
6743
|
|
|
6744
6744
|
class SpeakerBubbleBlock {
|