duck-dev-lib 0.0.56 → 0.0.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/{duck-dev-lib-en-CvAeAe4f.mjs → duck-dev-lib-en-DgK5cRp6.mjs} +33 -4
- package/fesm2022/{duck-dev-lib-ru-DFVsk_sA.mjs.map → duck-dev-lib-en-DgK5cRp6.mjs.map} +1 -1
- package/fesm2022/{duck-dev-lib-ru-DFVsk_sA.mjs → duck-dev-lib-ru-BB2sTH34.mjs} +33 -4
- package/fesm2022/{duck-dev-lib-en-CvAeAe4f.mjs.map → duck-dev-lib-ru-BB2sTH34.mjs.map} +1 -1
- package/fesm2022/duck-dev-lib.mjs +184 -79
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/duck-dev-lib.d.ts +27 -2
|
@@ -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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}: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)}[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-neo-ink: var(--dd-gray-0);--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"] });
|
|
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}: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)}[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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}: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)}[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-neo-ink: var(--dd-gray-0);--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"] });
|
|
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}: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)}[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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
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,11 +312,11 @@ 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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.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)}[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-neo-ink: var(--dd-gray-0);--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"] }] });
|
|
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.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)}[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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
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) {
|
|
@@ -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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-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;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.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)}.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)}[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-neo-ink: var(--dd-gray-0);--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;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.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)}.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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-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;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.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)}.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)}[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-neo-ink: var(--dd-gray-0);--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;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.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)}.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-text\">{{ text() }}</span>\n
|
|
384
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalSlab, isStandalone: true, selector: "duck-dev-button-neobrutal-slab", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"slab-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-neo-ink: var(--dd-gray-0);--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"] }] });
|
|
385
385
|
}
|
|
386
386
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSlab, decorators: [{
|
|
387
387
|
type: Component,
|
|
388
|
-
args: [{ selector: 'duck-dev-button-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"slab-text\">{{ text() }}</span>\n
|
|
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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-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
|
|
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-neo-ink: var(--dd-gray-0);--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"] }] });
|
|
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-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
|
|
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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
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
|
|
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-neo-ink: var(--dd-gray-0);--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"] }] });
|
|
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
|
|
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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-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-
|
|
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-neo-ink: var(--dd-gray-0);--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"] }] });
|
|
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-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-
|
|
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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
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,65 +437,65 @@ 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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-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-
|
|
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-neo-ink: var(--dd-gray-0);--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"] }] });
|
|
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.neo-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-
|
|
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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
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 LoaderLoadingBubble {
|
|
448
448
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
449
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] });
|
|
449
|
+
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-neo-ink: var(--dd-gray-0);--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"] });
|
|
450
450
|
}
|
|
451
451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, decorators: [{
|
|
452
452
|
type: Component,
|
|
453
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] }]
|
|
453
|
+
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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
454
454
|
}] });
|
|
455
455
|
|
|
456
456
|
class LoaderClassic {
|
|
457
457
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
458
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] });
|
|
458
|
+
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-neo-ink: var(--dd-gray-0);--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"] });
|
|
459
459
|
}
|
|
460
460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderClassic, decorators: [{
|
|
461
461
|
type: Component,
|
|
462
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] }]
|
|
462
|
+
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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
463
463
|
}] });
|
|
464
464
|
|
|
465
465
|
class LoaderThreeDots {
|
|
466
466
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderThreeDots, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
467
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] });
|
|
467
|
+
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-neo-ink: var(--dd-gray-0);--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"] });
|
|
468
468
|
}
|
|
469
469
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderThreeDots, decorators: [{
|
|
470
470
|
type: Component,
|
|
471
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] }]
|
|
471
|
+
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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
472
472
|
}] });
|
|
473
473
|
|
|
474
474
|
class LoaderNeobrutalStamp {
|
|
475
475
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
476
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-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"] });
|
|
476
|
+
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-neo-ink: var(--dd-gray-0);--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"] });
|
|
477
477
|
}
|
|
478
478
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalStamp, decorators: [{
|
|
479
479
|
type: Component,
|
|
480
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-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"] }]
|
|
480
|
+
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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
481
481
|
}] });
|
|
482
482
|
|
|
483
483
|
class LoaderNeobrutalBars {
|
|
484
484
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalBars, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
485
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalBars, isStandalone: true, selector: "duck-dev-loader-neobrutal-bars", ngImport: i0, template: "<div class=\"neo-bars\" role=\"status\" aria-label=\"Loading\">\n <span class=\"bars-label\">WAIT</span>\n <span class=\"bars-track\">\n <span class=\"bar bar-one\"></span>\n <span class=\"bar bar-two\"></span>\n <span class=\"bar bar-three\"></span>\n <span class=\"bar bar-four\"></span>\n </span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-neo-ink);border-radius:24px;background:var(--dd-base-0);box-shadow:7px 7px 0 var(--dd-base-accent-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"] });
|
|
485
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalBars, isStandalone: true, selector: "duck-dev-loader-neobrutal-bars", ngImport: i0, template: "<div class=\"neo-bars\" role=\"status\" aria-label=\"Loading\">\n <span class=\"bars-label\">WAIT</span>\n <span class=\"bars-track\">\n <span class=\"bar bar-one\"></span>\n <span class=\"bar bar-two\"></span>\n <span class=\"bar bar-three\"></span>\n <span class=\"bar bar-four\"></span>\n </span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--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-neo-ink: var(--dd-gray-0);--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"] });
|
|
486
486
|
}
|
|
487
487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalBars, decorators: [{
|
|
488
488
|
type: Component,
|
|
489
|
-
args: [{ selector: 'duck-dev-loader-neobrutal-bars', standalone: true, template: "<div class=\"neo-bars\" role=\"status\" aria-label=\"Loading\">\n <span class=\"bars-label\">WAIT</span>\n <span class=\"bars-track\">\n <span class=\"bar bar-one\"></span>\n <span class=\"bar bar-two\"></span>\n <span class=\"bar bar-three\"></span>\n <span class=\"bar bar-four\"></span>\n </span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-neo-ink);border-radius:24px;background:var(--dd-base-0);box-shadow:7px 7px 0 var(--dd-base-accent-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"] }]
|
|
489
|
+
args: [{ selector: 'duck-dev-loader-neobrutal-bars', standalone: true, template: "<div class=\"neo-bars\" role=\"status\" aria-label=\"Loading\">\n <span class=\"bars-label\">WAIT</span>\n <span class=\"bars-track\">\n <span class=\"bar bar-one\"></span>\n <span class=\"bar bar-two\"></span>\n <span class=\"bar bar-three\"></span>\n <span class=\"bar bar-four\"></span>\n </span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
490
490
|
}] });
|
|
491
491
|
|
|
492
492
|
class LoaderNeobrutalMarquee {
|
|
493
493
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalMarquee, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
494
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-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"] });
|
|
494
|
+
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-neo-ink: var(--dd-gray-0);--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"] });
|
|
495
495
|
}
|
|
496
496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalMarquee, decorators: [{
|
|
497
497
|
type: Component,
|
|
498
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-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"] }]
|
|
498
|
+
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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
499
499
|
}] });
|
|
500
500
|
|
|
501
501
|
class DuckDevTab {
|
|
@@ -516,11 +516,11 @@ class DuckDevTab {
|
|
|
516
516
|
return this.activeTabIndex() === index;
|
|
517
517
|
}
|
|
518
518
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
519
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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 }] });
|
|
519
|
+
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-neo-ink: var(--dd-gray-0);--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 }] });
|
|
520
520
|
}
|
|
521
521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTab, decorators: [{
|
|
522
522
|
type: Component,
|
|
523
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] }]
|
|
523
|
+
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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
524
524
|
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
|
|
525
525
|
|
|
526
526
|
class DuckDevTabVertical {
|
|
@@ -563,11 +563,11 @@ class DuckDevTabVertical {
|
|
|
563
563
|
return this.activeTabIndex() === index;
|
|
564
564
|
}
|
|
565
565
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
566
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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 }] });
|
|
566
|
+
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-neo-ink: var(--dd-gray-0);--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 }] });
|
|
567
567
|
}
|
|
568
568
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, decorators: [{
|
|
569
569
|
type: Component,
|
|
570
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] }]
|
|
570
|
+
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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
571
571
|
}], 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 }] }] } });
|
|
572
572
|
|
|
573
573
|
class DuckDevCardSection {
|
|
@@ -2197,11 +2197,11 @@ class DuckDevAccordionComponent {
|
|
|
2197
2197
|
this.isOpen.update((prev) => !prev);
|
|
2198
2198
|
}
|
|
2199
2199
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2200
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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 });
|
|
2200
|
+
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-neo-ink: var(--dd-gray-0);--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 });
|
|
2201
2201
|
}
|
|
2202
2202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionComponent, decorators: [{
|
|
2203
2203
|
type: Component,
|
|
2204
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] }]
|
|
2204
|
+
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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
2205
2205
|
}], 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 }] }] } });
|
|
2206
2206
|
|
|
2207
2207
|
function getClassicSpeakerBubbleStyle(color) {
|
|
@@ -3698,7 +3698,7 @@ class ButtonNeobrutalBlock {
|
|
|
3698
3698
|
colorGray = AccentEnumColor.Gray;
|
|
3699
3699
|
colorDark = AccentEnumColor.Dark;
|
|
3700
3700
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3701
|
-
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>\n <strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}\n </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>\n <strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}\n </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\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n />\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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-ink);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" }] });
|
|
3701
|
+
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>\n <strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}\n </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>\n <strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}\n </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\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n />\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-neo-ink: var(--dd-gray-0);--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" }] });
|
|
3702
3702
|
}
|
|
3703
3703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBlock, decorators: [{
|
|
3704
3704
|
type: Component,
|
|
@@ -3711,7 +3711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3711
3711
|
ButtonNeobrutalTape,
|
|
3712
3712
|
DuckDevCardSection,
|
|
3713
3713
|
TranslocoPipe,
|
|
3714
|
-
], 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>\n <strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}\n </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>\n <strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}\n </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\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n />\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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-ink);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"] }]
|
|
3714
|
+
], 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>\n <strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}\n </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>\n <strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}\n </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\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n />\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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
3715
3715
|
}] });
|
|
3716
3716
|
|
|
3717
3717
|
class ButtonBlock {
|
|
@@ -3730,7 +3730,7 @@ class ButtonBlock {
|
|
|
3730
3730
|
this.activeStyleTab.set(tab);
|
|
3731
3731
|
}
|
|
3732
3732
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3733
|
-
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\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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Click me\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Violet\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</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\">{{ 'buttons.glideOver.exampleGray' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Gray\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</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\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Click\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Gray\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Dark\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\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\">{{ 'buttons.flip.exampleViolet' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleOrange' | transloco }}</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 [text]=\"'Prev'\" [direction]=\"'previous'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleNext' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\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\">{{ 'buttons.casper.exampleWhite' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleViolet' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleOrange' | transloco }}</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\">{{ 'buttons.casper.exampleGray' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleDark' | transloco }}</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><strong>{{ 'buttons.classicTip.title' | transloco }}</strong> {{ 'buttons.classicTip.text' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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" }] });
|
|
3733
|
+
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\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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Click me\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Violet\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</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\">{{ 'buttons.glideOver.exampleGray' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Gray\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</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\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Click\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Gray\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Dark\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\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\">{{ 'buttons.flip.exampleViolet' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleOrange' | transloco }}</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 [text]=\"'Prev'\" [direction]=\"'previous'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleNext' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\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\">{{ 'buttons.casper.exampleWhite' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleViolet' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleOrange' | transloco }}</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\">{{ 'buttons.casper.exampleGray' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleDark' | transloco }}</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><strong>{{ 'buttons.classicTip.title' | transloco }}</strong> {{ 'buttons.classicTip.text' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n\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-neo-ink: var(--dd-gray-0);--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" }] });
|
|
3734
3734
|
}
|
|
3735
3735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, decorators: [{
|
|
3736
3736
|
type: Component,
|
|
@@ -3746,7 +3746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3746
3746
|
DuckDevSpeakerBubbleSoft,
|
|
3747
3747
|
ButtonNeobrutalBlock,
|
|
3748
3748
|
DuckDevTab,
|
|
3749
|
-
], 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\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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Click me\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Violet\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</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\">{{ 'buttons.glideOver.exampleGray' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Gray\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</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\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Click\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Gray\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Dark\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\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\">{{ 'buttons.flip.exampleViolet' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleOrange' | transloco }}</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 [text]=\"'Prev'\" [direction]=\"'previous'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleNext' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\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\">{{ 'buttons.casper.exampleWhite' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleViolet' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleOrange' | transloco }}</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\">{{ 'buttons.casper.exampleGray' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleDark' | transloco }}</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><strong>{{ 'buttons.classicTip.title' | transloco }}</strong> {{ 'buttons.classicTip.text' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] }]
|
|
3749
|
+
], 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\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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Click me\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Violet\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</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\">{{ 'buttons.glideOver.exampleGray' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Gray\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</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\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Click\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Gray\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Dark\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\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\">{{ 'buttons.flip.exampleViolet' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleOrange' | transloco }}</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 [text]=\"'Prev'\" [direction]=\"'previous'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleNext' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\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\">{{ 'buttons.casper.exampleWhite' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleViolet' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleOrange' | transloco }}</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\">{{ 'buttons.casper.exampleGray' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleDark' | transloco }}</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><strong>{{ 'buttons.classicTip.title' | transloco }}</strong> {{ 'buttons.classicTip.text' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n\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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
3750
3750
|
}] });
|
|
3751
3751
|
|
|
3752
3752
|
class LoaderBlock {
|
|
@@ -3760,7 +3760,7 @@ class LoaderBlock {
|
|
|
3760
3760
|
this.activeStyleTab.set(tab);
|
|
3761
3761
|
}
|
|
3762
3762
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3763
|
-
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\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-three-dots,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-stamp,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-bars,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-marquee{display:flex;justify-content:center;align-items:center}.demo-container .component-section .examples-block .example-row .example-item.example-item-neobrutal{background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 35%,var(--dd-base-0) 35% 100%);border-width:3px;border-color:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], 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" }] });
|
|
3763
|
+
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\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-neo-ink: var(--dd-gray-0);--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-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], 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" }] });
|
|
3764
3764
|
}
|
|
3765
3765
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, decorators: [{
|
|
3766
3766
|
type: Component,
|
|
@@ -3773,7 +3773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3773
3773
|
LoaderNeobrutalMarquee,
|
|
3774
3774
|
TranslocoPipe,
|
|
3775
3775
|
DuckDevTab,
|
|
3776
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-classic /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-loading-bubble /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code><lib-loader-three-dots /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-neobrutal-stamp />\n<duck-dev-loader-neobrutal-bars />\n<duck-dev-loader-neobrutal-marquee /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-three-dots,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-stamp,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-bars,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-marquee{display:flex;justify-content:center;align-items:center}.demo-container .component-section .examples-block .example-row .example-item.example-item-neobrutal{background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 35%,var(--dd-base-0) 35% 100%);border-width:3px;border-color:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
3776
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-classic /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-loading-bubble /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code><lib-loader-three-dots /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-neobrutal-stamp />\n<duck-dev-loader-neobrutal-bars />\n<duck-dev-loader-neobrutal-marquee /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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-neo-ink: var(--dd-gray-0);--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-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
3777
3777
|
}] });
|
|
3778
3778
|
|
|
3779
3779
|
class DuckDevCardMinimal {
|
|
@@ -3893,7 +3893,7 @@ class TabsBlock {
|
|
|
3893
3893
|
this.activeVerticalTab.set(tab);
|
|
3894
3894
|
}
|
|
3895
3895
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3896
|
-
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\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\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\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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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 class=\"accordion-code\"><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><strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong> {{ 'tabsComponent.classicTip.text' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n\n } @else {\n\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 <div class=\"neo-demo-tabs\">\n <div class=\"neo-demo-tabs__header\">\n @for (tab of neoHorizontalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-tab-button\"\n [class.active]=\"activeHorizontalTab().id === tab.id\"\n (click)=\"onHorizontalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-tabs__content\">\n @if (activeHorizontalTab().id === 'rush') {\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerRush' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n }\n @if (activeHorizontalTab().id === 'drop') {\n <article class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerDrop' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n }\n @if (activeHorizontalTab().id === 'review') {\n <article class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerReview' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\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\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</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\">{{ 'tabsComponent.neobrutal.storyPulseChip' | transloco }}</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\">{{ 'tabsComponent.neobrutal.storyStackChip' | transloco }}</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\">{{ 'tabsComponent.neobrutal.storyBlastChip' | transloco }}</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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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-base-600);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-base-600);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-base-600);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-base-600);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-base-600);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-base-600);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-base-600);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: 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" }] });
|
|
3896
|
+
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\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\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\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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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 class=\"accordion-code\"><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><strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong> {{ 'tabsComponent.classicTip.text' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n\n } @else {\n\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 <div class=\"neo-demo-tabs\">\n <div class=\"neo-demo-tabs__header\">\n @for (tab of neoHorizontalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-tab-button\"\n [class.active]=\"activeHorizontalTab().id === tab.id\"\n (click)=\"onHorizontalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-tabs__content\">\n @if (activeHorizontalTab().id === 'rush') {\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerRush' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n }\n @if (activeHorizontalTab().id === 'drop') {\n <article class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerDrop' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n }\n @if (activeHorizontalTab().id === 'review') {\n <article class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerReview' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\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\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</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\">{{ 'tabsComponent.neobrutal.storyPulseChip' | transloco }}</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\">{{ 'tabsComponent.neobrutal.storyStackChip' | transloco }}</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\">{{ 'tabsComponent.neobrutal.storyBlastChip' | transloco }}</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-neo-ink: var(--dd-gray-0);--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-base-600);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-base-600);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-base-600);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-base-600);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-base-600);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-base-600);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-base-600);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: 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" }] });
|
|
3897
3897
|
}
|
|
3898
3898
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, decorators: [{
|
|
3899
3899
|
type: Component,
|
|
@@ -3905,7 +3905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3905
3905
|
Badge,
|
|
3906
3906
|
DuckDevAccordionComponent,
|
|
3907
3907
|
DuckDevSpeakerBubbleSoft,
|
|
3908
|
-
], template: "<div class=\"tabs-page\">\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]=\"'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\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\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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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 class=\"accordion-code\"><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><strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong> {{ 'tabsComponent.classicTip.text' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n\n } @else {\n\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 <div class=\"neo-demo-tabs\">\n <div class=\"neo-demo-tabs__header\">\n @for (tab of neoHorizontalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-tab-button\"\n [class.active]=\"activeHorizontalTab().id === tab.id\"\n (click)=\"onHorizontalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-tabs__content\">\n @if (activeHorizontalTab().id === 'rush') {\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerRush' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n }\n @if (activeHorizontalTab().id === 'drop') {\n <article class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerDrop' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n }\n @if (activeHorizontalTab().id === 'review') {\n <article class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerReview' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\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\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</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\">{{ 'tabsComponent.neobrutal.storyPulseChip' | transloco }}</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\">{{ 'tabsComponent.neobrutal.storyStackChip' | transloco }}</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\">{{ 'tabsComponent.neobrutal.storyBlastChip' | transloco }}</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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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-base-600);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-base-600);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-base-600);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-base-600);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-base-600);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-base-600);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-base-600);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"] }]
|
|
3908
|
+
], template: "<div class=\"tabs-page\">\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]=\"'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\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\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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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 class=\"accordion-code\"><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><strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong> {{ 'tabsComponent.classicTip.text' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n\n } @else {\n\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 <div class=\"neo-demo-tabs\">\n <div class=\"neo-demo-tabs__header\">\n @for (tab of neoHorizontalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-tab-button\"\n [class.active]=\"activeHorizontalTab().id === tab.id\"\n (click)=\"onHorizontalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-tabs__content\">\n @if (activeHorizontalTab().id === 'rush') {\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerRush' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n }\n @if (activeHorizontalTab().id === 'drop') {\n <article class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerDrop' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n }\n @if (activeHorizontalTab().id === 'review') {\n <article class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerReview' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\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\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</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\">{{ 'tabsComponent.neobrutal.storyPulseChip' | transloco }}</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\">{{ 'tabsComponent.neobrutal.storyStackChip' | transloco }}</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\">{{ 'tabsComponent.neobrutal.storyBlastChip' | transloco }}</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-neo-ink: var(--dd-gray-0);--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-base-600);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-base-600);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-base-600);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-base-600);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-base-600);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-base-600);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-base-600);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"] }]
|
|
3909
3909
|
}] });
|
|
3910
3910
|
|
|
3911
3911
|
class DuckDevInput {
|
|
@@ -3918,11 +3918,11 @@ class DuckDevInput {
|
|
|
3918
3918
|
options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
3919
3919
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
3920
3920
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3921
|
-
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\n class=\"inp-cbx\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display: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"] }] });
|
|
3921
|
+
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\n class=\"inp-cbx\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\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-neo-ink: var(--dd-gray-0);--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"] }] });
|
|
3922
3922
|
}
|
|
3923
3923
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, decorators: [{
|
|
3924
3924
|
type: Component,
|
|
3925
|
-
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\n class=\"inp-cbx\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display: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"] }]
|
|
3925
|
+
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\n class=\"inp-cbx\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
3926
3926
|
}], 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 }] }] } });
|
|
3927
3927
|
|
|
3928
3928
|
class DuckDevInputNeobrutalPoster {
|
|
@@ -3967,11 +3967,11 @@ class DuckDevInputNeobrutalSlab {
|
|
|
3967
3967
|
options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
3968
3968
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
3969
3969
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3970
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalSlab, isStandalone: true, selector: "duck-dev-input-neobrutal-slab", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n <span>{{ label() }}</span>\n</label>\n\n<div class=\"neo-field neo-field_slab\" [class.neo-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-check\">\n <input class=\"neo-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"neo-check__label\" [for]=\"control\">\n <span class=\"neo-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-input neo-input_textarea\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-input neo-input_select\"\n [class.neo-input_error]=\"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=\"neo-input\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-neo-
|
|
3970
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalSlab, isStandalone: true, selector: "duck-dev-input-neobrutal-slab", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n <span>{{ label() }}</span>\n</label>\n\n<div class=\"neo-field neo-field_slab\" [class.neo-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-check\">\n <input class=\"neo-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"neo-check__label\" [for]=\"control\">\n <span class=\"neo-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-input neo-input_textarea\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-input neo-input_select\"\n [class.neo-input_error]=\"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=\"neo-input\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-neo-shadow);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-neo-ink);border-bottom:4px solid var(--dd-neo-ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px color-mix(in srgb,var(--dd-base-accent-orange) 70%,var(--dd-neo-shadow))}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$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"] }] });
|
|
3971
3971
|
}
|
|
3972
3972
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, decorators: [{
|
|
3973
3973
|
type: Component,
|
|
3974
|
-
args: [{ selector: 'duck-dev-input-neobrutal-slab', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n <span>{{ label() }}</span>\n</label>\n\n<div class=\"neo-field neo-field_slab\" [class.neo-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-check\">\n <input class=\"neo-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"neo-check__label\" [for]=\"control\">\n <span class=\"neo-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-input neo-input_textarea\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-input neo-input_select\"\n [class.neo-input_error]=\"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=\"neo-input\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-neo-
|
|
3974
|
+
args: [{ selector: 'duck-dev-input-neobrutal-slab', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n <span>{{ label() }}</span>\n</label>\n\n<div class=\"neo-field neo-field_slab\" [class.neo-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-check\">\n <input class=\"neo-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"neo-check__label\" [for]=\"control\">\n <span class=\"neo-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-input neo-input_textarea\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-input neo-input_select\"\n [class.neo-input_error]=\"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=\"neo-input\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-neo-shadow);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-neo-ink);border-bottom:4px solid var(--dd-neo-ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px color-mix(in srgb,var(--dd-base-accent-orange) 70%,var(--dd-neo-shadow))}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"] }]
|
|
3975
3975
|
}], 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 }] }] } });
|
|
3976
3976
|
|
|
3977
3977
|
class DuckDevInputNeobrutalStrip {
|
|
@@ -3984,11 +3984,11 @@ class DuckDevInputNeobrutalStrip {
|
|
|
3984
3984
|
options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
3985
3985
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
3986
3986
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalStrip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3987
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalStrip, isStandalone: true, selector: "duck-dev-input-neobrutal-strip", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n <span>{{ label() }}</span>\n <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div class=\"neo-strip-field\" [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-strip-check\">\n <input class=\"neo-strip-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"neo-strip-check__label\" [for]=\"control\">\n <span class=\"neo-strip-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-strip-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input neo-strip-input_textarea\"\n [class.neo-strip-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-strip-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-strip-input neo-strip-input_select\"\n [class.neo-strip-input_error]=\"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\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input\"\n [class.neo-strip-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-strip-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-neo-
|
|
3987
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalStrip, isStandalone: true, selector: "duck-dev-input-neobrutal-strip", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n <span>{{ label() }}</span>\n <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div class=\"neo-strip-field\" [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-strip-check\">\n <input class=\"neo-strip-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"neo-strip-check__label\" [for]=\"control\">\n <span class=\"neo-strip-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-strip-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input neo-strip-input_textarea\"\n [class.neo-strip-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-strip-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-strip-input neo-strip-input_select\"\n [class.neo-strip-input_error]=\"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\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input\"\n [class.neo-strip-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-strip-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-neo-shadow)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-neo-ink);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-neo-shadow)}.neo-strip-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-strip-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box{background:var(--dd-base-accent-orange)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box svg{stroke-dashoffset:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$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"] }] });
|
|
3988
3988
|
}
|
|
3989
3989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalStrip, decorators: [{
|
|
3990
3990
|
type: Component,
|
|
3991
|
-
args: [{ selector: 'duck-dev-input-neobrutal-strip', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n <span>{{ label() }}</span>\n <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div class=\"neo-strip-field\" [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-strip-check\">\n <input class=\"neo-strip-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"neo-strip-check__label\" [for]=\"control\">\n <span class=\"neo-strip-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-strip-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input neo-strip-input_textarea\"\n [class.neo-strip-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-strip-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-strip-input neo-strip-input_select\"\n [class.neo-strip-input_error]=\"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\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input\"\n [class.neo-strip-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-strip-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-neo-
|
|
3991
|
+
args: [{ selector: 'duck-dev-input-neobrutal-strip', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n <span>{{ label() }}</span>\n <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div class=\"neo-strip-field\" [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-strip-check\">\n <input class=\"neo-strip-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"neo-strip-check__label\" [for]=\"control\">\n <span class=\"neo-strip-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-strip-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input neo-strip-input_textarea\"\n [class.neo-strip-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-strip-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-strip-input neo-strip-input_select\"\n [class.neo-strip-input_error]=\"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\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input\"\n [class.neo-strip-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-strip-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-neo-shadow)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-neo-ink);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-neo-shadow)}.neo-strip-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-strip-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box{background:var(--dd-base-accent-orange)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box svg{stroke-dashoffset:0}\n"] }]
|
|
3992
3992
|
}], 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 }] }] } });
|
|
3993
3993
|
|
|
3994
3994
|
class DuckDevInputNeobrutalToggle {
|
|
@@ -4821,7 +4821,7 @@ getError(controlName: string): string {
|
|
|
4821
4821
|
return this.t.translate('inputComponent.demo.errors.invalid');
|
|
4822
4822
|
}
|
|
4823
4823
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4824
|
-
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><strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}</li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li><strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}</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><strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}</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 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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px 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-base-600);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-base-600);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" }] });
|
|
4824
|
+
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><strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}</li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li><strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}</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><strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}</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 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-neo-ink: var(--dd-gray-0);--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-base-600);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-base-600);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" }] });
|
|
4825
4825
|
}
|
|
4826
4826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, decorators: [{
|
|
4827
4827
|
type: Component,
|
|
@@ -4837,7 +4837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
4837
4837
|
ReactiveFormsModule,
|
|
4838
4838
|
JsonPipe,
|
|
4839
4839
|
DuckDevTab,
|
|
4840
|
-
], 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><strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}</li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li><strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}</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><strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}</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 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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px 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-base-600);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-base-600);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"] }]
|
|
4840
|
+
], 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><strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}</li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li><strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}</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><strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}</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 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-neo-ink: var(--dd-gray-0);--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-base-600);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-base-600);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"] }]
|
|
4841
4841
|
}] });
|
|
4842
4842
|
|
|
4843
4843
|
class DuckDevNotification {
|
|
@@ -5052,7 +5052,7 @@ class BadgeBlock {
|
|
|
5052
5052
|
return el;
|
|
5053
5053
|
}
|
|
5054
5054
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5055
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding: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-base-600);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-base-600);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" }] });
|
|
5055
|
+
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-neo-ink: var(--dd-gray-0);--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-base-600);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-base-600);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" }] });
|
|
5056
5056
|
}
|
|
5057
5057
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, decorators: [{
|
|
5058
5058
|
type: Component,
|
|
@@ -5066,7 +5066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5066
5066
|
DdFlexDirectionDirective,
|
|
5067
5067
|
DuckDevCardSection,
|
|
5068
5068
|
DuckDevTab,
|
|
5069
|
-
], 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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding: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-base-600);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-base-600);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"] }]
|
|
5069
|
+
], 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-neo-ink: var(--dd-gray-0);--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-base-600);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-base-600);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"] }]
|
|
5070
5070
|
}], ctorParameters: () => [] });
|
|
5071
5071
|
|
|
5072
5072
|
class DirectiveBlock {
|
|
@@ -5112,7 +5112,7 @@ class AccordionBlock {
|
|
|
5112
5112
|
this.activeStyleTab.set(tab);
|
|
5113
5113
|
}
|
|
5114
5114
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5115
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: AccordionBlock, isStandalone: true, selector: "app-accordion-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n text rendered in the header\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-base-600);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevAccordionNeobrutalComponent, selector: "duck-dev-accordion-neobrutal", inputs: ["content", "title", "stampLabel", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5115
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: AccordionBlock, isStandalone: true, selector: "app-accordion-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n text rendered in the header\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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-neo-ink: var(--dd-gray-0);--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--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-base-600);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevAccordionNeobrutalComponent, selector: "duck-dev-accordion-neobrutal", inputs: ["content", "title", "stampLabel", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5116
5116
|
}
|
|
5117
5117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, decorators: [{
|
|
5118
5118
|
type: Component,
|
|
@@ -5122,7 +5122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5122
5122
|
DuckDevAccordionNeobrutalComponent,
|
|
5123
5123
|
DuckDevCardSection,
|
|
5124
5124
|
DuckDevTab,
|
|
5125
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n text rendered in the header\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-base-600);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
5125
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n text rendered in the header\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--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-neo-ink: var(--dd-gray-0);--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--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-base-600);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
5126
5126
|
}] });
|
|
5127
5127
|
|
|
5128
5128
|
class SliderFlip {
|
|
@@ -5251,7 +5251,7 @@ class SliderBlock {
|
|
|
5251
5251
|
this.activeVariantTab.set(tab);
|
|
5252
5252
|
}
|
|
5253
5253
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5254
|
-
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\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\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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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\">{{ 'slider.raindrops.exampleBasic' | transloco }}</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><strong>{{ 'slider.tip.title' | transloco }}</strong> {{ 'slider.tip.flipText' | transloco }}</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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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><strong>{{ 'slider.tip.title' | transloco }}</strong> {{ 'slider.tip.classicText' | transloco }}</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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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" }] });
|
|
5254
|
+
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\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\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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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\">{{ 'slider.raindrops.exampleBasic' | transloco }}</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><strong>{{ 'slider.tip.title' | transloco }}</strong> {{ 'slider.tip.flipText' | transloco }}</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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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><strong>{{ 'slider.tip.title' | transloco }}</strong> {{ 'slider.tip.classicText' | transloco }}</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-neo-ink: var(--dd-gray-0);--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" }] });
|
|
5255
5255
|
}
|
|
5256
5256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, decorators: [{
|
|
5257
5257
|
type: Component,
|
|
@@ -5265,7 +5265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5265
5265
|
DuckDevAccordionComponent,
|
|
5266
5266
|
DuckDevSpeakerBubbleSoft,
|
|
5267
5267
|
DuckDevTab,
|
|
5268
|
-
], template: "<div class=\"slider-page\">\n\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\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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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\">{{ 'slider.raindrops.exampleBasic' | transloco }}</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><strong>{{ 'slider.tip.title' | transloco }}</strong> {{ 'slider.tip.flipText' | transloco }}</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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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><strong>{{ 'slider.tip.title' | transloco }}</strong> {{ 'slider.tip.classicText' | transloco }}</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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] }]
|
|
5268
|
+
], template: "<div class=\"slider-page\">\n\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\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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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\">{{ 'slider.raindrops.exampleBasic' | transloco }}</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><strong>{{ 'slider.tip.title' | transloco }}</strong> {{ 'slider.tip.flipText' | transloco }}</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 [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\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><strong>{{ 'slider.tip.title' | transloco }}</strong> {{ 'slider.tip.classicText' | transloco }}</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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
5269
5269
|
}], propDecorators: { slideTemplates: [{ type: i0.ViewChildren, args: ['slide', { isSignal: true }] }] } });
|
|
5270
5270
|
|
|
5271
5271
|
class NeobrutalTicketCardBlock {
|
|
@@ -5520,7 +5520,7 @@ class TooltipBlock {
|
|
|
5520
5520
|
this.activeStyleTab.set(tab);
|
|
5521
5521
|
}
|
|
5522
5522
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5523
|
-
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, Gray,\n 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 | right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n 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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-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-base-600);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-base-600);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-base-600);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" }] });
|
|
5523
|
+
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, Gray,\n 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 | right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n 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-neo-ink: var(--dd-gray-0);--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-base-600);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-base-600);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-base-600);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" }] });
|
|
5524
5524
|
}
|
|
5525
5525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipBlock, decorators: [{
|
|
5526
5526
|
type: Component,
|
|
@@ -5532,7 +5532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5532
5532
|
DdFlexDirectionDirective,
|
|
5533
5533
|
DuckDevCardSection,
|
|
5534
5534
|
DuckDevTab,
|
|
5535
|
-
], 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, Gray,\n 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 | right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n 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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-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-base-600);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-base-600);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-base-600);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"] }]
|
|
5535
|
+
], 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, Gray,\n 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 | right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n 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-neo-ink: var(--dd-gray-0);--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-base-600);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-base-600);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-base-600);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"] }]
|
|
5536
5536
|
}] });
|
|
5537
5537
|
|
|
5538
5538
|
function clampProgress(value) {
|
|
@@ -5598,11 +5598,11 @@ class DuckDevProgressNeobrutalSlab {
|
|
|
5598
5598
|
color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5599
5599
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5600
5600
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5601
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-neo-
|
|
5601
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-neo-shadow)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-0);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary);--dd-progress-panel: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-yellow) 32%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] });
|
|
5602
5602
|
}
|
|
5603
5603
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
|
|
5604
5604
|
type: Component,
|
|
5605
|
-
args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-neo-
|
|
5605
|
+
args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-neo-shadow)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-0);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary);--dd-progress-panel: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-yellow) 32%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] }]
|
|
5606
5606
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5607
5607
|
|
|
5608
5608
|
class DuckDevProgressNeobrutalStamp {
|
|
@@ -5612,11 +5612,11 @@ class DuckDevProgressNeobrutalStamp {
|
|
|
5612
5612
|
color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5613
5613
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5614
5614
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5615
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-base-0)) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:0 0 0 4px var(--dd-base-0),8px 8px 0 var(--dd-neo-
|
|
5615
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-base-0)) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:0 0 0 4px var(--dd-base-0),8px 8px 0 var(--dd-neo-shadow)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-100);overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-base-600)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
|
|
5616
5616
|
}
|
|
5617
5617
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, decorators: [{
|
|
5618
5618
|
type: Component,
|
|
5619
|
-
args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-base-0)) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:0 0 0 4px var(--dd-base-0),8px 8px 0 var(--dd-neo-
|
|
5619
|
+
args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-base-0)) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:0 0 0 4px var(--dd-base-0),8px 8px 0 var(--dd-neo-shadow)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-100);overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-base-600)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
|
|
5620
5620
|
}], propDecorators: { kicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "kicker", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5621
5621
|
|
|
5622
5622
|
class DuckDevProgressNeobrutalTicket {
|
|
@@ -5627,11 +5627,11 @@ class DuckDevProgressNeobrutalTicket {
|
|
|
5627
5627
|
color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5628
5628
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5629
5629
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5630
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-neo-
|
|
5630
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-neo-shadow))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-neo-ink)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-neo-ink);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
|
|
5631
5631
|
}
|
|
5632
5632
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, decorators: [{
|
|
5633
5633
|
type: Component,
|
|
5634
|
-
args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-neo-
|
|
5634
|
+
args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-neo-shadow))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-neo-ink)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-neo-ink);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
|
|
5635
5635
|
}], propDecorators: { leftTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftTag", required: true }] }], rightTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightTag", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5636
5636
|
|
|
5637
5637
|
class QuickStartBlock {
|
|
@@ -5711,11 +5711,11 @@ class DuckDevSegmentButton {
|
|
|
5711
5711
|
contentId = input(undefined, { ...(ngDevMode ? { debugName: "contentId" } : {}) });
|
|
5712
5712
|
templateRef = viewChild.required('contentTpl');
|
|
5713
5713
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5714
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] });
|
|
5714
|
+
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-neo-ink: var(--dd-gray-0);--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"] });
|
|
5715
5715
|
}
|
|
5716
5716
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentButton, decorators: [{
|
|
5717
5717
|
type: Component,
|
|
5718
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] }]
|
|
5718
|
+
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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
5719
5719
|
}], 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 }] }] } });
|
|
5720
5720
|
|
|
5721
5721
|
class DuckDevSegmentClassic {
|
|
@@ -5775,13 +5775,13 @@ class DuckDevSegmentClassic {
|
|
|
5775
5775
|
}
|
|
5776
5776
|
}
|
|
5777
5777
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5778
|
-
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\n class=\"segment-buttons\"\n #buttonsContainer\n >\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] }] });
|
|
5778
|
+
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\n class=\"segment-buttons\"\n #buttonsContainer\n >\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-neo-ink: var(--dd-gray-0);--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"] }] });
|
|
5779
5779
|
}
|
|
5780
5780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, decorators: [{
|
|
5781
5781
|
type: Component,
|
|
5782
5782
|
args: [{ selector: 'dd-segment-classic', imports: [
|
|
5783
5783
|
NgTemplateOutlet
|
|
5784
|
-
], 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\n class=\"segment-buttons\"\n #buttonsContainer\n >\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] }]
|
|
5784
|
+
], 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\n class=\"segment-buttons\"\n #buttonsContainer\n >\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-neo-ink: var(--dd-gray-0);--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"] }]
|
|
5785
5785
|
}], 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: [{
|
|
5786
5786
|
type: ContentChildren,
|
|
5787
5787
|
args: [DuckDevSegmentButton]
|
|
@@ -5900,11 +5900,11 @@ class DuckDevSegmentNeobrutal {
|
|
|
5900
5900
|
}
|
|
5901
5901
|
}
|
|
5902
5902
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5903
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentNeobrutal, isStandalone: true, selector: "duck-dev-segment-neobrutal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "segmentButtons", predicate: DuckDevSegmentButton }], viewQueries: [{ propertyName: "buttonsContainer", first: true, predicate: ["buttonsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo__indicator-shell\">\n <div\n class=\"dd-segment-neo__indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n >\n <span class=\"dd-segment-neo__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo__button\"\n [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-blue);--dd-segment-neo-shadow: var(--dd-base-accent-orange);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0;left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-neo-
|
|
5903
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentNeobrutal, isStandalone: true, selector: "duck-dev-segment-neobrutal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "segmentButtons", predicate: DuckDevSegmentButton }], viewQueries: [{ propertyName: "buttonsContainer", first: true, predicate: ["buttonsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo__indicator-shell\">\n <div\n class=\"dd-segment-neo__indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n >\n <span class=\"dd-segment-neo__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo__button\"\n [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-blue);--dd-segment-neo-shadow: var(--dd-base-accent-orange);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0;left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-neo-shadow);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
5904
5904
|
}
|
|
5905
5905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, decorators: [{
|
|
5906
5906
|
type: Component,
|
|
5907
|
-
args: [{ selector: 'duck-dev-segment-neobrutal', imports: [NgTemplateOutlet, NgStyle], template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo__indicator-shell\">\n <div\n class=\"dd-segment-neo__indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n >\n <span class=\"dd-segment-neo__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo__button\"\n [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-blue);--dd-segment-neo-shadow: var(--dd-base-accent-orange);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0;left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-neo-
|
|
5907
|
+
args: [{ selector: 'duck-dev-segment-neobrutal', imports: [NgTemplateOutlet, NgStyle], template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo__indicator-shell\">\n <div\n class=\"dd-segment-neo__indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n >\n <span class=\"dd-segment-neo__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo__button\"\n [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-blue);--dd-segment-neo-shadow: var(--dd-base-accent-orange);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0;left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-neo-shadow);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"] }]
|
|
5908
5908
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ionChange: [{ type: i0.Output, args: ["ionChange"] }], segmentButtons: [{
|
|
5909
5909
|
type: ContentChildren,
|
|
5910
5910
|
args: [DuckDevSegmentButton]
|
|
@@ -5949,7 +5949,7 @@ class ProgressBarBlock {
|
|
|
5949
5949
|
this.activeStyleTab.set(tab);
|
|
5950
5950
|
}
|
|
5951
5951
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ProgressBarBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5952
|
-
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .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-base-600);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-base-600);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" }] });
|
|
5952
|
+
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-neo-ink: var(--dd-gray-0);--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-base-600);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-base-600);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" }] });
|
|
5953
5953
|
}
|
|
5954
5954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ProgressBarBlock, decorators: [{
|
|
5955
5955
|
type: Component,
|
|
@@ -5962,7 +5962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5962
5962
|
DuckDevProgressNeobrutalSlab,
|
|
5963
5963
|
DuckDevProgressNeobrutalStamp,
|
|
5964
5964
|
DuckDevProgressNeobrutalTicket,
|
|
5965
|
-
], 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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .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-base-600);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-base-600);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"] }]
|
|
5965
|
+
], 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-neo-ink: var(--dd-gray-0);--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-base-600);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-base-600);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"] }]
|
|
5966
5966
|
}] });
|
|
5967
5967
|
|
|
5968
5968
|
class SpeakerBubbleBlock {
|
|
@@ -6013,6 +6013,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6013
6013
|
], template: "<div class=\"demo-container\">\n <h1>{{ 'speakerBubbleDoc.title' | transloco }}</h1>\n\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"introEl.innerHTML\"></div>\n </dd-card-accent>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.bubbleTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.bubbleDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-classic [color]=\"colorWhite\" [tail]=\"'left'\">\n <small>Product team</small>\n <p>Can we move the onboarding review to Thursday?</p>\n</dd-speaker-bubble-classic></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.leftTail' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-classic\n [color]=\"colorWhite\"\n [tail]=\"'left'\"\n [target]=\"classicLeftTarget\"\n >\n <small>Design sync</small>\n <p>Can we keep the hero copy shorter on mobile?</p>\n </dd-speaker-bubble-classic>\n <span class=\"bubble-target\" #classicLeftTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.rightTail' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-classic\n [color]=\"colorViolet\"\n [tail]=\"'right'\"\n [target]=\"classicRightTarget\"\n >\n <small>Frontend</small>\n <p><strong>Yes</strong>, the block can keep a CTA and badge inside projected content.</p>\n </dd-speaker-bubble-classic>\n <span\n class=\"bubble-target bubble-target--violet\"\n #classicRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.softTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.softDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\">\n <small>Assistant</small>\n <p>Projected markup can include <strong>inline emphasis</strong> and metadata.</p>\n</dd-speaker-bubble-soft></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.richContent' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-soft\n [color]=\"colorOrange\"\n [tail]=\"'left'\"\n [target]=\"softLeftTarget\"\n >\n <small>Release note</small>\n <p>Bubble keeps a softer glassy surface for editorial comments and gentle callouts.</p>\n </dd-speaker-bubble-soft>\n <span\n class=\"bubble-target bubble-target--orange\"\n #softLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.darkMode' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-soft\n [color]=\"colorDark\"\n [tail]=\"'right'\"\n [target]=\"softRightTarget\"\n >\n <small>Night queue</small>\n <p>Rich content can stay readable even on dark palette variants.</p>\n </dd-speaker-bubble-soft>\n <span\n class=\"bubble-target bubble-target--dark\"\n #softRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.outlineTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.outlineDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-outline [color]=\"colorGray\" [tail]=\"'left'\">\n <small>System</small>\n <p>Outline variants work well for neutral hints and documentation notes.</p>\n</dd-speaker-bubble-outline></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.note' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-outline\n [color]=\"colorGray\"\n [tail]=\"'left'\"\n [target]=\"outlineLeftTarget\"\n >\n <small>Documentation</small>\n <p>Outlined speaker bubbles are useful for neutral side notes in dense layouts.</p>\n </dd-speaker-bubble-outline>\n <span class=\"bubble-target\" #outlineLeftTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.replyRight' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-outline\n [color]=\"colorWhite\"\n [tail]=\"'right'\"\n [target]=\"outlineRightTarget\"\n >\n <small>QA</small>\n <p>Tail position still flips while content remains projected markup.</p>\n </dd-speaker-bubble-outline>\n <span class=\"bubble-target\" #outlineRightTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n } @else {\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.neobrutal.slabTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.slabDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-neobrutal-slab [color]=\"colorOrange\" [tail]=\"'left'\">\n <small>Live drop</small>\n <p>Use ng-content for bold labels, paragraphs and inline status chips.</p>\n</dd-speaker-bubble-neobrutal-slab></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.livePanel' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-neobrutal-slab\n [color]=\"colorOrange\"\n [tail]=\"'left'\"\n [target]=\"slabLeftTarget\"\n >\n <small>Queue A</small>\n <p><strong>Live</strong> release banner for dashboards, status walls and loud interface narration.</p>\n </dd-speaker-bubble-neobrutal-slab>\n <span\n class=\"bubble-target bubble-target--orange\"\n #slabLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.hotReply' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-neobrutal-slab\n [color]=\"colorViolet\"\n [tail]=\"'right'\"\n [target]=\"slabRightTarget\"\n >\n <small>Ops</small>\n <p>The slab version keeps a heavy tail and rigid geometry for louder chat layouts.</p>\n </dd-speaker-bubble-neobrutal-slab>\n <span\n class=\"bubble-target bubble-target--violet\"\n #slabRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.neobrutal.ticketTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.ticketDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-neobrutal-ticket [color]=\"colorDark\" [tail]=\"'right'\">\n <small>Alert feed</small>\n <p>Projected content stays flexible while the component provides the ticket shell.</p>\n</dd-speaker-bubble-neobrutal-ticket></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.alertTicket' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-neobrutal-ticket\n [color]=\"colorDark\"\n [tail]=\"'left'\"\n [target]=\"ticketLeftTarget\"\n >\n <small>Alert feed</small>\n <p>Ticket framing works for warning streams, operations chatter and serialized event logs.</p>\n </dd-speaker-bubble-neobrutal-ticket>\n <span\n class=\"bubble-target bubble-target--dark\"\n #ticketLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.ticketReply' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-neobrutal-ticket\n [color]=\"colorWhite\"\n [tail]=\"'right'\"\n [target]=\"ticketRightTarget\"\n >\n <small>Review</small>\n <p><strong>Approved</strong> for launch preview, keep the counter-note visible in the timeline.</p>\n </dd-speaker-bubble-neobrutal-ticket>\n <span\n class=\"bubble-target bubble-target--orange\"\n #ticketRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n }\n </duck-dev-tab>\n</div>\n", styles: [".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:30px;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{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:15px;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--right .example-label{text-align:right}.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-base-600);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-base-600);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;text-align:left}.demo-container .bubble-preview{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:16px;overflow:visible}.demo-container .bubble-preview--end{align-items:flex-end}.demo-container .example-item{overflow:visible}.demo-container .bubble-target{position:relative;width:54px;height:54px;border:2px solid var(--dd-base-300);border-radius:18px;background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-blue) 16%,transparent) 0,transparent 52%),var(--dd-base-100);box-shadow:0 10px 18px color-mix(in srgb,var(--dd-base-400) 24%,transparent);flex:0 0 auto}.demo-container .bubble-target:before{content:\"\";position:absolute;inset:11px 13px 17px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-accent-blue) 22%,var(--dd-base-0))}.demo-container .bubble-target:after{content:\"\";position:absolute;left:17px;right:17px;bottom:10px;height:10px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-300) 85%,var(--dd-base-0))}.demo-container .bubble-target--violet{border-color:color-mix(in srgb,var(--dd-base-secondary) 42%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-secondary) 18%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-secondary) 10%,var(--dd-base-0))}.demo-container .bubble-target--orange{border-color:color-mix(in srgb,var(--dd-base-accent-orange) 46%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-orange) 22%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark{border-color:var(--dd-base-500);background:radial-gradient(circle at 34% 34%,color-mix(in srgb,var(--dd-base-0) 88%,transparent) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-yellow) 16%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-600) 92%,var(--dd-base-500))}.demo-container .bubble-target--dark:before{background:color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark:after{background:color-mix(in srgb,var(--dd-base-400) 80%,var(--dd-base-600))}.demo-container .example-item--neobrutal .bubble-target{border-width:4px;border-color:var(--dd-base-600);border-radius:0;box-shadow:6px 6px 0 var(--dd-base-600)}@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}}\n"] }]
|
|
6014
6014
|
}], ctorParameters: () => [] });
|
|
6015
6015
|
|
|
6016
|
+
class DuckDevBreadcrumbClassic {
|
|
6017
|
+
items = input.required({ ...(ngDevMode ? { debugName: "items" } : {}) });
|
|
6018
|
+
separator = input('/', { ...(ngDevMode ? { debugName: "separator" } : {}) });
|
|
6019
|
+
navigate = output();
|
|
6020
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6021
|
+
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 item.label; let last = $last) {\n <li class=\"breadcrumb__item\">\n @if (!last && item.url) {\n <button\n class=\"breadcrumb__link\"\n type=\"button\"\n (click)=\"navigate.emit(item)\"\n >{{ item.label }}</button>\n } @else {\n <span class=\"breadcrumb__current\" [attr.aria-current]=\"last ? 'page' : null\">{{ item.label }}</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-neo-ink: var(--dd-gray-0);--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}.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;margin:0;padding:0;list-style: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}@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){.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"] });
|
|
6022
|
+
}
|
|
6023
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbClassic, decorators: [{
|
|
6024
|
+
type: Component,
|
|
6025
|
+
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 item.label; let last = $last) {\n <li class=\"breadcrumb__item\">\n @if (!last && item.url) {\n <button\n class=\"breadcrumb__link\"\n type=\"button\"\n (click)=\"navigate.emit(item)\"\n >{{ item.label }}</button>\n } @else {\n <span class=\"breadcrumb__current\" [attr.aria-current]=\"last ? 'page' : null\">{{ item.label }}</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-neo-ink: var(--dd-gray-0);--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}.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;margin:0;padding:0;list-style: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}@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){.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"] }]
|
|
6026
|
+
}], 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"] }] } });
|
|
6027
|
+
|
|
6028
|
+
class DuckDevBreadcrumbNeobrutal {
|
|
6029
|
+
items = input.required({ ...(ngDevMode ? { debugName: "items" } : {}) });
|
|
6030
|
+
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
6031
|
+
navigate = output();
|
|
6032
|
+
breadcrumbStyle = computed(() => this.getPalette(this.color()), { ...(ngDevMode ? { debugName: "breadcrumbStyle" } : {}) });
|
|
6033
|
+
getPalette(color) {
|
|
6034
|
+
switch (color) {
|
|
6035
|
+
case AccentEnumColor.Violet:
|
|
6036
|
+
return {
|
|
6037
|
+
'--neo-bc-surface': 'var(--dd-base-secondary)',
|
|
6038
|
+
'--neo-bc-text': 'var(--dd-base-0)',
|
|
6039
|
+
'--neo-bc-link': 'var(--dd-base-accent-yellow)',
|
|
6040
|
+
'--neo-bc-separator': 'var(--dd-base-accent-pink)',
|
|
6041
|
+
'--neo-bc-shadow': 'var(--dd-base-accent-blue)',
|
|
6042
|
+
'--neo-bc-active': 'var(--dd-base-0)',
|
|
6043
|
+
};
|
|
6044
|
+
case AccentEnumColor.Orange:
|
|
6045
|
+
return {
|
|
6046
|
+
'--neo-bc-surface': 'var(--dd-base-accent-orange)',
|
|
6047
|
+
'--neo-bc-text': 'var(--dd-base-600)',
|
|
6048
|
+
'--neo-bc-link': 'var(--dd-base-600)',
|
|
6049
|
+
'--neo-bc-separator': 'var(--dd-base-accent-yellow)',
|
|
6050
|
+
'--neo-bc-shadow': 'var(--dd-base-accent-yellow)',
|
|
6051
|
+
'--neo-bc-active': 'var(--dd-base-600)',
|
|
6052
|
+
};
|
|
6053
|
+
case AccentEnumColor.Gray:
|
|
6054
|
+
return {
|
|
6055
|
+
'--neo-bc-surface': 'var(--dd-base-200)',
|
|
6056
|
+
'--neo-bc-text': 'var(--dd-base-600)',
|
|
6057
|
+
'--neo-bc-link': 'var(--dd-base-accent-blue)',
|
|
6058
|
+
'--neo-bc-separator': 'var(--dd-base-accent-orange)',
|
|
6059
|
+
'--neo-bc-shadow': 'var(--dd-base-400)',
|
|
6060
|
+
'--neo-bc-active': 'var(--dd-base-600)',
|
|
6061
|
+
};
|
|
6062
|
+
case AccentEnumColor.Dark:
|
|
6063
|
+
return {
|
|
6064
|
+
'--neo-bc-surface': 'var(--dd-base-600)',
|
|
6065
|
+
'--neo-bc-text': 'var(--dd-base-0)',
|
|
6066
|
+
'--neo-bc-link': 'var(--dd-base-accent-yellow)',
|
|
6067
|
+
'--neo-bc-separator': 'var(--dd-base-accent-orange)',
|
|
6068
|
+
'--neo-bc-shadow': 'var(--dd-base-secondary)',
|
|
6069
|
+
'--neo-bc-active': 'var(--dd-base-0)',
|
|
6070
|
+
};
|
|
6071
|
+
case AccentEnumColor.White:
|
|
6072
|
+
default:
|
|
6073
|
+
return {
|
|
6074
|
+
'--neo-bc-surface': 'var(--dd-base-0)',
|
|
6075
|
+
'--neo-bc-text': 'var(--dd-base-600)',
|
|
6076
|
+
'--neo-bc-link': 'var(--dd-base-accent-blue)',
|
|
6077
|
+
'--neo-bc-separator': 'var(--dd-base-accent-orange)',
|
|
6078
|
+
'--neo-bc-shadow': 'var(--dd-base-accent-blue)',
|
|
6079
|
+
'--neo-bc-active': 'var(--dd-base-600)',
|
|
6080
|
+
};
|
|
6081
|
+
}
|
|
6082
|
+
}
|
|
6083
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6084
|
+
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 } }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<nav class=\"neo-bc\" aria-label=\"Breadcrumb\" [ngStyle]=\"breadcrumbStyle()\">\n <ol class=\"neo-bc__list\">\n @for (item of items(); track item.label; let last = $last; let i = $index) {\n <li class=\"neo-bc__item\">\n @if (!last && item.url) {\n <button\n class=\"neo-bc__link\"\n type=\"button\"\n (click)=\"navigate.emit(item)\"\n >\n <span class=\"neo-bc__chip\">{{ item.label }}</span>\n </button>\n } @else {\n <span class=\"neo-bc__current\" [attr.aria-current]=\"last ? 'page' : null\">\n <span class=\"neo-bc__chip neo-bc__chip--active\">{{ item.label }}</span>\n </span>\n }\n @if (!last) {\n <span class=\"neo-bc__arrow\" aria-hidden=\"true\"></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-neo-ink: var(--dd-gray-0);--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}.neo-bc{display:inline-flex;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)}.neo-bc__list{display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;margin:0;padding:0;list-style:none}.neo-bc__item{display:inline-flex;align-items:center;min-width:0}.neo-bc__chip{display:inline-block;max-width:180px;padding:6px 12px;border:2px solid var(--dd-neo-ink);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;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__link{display:inline-flex;padding:0;border:none;background:transparent;font:inherit;cursor:pointer}.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__chip--active{background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin:0 8px;border-style:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent var(--neo-bc-separator)}@media(max-width:768px){.neo-bc{padding:8px 10px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{max-width:150px;padding:5px 10px;font-size:.72rem}.neo-bc__arrow{margin:0 6px;border-width:5px 0 5px 7px}}@media(max-width:480px){.neo-bc{display:flex;padding:8px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__list{row-gap:6px}.neo-bc__chip{max-width:110px;padding:6px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__arrow{margin:0 4px;border-width:4px 0 4px 6px}}@media(max-width:360px){.neo-bc{padding:6px}.neo-bc__chip{max-width:80px;padding:5px 6px;font-size:.62rem;letter-spacing:.03em}.neo-bc__arrow{margin:0 3px;border-width:3px 0 3px 5px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
6085
|
+
}
|
|
6086
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, decorators: [{
|
|
6087
|
+
type: Component,
|
|
6088
|
+
args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<nav class=\"neo-bc\" aria-label=\"Breadcrumb\" [ngStyle]=\"breadcrumbStyle()\">\n <ol class=\"neo-bc__list\">\n @for (item of items(); track item.label; let last = $last; let i = $index) {\n <li class=\"neo-bc__item\">\n @if (!last && item.url) {\n <button\n class=\"neo-bc__link\"\n type=\"button\"\n (click)=\"navigate.emit(item)\"\n >\n <span class=\"neo-bc__chip\">{{ item.label }}</span>\n </button>\n } @else {\n <span class=\"neo-bc__current\" [attr.aria-current]=\"last ? 'page' : null\">\n <span class=\"neo-bc__chip neo-bc__chip--active\">{{ item.label }}</span>\n </span>\n }\n @if (!last) {\n <span class=\"neo-bc__arrow\" aria-hidden=\"true\"></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-neo-ink: var(--dd-gray-0);--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}.neo-bc{display:inline-flex;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)}.neo-bc__list{display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;margin:0;padding:0;list-style:none}.neo-bc__item{display:inline-flex;align-items:center;min-width:0}.neo-bc__chip{display:inline-block;max-width:180px;padding:6px 12px;border:2px solid var(--dd-neo-ink);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;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__link{display:inline-flex;padding:0;border:none;background:transparent;font:inherit;cursor:pointer}.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__chip--active{background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin:0 8px;border-style:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent var(--neo-bc-separator)}@media(max-width:768px){.neo-bc{padding:8px 10px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{max-width:150px;padding:5px 10px;font-size:.72rem}.neo-bc__arrow{margin:0 6px;border-width:5px 0 5px 7px}}@media(max-width:480px){.neo-bc{display:flex;padding:8px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__list{row-gap:6px}.neo-bc__chip{max-width:110px;padding:6px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__arrow{margin:0 4px;border-width:4px 0 4px 6px}}@media(max-width:360px){.neo-bc{padding:6px}.neo-bc__chip{max-width:80px;padding:5px 6px;font-size:.62rem;letter-spacing:.03em}.neo-bc__arrow{margin:0 3px;border-width:3px 0 3px 5px}}\n"] }]
|
|
6089
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }] } });
|
|
6090
|
+
|
|
6091
|
+
class BreadcrumbBlock {
|
|
6092
|
+
colorViolet = AccentEnumColor.Violet;
|
|
6093
|
+
colorOrange = AccentEnumColor.Orange;
|
|
6094
|
+
colorDark = AccentEnumColor.Dark;
|
|
6095
|
+
basicItems = [
|
|
6096
|
+
{ label: 'Home', url: '/' },
|
|
6097
|
+
{ label: 'Components', url: '/components' },
|
|
6098
|
+
{ label: 'Breadcrumb' },
|
|
6099
|
+
];
|
|
6100
|
+
longItems = [
|
|
6101
|
+
{ label: 'Home', url: '/' },
|
|
6102
|
+
{ label: 'Library', url: '/library' },
|
|
6103
|
+
{ label: 'Components', url: '/components' },
|
|
6104
|
+
{ label: 'Navigation', url: '/navigation' },
|
|
6105
|
+
{ label: 'Breadcrumb' },
|
|
6106
|
+
];
|
|
6107
|
+
lastNavigated = signal('', { ...(ngDevMode ? { debugName: "lastNavigated" } : {}) });
|
|
6108
|
+
onNavigate(item) {
|
|
6109
|
+
this.lastNavigated.set(item.label);
|
|
6110
|
+
}
|
|
6111
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BreadcrumbBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6112
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BreadcrumbBlock, isStandalone: true, selector: "app-breadcrumb-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-breadcrumb-classic\n [items]=\"breadcrumbs\"\n (navigate)=\"onNavigate($event)\"\n/>\n\n<dd-breadcrumb-neobrutal\n [items]=\"breadcrumbs\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n <dd-breadcrumb-classic\n [items]=\"basicItems\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n <dd-breadcrumb-classic\n [items]=\"longItems\"\n separator=\">\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"longItems\"\n [color]=\"colorOrange\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorDark\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n @if (lastNavigated()) {\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n <b>{{ lastNavigated() }}</b>\n </div>\n }\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.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:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;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:left}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.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: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevBreadcrumbClassic, selector: "dd-breadcrumb-classic", inputs: ["items", "separator"], outputs: ["navigate"] }, { kind: "component", type: DuckDevBreadcrumbNeobrutal, selector: "dd-breadcrumb-neobrutal", inputs: ["items", "color"], outputs: ["navigate"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6113
|
+
}
|
|
6114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BreadcrumbBlock, decorators: [{
|
|
6115
|
+
type: Component,
|
|
6116
|
+
args: [{ selector: 'app-breadcrumb-block', standalone: true, imports: [TranslocoPipe, DuckDevCardSection, DuckDevBreadcrumbClassic, DuckDevBreadcrumbNeobrutal], template: "<div class=\"demo-container\">\n <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-breadcrumb-classic\n [items]=\"breadcrumbs\"\n (navigate)=\"onNavigate($event)\"\n/>\n\n<dd-breadcrumb-neobrutal\n [items]=\"breadcrumbs\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n <dd-breadcrumb-classic\n [items]=\"basicItems\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n <dd-breadcrumb-classic\n [items]=\"longItems\"\n separator=\">\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"longItems\"\n [color]=\"colorOrange\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorDark\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n @if (lastNavigated()) {\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n <b>{{ lastNavigated() }}</b>\n </div>\n }\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.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:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;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:left}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
6117
|
+
}] });
|
|
6118
|
+
|
|
6016
6119
|
class MainDocumentationPage {
|
|
6017
6120
|
translocoService = inject(TranslocoService);
|
|
6018
6121
|
title = signal('demo', { ...(ngDevMode ? { debugName: "title" } : {}) });
|
|
@@ -6033,6 +6136,7 @@ class MainDocumentationPage {
|
|
|
6033
6136
|
{ id: 'notifications', label: this.translocoService.translate('tabs.notifications') },
|
|
6034
6137
|
{ id: 'segment', label: this.translocoService.translate('tabs.segment') },
|
|
6035
6138
|
{ id: 'slider', label: this.translocoService.translate('tabs.slider') },
|
|
6139
|
+
{ id: 'breadcrumb', label: this.translocoService.translate('tabs.breadcrumb') },
|
|
6036
6140
|
{ id: 'svg', label: this.translocoService.translate('tabs.svg') },
|
|
6037
6141
|
];
|
|
6038
6142
|
activeTab = signal(this.tabs[0], { ...(ngDevMode ? { debugName: "activeTab" } : {}) });
|
|
@@ -6040,7 +6144,7 @@ class MainDocumentationPage {
|
|
|
6040
6144
|
this.activeTab.set(tab);
|
|
6041
6145
|
}
|
|
6042
6146
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6043
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('quick-start') {\n <app-quick-start-block />\n }\n @case ('accordion') {\n <app-accordion-block />\n }\n @case ('buttons') {\n <app-button-block />\n }\n @case ('loaders') {\n <app-loader-block />\n }\n @case ('progress') {\n <app-progress-bar-block />\n }\n @case ('tabs') {\n <app-tabs-block />\n }\n @case ('tooltip') {\n <app-tooltip-block />\n }\n @case ('badge') {\n <app-badge-block />\n }\n @case ('directives') {\n <app-directive-block />\n }\n @case ('card') {\n <app-card-block />\n }\n @case ('speaker-bubble') {\n <app-speaker-bubble-block />\n }\n @case ('modal') {\n <app-modal-block />\n }\n @case ('input') {\n <app-input-block />\n }\n @case ('notifications') {\n <app-notification-block />\n }\n @case ('slider') {\n <app-slider-block />\n }\n @case ('segment') {\n <app-segment-block />\n }\n @case ('svg') {\n <app-duck-dev-svg-block />\n }\n }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }, { kind: "component", type: TooltipBlock, selector: "app-tooltip-block" }, { kind: "component", type: QuickStartBlock, selector: "app-quick-start-block" }, { kind: "component", type: ModalBlock, selector: "app-modal-block" }, { kind: "component", type: SegmentBlock, selector: "app-segment-block" }, { kind: "component", type: ProgressBarBlock, selector: "app-progress-bar-block" }, { kind: "component", type: SpeakerBubbleBlock, selector: "app-speaker-bubble-block" }] });
|
|
6147
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('quick-start') {\n <app-quick-start-block />\n }\n @case ('accordion') {\n <app-accordion-block />\n }\n @case ('buttons') {\n <app-button-block />\n }\n @case ('loaders') {\n <app-loader-block />\n }\n @case ('progress') {\n <app-progress-bar-block />\n }\n @case ('tabs') {\n <app-tabs-block />\n }\n @case ('tooltip') {\n <app-tooltip-block />\n }\n @case ('badge') {\n <app-badge-block />\n }\n @case ('directives') {\n <app-directive-block />\n }\n @case ('card') {\n <app-card-block />\n }\n @case ('speaker-bubble') {\n <app-speaker-bubble-block />\n }\n @case ('modal') {\n <app-modal-block />\n }\n @case ('input') {\n <app-input-block />\n }\n @case ('notifications') {\n <app-notification-block />\n }\n @case ('slider') {\n <app-slider-block />\n }\n @case ('segment') {\n <app-segment-block />\n }\n @case ('breadcrumb') {\n <app-breadcrumb-block />\n }\n @case ('svg') {\n <app-duck-dev-svg-block />\n }\n }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }, { kind: "component", type: TooltipBlock, selector: "app-tooltip-block" }, { kind: "component", type: QuickStartBlock, selector: "app-quick-start-block" }, { kind: "component", type: ModalBlock, selector: "app-modal-block" }, { kind: "component", type: SegmentBlock, selector: "app-segment-block" }, { kind: "component", type: ProgressBarBlock, selector: "app-progress-bar-block" }, { kind: "component", type: SpeakerBubbleBlock, selector: "app-speaker-bubble-block" }, { kind: "component", type: BreadcrumbBlock, selector: "app-breadcrumb-block" }] });
|
|
6044
6148
|
}
|
|
6045
6149
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
|
|
6046
6150
|
type: Component,
|
|
@@ -6064,12 +6168,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6064
6168
|
SegmentBlock,
|
|
6065
6169
|
ProgressBarBlock,
|
|
6066
6170
|
SpeakerBubbleBlock,
|
|
6067
|
-
|
|
6171
|
+
BreadcrumbBlock,
|
|
6172
|
+
], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('quick-start') {\n <app-quick-start-block />\n }\n @case ('accordion') {\n <app-accordion-block />\n }\n @case ('buttons') {\n <app-button-block />\n }\n @case ('loaders') {\n <app-loader-block />\n }\n @case ('progress') {\n <app-progress-bar-block />\n }\n @case ('tabs') {\n <app-tabs-block />\n }\n @case ('tooltip') {\n <app-tooltip-block />\n }\n @case ('badge') {\n <app-badge-block />\n }\n @case ('directives') {\n <app-directive-block />\n }\n @case ('card') {\n <app-card-block />\n }\n @case ('speaker-bubble') {\n <app-speaker-bubble-block />\n }\n @case ('modal') {\n <app-modal-block />\n }\n @case ('input') {\n <app-input-block />\n }\n @case ('notifications') {\n <app-notification-block />\n }\n @case ('slider') {\n <app-slider-block />\n }\n @case ('segment') {\n <app-segment-block />\n }\n @case ('breadcrumb') {\n <app-breadcrumb-block />\n }\n @case ('svg') {\n <app-duck-dev-svg-block />\n }\n }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
|
|
6068
6173
|
}] });
|
|
6069
6174
|
|
|
6070
6175
|
const DuckDevLibTranslations = {
|
|
6071
|
-
en: import('./duck-dev-lib-en-
|
|
6072
|
-
ru: import('./duck-dev-lib-ru-
|
|
6176
|
+
en: import('./duck-dev-lib-en-DgK5cRp6.mjs'),
|
|
6177
|
+
ru: import('./duck-dev-lib-ru-BB2sTH34.mjs'),
|
|
6073
6178
|
};
|
|
6074
6179
|
|
|
6075
6180
|
/*
|
|
@@ -6080,5 +6185,5 @@ const DuckDevLibTranslations = {
|
|
|
6080
6185
|
* Generated bundle index. Do not edit.
|
|
6081
6186
|
*/
|
|
6082
6187
|
|
|
6083
|
-
export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalSticker, ButtonNeobrutalTag, ButtonNeobrutalTape, ButtonNeobrutalZigzag, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevSegmentButton, DuckDevSegmentClassic, DuckDevSegmentNeobrutal, DuckDevSpeakerBubbleClassic, DuckDevSpeakerBubbleNeobrutalSlab, DuckDevSpeakerBubbleNeobrutalTicket, DuckDevSpeakerBubbleOutline, DuckDevSpeakerBubbleSoft, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic, getClassicSpeakerBubbleStyle, getNeobrutalSpeakerBubbleStyle, useSpeakerBubbleTail };
|
|
6188
|
+
export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalSticker, ButtonNeobrutalTag, ButtonNeobrutalTape, ButtonNeobrutalZigzag, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevBreadcrumbClassic, DuckDevBreadcrumbNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevSegmentButton, DuckDevSegmentClassic, DuckDevSegmentNeobrutal, DuckDevSpeakerBubbleClassic, DuckDevSpeakerBubbleNeobrutalSlab, DuckDevSpeakerBubbleNeobrutalTicket, DuckDevSpeakerBubbleOutline, DuckDevSpeakerBubbleSoft, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic, getClassicSpeakerBubbleStyle, getNeobrutalSpeakerBubbleStyle, useSpeakerBubbleTail };
|
|
6084
6189
|
//# sourceMappingURL=duck-dev-lib.mjs.map
|