duck-dev-lib 0.0.20 → 0.0.21
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-DAAX9t8H.mjs → duck-dev-lib-en-G203o4VW.mjs} +65 -3
- package/fesm2022/{duck-dev-lib-en-DAAX9t8H.mjs.map → duck-dev-lib-en-G203o4VW.mjs.map} +1 -1
- package/fesm2022/{duck-dev-lib-ru-8qXt3ziq.mjs → duck-dev-lib-ru-DY4qccwH.mjs} +65 -3
- package/fesm2022/{duck-dev-lib-ru-8qXt3ziq.mjs.map → duck-dev-lib-ru-DY4qccwH.mjs.map} +1 -1
- package/fesm2022/duck-dev-lib.mjs +470 -579
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/duck-dev-lib.d.ts +67 -3
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, Component, output, signal, viewChildren, effect, inject } from '@angular/core';
|
|
2
|
+
import { input, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef } from '@angular/core';
|
|
3
3
|
import { CommonModule } from '@angular/common';
|
|
4
|
-
import
|
|
4
|
+
import * as i1$2 from '@jsverse/transloco';
|
|
5
|
+
import { TranslocoPipe, TranslocoModule, TranslocoService } from '@jsverse/transloco';
|
|
5
6
|
import * as i1 from '@angular/forms';
|
|
6
7
|
import { ReactiveFormsModule } from '@angular/forms';
|
|
7
8
|
import * as i1$1 from '@angular/platform-browser';
|
|
@@ -93,11 +94,11 @@ class ButtonBlurLift {
|
|
|
93
94
|
return hover ? hover.split('').map((char) => (char === ' ' ? '\u00A0' : char)) : [];
|
|
94
95
|
}, { ...(ngDevMode ? { debugName: "hoverTextLetters" } : {}) });
|
|
95
96
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlurLift, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
96
|
-
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\n type=\"button\"\n class=\"rounded-button rounded-button--blur-lift\"\n [style]=\"buttonStyle()\"\n>\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span\n aria-hidden=\"true\"\n class=\"button-blur-lift__container\"\n >\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__letter\"\n >\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\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__hover-letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__hover-letter\"\n >\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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}: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"] });
|
|
97
|
+
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\n type=\"button\"\n class=\"rounded-button rounded-button--blur-lift\"\n [style]=\"buttonStyle()\"\n>\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span\n aria-hidden=\"true\"\n class=\"button-blur-lift__container\"\n >\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__letter\"\n >\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\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__hover-letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__hover-letter\"\n >\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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"] });
|
|
97
98
|
}
|
|
98
99
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlurLift, decorators: [{
|
|
99
100
|
type: Component,
|
|
100
|
-
args: [{ selector: 'duck-dev-button-blur-lift', imports: [], template: "<button\n type=\"button\"\n class=\"rounded-button rounded-button--blur-lift\"\n [style]=\"buttonStyle()\"\n>\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span\n aria-hidden=\"true\"\n class=\"button-blur-lift__container\"\n >\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__letter\"\n >\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\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__hover-letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__hover-letter\"\n >\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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}: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"] }]
|
|
101
|
+
args: [{ selector: 'duck-dev-button-blur-lift', imports: [], template: "<button\n type=\"button\"\n class=\"rounded-button rounded-button--blur-lift\"\n [style]=\"buttonStyle()\"\n>\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span\n aria-hidden=\"true\"\n class=\"button-blur-lift__container\"\n >\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__letter\"\n >\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\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__hover-letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__hover-letter\"\n >\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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"] }]
|
|
101
102
|
}], 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 }] }] } });
|
|
102
103
|
|
|
103
104
|
class ButtonGlideOver {
|
|
@@ -168,11 +169,11 @@ class ButtonGlideOver {
|
|
|
168
169
|
};
|
|
169
170
|
}, { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
170
171
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonGlideOver, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
171
|
-
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\n type=\"button\"\n class=\"rounded-button rounded-button--glide-over\"\n [style]=\"buttonStyle()\"\n>\n<span class=\"button-glide-over__container\">\n <span class=\"button-glide-over__icon is-first\">\n <svg\n class=\"button-glide-over__icon-item\"\n style=\"--index: 3\"\n viewBox=\"0 0 256 256\"\n >\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\n class=\"button-glide-over__icon-item\"\n style=\"--index: 0\"\n viewBox=\"0 0 256 256\"\n >\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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}: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"] });
|
|
172
|
+
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\n type=\"button\"\n class=\"rounded-button rounded-button--glide-over\"\n [style]=\"buttonStyle()\"\n>\n<span class=\"button-glide-over__container\">\n <span class=\"button-glide-over__icon is-first\">\n <svg\n class=\"button-glide-over__icon-item\"\n style=\"--index: 3\"\n viewBox=\"0 0 256 256\"\n >\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\n class=\"button-glide-over__icon-item\"\n style=\"--index: 0\"\n viewBox=\"0 0 256 256\"\n >\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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"] });
|
|
172
173
|
}
|
|
173
174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonGlideOver, decorators: [{
|
|
174
175
|
type: Component,
|
|
175
|
-
args: [{ selector: 'duck-dev-button-glide-over', standalone: true, imports: [], template: "<button\n type=\"button\"\n class=\"rounded-button rounded-button--glide-over\"\n [style]=\"buttonStyle()\"\n>\n<span class=\"button-glide-over__container\">\n <span class=\"button-glide-over__icon is-first\">\n <svg\n class=\"button-glide-over__icon-item\"\n style=\"--index: 3\"\n viewBox=\"0 0 256 256\"\n >\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\n class=\"button-glide-over__icon-item\"\n style=\"--index: 0\"\n viewBox=\"0 0 256 256\"\n >\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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}: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"] }]
|
|
176
|
+
args: [{ selector: 'duck-dev-button-glide-over', standalone: true, imports: [], template: "<button\n type=\"button\"\n class=\"rounded-button rounded-button--glide-over\"\n [style]=\"buttonStyle()\"\n>\n<span class=\"button-glide-over__container\">\n <span class=\"button-glide-over__icon is-first\">\n <svg\n class=\"button-glide-over__icon-item\"\n style=\"--index: 3\"\n viewBox=\"0 0 256 256\"\n >\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\n class=\"button-glide-over__icon-item\"\n style=\"--index: 0\"\n viewBox=\"0 0 256 256\"\n >\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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"] }]
|
|
176
177
|
}], 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 }] }] } });
|
|
177
178
|
|
|
178
179
|
class ButtonFlip {
|
|
@@ -225,29 +226,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
225
226
|
|
|
226
227
|
class LoaderLoadingBubble {
|
|
227
228
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
228
|
-
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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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:70px;bottom:10px;height:28px;width:5.15px;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"] });
|
|
229
|
+
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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:70px;bottom:10px;height:28px;width:5.15px;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"] });
|
|
229
230
|
}
|
|
230
231
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, decorators: [{
|
|
231
232
|
type: Component,
|
|
232
|
-
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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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:70px;bottom:10px;height:28px;width:5.15px;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"] }]
|
|
233
|
+
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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:70px;bottom:10px;height:28px;width:5.15px;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"] }]
|
|
233
234
|
}] });
|
|
234
235
|
|
|
235
236
|
class LoaderClassic {
|
|
236
237
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
237
|
-
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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] });
|
|
238
|
+
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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"] });
|
|
238
239
|
}
|
|
239
240
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderClassic, decorators: [{
|
|
240
241
|
type: Component,
|
|
241
|
-
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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] }]
|
|
242
|
+
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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"] }]
|
|
242
243
|
}] });
|
|
243
244
|
|
|
244
245
|
class LoaderThreeDots {
|
|
245
246
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderThreeDots, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
246
|
-
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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] });
|
|
247
|
+
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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"] });
|
|
247
248
|
}
|
|
248
249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderThreeDots, decorators: [{
|
|
249
250
|
type: Component,
|
|
250
|
-
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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] }]
|
|
251
|
+
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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"] }]
|
|
251
252
|
}] });
|
|
252
253
|
|
|
253
254
|
class DuckDevTab {
|
|
@@ -268,11 +269,11 @@ class DuckDevTab {
|
|
|
268
269
|
return this.activeTabIndex() === index;
|
|
269
270
|
}
|
|
270
271
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
271
|
-
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\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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 }] });
|
|
272
|
+
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\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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 }] });
|
|
272
273
|
}
|
|
273
274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTab, decorators: [{
|
|
274
275
|
type: Component,
|
|
275
|
-
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\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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"] }]
|
|
276
|
+
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\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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"] }]
|
|
276
277
|
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
|
|
277
278
|
|
|
278
279
|
class DuckDevTabVertical {
|
|
@@ -315,11 +316,11 @@ class DuckDevTabVertical {
|
|
|
315
316
|
return this.activeTabIndex() === index;
|
|
316
317
|
}
|
|
317
318
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
318
|
-
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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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}.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%;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(8px)}50%{filter:blur(4px)}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 }] });
|
|
319
|
+
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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}.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%;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(8px)}50%{filter:blur(4px)}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 }] });
|
|
319
320
|
}
|
|
320
321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, decorators: [{
|
|
321
322
|
type: Component,
|
|
322
|
-
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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.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}.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%;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(8px)}50%{filter:blur(4px)}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"] }]
|
|
323
|
+
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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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}.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%;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(8px)}50%{filter:blur(4px)}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"] }]
|
|
323
324
|
}], 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 }] }] } });
|
|
324
325
|
|
|
325
326
|
class ButtonBlock {
|
|
@@ -329,7 +330,7 @@ class ButtonBlock {
|
|
|
329
330
|
colorGray = ButtonEnumColor.Gray;
|
|
330
331
|
colorDark = ButtonEnumColor.Dark;
|
|
331
332
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
332
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ButtonBlock, isStandalone: true, selector: "app-button-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'buttons.title' | transloco }}</h1>\n\n <!-- Button Glide Over -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.glideOver.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-glide-over\n textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n <ul>\n <li><strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) - {{ 'buttons.glideOver.inputTextButton' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}</li>\n <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Blur Lift -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.blurLift.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-blur-lift\n textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n <ul>\n <li><strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) - {{ 'buttons.blurLift.inputTextButton' | transloco }}</li>\n <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}</li>\n <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Click Me\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Gray Button\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Dark Button\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Color Flip -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.flip.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.flip.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-flip\n [text]=\"'Text'\"\n [colorButton]=\"buttonColor\"\n [disabled]=\"false\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.flip.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.flip.inputText' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.flip.inputColorButton' | transloco }}</li>\n <li><strong>disabled</strong> - {{ 'buttons.flip.inputDisabled' | transloco }}</li>\n <li><strong>direction</strong> - {{ 'buttons.flip.inputDirection' | transloco }}</li>\n <li><strong>arrowIndex</strong> - {{ 'buttons.flip.inputArrowIndex' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleWhite' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleViolet' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Violet Button'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleOrange' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Orange Button'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleGray' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Gray Button'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleDark' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Dark Button'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.examplePrev' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Prev'\" [direction]=\"'previous'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleNext' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\n </div>\n </div>\n </div>\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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding: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 .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-button-glide-over,.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@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: 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: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
333
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ButtonBlock, isStandalone: true, selector: "app-button-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'buttons.title' | transloco }}</h1>\n\n <!-- Button Glide Over -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.glideOver.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-glide-over\n textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n <ul>\n <li><strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) - {{ 'buttons.glideOver.inputTextButton' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}</li>\n <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Blur Lift -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.blurLift.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-blur-lift\n textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n <ul>\n <li><strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) - {{ 'buttons.blurLift.inputTextButton' | transloco }}</li>\n <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}</li>\n <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Click Me\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Gray Button\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Dark Button\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Color Flip -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.flip.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.flip.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-flip\n [text]=\"'Text'\"\n [colorButton]=\"buttonColor\"\n [disabled]=\"false\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.flip.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.flip.inputText' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.flip.inputColorButton' | transloco }}</li>\n <li><strong>disabled</strong> - {{ 'buttons.flip.inputDisabled' | transloco }}</li>\n <li><strong>direction</strong> - {{ 'buttons.flip.inputDirection' | transloco }}</li>\n <li><strong>arrowIndex</strong> - {{ 'buttons.flip.inputArrowIndex' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleWhite' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleViolet' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Violet Button'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleOrange' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Orange Button'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleGray' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Gray Button'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleDark' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Dark Button'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.examplePrev' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Prev'\" [direction]=\"'previous'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleNext' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\n </div>\n </div>\n </div>\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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: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 .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-button-glide-over,.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@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: 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: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
333
334
|
}
|
|
334
335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, decorators: [{
|
|
335
336
|
type: Component,
|
|
@@ -338,12 +339,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
338
339
|
ButtonGlideOver,
|
|
339
340
|
TranslocoPipe,
|
|
340
341
|
ButtonFlip
|
|
341
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'buttons.title' | transloco }}</h1>\n\n <!-- Button Glide Over -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.glideOver.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-glide-over\n textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n <ul>\n <li><strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) - {{ 'buttons.glideOver.inputTextButton' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}</li>\n <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Blur Lift -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.blurLift.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-blur-lift\n textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n <ul>\n <li><strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) - {{ 'buttons.blurLift.inputTextButton' | transloco }}</li>\n <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}</li>\n <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Click Me\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Gray Button\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Dark Button\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Color Flip -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.flip.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.flip.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-flip\n [text]=\"'Text'\"\n [colorButton]=\"buttonColor\"\n [disabled]=\"false\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.flip.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.flip.inputText' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.flip.inputColorButton' | transloco }}</li>\n <li><strong>disabled</strong> - {{ 'buttons.flip.inputDisabled' | transloco }}</li>\n <li><strong>direction</strong> - {{ 'buttons.flip.inputDirection' | transloco }}</li>\n <li><strong>arrowIndex</strong> - {{ 'buttons.flip.inputArrowIndex' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleWhite' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleViolet' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Violet Button'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleOrange' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Orange Button'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleGray' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Gray Button'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleDark' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Dark Button'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.examplePrev' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Prev'\" [direction]=\"'previous'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleNext' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\n </div>\n </div>\n </div>\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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding: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 .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-button-glide-over,.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@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"] }]
|
|
342
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'buttons.title' | transloco }}</h1>\n\n <!-- Button Glide Over -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.glideOver.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-glide-over\n textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n <ul>\n <li><strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) - {{ 'buttons.glideOver.inputTextButton' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}</li>\n <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Blur Lift -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.blurLift.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-blur-lift\n textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n [colorButton]=\"buttonColor\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n <ul>\n <li><strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) - {{ 'buttons.blurLift.inputTextButton' | transloco }}</li>\n <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}</li>\n <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Click Me\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Gray Button\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n <duck-dev-button-blur-lift textButton=\"Dark Button\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Button Color Flip -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.flip.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.flip.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-flip\n [text]=\"'Text'\"\n [colorButton]=\"buttonColor\"\n [disabled]=\"false\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.flip.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.flip.inputText' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.flip.inputColorButton' | transloco }}</li>\n <li><strong>disabled</strong> - {{ 'buttons.flip.inputDisabled' | transloco }}</li>\n <li><strong>direction</strong> - {{ 'buttons.flip.inputDirection' | transloco }}</li>\n <li><strong>arrowIndex</strong> - {{ 'buttons.flip.inputArrowIndex' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleWhite' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleViolet' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Violet Button'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleOrange' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Orange Button'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleGray' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Gray Button'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleDark' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Dark Button'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.examplePrev' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Prev'\" [direction]=\"'previous'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.flip.exampleNext' | transloco }}</p>\n <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\n </div>\n </div>\n </div>\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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: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 .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-button-glide-over,.demo-container .component-section .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@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"] }]
|
|
342
343
|
}] });
|
|
343
344
|
|
|
344
345
|
class LoaderBlock {
|
|
345
346
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
346
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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\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</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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item lib-loader-three-dots{display:flex;justify-content:center;align-items:center}@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: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
347
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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\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</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item lib-loader-three-dots{display:flex;justify-content:center;align-items:center}@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: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
347
348
|
}
|
|
348
349
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, decorators: [{
|
|
349
350
|
type: Component,
|
|
@@ -352,41 +353,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
352
353
|
LoaderLoadingBubble,
|
|
353
354
|
LoaderThreeDots,
|
|
354
355
|
TranslocoPipe
|
|
355
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\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</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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item lib-loader-three-dots{display:flex;justify-content:center;align-items:center}@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"] }]
|
|
356
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\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</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item lib-loader-three-dots{display:flex;justify-content:center;align-items:center}@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"] }]
|
|
356
357
|
}] });
|
|
357
358
|
|
|
358
359
|
class TabsBlock {
|
|
359
360
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
360
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n <!-- Duck Dev Tab -->\n <section class=\"component-section\">\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'tabsComponent.tab.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n <ul>\n <li><strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) - {{ 'tabsComponent.tab.inputTabs' | transloco }}\n <ul>\n <li><strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}</li>\n <li><strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}</li>\n <li><strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) - {{ 'tabsComponent.tab.inputTabsContent' | transloco }}</li>\n </ul>\n </li>\n </ul>\n </div>\n\n <div class=\"outputs-block\">\n <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n <ul>\n <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n <ul>\n <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n </ul>\n </div>\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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}@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}}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
361
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n <!-- Duck Dev Tab -->\n <section class=\"component-section\">\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'tabsComponent.tab.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n <ul>\n <li><strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) - {{ 'tabsComponent.tab.inputTabs' | transloco }}\n <ul>\n <li><strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}</li>\n <li><strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}</li>\n <li><strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) - {{ 'tabsComponent.tab.inputTabsContent' | transloco }}</li>\n </ul>\n </li>\n </ul>\n </div>\n\n <div class=\"outputs-block\">\n <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n <ul>\n <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n <ul>\n <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n </ul>\n </div>\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}@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}}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
361
362
|
}
|
|
362
363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, decorators: [{
|
|
363
364
|
type: Component,
|
|
364
365
|
args: [{ selector: 'app-tabs-block', imports: [
|
|
365
366
|
TranslocoPipe
|
|
366
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n <!-- Duck Dev Tab -->\n <section class=\"component-section\">\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'tabsComponent.tab.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n <ul>\n <li><strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) - {{ 'tabsComponent.tab.inputTabs' | transloco }}\n <ul>\n <li><strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}</li>\n <li><strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}</li>\n <li><strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) - {{ 'tabsComponent.tab.inputTabsContent' | transloco }}</li>\n </ul>\n </li>\n </ul>\n </div>\n\n <div class=\"outputs-block\">\n <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n <ul>\n <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n <ul>\n <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n </ul>\n </div>\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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}@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}}\n"] }]
|
|
367
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n <!-- Duck Dev Tab -->\n <section class=\"component-section\">\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'tabsComponent.tab.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n <ul>\n <li><strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) - {{ 'tabsComponent.tab.inputTabs' | transloco }}\n <ul>\n <li><strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}</li>\n <li><strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}</li>\n <li><strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) - {{ 'tabsComponent.tab.inputTabsContent' | transloco }}</li>\n </ul>\n </li>\n </ul>\n </div>\n\n <div class=\"outputs-block\">\n <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n <ul>\n <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n <ul>\n <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n </ul>\n </div>\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}@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}}\n"] }]
|
|
367
368
|
}] });
|
|
368
369
|
|
|
369
|
-
const
|
|
370
|
+
const duckDevDockMedium = `
|
|
370
371
|
<svg
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
372
|
+
width="24" height="24" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
373
|
+
<path d="M239.2 419.5l7 394.6h465.7V251.4H396.6v168.1z" fill="#E1F0FF" />
|
|
374
|
+
<path d="M221 395.5h25.2v418.6H221z" fill="#446EB1" />
|
|
375
|
+
<path d="M221 789.8h488.7v24.3H221zM366.7 227.1h342.9v24.3H366.7z" fill="#446EB1" />
|
|
376
|
+
<path d="M687.6 227.1h24.3v98.1h-24.3zM687.6 765h24.3v49h-24.3zM384.6 244.1l-18.1-17L221 394.7l18.1 17 145.5-167.6z" fill="#446EB1" />
|
|
377
|
+
<path d="M372.6 235.1h23.9v167.6h-23.9z" fill="#446EB1" /><path d="M221 395.5h175.6v23.9H221z" fill="#446EB1" />
|
|
378
|
+
<path d="M776.4 570.2c-5.6 0-11.2 0.9-17.1 2.7L719 532.6 825.6 426c5.3-5.3 5.3-14 0-19.3-2.6-2.6-6-4-9.6-4-3.6 0-7.1 1.4-9.6 4L699.7 513.3 593.1 406.7c-2.6-2.6-6-4-9.6-4s-7.1 1.4-9.6 4c-5.3 5.3-5.3 13.9 0 19.3l106.6 106.6-40.3 40.3c-5.9-1.8-11.5-2.7-17.1-2.7-33.2 0-60.3 27-60.3 60.3 0 33.2 27 60.3 60.3 60.3 33.2 0 60.2-27 60.2-60.3 0-16.4-6.8-31.9-18.8-43.4l35.2-35.2 35.3 35.2c-12 11.4-18.8 26.9-18.8 43.4 0 33.2 27 60.3 60.3 60.3 33.2 0 60.3-27 60.3-60.3-0.2-33.2-27.2-60.3-60.4-60.3z m33 60.3c0 18.2-14.8 33-33 33s-33-14.8-33-33 14.8-33 33-33 33 14.8 33 33z m-153.4 0c0 18.2-14.8 33-33 33s-33-14.8-33-33 14.8-33 33-33 33 14.8 33 33z" fill="#6D9EE8" />
|
|
379
|
+
</svg>
|
|
380
|
+
`;
|
|
381
|
+
const duckDevImageMedium = `
|
|
382
|
+
<svg width="24" height="24" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
|
383
|
+
<path d="M212.5 239.8h609.3v516.5H212.5z" fill="#E1F0FF" />
|
|
384
|
+
<path d="M229.5 766l-16.7-16.5 249-261.1 263.5 263.8-16.1 17-246.8-247.4z" fill="#6D9EE8" />
|
|
385
|
+
<path d="M806.8 698.2L636.6 552.4c-20 20.5-58.4 59.9-62.5 63.2l-14.6-18.5-0.1 0.1c4-3.5 43.9-44.3 68.1-69.2l7.6-7.8 186.6 159.9-14.9 18.1z" fill="#6D9EE8" />
|
|
386
|
+
<path d="M610.4 374.5a49.4 50.2 0 1 0 98.8 0 49.4 50.2 0 1 0-98.8 0Z" fill="#6D9EE8" />
|
|
387
|
+
<path d="M808.9 228.5h22.3V772h-22.3zM202.1 228.5h606.8v22.6H202.1z" fill="#446EB1" /><path d="M198.9 228.5h22.3V772h-22.3z" fill="#446EB1" /><path d="M202.1 749.4h606.8V772H202.1z" fill="#446EB1" /></svg>
|
|
388
|
+
`;
|
|
389
|
+
const duckDevWordDockMedium = `
|
|
390
|
+
<svg width="24" height="24" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M227.7 180.4h455.2v22.8H227.7z" fill="#446EB1" /><path d="M666 196.6l17-16.2 136.4 159.4-17 16.2L666 196.6zM227.7 203.2h22.8V795h-22.8z" fill="#446EB1" /><path d="M250.5 203.2v594.7h546.2V363.3H660.2V203.2H250.5z" fill="#E1F0FF" /><path d="M796.7 339.7h22.8v455.2h-22.8zM227.7 794.9h591.8v22.8H227.7z" fill="#446EB1" /><path d="M500.8 430.8h204.8v22.8H500.8zM341.5 521.8h364.2v22.8H341.5zM341.5 612.9h364.2v22.8H341.5zM341.5 703.9h364.2v22.8H341.5z" fill="#6D9EE8" /><path d="M660.2 203.2H683v159.3h-22.8z" fill="#446EB1" /><path d="M682.9 339.7h113.8v22.8H682.9zM442.3 277.3h15.3L440 347.7l-22.8-99h-36.6l-26.5 99-19.9-99H296L334.8 408h37.4l26.2-94.2 23.4 94.2h34.5l44.5-159.3h-58.6v28.6h0.1z" fill="#446EB1" /></svg>`;
|
|
391
|
+
const duckDevPrinterMedium = `
|
|
392
|
+
<svg width="24" height="24" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M418.9 667.6h185.4v20.6H418.9z" fill="#79ACF9" /><path d="M212.9 399.9h20.6v309h-20.6z" fill="#446EB1" /><path d="M233.5 564.6h556.1v20.6H233.5z" fill="#FFFFFF" /><path d="M789.6 399.9h20.6v309h-20.6z" fill="#446EB1" /><path d="M233.5 399.9h576.7v20.6H233.5z" fill="#446EB1" /><path d="M233.5 420.5h556.1v82.4H233.5z" fill="#F8FCFF" /><path d="M233.5 502.8h556.1v82.4H233.5z" fill="#E1F0FF" /><path d="M686.6 441h41.2v41.2h-41.2z" fill="#79ACF9" /><path d="M315.9 255.7h20.6v144.2h-20.6zM707.2 255.7h20.6v144.2h-20.6z" fill="#446EB1" /><path d="M336.5 276.3h370.7v123.6H336.5z" fill="#FFFFFF" /><path d="M336.5 255.7h391.3v20.6H336.5zM274.7 358.7h20.6v41.2h-20.6z" fill="#446EB1" /><path d="M274.7 358.7h41.2v20.6h-41.2zM727.8 358.7H769v20.6h-41.2z" fill="#446EB1" /><path d="M748.4 358.7H769v41.2h-20.6z" fill="#446EB1" /><path d="M233.5 585.2h556.1v20.6H233.5z" fill="#79ACF9" /><path d="M233.5 605.8h556.1v20.6H233.5z" fill="#6D9EE8" /><path d="M233.5 626.4h61.8v61.8h-61.8zM727.8 626.4h61.8v61.8h-61.8zM295.3 626.4h432.5V647H295.3z" fill="#446EB1" /><path d="M212.9 688.2h103v20.6h-103zM707.2 688.2h103v20.6h-103z" fill="#6D9EE8" /><path d="M295.3 647h20.6v144.2h-20.6zM707.2 647h20.6v144.2h-20.6z" fill="#446EB1" /><path d="M315.9 770.6h391.3v20.6H315.9z" fill="#446EB1" /><path d="M398.3 708.8h226.6v20.6H398.3z" fill="#79ACF9" /></svg>
|
|
383
393
|
`;
|
|
384
394
|
const duckDevCheck = `
|
|
385
395
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
386
396
|
<path d="M13.3327 4L5.99935 11.3333L2.66602 8" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
387
397
|
</svg>
|
|
388
398
|
`;
|
|
389
|
-
const
|
|
399
|
+
const duckDevBuildMedium = `
|
|
400
|
+
<svg width="24" height="24" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M418.9 667.6h185.4v20.6H418.9z" fill="#79ACF9" /><path d="M212.9 399.9h20.6v309h-20.6z" fill="#446EB1" /><path d="M233.5 564.6h556.1v20.6H233.5z" fill="#FFFFFF" /><path d="M789.6 399.9h20.6v309h-20.6z" fill="#446EB1" /><path d="M233.5 399.9h576.7v20.6H233.5z" fill="#446EB1" /><path d="M233.5 420.5h556.1v82.4H233.5z" fill="#F8FCFF" /><path d="M233.5 502.8h556.1v82.4H233.5z" fill="#E1F0FF" /><path d="M686.6 441h41.2v41.2h-41.2z" fill="#79ACF9" /><path d="M315.9 255.7h20.6v144.2h-20.6zM707.2 255.7h20.6v144.2h-20.6z" fill="#446EB1" /><path d="M336.5 276.3h370.7v123.6H336.5z" fill="#FFFFFF" /><path d="M336.5 255.7h391.3v20.6H336.5zM274.7 358.7h20.6v41.2h-20.6z" fill="#446EB1" /><path d="M274.7 358.7h41.2v20.6h-41.2zM727.8 358.7H769v20.6h-41.2z" fill="#446EB1" /><path d="M748.4 358.7H769v41.2h-20.6z" fill="#446EB1" /><path d="M233.5 585.2h556.1v20.6H233.5z" fill="#79ACF9" /><path d="M233.5 605.8h556.1v20.6H233.5z" fill="#6D9EE8" /><path d="M233.5 626.4h61.8v61.8h-61.8zM727.8 626.4h61.8v61.8h-61.8zM295.3 626.4h432.5V647H295.3z" fill="#446EB1" /><path d="M212.9 688.2h103v20.6h-103zM707.2 688.2h103v20.6h-103z" fill="#6D9EE8" /><path d="M295.3 647h20.6v144.2h-20.6zM707.2 647h20.6v144.2h-20.6z" fill="#446EB1" /><path d="M315.9 770.6h391.3v20.6H315.9z" fill="#446EB1" /><path d="M398.3 708.8h226.6v20.6H398.3z" fill="#79ACF9" /></svg>
|
|
401
|
+
`;
|
|
402
|
+
const duckDevCheckMedium = `
|
|
390
403
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
391
404
|
<path d="M16.6663 5L7.49967 14.1667L3.33301 10" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
392
405
|
</svg>
|
|
@@ -403,7 +416,10 @@ const duckDevCheckCircle = `
|
|
|
403
416
|
</defs>
|
|
404
417
|
</svg>
|
|
405
418
|
`;
|
|
406
|
-
const
|
|
419
|
+
const duckDevCupMedium = `
|
|
420
|
+
<svg width="24" height="24" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M828.5 180.1h-9.9v-54.7h23.5v-44H182v44h23v54.7h-9.5C123.2 180.1 64 239.2 64 311.5v0.1c0 72.3 59.2 131.5 131.5 131.5h9.6c0 1.3 0.1 2.5 0.1 3.7 0.5 17.7 2.7 35.4 6.2 52.5 17.8 85.7 71.8 160 148.3 204 4.8 2.8 9.8 5.4 14.7 7.9 15.3 7.7 31.2 14.1 47.4 19.2 3.4 1 6.8 2 10.2 2.9v165.2H250.4v44h511.9v-44H591.9V733.4c3.7-1 7.3-2.1 10.9-3.2 16.2-5.1 32.2-11.6 47.4-19.4 5-2.5 10-5.3 14.8-8.1 75.6-43.9 129.2-117.8 147-202.7 3.6-17.2 5.8-34.9 6.3-52.4 0.1-1.5 0.1-3 0.1-4.5h10c72.3 0 131.5-59.2 131.5-131.5v-0.1c0.1-72.3-59.1-131.4-131.4-131.4zM205 399.2h-9.5c-23.2 0-45.1-9.1-61.7-25.7s-25.7-38.5-25.7-61.7v-0.1c0-23.2 9.1-45.2 25.7-61.7 16.6-16.6 38.5-25.7 61.7-25.7h9.5v174.9z m370.9 499.4h-128V737.3c20.9 4.5 42.3 6.8 63.9 6.8 21.7 0 43.1-2.3 64.1-6.8v161.3z m198.7-461.4c0 2.9 0 5.9-0.2 8.9-0.5 15-2.3 30.1-5.4 44.9-15.3 72.7-61.2 136-126.1 173.7-4.1 2.4-8.4 4.7-12.7 6.9-13 6.6-26.7 12.2-40.6 16.6-25.2 7.9-51.4 11.9-77.9 11.9-26.2 0-52.2-3.9-77.1-11.6-13.9-4.3-27.5-9.8-40.6-16.4-4.2-2.1-8.5-4.4-12.6-6.8-65.4-37.8-111.7-101.5-126.9-174.8-3.1-14.7-4.9-29.8-5.3-45-0.1-2.7-0.1-5.5-0.1-8.2v-312h525.6v311.9zM916 311.7c0 23.2-9.1 45.2-25.7 61.7-16.6 16.6-38.5 25.7-61.7 25.7h-9.9v-175h9.9c23.2 0 45.1 9.1 61.7 25.7s25.7 38.5 25.7 61.7v0.2z" fill="#39393A" /><path d="M317.428 274.917l70.145-70.144 14.142 14.142-70.145 70.144zM316.055 351.98L456.13 211.904l14.142 14.142-140.076 140.076zM555.4 659.6l-4.8-19.4c0.3-0.1 26.5-6.8 55.4-23.5 37.8-21.9 62-49.7 72-82.7l19.1 5.8c-11.4 37.6-39.6 70.3-81.6 94.5-31.2 18-58.9 25-60.1 25.3z" fill="#E73B37" /></svg>
|
|
421
|
+
`;
|
|
422
|
+
const duckDevCheckCircleMedium = `
|
|
407
423
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
408
424
|
<g clip-path="url(#clip0_21_2500)">
|
|
409
425
|
<path d="M18.3337 9.23159V9.99826C18.3326 11.7953 17.7507 13.5438 16.6748 14.9831C15.5988 16.4224 14.0864 17.4753 12.3631 17.9848C10.6399 18.4944 8.79804 18.4332 7.11238 17.8104C5.42673 17.1877 3.98754 16.0367 3.00946 14.5291C2.03138 13.0216 1.56682 11.2383 1.68506 9.44519C1.80329 7.65206 2.498 5.9452 3.66556 4.57915C4.83312 3.21311 6.41098 2.26108 8.16382 1.86505C9.91665 1.46902 11.7505 1.65021 13.392 2.38159M18.3337 3.33159L10.0003 11.6733L7.50033 9.17326" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -431,7 +447,7 @@ const duckDevMoreVertical = `
|
|
|
431
447
|
<path d="M8.00065 13.3346C8.36884 13.3346 8.66732 13.0362 8.66732 12.668C8.66732 12.2998 8.36884 12.0013 8.00065 12.0013C7.63246 12.0013 7.33398 12.2998 7.33398 12.668C7.33398 13.0362 7.63246 13.3346 8.00065 13.3346Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
432
448
|
</svg>
|
|
433
449
|
`;
|
|
434
|
-
const
|
|
450
|
+
const duckDevMoreVerticalMedium = `
|
|
435
451
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
436
452
|
<path d="M10.0003 10.8333C10.4606 10.8333 10.8337 10.4602 10.8337 10C10.8337 9.53976 10.4606 9.16666 10.0003 9.16666C9.54009 9.16666 9.16699 9.53976 9.16699 10C9.16699 10.4602 9.54009 10.8333 10.0003 10.8333Z" fill="#6B7280"/>
|
|
437
453
|
<path d="M10.0003 4.99999C10.4606 4.99999 10.8337 4.6269 10.8337 4.16666C10.8337 3.70642 10.4606 3.33333 10.0003 3.33333C9.54009 3.33333 9.16699 3.70642 9.16699 4.16666C9.16699 4.6269 9.54009 4.99999 10.0003 4.99999Z" fill="#6B7280"/>
|
|
@@ -446,7 +462,7 @@ const duckDevTrash = `
|
|
|
446
462
|
<path d="M2 3.9987H3.33333M3.33333 3.9987H14M3.33333 3.9987V13.332C3.33333 13.6857 3.47381 14.0248 3.72386 14.2748C3.97391 14.5249 4.31304 14.6654 4.66667 14.6654H11.3333C11.687 14.6654 12.0261 14.5249 12.2761 14.2748C12.5262 14.0248 12.6667 13.6857 12.6667 13.332V3.9987H3.33333ZM5.33333 3.9987V2.66536C5.33333 2.31174 5.47381 1.9726 5.72386 1.72256C5.97391 1.47251 6.31304 1.33203 6.66667 1.33203H9.33333C9.68696 1.33203 10.0261 1.47251 10.2761 1.72256C10.5262 1.9726 10.6667 2.31174 10.6667 2.66536V3.9987" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
447
463
|
</svg>
|
|
448
464
|
`;
|
|
449
|
-
const
|
|
465
|
+
const duckDevTrashMedium = `
|
|
450
466
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
451
467
|
<path d="M2.5 5.0013H4.16667M4.16667 5.0013H17.5M4.16667 5.0013V16.668C4.16667 17.11 4.34226 17.5339 4.65482 17.8465C4.96738 18.159 5.39131 18.3346 5.83333 18.3346H14.1667C14.6087 18.3346 15.0326 18.159 15.3452 17.8465C15.6577 17.5339 15.8333 17.11 15.8333 16.668V5.0013H4.16667ZM6.66667 5.0013V3.33464C6.66667 2.89261 6.84226 2.46868 7.15482 2.15612C7.46738 1.84356 7.89131 1.66797 8.33333 1.66797H11.6667C12.1087 1.66797 12.5326 1.84356 12.8452 2.15612C13.1577 2.46868 13.3333 2.89261 13.3333 3.33464V5.0013" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
452
468
|
</svg>
|
|
@@ -456,12 +472,12 @@ const duckDevEdit = `
|
|
|
456
472
|
<path d="M8 13.3322H14M11 2.33218C11.2652 2.06697 11.6249 1.91797 12 1.91797C12.1857 1.91797 12.3696 1.95455 12.5412 2.02562C12.7128 2.09669 12.8687 2.20086 13 2.33218C13.1313 2.4635 13.2355 2.61941 13.3066 2.79099C13.3776 2.96257 13.4142 3.14647 13.4142 3.33218C13.4142 3.5179 13.3776 3.7018 13.3066 3.87338C13.2355 4.04496 13.1313 4.20086 13 4.33218L4.66667 12.6655L2 13.3322L2.66667 10.6655L11 2.33218Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
457
473
|
</svg>
|
|
458
474
|
`;
|
|
459
|
-
const
|
|
475
|
+
const duckDevEditMedium = `
|
|
460
476
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
461
477
|
<path d="M10 16.6662H17.5M13.75 2.9162C14.0815 2.58468 14.5312 2.39844 15 2.39844C15.2321 2.39844 15.462 2.44416 15.6765 2.533C15.891 2.62184 16.0858 2.75205 16.25 2.9162C16.4142 3.08036 16.5444 3.27523 16.6332 3.48971C16.722 3.70418 16.7678 3.93406 16.7678 4.1662C16.7678 4.39835 16.722 4.62822 16.6332 4.8427C16.5444 5.05718 16.4142 5.25205 16.25 5.4162L5.83333 15.8329L2.5 16.6662L3.33333 13.3329L13.75 2.9162Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
462
478
|
</svg>
|
|
463
479
|
`;
|
|
464
|
-
const
|
|
480
|
+
const duckDevArrowSortMedium = `
|
|
465
481
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
466
482
|
<path d="M13.3327 15.832L13.3327 4.16536M13.3327 4.16536C13.3327 4.16536 12.2774 5.63731 9.99935 7.91536M13.3327 4.16536L16.666 7.91536" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
467
483
|
<path d="M6.66731 4.16797L6.66731 15.8346M6.66731 15.8346C6.66731 15.8346 7.72259 14.3627 10.0007 12.0846M6.66731 15.8346L3.33398 12.0846" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -472,7 +488,7 @@ const duckDevX = `
|
|
|
472
488
|
<path d="M12 4L4 12M4 4L12 12" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
473
489
|
</svg>
|
|
474
490
|
`;
|
|
475
|
-
const
|
|
491
|
+
const duckDevXMedium = `
|
|
476
492
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
477
493
|
<path d="M15 5L5 15M5 5L15 15" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
478
494
|
</svg>
|
|
@@ -489,7 +505,7 @@ const duckDevXCircle = `
|
|
|
489
505
|
</defs>
|
|
490
506
|
</svg>
|
|
491
507
|
`;
|
|
492
|
-
const
|
|
508
|
+
const duckDevXCircleMedium = `
|
|
493
509
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
494
510
|
<g clip-path="url(#clip0_21_2780)">
|
|
495
511
|
<path d="M12.4993 7.5013L7.49935 12.5013M7.49935 7.5013L12.4993 12.5013M18.3327 10.0013C18.3327 14.6037 14.6017 18.3346 9.99935 18.3346C5.39698 18.3346 1.66602 14.6037 1.66602 10.0013C1.66602 5.39893 5.39698 1.66797 9.99935 1.66797C14.6017 1.66797 18.3327 5.39893 18.3327 10.0013Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -506,7 +522,7 @@ const duckDevLogOut = `
|
|
|
506
522
|
<path d="M5.06592 13H2.39925C2.04563 13 1.70649 12.8595 1.45644 12.6095C1.20639 12.3594 1.06592 12.0203 1.06592 11.6667V2.33333C1.06592 1.97971 1.20639 1.64057 1.45644 1.39052C1.70649 1.14048 2.04563 1 2.39925 1H5.06592M9.73258 10.3333L13.0659 7M13.0659 7L9.73258 3.66667M13.0659 7H5.06592" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
507
523
|
</svg>
|
|
508
524
|
`;
|
|
509
|
-
const
|
|
525
|
+
const duckDevLogOutMedium = `
|
|
510
526
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
511
527
|
<path d="M7.5 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V4.16667C2.5 3.72464 2.67559 3.30072 2.98816 2.98816C3.30072 2.67559 3.72464 2.5 4.16667 2.5H7.5M13.3333 14.1667L17.5 10M17.5 10L13.3333 5.83333M17.5 10H7.5" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
512
528
|
</svg>
|
|
@@ -517,7 +533,7 @@ const duckDevClear = `
|
|
|
517
533
|
<path d="M11.5 4.5L4.5 11.5M4.5 4.5L11.5 11.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
518
534
|
</svg>
|
|
519
535
|
`;
|
|
520
|
-
const
|
|
536
|
+
const duckDevClearMedium = `
|
|
521
537
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
522
538
|
<path d="M15 5L5 15M5 5L15 15" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
523
539
|
</svg>
|
|
@@ -535,7 +551,7 @@ const duckDevEye = `
|
|
|
535
551
|
</defs>
|
|
536
552
|
</svg>
|
|
537
553
|
`;
|
|
538
|
-
const
|
|
554
|
+
const duckDevEyeMedium = `
|
|
539
555
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
540
556
|
<path d="M0.833984 9.9987C0.833984 9.9987 4.16732 3.33203 10.0007 3.33203C15.834 3.33203 19.1673 9.9987 19.1673 9.9987C19.1673 9.9987 15.834 16.6654 10.0007 16.6654C4.16732 16.6654 0.833984 9.9987 0.833984 9.9987Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
541
557
|
<path d="M10.0007 12.4987C11.3814 12.4987 12.5007 11.3794 12.5007 9.9987C12.5007 8.61799 11.3814 7.4987 10.0007 7.4987C8.61994 7.4987 7.50065 8.61799 7.50065 9.9987C7.50065 11.3794 8.61994 12.4987 10.0007 12.4987Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -553,7 +569,7 @@ const duckDevEyeOff = `
|
|
|
553
569
|
</defs>
|
|
554
570
|
</svg>
|
|
555
571
|
`;
|
|
556
|
-
const
|
|
572
|
+
const duckDevEyeOffMedium = `
|
|
557
573
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
558
574
|
<g clip-path="url(#clip0_21_2856)">
|
|
559
575
|
<path d="M8.25065 3.53203C8.82426 3.39776 9.41154 3.33065 10.0007 3.33203C15.834 3.33203 19.1673 9.9987 19.1673 9.9987C18.6615 10.945 18.0582 11.836 17.3673 12.657M11.7673 11.7654C11.5384 12.011 11.2624 12.208 10.9558 12.3446C10.6491 12.4813 10.3181 12.5547 9.98239 12.5607C9.64672 12.5666 9.31329 12.5048 9.00199 12.3791C8.6907 12.2534 8.40792 12.0662 8.17052 11.8288C7.93313 11.5914 7.74598 11.3086 7.62024 10.9974C7.49451 10.6861 7.43276 10.3526 7.43868 10.017C7.4446 9.68128 7.51808 9.35024 7.65472 9.04357C7.79135 8.73691 7.98836 8.46091 8.23398 8.23203M0.833984 0.832031L19.1673 19.1654M14.9507 14.9487C13.5261 16.0345 11.7916 16.6361 10.0007 16.6654C4.16732 16.6654 0.833984 9.9987 0.833984 9.9987C1.87056 8.06694 3.30826 6.3792 5.05065 5.0487L14.9507 14.9487Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -571,7 +587,7 @@ const duckDevEyeBold = `
|
|
|
571
587
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 8.0002C2 8.98382 2.25498 9.31508 2.76494 9.9776C3.78318 11.3005 5.49087 12.8002 8 12.8002C10.5091 12.8002 12.2168 11.3005 13.2351 9.9776C13.745 9.31508 14 8.98382 14 8.0002C14 7.01657 13.745 6.68531 13.2351 6.02279C12.2168 4.69993 10.5091 3.2002 8 3.2002C5.49087 3.2002 3.78318 4.69993 2.76494 6.02279C2.25498 6.68531 2 7.01657 2 8.0002ZM8 5.7502C6.75736 5.7502 5.75 6.75755 5.75 8.0002C5.75 9.24284 6.75736 10.2502 8 10.2502C9.24264 10.2502 10.25 9.24284 10.25 8.0002C10.25 6.75755 9.24264 5.7502 8 5.7502Z" fill="#595E6A"/>
|
|
572
588
|
</svg>
|
|
573
589
|
`;
|
|
574
|
-
const
|
|
590
|
+
const duckDevEyeBoldMedium = `
|
|
575
591
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
576
592
|
<path d="M8.3125 10C8.3125 9.06802 9.06802 8.3125 10 8.3125C10.932 8.3125 11.6875 9.06802 11.6875 10C11.6875 10.932 10.932 11.6875 10 11.6875C9.06802 11.6875 8.3125 10.932 8.3125 10Z" fill="#595E6A"/>
|
|
577
593
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 10C2.5 11.2295 2.81872 11.6436 3.45617 12.4718C4.72897 14.1253 6.86359 16 10 16C13.1364 16 15.271 14.1253 16.5438 12.4718C17.1813 11.6436 17.5 11.2295 17.5 10C17.5 8.77047 17.1813 8.35639 16.5438 7.52825C15.271 5.87467 13.1364 4 10 4C6.86359 4 4.72897 5.87467 3.45617 7.52825C2.81872 8.3564 2.5 8.77047 2.5 10ZM10 7.1875C8.4467 7.1875 7.1875 8.4467 7.1875 10C7.1875 11.5533 8.4467 12.8125 10 12.8125C11.5533 12.8125 12.8125 11.5533 12.8125 10C12.8125 8.4467 11.5533 7.1875 10 7.1875Z" fill="#595E6A"/>
|
|
@@ -582,7 +598,7 @@ const duckDevChevronUp = `
|
|
|
582
598
|
<path d="M12 10L8 6L4 10" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
583
599
|
</svg>
|
|
584
600
|
`;
|
|
585
|
-
const
|
|
601
|
+
const duckDevChevronUpMedium = `
|
|
586
602
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
587
603
|
<path d="M15 12.5L10 7.5L5 12.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
588
604
|
</svg>
|
|
@@ -592,7 +608,7 @@ const duckDevChevronRight = `
|
|
|
592
608
|
<path d="M6 12L10 8L6 4" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
593
609
|
</svg>
|
|
594
610
|
`;
|
|
595
|
-
const
|
|
611
|
+
const duckDevChevronRightMedium = `
|
|
596
612
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
597
613
|
<path d="M7.5 15L12.5 10L7.5 5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
598
614
|
</svg>
|
|
@@ -602,7 +618,7 @@ const duckDevChevronDown = `
|
|
|
602
618
|
<path d="M4 6L8 10L12 6" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
603
619
|
</svg>
|
|
604
620
|
`;
|
|
605
|
-
const
|
|
621
|
+
const duckDevChevronDownMedium = `
|
|
606
622
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
607
623
|
<g id="chevron-down">
|
|
608
624
|
<path id="Icon" d="M5 7.5L10 12.5L15 7.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -614,7 +630,7 @@ const duckDevChevronLeft = `
|
|
|
614
630
|
<path d="M10 12L6 8L10 4" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
615
631
|
</svg>
|
|
616
632
|
`;
|
|
617
|
-
const
|
|
633
|
+
const duckDevChevronLeftMedium = `
|
|
618
634
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
619
635
|
<path d="M12.5 15L7.5 10L12.5 5" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
620
636
|
</svg>
|
|
@@ -624,7 +640,7 @@ const duckDevChevronsRight = `
|
|
|
624
640
|
<path d="M8.66667 11.3346L12 8.0013L8.66667 4.66797M4 11.3346L7.33333 8.0013L4 4.66797" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
625
641
|
</svg>
|
|
626
642
|
`;
|
|
627
|
-
const
|
|
643
|
+
const duckDevChevronsRightMedium = `
|
|
628
644
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
629
645
|
<path d="M10.8333 14.1654L15 9.9987L10.8333 5.83203M5 14.1654L9.16667 9.9987L5 5.83203" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
630
646
|
</svg>
|
|
@@ -634,7 +650,7 @@ const duckDevChevronsLeft = `
|
|
|
634
650
|
<path d="M7.33333 11.3346L4 8.0013L7.33333 4.66797M12 11.3346L8.66667 8.0013L12 4.66797" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
635
651
|
</svg>
|
|
636
652
|
`;
|
|
637
|
-
const
|
|
653
|
+
const duckDevChevronsLeftMedium = `
|
|
638
654
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
639
655
|
<path d="M9.16667 14.1654L5 9.9987L9.16667 5.83203M15 14.1654L10.8333 9.9987L15 5.83203" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
640
656
|
</svg>
|
|
@@ -650,7 +666,7 @@ const duckDevDatabase = `
|
|
|
650
666
|
<path d="M14 3.33203C14 4.4366 11.3137 5.33203 8 5.33203C4.68629 5.33203 2 4.4366 2 3.33203M14 3.33203C14 2.22746 11.3137 1.33203 8 1.33203C4.68629 1.33203 2 2.22746 2 3.33203M14 3.33203V12.6654C14 13.772 11.3333 14.6654 8 14.6654C4.66667 14.6654 2 13.772 2 12.6654V3.33203M14 7.9987C14 9.10536 11.3333 9.9987 8 9.9987C4.66667 9.9987 2 9.10536 2 7.9987" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
651
667
|
</svg>
|
|
652
668
|
`;
|
|
653
|
-
const
|
|
669
|
+
const duckDevDatabaseMedium = `
|
|
654
670
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
655
671
|
<path d="M17.5 4.16797C17.5 5.54868 14.1421 6.66797 10 6.66797C5.85786 6.66797 2.5 5.54868 2.5 4.16797M17.5 4.16797C17.5 2.78726 14.1421 1.66797 10 1.66797C5.85786 1.66797 2.5 2.78726 2.5 4.16797M17.5 4.16797V15.8346C17.5 17.218 14.1667 18.3346 10 18.3346C5.83333 18.3346 2.5 17.218 2.5 15.8346V4.16797M17.5 10.0013C17.5 11.3846 14.1667 12.5013 10 12.5013C5.83333 12.5013 2.5 11.3846 2.5 10.0013" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
656
672
|
</svg>
|
|
@@ -660,7 +676,7 @@ const duckDevHome = `
|
|
|
660
676
|
<path d="M6 14.6654V7.9987H10V14.6654M2 5.9987L8 1.33203L14 5.9987V13.332C14 13.6857 13.8595 14.0248 13.6095 14.2748C13.3594 14.5249 13.0203 14.6654 12.6667 14.6654H3.33333C2.97971 14.6654 2.64057 14.5249 2.39052 14.2748C2.14048 14.0248 2 13.6857 2 13.332V5.9987Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
661
677
|
</svg>
|
|
662
678
|
`;
|
|
663
|
-
const
|
|
679
|
+
const duckDevHomeMedium = `
|
|
664
680
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
665
681
|
<path d="M7.5 18.3346V10.0013H12.5V18.3346M2.5 7.5013L10 1.66797L17.5 7.5013V16.668C17.5 17.11 17.3244 17.5339 17.0118 17.8465C16.6993 18.159 16.2754 18.3346 15.8333 18.3346H4.16667C3.72464 18.3346 3.30072 18.159 2.98816 17.8465C2.67559 17.5339 2.5 17.11 2.5 16.668V7.5013Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
666
682
|
</svg>
|
|
@@ -670,7 +686,7 @@ const duckDevUser = `
|
|
|
670
686
|
<path d="M13.3327 14V12.6667C13.3327 11.9594 13.0517 11.2811 12.5516 10.781C12.0515 10.281 11.3733 10 10.666 10H5.33268C4.62544 10 3.94716 10.281 3.44706 10.781C2.94697 11.2811 2.66602 11.9594 2.66602 12.6667V14M10.666 4.66667C10.666 6.13943 9.47211 7.33333 7.99935 7.33333C6.52659 7.33333 5.33268 6.13943 5.33268 4.66667C5.33268 3.19391 6.52659 2 7.99935 2C9.47211 2 10.666 3.19391 10.666 4.66667Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
671
687
|
</svg>
|
|
672
688
|
`;
|
|
673
|
-
const
|
|
689
|
+
const duckDevUserMedium = `
|
|
674
690
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
675
691
|
<path d="M16.6673 17.5V15.8333C16.6673 14.9493 16.3161 14.1014 15.691 13.4763C15.0659 12.8512 14.218 12.5 13.334 12.5H6.66732C5.78326 12.5 4.93542 12.8512 4.31029 13.4763C3.68517 14.1014 3.33398 14.9493 3.33398 15.8333V17.5M13.334 5.83333C13.334 7.67428 11.8416 9.16667 10.0007 9.16667C8.1597 9.16667 6.66732 7.67428 6.66732 5.83333C6.66732 3.99238 8.1597 2.5 10.0007 2.5C11.8416 2.5 13.334 3.99238 13.334 5.83333Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
676
692
|
</svg>
|
|
@@ -699,7 +715,7 @@ const duckDevUsersBg = `
|
|
|
699
715
|
</defs>
|
|
700
716
|
</svg>
|
|
701
717
|
`;
|
|
702
|
-
const
|
|
718
|
+
const duckDevUsersMedium = `
|
|
703
719
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
704
720
|
<path d="M14.1693 17.5V15.8333C14.1693 14.9493 13.8181 14.1014 13.193 13.4763C12.5678 12.8512 11.72 12.5 10.8359 12.5H4.16927C3.28522 12.5 2.43737 12.8512 1.81225 13.4763C1.18713 14.1014 0.835938 14.9493 0.835938 15.8333V17.5M19.1693 17.5V15.8333C19.1687 15.0948 18.9229 14.3773 18.4704 13.7936C18.0179 13.2099 17.3844 12.793 16.6693 12.6083M13.3359 2.60833C14.053 2.79192 14.6885 3.20892 15.1423 3.79359C15.5961 4.37827 15.8425 5.09736 15.8425 5.8375C15.8425 6.57764 15.5961 7.29673 15.1423 7.88141C14.6885 8.46608 14.053 8.88308 13.3359 9.06667M10.8359 5.83333C10.8359 7.67428 9.34355 9.16667 7.5026 9.16667C5.66166 9.16667 4.16927 7.67428 4.16927 5.83333C4.16927 3.99238 5.66166 2.5 7.5026 2.5C9.34355 2.5 10.8359 3.99238 10.8359 5.83333Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
705
721
|
</svg>
|
|
@@ -716,47 +732,11 @@ const duckDevUserPlus = `
|
|
|
716
732
|
</defs>
|
|
717
733
|
</svg>
|
|
718
734
|
`;
|
|
719
|
-
const
|
|
735
|
+
const duckDevUserPlusMedium = `
|
|
720
736
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
721
737
|
<path d="M13.333 17.5V15.8333C13.333 14.9493 12.9818 14.1014 12.3567 13.4763C11.7316 12.8512 10.8837 12.5 9.99967 12.5H4.16634C3.28229 12.5 2.43444 12.8512 1.80932 13.4763C1.1842 14.1014 0.833008 14.9493 0.833008 15.8333V17.5M16.6663 6.66667V11.6667M19.1663 9.16667H14.1663M10.4163 5.83333C10.4163 7.67428 8.92396 9.16667 7.08301 9.16667C5.24206 9.16667 3.74967 7.67428 3.74967 5.83333C3.74967 3.99238 5.24206 2.5 7.08301 2.5C8.92396 2.5 10.4163 3.99238 10.4163 5.83333Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
722
738
|
</svg>
|
|
723
739
|
`;
|
|
724
|
-
const duckDevFormula = `
|
|
725
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
726
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.581 4.49C5.64571 3.80868 5.96214 3.17596 6.46846 2.7155C6.97478 2.25504 7.63461 1.99992 8.319 2H9.25C9.44891 2 9.63968 2.07902 9.78033 2.21967C9.92098 2.36032 10 2.55109 10 2.75C10 2.94891 9.92098 3.13968 9.78033 3.28033C9.63968 3.42098 9.44891 3.5 9.25 3.5H8.319C8.00796 3.49983 7.70804 3.61563 7.47781 3.82477C7.24759 4.03391 7.10361 4.32138 7.074 4.631L6.991 5.5H9.25C9.44891 5.5 9.63968 5.57902 9.78033 5.71967C9.92098 5.86032 10 6.05109 10 6.25C10 6.44891 9.92098 6.63968 9.78033 6.78033C9.63968 6.92098 9.44891 7 9.25 7H6.849L6.419 11.51C6.35429 12.1913 6.03786 12.824 5.53154 13.2845C5.02522 13.745 4.36539 14.0001 3.681 14H2.75C2.55109 14 2.36032 13.921 2.21967 13.7803C2.07902 13.6397 2 13.4489 2 13.25C2 13.0511 2.07902 12.8603 2.21967 12.7197C2.36032 12.579 2.55109 12.5 2.75 12.5H3.681C3.99219 12.5001 4.29225 12.3842 4.5225 12.1749C4.75274 11.9655 4.89662 11.6778 4.926 11.368L5.342 7H3.75C3.55109 7 3.36032 6.92098 3.21967 6.78033C3.07902 6.63968 3 6.44891 3 6.25C3 6.05109 3.07902 5.86032 3.21967 5.71967C3.36032 5.57902 3.55109 5.5 3.75 5.5H5.485L5.581 4.49ZM9.22 9.22C9.36063 9.07955 9.55125 9.00066 9.75 9.00066C9.94875 9.00066 10.1394 9.07955 10.28 9.22L11.5 10.44L12.72 9.22C12.7887 9.14631 12.8715 9.08721 12.9635 9.04622C13.0555 9.00523 13.1548 8.98318 13.2555 8.98141C13.3562 8.97963 13.4562 8.99816 13.5496 9.03588C13.643 9.0736 13.7278 9.12974 13.799 9.20096C13.8703 9.27218 13.9264 9.35701 13.9641 9.4504C14.0018 9.54379 14.0204 9.64382 14.0186 9.74452C14.0168 9.84522 13.9948 9.94454 13.9538 10.0365C13.9128 10.1285 13.8537 10.2113 13.78 10.28L12.56 11.5L13.78 12.72C13.8537 12.7887 13.9128 12.8715 13.9538 12.9635C13.9948 13.0555 14.0168 13.1548 14.0186 13.2555C14.0204 13.3562 14.0018 13.4562 13.9641 13.5496C13.9264 13.643 13.8703 13.7278 13.799 13.799C13.7278 13.8703 13.643 13.9264 13.5496 13.9641C13.4562 14.0018 13.3562 14.0204 13.2555 14.0186C13.1548 14.0168 13.0555 13.9948 12.9635 13.9538C12.8715 13.9128 12.7887 13.8537 12.72 13.78L11.5 12.56L10.28 13.78C10.2113 13.8537 10.1285 13.9128 10.0365 13.9538C9.94454 13.9948 9.84522 14.0168 9.74452 14.0186C9.64382 14.0204 9.54379 14.0018 9.4504 13.9641C9.35701 13.9264 9.27218 13.8703 9.20096 13.799C9.12974 13.7278 9.0736 13.643 9.03588 13.5496C8.99816 13.4562 8.97963 13.3562 8.98141 13.2555C8.98318 13.1548 9.00523 13.0555 9.04622 12.9635C9.08721 12.8715 9.14631 12.7887 9.22 12.72L10.44 11.5L9.22 10.28C9.07955 10.1394 9.00066 9.94875 9.00066 9.75C9.00066 9.55125 9.07955 9.36063 9.22 9.22Z" fill="#6B7280"/>
|
|
727
|
-
</svg>
|
|
728
|
-
`;
|
|
729
|
-
const duckDevSettings = `
|
|
730
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
731
|
-
<g clip-path="url(#clip0_21839_133091)">
|
|
732
|
-
<path d="M7.99935 10.0013C9.10392 10.0013 9.99935 9.10587 9.99935 8.0013C9.99935 6.89673 9.10392 6.0013 7.99935 6.0013C6.89478 6.0013 5.99935 6.89673 5.99935 8.0013C5.99935 9.10587 6.89478 10.0013 7.99935 10.0013Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
733
|
-
<path d="M12.9327 10.0013C12.8439 10.2024 12.8175 10.4254 12.8567 10.6417C12.8959 10.858 12.999 11.0575 13.1527 11.2146L13.1927 11.2546C13.3167 11.3785 13.415 11.5255 13.4821 11.6874C13.5492 11.8492 13.5837 12.0227 13.5837 12.198C13.5837 12.3732 13.5492 12.5467 13.4821 12.7086C13.415 12.8704 13.3167 13.0175 13.1927 13.1413C13.0689 13.2653 12.9218 13.3636 12.7599 13.4307C12.5981 13.4978 12.4246 13.5324 12.2493 13.5324C12.0741 13.5324 11.9006 13.4978 11.7388 13.4307C11.5769 13.3636 11.4298 13.2653 11.306 13.1413L11.266 13.1013C11.1089 12.9476 10.9093 12.8445 10.6931 12.8053C10.4768 12.7661 10.2538 12.7926 10.0527 12.8813C9.8555 12.9658 9.68734 13.1061 9.56889 13.285C9.45044 13.4639 9.38687 13.6734 9.38602 13.888V14.0013C9.38602 14.3549 9.24554 14.6941 8.99549 14.9441C8.74544 15.1942 8.4063 15.3346 8.05268 15.3346C7.69906 15.3346 7.35992 15.1942 7.10987 14.9441C6.85983 14.6941 6.71935 14.3549 6.71935 14.0013V13.9413C6.71419 13.7206 6.64276 13.5066 6.51436 13.3271C6.38595 13.1476 6.20651 13.0108 5.99935 12.9346C5.79827 12.8459 5.57522 12.8194 5.35896 12.8586C5.14269 12.8978 4.94314 13.0009 4.78602 13.1546L4.74602 13.1946C4.62218 13.3186 4.47513 13.4169 4.31327 13.484C4.15141 13.5511 3.9779 13.5857 3.80268 13.5857C3.62746 13.5857 3.45396 13.5511 3.2921 13.484C3.13023 13.4169 2.98318 13.3186 2.85935 13.1946C2.73538 13.0708 2.63704 12.9238 2.56994 12.7619C2.50284 12.6 2.4683 12.4265 2.4683 12.2513C2.4683 12.0761 2.50284 11.9026 2.56994 11.7407C2.63704 11.5789 2.73538 11.4318 2.85935 11.308L2.89935 11.268C3.05304 11.1108 3.15614 10.9113 3.19535 10.695C3.23456 10.4788 3.20809 10.2557 3.11935 10.0546C3.03484 9.85746 2.89452 9.68929 2.71566 9.57084C2.5368 9.45239 2.32721 9.38882 2.11268 9.38797H1.99935C1.64573 9.38797 1.30659 9.24749 1.05654 8.99744C0.806491 8.7474 0.666016 8.40826 0.666016 8.05464C0.666016 7.70101 0.806491 7.36188 1.05654 7.11183C1.30659 6.86178 1.64573 6.7213 1.99935 6.7213H2.05935C2.28001 6.71614 2.49402 6.64471 2.67355 6.51631C2.85308 6.3879 2.98983 6.20846 3.06602 6.0013C3.15476 5.80022 3.18123 5.57717 3.14202 5.36091C3.10281 5.14465 2.99971 4.94509 2.84602 4.78797L2.80602 4.74797C2.68205 4.62414 2.5837 4.47709 2.5166 4.31522C2.4495 4.15336 2.41497 3.97986 2.41497 3.80464C2.41497 3.62941 2.4495 3.45591 2.5166 3.29405C2.5837 3.13218 2.68205 2.98513 2.80602 2.8613C2.92985 2.73733 3.0769 2.63899 3.23876 2.57189C3.40063 2.50479 3.57413 2.47025 3.74935 2.47025C3.92457 2.47025 4.09807 2.50479 4.25994 2.57189C4.4218 2.63899 4.56885 2.73733 4.69268 2.8613L4.73268 2.9013C4.8898 3.05499 5.08936 3.15809 5.30562 3.19731C5.52189 3.23652 5.74494 3.21005 5.94602 3.1213H5.99935C6.19653 3.03679 6.36469 2.89647 6.48314 2.71761C6.60159 2.53875 6.66516 2.32916 6.66602 2.11464V2.0013C6.66602 1.64768 6.80649 1.30854 7.05654 1.05849C7.30659 0.808445 7.64573 0.667969 7.99935 0.667969C8.35297 0.667969 8.69211 0.808445 8.94216 1.05849C9.19221 1.30854 9.33268 1.64768 9.33268 2.0013V2.0613C9.33354 2.27583 9.3971 2.48542 9.51555 2.66428C9.634 2.84314 9.80217 2.98346 9.99935 3.06797C10.2004 3.15671 10.4235 3.18318 10.6397 3.14397C10.856 3.10476 11.0556 3.00166 11.2127 2.84797L11.2527 2.80797C11.3765 2.684 11.5236 2.58565 11.6854 2.51856C11.8473 2.45146 12.0208 2.41692 12.196 2.41692C12.3712 2.41692 12.5447 2.45146 12.7066 2.51856C12.8685 2.58565 13.0155 2.684 13.1393 2.80797C13.2633 2.9318 13.3617 3.07885 13.4288 3.24072C13.4959 3.40258 13.5304 3.57608 13.5304 3.7513C13.5304 3.92652 13.4959 4.10003 13.4288 4.26189C13.3617 4.42375 13.2633 4.5708 13.1393 4.69464L13.0993 4.73464C12.9457 4.89175 12.8426 5.09131 12.8033 5.30758C12.7641 5.52384 12.7906 5.74689 12.8793 5.94797V6.0013C12.9639 6.19848 13.1042 6.36665 13.283 6.4851C13.4619 6.60355 13.6715 6.66711 13.886 6.66797H13.9993C14.353 6.66797 14.6921 6.80844 14.9422 7.05849C15.1922 7.30854 15.3327 7.64768 15.3327 8.0013C15.3327 8.35492 15.1922 8.69406 14.9422 8.94411C14.6921 9.19416 14.353 9.33464 13.9993 9.33464H13.9393C13.7248 9.33549 13.5152 9.39906 13.3364 9.51751C13.1575 9.63596 13.0172 9.80412 12.9327 10.0013Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
734
|
-
</g>
|
|
735
|
-
<defs>
|
|
736
|
-
<clipPath id="clip0_21839_133091">
|
|
737
|
-
<rect width="16" height="16" fill="white"/>
|
|
738
|
-
</clipPath>
|
|
739
|
-
</defs>
|
|
740
|
-
</svg>
|
|
741
|
-
`;
|
|
742
|
-
const duckDevSettingsSm = `
|
|
743
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
744
|
-
<g clip-path="url(#clip0_21_2418)">
|
|
745
|
-
<path d="M10.0007 12.4987C11.3814 12.4987 12.5007 11.3794 12.5007 9.9987C12.5007 8.61799 11.3814 7.4987 10.0007 7.4987C8.61994 7.4987 7.50065 8.61799 7.50065 9.9987C7.50065 11.3794 8.61994 12.4987 10.0007 12.4987Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
746
|
-
<path d="M16.1673 12.4987C16.0564 12.75 16.0233 13.0289 16.0723 13.2992C16.1213 13.5695 16.2502 13.819 16.4423 14.0154L16.4923 14.0654C16.6473 14.2202 16.7702 14.404 16.8541 14.6063C16.938 14.8086 16.9811 15.0255 16.9811 15.2445C16.9811 15.4636 16.938 15.6804 16.8541 15.8828C16.7702 16.0851 16.6473 16.2689 16.4923 16.4237C16.3375 16.5787 16.1537 16.7016 15.9514 16.7855C15.7491 16.8693 15.5322 16.9125 15.3132 16.9125C15.0941 16.9125 14.8772 16.8693 14.6749 16.7855C14.4726 16.7016 14.2888 16.5787 14.134 16.4237L14.084 16.3737C13.8876 16.1816 13.6381 16.0527 13.3678 16.0037C13.0975 15.9547 12.8187 15.9878 12.5673 16.0987C12.3208 16.2043 12.1106 16.3797 11.9626 16.6033C11.8145 16.8269 11.7351 17.0889 11.734 17.357V17.4987C11.734 17.9407 11.5584 18.3646 11.2458 18.6772C10.9333 18.9898 10.5093 19.1654 10.0673 19.1654C9.62529 19.1654 9.20137 18.9898 8.88881 18.6772C8.57625 18.3646 8.40065 17.9407 8.40065 17.4987V17.4237C8.3942 17.1479 8.30492 16.8804 8.14441 16.6559C7.9839 16.4315 7.7596 16.2606 7.50065 16.1654C7.2493 16.0544 6.97049 16.0213 6.70016 16.0704C6.42983 16.1194 6.18038 16.2483 5.98398 16.4404L5.93398 16.4904C5.7792 16.6453 5.59538 16.7683 5.39305 16.8521C5.19072 16.936 4.97384 16.9792 4.75482 16.9792C4.53579 16.9792 4.31891 16.936 4.11658 16.8521C3.91425 16.7683 3.73044 16.6453 3.57565 16.4904C3.42069 16.3356 3.29776 16.1518 3.21388 15.9494C3.13001 15.7471 3.08684 15.5302 3.08684 15.3112C3.08684 15.0922 3.13001 14.8753 3.21388 14.673C3.29776 14.4706 3.42069 14.2868 3.57565 14.132L3.62565 14.082C3.81777 13.8856 3.94664 13.6362 3.99565 13.3659C4.04467 13.0955 4.01158 12.8167 3.90065 12.5654C3.79502 12.3189 3.61961 12.1087 3.39604 11.9606C3.17246 11.8126 2.91047 11.7331 2.64232 11.732H2.50065C2.05862 11.732 1.6347 11.5564 1.32214 11.2439C1.00958 10.9313 0.833984 10.5074 0.833984 10.0654C0.833984 9.62334 1.00958 9.19941 1.32214 8.88685C1.6347 8.57429 2.05862 8.3987 2.50065 8.3987H2.57565C2.85148 8.39225 3.11899 8.30296 3.3434 8.14246C3.56781 7.98195 3.73875 7.75764 3.83398 7.4987C3.94491 7.24735 3.978 6.96854 3.92899 6.69821C3.87997 6.42788 3.7511 6.17843 3.55898 5.98203L3.50898 5.93203C3.35402 5.77724 3.23109 5.59343 3.14722 5.3911C3.06334 5.18877 3.02017 4.97189 3.02017 4.75286C3.02017 4.53384 3.06334 4.31696 3.14722 4.11463C3.23109 3.9123 3.35402 3.72849 3.50898 3.5737C3.66377 3.41874 3.84759 3.29581 4.04992 3.21193C4.25225 3.12806 4.46913 3.08489 4.68815 3.08489C4.90718 3.08489 5.12405 3.12806 5.32639 3.21193C5.52872 3.29581 5.71253 3.41874 5.86732 3.5737L5.91732 3.6237C6.11372 3.81581 6.36316 3.94469 6.63349 3.9937C6.90382 4.04272 7.18264 4.00963 7.43398 3.8987H7.50065C7.74713 3.79306 7.95733 3.61766 8.1054 3.39409C8.25346 3.17051 8.33292 2.90852 8.33398 2.64036V2.4987C8.33398 2.05667 8.50958 1.63275 8.82214 1.32019C9.1347 1.00763 9.55862 0.832031 10.0007 0.832031C10.4427 0.832031 10.8666 1.00763 11.1792 1.32019C11.4917 1.63275 11.6673 2.05667 11.6673 2.4987V2.5737C11.6684 2.84185 11.7478 3.10384 11.8959 3.32742C12.044 3.55099 12.2542 3.7264 12.5007 3.83203C12.752 3.94296 13.0308 3.97605 13.3011 3.92704C13.5715 3.87802 13.8209 3.74915 14.0173 3.55703L14.0673 3.50703C14.2221 3.35207 14.4059 3.22914 14.6083 3.14527C14.8106 3.06139 15.0275 3.01822 15.2465 3.01822C15.4655 3.01822 15.6824 3.06139 15.8847 3.14527C16.087 3.22914 16.2709 3.35207 16.4257 3.50703C16.5806 3.66182 16.7035 3.84563 16.7874 4.04796C16.8713 4.25029 16.9145 4.46717 16.9145 4.6862C16.9145 4.90522 16.8713 5.1221 16.7874 5.32443C16.7035 5.52676 16.5806 5.71058 16.4257 5.86536L16.3757 5.91536C16.1835 6.11176 16.0547 6.36121 16.0056 6.63154C15.9566 6.90187 15.9897 7.18068 16.1007 7.43203V7.4987C16.2063 7.74517 16.3817 7.95538 16.6053 8.10344C16.8288 8.25151 17.0908 8.33096 17.359 8.33203H17.5007C17.9427 8.33203 18.3666 8.50763 18.6792 8.82019C18.9917 9.13275 19.1673 9.55667 19.1673 9.9987C19.1673 10.4407 18.9917 10.8646 18.6792 11.1772C18.3666 11.4898 17.9427 11.6654 17.5007 11.6654H17.4257C17.1575 11.6664 16.8955 11.7459 16.6719 11.894C16.4484 12.042 16.273 12.2522 16.1673 12.4987Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
747
|
-
</g>
|
|
748
|
-
<defs>
|
|
749
|
-
<clipPath id="clip0_21_2418">
|
|
750
|
-
<rect width="20" height="20" fill="white"/>
|
|
751
|
-
</clipPath>
|
|
752
|
-
</defs>
|
|
753
|
-
</svg>
|
|
754
|
-
`;
|
|
755
|
-
const duckDevSettingsBold = `
|
|
756
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
757
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.21708 1.59896C8.96369 1.5 8.64246 1.5 8 1.5C7.35754 1.5 7.03631 1.5 6.78292 1.59896C6.44507 1.7309 6.17664 1.98398 6.0367 2.30251C5.97281 2.44792 5.94781 2.61703 5.93803 2.86369C5.92365 3.22619 5.72648 3.56173 5.39327 3.7431C5.06007 3.92448 4.65328 3.9177 4.31312 3.74819C4.08165 3.63284 3.91382 3.5687 3.74831 3.54816C3.38575 3.50316 3.01907 3.59579 2.72895 3.80568C2.51136 3.9631 2.35074 4.22538 2.02951 4.74996C1.70828 5.27453 1.54767 5.53681 1.51187 5.79319C1.46414 6.13502 1.56239 6.48073 1.78501 6.75426C1.88662 6.87911 2.02942 6.98407 2.25106 7.11537C2.57689 7.30839 2.78654 7.63721 2.78651 8.00001C2.78649 8.36278 2.57685 8.69155 2.25106 8.88455C2.02938 9.01587 1.88656 9.12083 1.78494 9.24569C1.56232 9.51923 1.46407 9.86494 1.5118 10.2068C1.5476 10.4631 1.70822 10.7254 2.02945 11.25C2.35067 11.7746 2.51129 12.0369 2.72888 12.1943C3.019 12.4042 3.38568 12.4968 3.74824 12.4518C3.91374 12.4313 4.08156 12.3671 4.31302 12.2518C4.6532 12.0823 5.06002 12.0755 5.39324 12.2569C5.72646 12.4383 5.92365 12.7738 5.93803 13.1363C5.94782 13.383 5.97282 13.5521 6.0367 13.6975C6.17664 14.016 6.44507 14.2691 6.78292 14.401C7.03631 14.5 7.35754 14.5 8 14.5C8.64246 14.5 8.96369 14.5 9.21708 14.401C9.55493 14.2691 9.82336 14.016 9.9633 13.6975C10.0272 13.5521 10.0522 13.383 10.062 13.1363C10.0763 12.7738 10.2735 12.4383 10.6067 12.2569C10.9399 12.0755 11.3467 12.0822 11.6869 12.2517C11.9184 12.3671 12.0862 12.4312 12.2517 12.4517C12.6143 12.4968 12.9809 12.4041 13.2711 12.1942C13.4886 12.0368 13.6493 11.7745 13.9705 11.25C14.2917 10.7254 14.4523 10.4631 14.4881 10.2067C14.5359 9.86489 14.4376 9.51918 14.215 9.24565C14.1134 9.12079 13.9706 9.01583 13.7489 8.88452C13.4231 8.69151 13.2135 8.36272 13.2135 7.99994C13.2135 7.6372 13.4231 7.30845 13.7489 7.11547C13.9706 6.98414 14.1134 6.87918 14.2151 6.75431C14.4377 6.48077 14.5359 6.13506 14.4882 5.79323C14.4524 5.53686 14.2918 5.27457 13.9706 4.75C13.6493 4.22543 13.4887 3.96314 13.2711 3.80572C12.981 3.59583 12.6143 3.5032 12.2518 3.54821C12.0863 3.56875 11.9184 3.63288 11.687 3.74822C11.3468 3.91774 10.94 3.92451 10.6068 3.74313C10.2735 3.56174 10.0764 3.22618 10.062 2.86366C10.0522 2.61701 10.0272 2.44791 9.9633 2.30251C9.82336 1.98398 9.55493 1.7309 9.21708 1.59896ZM8 9.95C9.14227 9.95 10.0683 9.07695 10.0683 8C10.0683 6.92304 9.14227 6.05 8 6.05C6.85773 6.05 5.93174 6.92304 5.93174 8C5.93174 9.07695 6.85773 9.95 8 9.95Z" fill="#AEB2BC"/>
|
|
758
|
-
</svg>
|
|
759
|
-
`;
|
|
760
740
|
const duckDevCopy = `
|
|
761
741
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
762
742
|
<g clip-path="url(#clip0_21839_132901)">
|
|
@@ -769,7 +749,7 @@ const duckDevCopy = `
|
|
|
769
749
|
</defs>
|
|
770
750
|
</svg>
|
|
771
751
|
`;
|
|
772
|
-
const
|
|
752
|
+
const duckDevCopyMedium = `
|
|
773
753
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
774
754
|
<g clip-path="url(#clip0_21_2390)">
|
|
775
755
|
<path d="M4.16602 12.5013H3.33268C2.89065 12.5013 2.46673 12.3257 2.15417 12.0131C1.84161 11.7006 1.66602 11.2767 1.66602 10.8346V3.33464C1.66602 2.89261 1.84161 2.46868 2.15417 2.15612C2.46673 1.84356 2.89065 1.66797 3.33268 1.66797H10.8327C11.2747 1.66797 11.6986 1.84356 12.0112 2.15612C12.3238 2.46868 12.4993 2.89261 12.4993 3.33464V4.16797M9.16602 7.5013H16.666C17.5865 7.5013 18.3327 8.24749 18.3327 9.16797V16.668C18.3327 17.5884 17.5865 18.3346 16.666 18.3346H9.16602C8.24554 18.3346 7.49935 17.5884 7.49935 16.668V9.16797C7.49935 8.24749 8.24554 7.5013 9.16602 7.5013Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -792,7 +772,7 @@ const duckDevMapPin = `
|
|
|
792
772
|
<path d="M7 8.66699C8.10457 8.66699 9 7.77156 9 6.66699C9 5.56242 8.10457 4.66699 7 4.66699C5.89543 4.66699 5 5.56242 5 6.66699C5 7.77156 5.89543 8.66699 7 8.66699Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
793
773
|
</svg>
|
|
794
774
|
`;
|
|
795
|
-
const
|
|
775
|
+
const duckDevSidebarMedium = `
|
|
796
776
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
797
777
|
<path d="M7.5 2.5V17.5M4.16667 2.5H15.8333C16.7538 2.5 17.5 3.24619 17.5 4.16667V15.8333C17.5 16.7538 16.7538 17.5 15.8333 17.5H4.16667C3.24619 17.5 2.5 16.7538 2.5 15.8333V4.16667C2.5 3.24619 3.24619 2.5 4.16667 2.5Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
798
778
|
</svg>
|
|
@@ -817,7 +797,7 @@ const duckDevFolder = `
|
|
|
817
797
|
<path d="M14.6673 12.6667C14.6673 13.0203 14.5268 13.3594 14.2768 13.6095C14.0267 13.8595 13.6876 14 13.334 14H2.66732C2.3137 14 1.97456 13.8595 1.72451 13.6095C1.47446 13.3594 1.33398 13.0203 1.33398 12.6667V3.33333C1.33398 2.97971 1.47446 2.64057 1.72451 2.39052C1.97456 2.14048 2.3137 2 2.66732 2H6.00065L7.33398 4H13.334C13.6876 4 14.0267 4.14048 14.2768 4.39052C14.5268 4.64057 14.6673 4.97971 14.6673 5.33333V12.6667Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
818
798
|
</svg>
|
|
819
799
|
`;
|
|
820
|
-
const
|
|
800
|
+
const duckDevFolderMedium = `
|
|
821
801
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
822
802
|
<path d="M18.3327 15.8333C18.3327 16.2754 18.1571 16.6993 17.8445 17.0118C17.532 17.3244 17.108 17.5 16.666 17.5H3.33268C2.89065 17.5 2.46673 17.3244 2.15417 17.0118C1.84161 16.6993 1.66602 16.2754 1.66602 15.8333V4.16667C1.66602 3.72464 1.84161 3.30072 2.15417 2.98816C2.46673 2.67559 2.89065 2.5 3.33268 2.5H7.49935L9.16602 5H16.666C17.108 5 17.532 5.17559 17.8445 5.48816C18.1571 5.80072 18.3327 6.22464 18.3327 6.66667V15.8333Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
823
803
|
</svg>
|
|
@@ -827,7 +807,7 @@ const duckDevFolderOpen = `
|
|
|
827
807
|
<path d="M12.6673 14.5C12.9435 14.5 13.1673 14.2761 13.1673 14C13.1673 13.7239 12.9435 13.5 12.6673 13.5V14.5ZM1.72451 13.6095L2.07806 13.2559L1.72451 13.6095ZM1.72451 2.39052L2.07806 2.74408L1.72451 2.39052ZM6.00065 2L6.41668 1.72265C6.32394 1.58355 6.16783 1.5 6.00065 1.5V2ZM7.33398 4L6.91796 4.27735C7.01069 4.41645 7.16681 4.5 7.33398 4.5V4ZM13.1673 6C13.1673 6.27614 13.3912 6.5 13.6673 6.5C13.9435 6.5 14.1673 6.27614 14.1673 6H13.1673ZM4.07016 6.43446L4.55248 6.56623L4.5525 6.56619L4.07016 6.43446ZM4.2678 6.12036L4.58755 6.50476L4.2678 6.12036ZM4.59248 6L4.59238 6.5H4.59248V6ZM12.6698 13.5C12.3936 13.5001 12.1698 13.724 12.1699 14.0002C12.17 14.2763 12.394 14.5001 12.6701 14.5L12.6698 13.5ZM13.714 13.1311L13.2317 12.9993L13.2317 12.9994L13.714 13.1311ZM15.4449 6.79631L15.9272 6.92809L15.9273 6.92803L15.4449 6.79631ZM14.9226 6V6.5H14.9227L14.9226 6ZM1.58675 13.6273C1.51398 13.8937 1.67092 14.1687 1.9373 14.2414C2.20368 14.3142 2.47862 14.1573 2.5514 13.8909L1.58675 13.6273ZM12.6673 13.5H2.66732V14.5H12.6673V13.5ZM2.66732 13.5C2.4463 13.5 2.23434 13.4122 2.07806 13.2559L1.37096 13.963C1.71477 14.3068 2.18109 14.5 2.66732 14.5V13.5ZM2.07806 13.2559C1.92178 13.0996 1.83398 12.8877 1.83398 12.6667H0.833984C0.833984 13.1529 1.02714 13.6192 1.37096 13.963L2.07806 13.2559ZM1.83398 12.6667V3.33333H0.833984V12.6667H1.83398ZM1.83398 3.33333C1.83398 3.11232 1.92178 2.90036 2.07806 2.74408L1.37096 2.03697C1.02714 2.38079 0.833984 2.8471 0.833984 3.33333H1.83398ZM2.07806 2.74408C2.23434 2.5878 2.4463 2.5 2.66732 2.5V1.5C2.18109 1.5 1.71477 1.69315 1.37096 2.03697L2.07806 2.74408ZM2.66732 2.5H6.00065V1.5H2.66732V2.5ZM5.58463 2.27735L6.91796 4.27735L7.75001 3.72265L6.41668 1.72265L5.58463 2.27735ZM7.33398 4.5H12.334V3.5H7.33398V4.5ZM12.334 4.5C12.555 4.5 12.767 4.5878 12.9232 4.74408L13.6303 4.03697C13.2865 3.69315 12.8202 3.5 12.334 3.5V4.5ZM12.9232 4.74408C13.0795 4.90036 13.1673 5.11232 13.1673 5.33333H14.1673C14.1673 4.8471 13.9742 4.38079 13.6303 4.03697L12.9232 4.74408ZM13.1673 5.33333V6H14.1673V5.33333H13.1673ZM4.5525 6.56619C4.56174 6.53232 4.57772 6.51293 4.58755 6.50476L3.94806 5.73595C3.76986 5.88418 3.64729 6.08497 3.58782 6.30274L4.5525 6.56619ZM4.58755 6.50476C4.5922 6.50089 4.59504 6.49979 4.59536 6.49967C4.59562 6.49958 4.59446 6.5 4.59238 6.5L4.59259 5.5C4.35314 5.49995 4.1274 5.58679 3.94806 5.73595L4.58755 6.50476ZM12.6701 14.5C13.0263 14.4999 13.3656 14.3708 13.6388 14.1434L12.9991 13.3748C12.8965 13.4602 12.7809 13.5 12.6698 13.5L12.6701 14.5ZM13.6388 14.1434C13.9109 13.917 14.1026 13.6063 14.1964 13.2628L13.2317 12.9994C13.1881 13.159 13.1029 13.2884 12.9991 13.3748L13.6388 14.1434ZM14.1964 13.2629L15.9272 6.92809L14.9626 6.66452L13.2317 12.9993L14.1964 13.2629ZM15.9273 6.92803C15.9709 6.76828 15.9804 6.60049 15.9557 6.43705L14.9669 6.58678C14.9709 6.61321 14.9692 6.64024 14.9626 6.66459L15.9273 6.92803ZM15.9557 6.43705C15.9309 6.27361 15.872 6.11534 15.7802 5.97548L14.9441 6.52395C14.9539 6.539 14.9629 6.56035 14.9669 6.58678L15.9557 6.43705ZM15.7802 5.97548C15.6884 5.83546 15.5648 5.7159 15.4157 5.6312L14.9218 6.50068C14.9254 6.50271 14.9343 6.50905 14.9441 6.52395L15.7802 5.97548ZM15.4157 5.6312C15.2662 5.54624 15.097 5.49996 14.9225 5.5L14.9227 6.5C14.9192 6.5 14.9186 6.4989 14.9218 6.50068L15.4157 5.6312ZM2.5514 13.8909L4.55248 6.56623L3.58784 6.30269L1.58675 13.6273L2.5514 13.8909ZM4.59248 6.5H14.9226V5.5H4.59248V6.5Z" fill="#6B7280"/>
|
|
828
808
|
</svg>
|
|
829
809
|
`;
|
|
830
|
-
const
|
|
810
|
+
const duckDevFolderOpenMedium = `
|
|
831
811
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
832
812
|
<g clip-path="url(#clip0_6189_95788)">
|
|
833
813
|
<path d="M15.8327 18.25C16.2469 18.25 16.5827 17.9142 16.5827 17.5C16.5827 17.0858 16.2469 16.75 15.8327 16.75V18.25ZM2.15417 17.0118L2.6845 16.4815L2.15417 17.0118ZM2.15417 2.98816L2.6845 3.51849L2.6845 3.51849L2.15417 2.98816ZM7.49935 2.5L8.12339 2.08397C7.98429 1.87533 7.75011 1.75 7.49935 1.75V2.5ZM9.16602 5L8.54198 5.41603C8.68108 5.62467 8.91525 5.75 9.16602 5.75V5ZM16.3327 7.5C16.3327 7.91421 16.6685 8.25 17.0827 8.25C17.4969 8.25 17.8327 7.91421 17.8327 7.5H16.3327ZM5.08624 8.04308L5.80972 8.24073L5.80974 8.24066L5.08624 8.04308ZM5.33329 7.65045L5.8129 8.22705L5.33329 7.65045ZM5.73914 7.5L5.73898 8.25H5.73914V7.5ZM15.8357 16.75C15.4215 16.7501 15.0858 17.086 15.086 17.5003C15.0861 17.9145 15.422 18.2501 15.8362 18.25L15.8357 16.75ZM17.1411 16.4138L16.4176 16.2162L16.4176 16.2163L17.1411 16.4138ZM19.3047 8.49538L20.0282 8.69306L20.0282 8.69297L19.3047 8.49538ZM18.6518 7.5V8.25H18.652L18.6518 7.5ZM1.86139 17.0012C1.75223 17.4008 1.98765 17.8132 2.38722 17.9224C2.78679 18.0315 3.1992 17.7961 3.30836 17.3965L1.86139 17.0012ZM15.8327 16.75H3.33268V18.25H15.8327V16.75ZM3.33268 16.75C3.08957 16.75 2.85641 16.6534 2.6845 16.4815L1.62384 17.5422C2.07705 17.9954 2.69174 18.25 3.33268 18.25V16.75ZM2.6845 16.4815C2.51259 16.3096 2.41602 16.0764 2.41602 15.8333H0.916016C0.916016 16.4743 1.17063 17.089 1.62384 17.5422L2.6845 16.4815ZM2.41602 15.8333V4.16667H0.916016V15.8333H2.41602ZM2.41602 4.16667C2.41602 3.92355 2.51259 3.69039 2.6845 3.51849L1.62384 2.45783C1.17063 2.91104 0.916016 3.52573 0.916016 4.16667H2.41602ZM2.6845 3.51849C2.85641 3.34658 3.08957 3.25 3.33268 3.25V1.75C2.69174 1.75 2.07705 2.00461 1.62384 2.45783L2.6845 3.51849ZM3.33268 3.25H7.49935V1.75H3.33268V3.25ZM6.87531 2.91603L8.54198 5.41603L9.79005 4.58397L8.12339 2.08397L6.87531 2.91603ZM9.16602 5.75H15.416V4.25H9.16602V5.75ZM15.416 5.75C15.6591 5.75 15.8923 5.84658 16.0642 6.01849L17.1249 4.95783C16.6716 4.50461 16.057 4.25 15.416 4.25V5.75ZM16.0642 6.01849C16.2361 6.19039 16.3327 6.42355 16.3327 6.66667H17.8327C17.8327 6.02573 17.5781 5.41104 17.1249 4.95783L16.0642 6.01849ZM16.3327 6.66667V7.5H17.8327V6.66667H16.3327ZM5.80974 8.24066C5.81217 8.23177 5.81508 8.22626 5.81659 8.22387C5.8181 8.22148 5.81752 8.22321 5.8129 8.22705L4.85368 7.07384C4.60988 7.27663 4.44335 7.55029 4.36273 7.84549L5.80974 8.24066ZM5.8129 8.22705C5.80244 8.23576 5.77677 8.25001 5.73898 8.25L5.73931 6.75C5.40934 6.74993 5.09918 6.86964 4.85368 7.07384L5.8129 8.22705ZM15.8362 18.25C16.3121 18.2498 16.7642 18.0773 17.127 17.7754L16.1675 16.6224C16.0605 16.7114 15.944 16.75 15.8357 16.75L15.8362 18.25ZM17.127 17.7754C17.4881 17.4749 17.7411 17.0637 17.8646 16.6114L16.4176 16.2163C16.3694 16.3928 16.2762 16.5319 16.1675 16.6224L17.127 17.7754ZM17.8646 16.6115L20.0282 8.69306L18.5812 8.2977L16.4176 16.2162L17.8646 16.6115ZM20.0282 8.69297C20.0874 8.47635 20.1002 8.24902 20.0667 8.0276L18.5836 8.25219C18.586 8.2681 18.5849 8.28429 18.5812 8.2978L20.0282 8.69297ZM20.0667 8.0276C20.0332 7.80617 19.9533 7.59122 19.8284 7.40079L18.5741 8.2235C18.5762 8.22671 18.5812 8.23628 18.5836 8.25219L20.0667 8.0276ZM19.8284 7.40079C19.7033 7.21012 19.5345 7.04652 19.33 6.93031L18.589 8.23453C18.5753 8.22674 18.5721 8.22051 18.5741 8.2235L19.8284 7.40079ZM19.33 6.93031C19.1247 6.81371 18.892 6.74995 18.6516 6.75L18.652 8.25C18.6253 8.25001 18.6034 8.2427 18.589 8.23453L19.33 6.93031ZM3.30836 17.3965L5.80972 8.24073L4.36275 7.84542L1.86139 17.0012L3.30836 17.3965ZM5.73914 8.25H18.6518V6.75H5.73914V8.25Z" fill="#6B7280"/>
|
|
@@ -844,7 +824,7 @@ const duckDevPlus = `
|
|
|
844
824
|
<path d="M8.00065 3.33203V12.6654M3.33398 7.9987H12.6673" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
845
825
|
</svg>
|
|
846
826
|
`;
|
|
847
|
-
const
|
|
827
|
+
const duckDevPlusMedium = `
|
|
848
828
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
849
829
|
<path d="M9.99935 4.16797V15.8346M4.16602 10.0013H15.8327" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
850
830
|
</svg>
|
|
@@ -860,7 +840,7 @@ const duckDevFiltersLines = `
|
|
|
860
840
|
<path d="M4 8H12M2 4H14M6 12H10" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
861
841
|
</svg>
|
|
862
842
|
`;
|
|
863
|
-
const
|
|
843
|
+
const duckDevFiltersLinesMedium = `
|
|
864
844
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
865
845
|
<path d="M5 10H15M2.5 5H17.5M7.5 15H12.5" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
866
846
|
</svg>
|
|
@@ -870,7 +850,7 @@ const duckDevSearch = `
|
|
|
870
850
|
<path d="M14 14L11.1 11.1M12.6667 7.33333C12.6667 10.2789 10.2789 12.6667 7.33333 12.6667C4.38781 12.6667 2 10.2789 2 7.33333C2 4.38781 4.38781 2 7.33333 2C10.2789 2 12.6667 4.38781 12.6667 7.33333Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
871
851
|
</svg>
|
|
872
852
|
`;
|
|
873
|
-
const
|
|
853
|
+
const duckDevSearchMedium = `
|
|
874
854
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
875
855
|
<path d="M14 14L11.1 11.1M12.6667 7.33333C12.6667 10.2789 10.2789 12.6667 7.33333 12.6667C4.38781 12.6667 2 10.2789 2 7.33333C2 4.38781 4.38781 2 7.33333 2C10.2789 2 12.6667 4.38781 12.6667 7.33333Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
876
856
|
</svg>
|
|
@@ -883,7 +863,7 @@ const duckDevGrid = `
|
|
|
883
863
|
<path d="M6.66667 9.33333H2V14H6.66667V9.33333Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
884
864
|
</svg>
|
|
885
865
|
`;
|
|
886
|
-
const
|
|
866
|
+
const duckDevGridMedium = `
|
|
887
867
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
888
868
|
<path d="M8.33333 2.5H2.5V8.33333H8.33333V2.5Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
889
869
|
<path d="M17.5 2.5H11.6667V8.33333H17.5V2.5Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -896,17 +876,12 @@ const duckDevList = `
|
|
|
896
876
|
<path d="M6.66667 5H17.5M6.66667 10H17.5M6.66667 15H17.5M2.5 5H2.50833M2.5 10H2.50833M2.5 15H2.50833" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
897
877
|
</svg>
|
|
898
878
|
`;
|
|
899
|
-
const
|
|
879
|
+
const duckDevListMedium = `
|
|
900
880
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
901
881
|
<path d="M6.66667 5H17.5M6.66667 10H17.5M6.66667 15H17.5M2.5 5H2.50833M2.5 10H2.50833M2.5 15H2.50833" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
902
882
|
</svg>
|
|
903
883
|
`;
|
|
904
|
-
const
|
|
905
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
906
|
-
<path d="M6.66676 13.8511C6.0865 13.7195 5.52921 13.5017 5.01343 13.2051M9.33343 2.14844C10.6589 2.45115 11.8423 3.1949 12.6899 4.25791C13.5375 5.32092 13.9991 6.64021 13.9991 7.99977C13.9991 9.35934 13.5375 10.6786 12.6899 11.7416C11.8423 12.8046 10.6589 13.5484 9.33343 13.8511M3.05276 11.3951C2.6891 10.8668 2.4129 10.2833 2.23476 9.6671M2.08276 6.99977C2.18943 6.36644 2.39476 5.76644 2.68276 5.21644L2.79543 5.0131M4.60476 3.05244C5.22853 2.62304 5.92831 2.31625 6.66676 2.14844" stroke="#6B7280" stroke-linecap="round" stroke-linejoin="round"/>
|
|
907
|
-
</svg>
|
|
908
|
-
`;
|
|
909
|
-
const duckDevSortAZSm = `
|
|
884
|
+
const duckDevSortAZMedium = `
|
|
910
885
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
911
886
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6673 4.375C15.0125 4.375 15.2923 4.65482 15.2923 5V12.2917L16.6673 10.4583C16.8744 10.1822 17.2662 10.1262 17.5423 10.3333C17.8185 10.5404 17.8744 10.9322 17.6673 11.2083L15.1673 14.5417C15.0059 14.7569 14.7249 14.8447 14.4697 14.7596C14.2145 14.6745 14.0423 14.4357 14.0423 14.1667V5C14.0423 4.65482 14.3221 4.375 14.6673 4.375ZM6.54232 5C6.54232 4.65482 6.82214 4.375 7.16732 4.375H11.334C11.6792 4.375 11.959 4.65482 11.959 5C11.959 5.34518 11.6792 5.625 11.334 5.625H7.16732C6.82214 5.625 6.54232 5.34518 6.54232 5ZM4.87565 9.16667C4.87565 8.82149 5.15547 8.54167 5.50065 8.54167H11.334C11.6792 8.54167 11.959 8.82149 11.959 9.16667C11.959 9.51184 11.6792 9.79167 11.334 9.79167H5.50065C5.15547 9.79167 4.87565 9.51184 4.87565 9.16667ZM3.20898 13.3333C3.20898 12.9882 3.48881 12.7083 3.83398 12.7083H11.334C11.6792 12.7083 11.959 12.9882 11.959 13.3333C11.959 13.6785 11.6792 13.9583 11.334 13.9583H3.83398C3.48881 13.9583 3.20898 13.6785 3.20898 13.3333Z" fill="#6B7280"/>
|
|
912
887
|
</svg>
|
|
@@ -921,7 +896,7 @@ const duckDevFileText = `
|
|
|
921
896
|
<path d="M9.33268 1.33203H3.99935C3.64573 1.33203 3.30659 1.47251 3.05654 1.72256C2.80649 1.9726 2.66602 2.31174 2.66602 2.66536V13.332C2.66602 13.6857 2.80649 14.0248 3.05654 14.2748C3.30659 14.5249 3.64573 14.6654 3.99935 14.6654H11.9993C12.353 14.6654 12.6921 14.5249 12.9422 14.2748C13.1922 14.0248 13.3327 13.6857 13.3327 13.332V5.33203M9.33268 1.33203L13.3327 5.33203M9.33268 1.33203V5.33203H13.3327M10.666 8.66536H5.33268M10.666 11.332H5.33268M6.66602 5.9987H5.33268" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
922
897
|
</svg>
|
|
923
898
|
`;
|
|
924
|
-
const
|
|
899
|
+
const duckDevFileTextMedium = `
|
|
925
900
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
926
901
|
<path d="M11.6673 1.66797H5.00065C4.55862 1.66797 4.1347 1.84356 3.82214 2.15612C3.50958 2.46868 3.33398 2.89261 3.33398 3.33464V16.668C3.33398 17.11 3.50958 17.5339 3.82214 17.8465C4.1347 18.159 4.55862 18.3346 5.00065 18.3346H15.0007C15.4427 18.3346 15.8666 18.159 16.1792 17.8465C16.4917 17.5339 16.6673 17.11 16.6673 16.668V6.66797M11.6673 1.66797L16.6673 6.66797M11.6673 1.66797V6.66797H16.6673M13.334 10.8346H6.66732M13.334 14.168H6.66732M8.33398 7.5013H6.66732" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
927
902
|
</svg>
|
|
@@ -938,7 +913,7 @@ const duckDevLink = `
|
|
|
938
913
|
</defs>
|
|
939
914
|
</svg>
|
|
940
915
|
`;
|
|
941
|
-
const
|
|
916
|
+
const duckDevExternalLinkMedium = `
|
|
942
917
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
943
918
|
<path d="M8.33366 4.16536H6.83366C5.90033 4.16536 5.43366 4.16536 5.07699 4.34703C4.76337 4.50677 4.5084 4.76174 4.34866 5.07536C4.16699 5.43203 4.16699 5.8987 4.16699 6.83203V13.1654C4.16699 14.0987 4.16699 14.5654 4.34866 14.922C4.50845 15.2356 4.7634 15.4906 5.07699 15.6504C5.43283 15.832 5.89949 15.832 6.83116 15.832H13.1695C14.1012 15.832 14.567 15.832 14.9228 15.6504C15.237 15.4904 15.492 15.2354 15.652 14.922C15.8337 14.5654 15.8337 14.0995 15.8337 13.1679V11.6654M16.667 7.4987V3.33203M16.667 3.33203H12.5003M16.667 3.33203L10.8337 9.16536" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
944
919
|
</svg>
|
|
@@ -951,7 +926,7 @@ const duckDevLinkBroken = `
|
|
|
951
926
|
<path d="M10.0003 10.3911L7.3105 13.334C6.38202 14.3498 4.72612 14.1851 3.61195 12.9661C2.49778 11.7472 2.34724 9.93548 3.27572 8.91966L4.11629 8" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round"/>
|
|
952
927
|
</svg>
|
|
953
928
|
`;
|
|
954
|
-
const
|
|
929
|
+
const duckDevLinkBrokenMedium = `
|
|
955
930
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
956
931
|
<path d="M1.66699 6.66797L6.66699 8.33464" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round"/>
|
|
957
932
|
<path d="M5 3.33203L6.66667 5.83203" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round"/>
|
|
@@ -959,19 +934,7 @@ const duckDevLinkBrokenSm = `
|
|
|
959
934
|
<path d="M12.4997 12.9888L9.13739 16.6675C7.97679 17.9373 5.90692 17.7314 4.51421 16.2077C3.12149 14.6839 2.93332 12.4194 4.09392 11.1496L5.14464 10" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round"/>
|
|
960
935
|
</svg>
|
|
961
936
|
`;
|
|
962
|
-
const
|
|
963
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
964
|
-
<g clip-path="url(#clip0_21839_133047)">
|
|
965
|
-
<path d="M8.00065 3.9987V7.9987L10.6673 9.33203M14.6673 7.9987C14.6673 11.6806 11.6825 14.6654 8.00065 14.6654C4.31875 14.6654 1.33398 11.6806 1.33398 7.9987C1.33398 4.3168 4.31875 1.33203 8.00065 1.33203C11.6825 1.33203 14.6673 4.3168 14.6673 7.9987Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
966
|
-
</g>
|
|
967
|
-
<defs>
|
|
968
|
-
<clipPath id="clip0_21839_133047">
|
|
969
|
-
<rect width="16" height="16" fill="white"/>
|
|
970
|
-
</clipPath>
|
|
971
|
-
</defs>
|
|
972
|
-
</svg>
|
|
973
|
-
`;
|
|
974
|
-
const duckDevClockSm = `
|
|
937
|
+
const duckDevClockMedium = `
|
|
975
938
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
976
939
|
<g clip-path="url(#clip0_21_2736)">
|
|
977
940
|
<path d="M9.99935 5.0013V10.0013L13.3327 11.668M18.3327 10.0013C18.3327 14.6037 14.6017 18.3346 9.99935 18.3346C5.39698 18.3346 1.66602 14.6037 1.66602 10.0013C1.66602 5.39893 5.39698 1.66797 9.99935 1.66797C14.6017 1.66797 18.3327 5.39893 18.3327 10.0013Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -995,7 +958,7 @@ const duckDevInfo = `
|
|
|
995
958
|
</defs>
|
|
996
959
|
</svg>
|
|
997
960
|
`;
|
|
998
|
-
const
|
|
961
|
+
const duckDevInfoMedium = `
|
|
999
962
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1000
963
|
<g clip-path="url(#clip0_21_2634)">
|
|
1001
964
|
<path d="M10.0003 13.3346V10.0013M10.0003 6.66797H10.0087M18.3337 10.0013C18.3337 14.6037 14.6027 18.3346 10.0003 18.3346C5.39795 18.3346 1.66699 14.6037 1.66699 10.0013C1.66699 5.39893 5.39795 1.66797 10.0003 1.66797C14.6027 1.66797 18.3337 5.39893 18.3337 10.0013Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -1023,7 +986,7 @@ const duckDevAlertTriangle = `
|
|
|
1023
986
|
<path d="M8.0005 5.33412V8.00079M8.0005 10.6675H8.00717M6.8605 1.90745L1.21384 11.3341C1.09741 11.5357 1.03581 11.7643 1.03516 11.9971C1.03451 12.2299 1.09483 12.4589 1.21012 12.6611C1.32541 12.8634 1.49165 13.032 1.69231 13.15C1.89296 13.2681 2.12103 13.3316 2.35384 13.3341H13.6472C13.88 13.3316 14.108 13.2681 14.3087 13.15C14.5094 13.032 14.6756 12.8634 14.7909 12.6611C14.9062 12.4589 14.9665 12.2299 14.9658 11.9971C14.9652 11.7643 14.9036 11.5357 14.7872 11.3341L9.1405 1.90745C9.02165 1.71153 8.85432 1.54953 8.65463 1.43711C8.45495 1.32469 8.22966 1.26562 8.0005 1.26562C7.77135 1.26563 7.54606 1.32469 7.34637 1.43711C7.14669 1.54953 6.97935 1.71153 6.8605 1.90745Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1024
987
|
</svg>
|
|
1025
988
|
`;
|
|
1026
|
-
const
|
|
989
|
+
const duckDevAlertTriangleMedium = `
|
|
1027
990
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1028
991
|
<path d="M9.99965 6.66765V10.001M9.99965 13.3343H10.008M8.57465 2.38432L1.51632 14.1677C1.37079 14.4197 1.29379 14.7054 1.29298 14.9964C1.29216 15.2874 1.36756 15.5736 1.51167 15.8264C1.65579 16.0793 1.86359 16.2899 2.11441 16.4375C2.36523 16.5851 2.65032 16.6645 2.94132 16.6677H17.058C17.349 16.6645 17.6341 16.5851 17.8849 16.4375C18.1357 16.2899 18.3435 16.0793 18.4876 15.8264C18.6317 15.5736 18.7071 15.2874 18.7063 14.9964C18.7055 14.7054 18.6285 14.4197 18.483 14.1677L11.4247 2.38432C11.2761 2.13941 11.0669 1.93692 10.8173 1.79639C10.5677 1.65586 10.2861 1.58203 9.99965 1.58203C9.71321 1.58203 9.43159 1.65586 9.18199 1.79639C8.93238 1.93692 8.72321 2.13941 8.57465 2.38432Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1029
992
|
</svg>
|
|
@@ -1047,7 +1010,7 @@ const duckDev2Layers = `
|
|
|
1047
1010
|
<path d="M1.33398 9.66667L8.00065 13L14.6673 9.66667M8.00065 3L1.33398 6.33333L8.00065 9.66667L14.6673 6.33333L8.00065 3Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1048
1011
|
</svg>
|
|
1049
1012
|
`;
|
|
1050
|
-
const
|
|
1013
|
+
const duckDev2LayersMedium = `
|
|
1051
1014
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1052
1015
|
<path d="M1.66602 12.0833L9.99935 16.25L18.3327 12.0833M9.99935 3.75L1.66602 7.91667L9.99935 12.0833L18.3327 7.91667L9.99935 3.75Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1053
1016
|
</svg>
|
|
@@ -1064,7 +1027,7 @@ const duckDev3Layers = `
|
|
|
1064
1027
|
</defs>
|
|
1065
1028
|
</svg>
|
|
1066
1029
|
`;
|
|
1067
|
-
const
|
|
1030
|
+
const duckDev3LayersMedium = `
|
|
1068
1031
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1069
1032
|
<g clip-path="url(#clip0_21_2866)">
|
|
1070
1033
|
<path d="M1.66699 14.168L10.0003 18.3346L18.3337 14.168M1.66699 10.0013L10.0003 14.168L18.3337 10.0013M10.0003 1.66797L1.66699 5.83464L10.0003 10.0013L18.3337 5.83464L10.0003 1.66797Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -1076,12 +1039,12 @@ const duckDev3LayersSm = `
|
|
|
1076
1039
|
</defs>
|
|
1077
1040
|
</svg>
|
|
1078
1041
|
`;
|
|
1079
|
-
const
|
|
1042
|
+
const duckDevLearningMedium = `
|
|
1080
1043
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1081
1044
|
<path d="M18.3523 7.29583V11.1387M4.81565 9.09375V14.2779C4.81565 14.2779 6.81982 16.25 9.59315 16.25C12.3669 16.25 14.3711 14.2779 14.3711 14.2779V9.09375M0.833984 7.25L9.59315 3.75L18.3523 7.25L9.59315 10.75L0.833984 7.25Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1082
1045
|
</svg>
|
|
1083
1046
|
`;
|
|
1084
|
-
const
|
|
1047
|
+
const duckDevBellMedium = `
|
|
1085
1048
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1086
1049
|
<path d="M11.4417 17.5013C11.2952 17.7539 11.0849 17.9635 10.8319 18.1092C10.5788 18.255 10.292 18.3317 10 18.3317C9.70802 18.3317 9.42116 18.255 9.16814 18.1092C8.91513 17.9635 8.70484 17.7539 8.55833 17.5013M15 6.66797C15 5.34189 14.4732 4.07012 13.5355 3.13243C12.5979 2.19475 11.3261 1.66797 10 1.66797C8.67392 1.66797 7.40215 2.19475 6.46447 3.13243C5.52678 4.07012 5 5.34189 5 6.66797C5 12.5013 2.5 14.168 2.5 14.168H17.5C17.5 14.168 15 12.5013 15 6.66797Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1087
1050
|
</svg>
|
|
@@ -1091,7 +1054,7 @@ const duckDevMessageCircle = `
|
|
|
1091
1054
|
<path d="M14 7.66669C14.0023 8.5466 13.7967 9.41461 13.4 10.2C12.9296 11.1412 12.2065 11.9328 11.3116 12.4862C10.4168 13.0396 9.3855 13.3329 8.33333 13.3334C7.45342 13.3356 6.58541 13.1301 5.8 12.7334L2 14L3.26667 10.2C2.86995 9.41461 2.66437 8.5466 2.66667 7.66669C2.66707 6.61452 2.96041 5.58325 3.51381 4.68839C4.06722 3.79352 4.85884 3.0704 5.8 2.60002C6.58541 2.20331 7.45342 1.99772 8.33333 2.00002H8.66667C10.0562 2.07668 11.3687 2.66319 12.3528 3.64726C13.3368 4.63132 13.9233 5.94379 14 7.33335V7.66669Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1092
1055
|
</svg>
|
|
1093
1056
|
`;
|
|
1094
|
-
const
|
|
1057
|
+
const duckDevMessageCircleMedium = `
|
|
1095
1058
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1096
1059
|
<path d="M17.5 9.58336C17.5029 10.6832 17.2459 11.7683 16.75 12.75C16.162 13.9265 15.2581 14.916 14.1395 15.6078C13.021 16.2995 11.7319 16.6662 10.4167 16.6667C9.31678 16.6696 8.23176 16.4126 7.25 15.9167L2.5 17.5L4.08333 12.75C3.58744 11.7683 3.33047 10.6832 3.33333 9.58336C3.33384 8.26815 3.70051 6.97907 4.39227 5.86048C5.08402 4.7419 6.07355 3.838 7.25 3.25002C8.23176 2.75413 9.31678 2.49716 10.4167 2.50002H10.8333C12.5703 2.59585 14.2109 3.32899 15.441 4.55907C16.671 5.78915 17.4042 7.42973 17.5 9.16669V9.58336Z" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1097
1060
|
</svg>
|
|
@@ -1129,7 +1092,7 @@ const duckDevPlayCircle = `
|
|
|
1129
1092
|
</defs>
|
|
1130
1093
|
</svg>
|
|
1131
1094
|
`;
|
|
1132
|
-
const
|
|
1095
|
+
const duckDevPlayCircleMedium = `
|
|
1133
1096
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1134
1097
|
<g clip-path="url(#clip0_21_2356)">
|
|
1135
1098
|
<path d="M10.0003 18.3346C14.6027 18.3346 18.3337 14.6037 18.3337 10.0013C18.3337 5.39893 14.6027 1.66797 10.0003 1.66797C5.39795 1.66797 1.66699 5.39893 1.66699 10.0013C1.66699 14.6037 5.39795 18.3346 10.0003 18.3346Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -1142,23 +1105,12 @@ const duckDevPlayCircleSm = `
|
|
|
1142
1105
|
</defs>
|
|
1143
1106
|
</svg>
|
|
1144
1107
|
`;
|
|
1145
|
-
const duckDevClipBoard = `
|
|
1146
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
1147
|
-
<path d="M12.812 3.12885L12.4495 3.47326L12.4495 3.47326L12.812 3.12885ZM3.18671 3.12885L2.82424 2.78445L2.82424 2.78445L3.18671 3.12885ZM7.11046 8.31758C6.83432 8.31758 6.61046 8.54144 6.61046 8.81758C6.61046 9.09372 6.83432 9.31758 7.11046 9.31758V8.31758ZM10.9623 9.31758C11.2385 9.31758 11.4623 9.09372 11.4623 8.81758C11.4623 8.54144 11.2385 8.31758 10.9623 8.31758V9.31758ZM5.03639 8.31758C4.76024 8.31758 4.53639 8.54144 4.53639 8.81758C4.53639 9.09372 4.76024 9.31758 5.03639 9.31758V8.31758ZM5.33268 9.31758C5.60882 9.31758 5.83268 9.09372 5.83268 8.81758C5.83268 8.54144 5.60882 8.31758 5.33268 8.31758V9.31758ZM5.03639 6.13472C4.76024 6.13472 4.53639 6.35858 4.53639 6.63472C4.53639 6.91086 4.76024 7.13472 5.03639 7.13472V6.13472ZM5.33268 7.13472C5.60882 7.13472 5.83268 6.91086 5.83268 6.63472C5.83268 6.35858 5.60882 6.13472 5.33268 6.13472V7.13472ZM5.03639 10.5004C4.76024 10.5004 4.53639 10.7243 4.53639 11.0004C4.53639 11.2766 4.76024 11.5004 5.03639 11.5004V10.5004ZM5.33268 11.5004C5.60882 11.5004 5.83268 11.2766 5.83268 11.0004C5.83268 10.7243 5.60882 10.5004 5.33268 10.5004V11.5004ZM7.11046 6.13472C6.83432 6.13472 6.61046 6.35858 6.61046 6.63472C6.61046 6.91086 6.83432 7.13472 7.11046 7.13472V6.13472ZM10.9623 7.13472C11.2385 7.13472 11.4623 6.91086 11.4623 6.63472C11.4623 6.35858 11.2385 6.13472 10.9623 6.13472V7.13472ZM7.11046 10.5004C6.83432 10.5004 6.61046 10.7243 6.61046 11.0004C6.61046 11.2766 6.83432 11.5004 7.11046 11.5004V10.5004ZM10.9623 11.5004C11.2385 11.5004 11.4623 11.2766 11.4623 11.0004C11.4623 10.7243 11.2385 10.5004 10.9623 10.5004V11.5004ZM12.8327 6.32288V10.0649H13.8327V6.32288H12.8327ZM9.77713 14.1668H6.22157V15.1668H9.77713V14.1668ZM3.16602 10.0649V6.32288H2.16602V10.0649H3.16602ZM6.22157 14.1668C5.36866 14.1668 4.78188 14.1657 4.34092 14.1033C3.91707 14.0433 3.70237 13.9356 3.54918 13.7744L2.82424 14.4632C3.19176 14.85 3.65644 15.0164 4.20081 15.0934C4.72808 15.168 5.39837 15.1668 6.22157 15.1668V14.1668ZM2.16602 10.0649C2.16602 10.9401 2.1656 11.8412 2.23311 12.5926C2.26693 12.9691 2.31917 13.326 2.40337 13.6341C2.48515 13.9333 2.61051 14.2383 2.82424 14.4632L3.54918 13.7744C3.50257 13.7254 3.43267 13.6071 3.368 13.3705C3.30576 13.1427 3.26036 12.8511 3.2291 12.5031C3.16643 11.8056 3.16602 10.9538 3.16602 10.0649H2.16602ZM12.8327 10.0649C12.8327 10.9538 12.8323 11.8056 12.7696 12.5031C12.7383 12.8511 12.6929 13.1427 12.6307 13.3705C12.566 13.6071 12.4961 13.7254 12.4495 13.7744L13.1745 14.4632C13.3882 14.2383 13.5135 13.9333 13.5953 13.6341C13.6795 13.326 13.7318 12.9691 13.7656 12.5926C13.8331 11.8412 13.8327 10.9401 13.8327 10.0649H12.8327ZM9.77713 15.1668C10.6003 15.1668 11.2706 15.168 11.7979 15.0934C12.3423 15.0164 12.8069 14.85 13.1745 14.4632L12.4495 13.7744C12.2963 13.9356 12.0816 14.0433 11.6578 14.1033C11.2168 14.1657 10.63 14.1668 9.77713 14.1668V15.1668ZM13.8327 6.32288C13.8327 5.45432 13.8336 4.75508 13.7636 4.20651C13.692 3.64606 13.5385 3.16764 13.1745 2.78445L12.4495 3.47326C12.6061 3.63808 12.713 3.87466 12.7716 4.33322C12.8317 4.80366 12.8327 5.42743 12.8327 6.32288H13.8327ZM3.16602 6.32288C3.16602 5.42743 3.16698 4.80366 3.22707 4.33322C3.28565 3.87466 3.39258 3.63808 3.54918 3.47326L2.82424 2.78445C2.46015 3.16764 2.30673 3.64606 2.23513 4.20651C2.16506 4.75508 2.16602 5.45432 2.16602 6.32288H3.16602ZM10.3668 3.08192C11.0154 3.08572 11.4679 3.10357 11.8085 3.16942C12.1328 3.23212 12.3143 3.33091 12.4495 3.47326L13.1745 2.78445C12.8544 2.44757 12.4591 2.27668 11.9983 2.1876C11.5539 2.10169 11.013 2.08569 10.3726 2.08194L10.3668 3.08192ZM5.62605 2.08194C4.98575 2.08569 4.44476 2.10169 4.00036 2.1876C3.53959 2.27668 3.14433 2.44757 2.82424 2.78445L3.54918 3.47326C3.68444 3.33091 3.86586 3.23212 4.19016 3.16942C4.53083 3.10357 4.98331 3.08572 5.63191 3.08192L5.62605 2.08194ZM7.11046 9.31758H10.9623V8.31758H7.11046V9.31758ZM5.03639 9.31758H5.33268V8.31758H5.03639V9.31758ZM5.03639 7.13472H5.33268V6.13472H5.03639V7.13472ZM5.03639 11.5004H5.33268V10.5004H5.03639V11.5004ZM7.11046 7.13472H10.9623V6.13472H7.11046V7.13472ZM7.11046 11.5004H10.9623V10.5004H7.11046V11.5004ZM6.51787 1.8335H9.48083V0.833496H6.51787V1.8335ZM9.86972 2.26901V2.89268H10.8697V2.26901H9.86972ZM9.48083 3.32819H6.51787V4.32819H9.48083V3.32819ZM6.12898 2.89268V2.26901H5.12898V2.89268H6.12898ZM6.51787 3.32819C6.32687 3.32819 6.12898 3.1576 6.12898 2.89268H5.12898C5.12898 3.6611 5.72703 4.32819 6.51787 4.32819V3.32819ZM9.86972 2.89268C9.86972 3.1576 9.67183 3.32819 9.48083 3.32819V4.32819C10.2717 4.32819 10.8697 3.6611 10.8697 2.89268H9.86972ZM9.48083 1.8335C9.67183 1.8335 9.86972 2.00409 9.86972 2.26901H10.8697C10.8697 1.50059 10.2717 0.833496 9.48083 0.833496V1.8335ZM6.51787 0.833496C5.72703 0.833496 5.12898 1.50059 5.12898 2.26901H6.12898C6.12898 2.00409 6.32687 1.8335 6.51787 1.8335V0.833496Z" fill="#595E6A"/>
|
|
1148
|
-
</svg>
|
|
1149
|
-
`;
|
|
1150
|
-
const duckDevClipBoardBold = `
|
|
1151
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1152
|
-
<path d="M6.33333 1.64941C5.78105 1.64941 5.33333 2.09713 5.33333 2.64941V3.31608C5.33333 3.86837 5.78105 4.31608 6.33333 4.31608H9.66667C10.219 4.31608 10.6667 3.86837 10.6667 3.31608V2.64941C10.6667 2.09713 10.219 1.64941 9.66667 1.64941H6.33333Z" fill="white"/>
|
|
1153
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.33333 3.00716C3.49473 3.05421 2.96532 3.18784 2.58579 3.56738C2 4.15316 2 5.09597 2 6.98159V10.9816C2 12.8672 2 13.81 2.58579 14.3958C3.17157 14.9816 4.11438 14.9816 6 14.9816H10C11.8856 14.9816 12.8284 14.9816 13.4142 14.3958C14 13.81 14 12.8672 14 10.9816V6.98159C14 5.09597 14 4.15316 13.4142 3.56738C13.0347 3.18784 12.5053 3.05421 11.6667 3.00716V3.31608C11.6667 4.42065 10.7712 5.31608 9.66667 5.31608H6.33333C5.22876 5.31608 4.33333 4.42065 4.33333 3.31608V3.00716ZM10.3412 8.68161C10.543 8.49319 10.5539 8.1768 10.3655 7.97492C10.1771 7.77305 9.86072 7.76214 9.65884 7.95056L7.14286 10.2988L6.34116 9.55056C6.13929 9.36214 5.82289 9.37305 5.63447 9.57492C5.44606 9.7768 5.45697 10.0932 5.65884 10.2816L6.8017 11.3483C6.9938 11.5276 7.29191 11.5276 7.48402 11.3483L10.3412 8.68161Z" fill="white"/>
|
|
1154
|
-
</svg>
|
|
1155
|
-
`;
|
|
1156
1108
|
const duckDevUpload = `
|
|
1157
1109
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
1158
1110
|
<path d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M11.3333 5.33333L8 2M8 2L4.66667 5.33333M8 2V10" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1159
1111
|
</svg>
|
|
1160
1112
|
`;
|
|
1161
|
-
const
|
|
1113
|
+
const duckDevUploadMedium = `
|
|
1162
1114
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1163
1115
|
<path d="M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1164
1116
|
</svg>
|
|
@@ -1168,7 +1120,7 @@ const duckDevMaximize = `
|
|
|
1168
1120
|
<path d="M10 2H14M14 2V6M14 2L9.33333 6.66667M6 14H2M2 14V10M2 14L6.66667 9.33333" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1169
1121
|
</svg>
|
|
1170
1122
|
`;
|
|
1171
|
-
const
|
|
1123
|
+
const duckDevMaximizeMedium = `
|
|
1172
1124
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1173
1125
|
<path d="M12.5 2.5H17.5M17.5 2.5V7.5M17.5 2.5L11.6667 8.33333M7.5 17.5H2.5M2.5 17.5V12.5M2.5 17.5L8.33333 11.6667" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1174
1126
|
</svg>
|
|
@@ -1178,26 +1130,11 @@ const duckDevArrowUpRight = `
|
|
|
1178
1130
|
<path d="M4.66699 11.3346L11.3337 4.66797M11.3337 4.66797H4.66699M11.3337 4.66797V11.3346" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1179
1131
|
</svg>
|
|
1180
1132
|
`;
|
|
1181
|
-
const
|
|
1133
|
+
const duckDevArrowUpRightMedium = `
|
|
1182
1134
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1183
1135
|
<path d="M5.83301 14.1654L14.1663 5.83203M14.1663 5.83203H5.83301M14.1663 5.83203V14.1654" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1184
1136
|
</svg>
|
|
1185
1137
|
`;
|
|
1186
|
-
const duckDevAddBranchSm = `
|
|
1187
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1188
|
-
<path d="M5.48425 17.4992L5.48424 7.63255M5.48424 7.63255C6.13845 7.63255 6.76585 7.37267 7.22844 6.91008C7.69103 6.44749 7.95091 5.82009 7.95091 5.16588C7.95091 4.51168 7.69103 3.88428 7.22844 3.42169C6.76585 2.9591 6.13845 2.69922 5.48424 2.69922C4.83004 2.69922 4.20264 2.9591 3.74005 3.42169C3.27746 3.88428 3.01758 4.51168 3.01758 5.16589C3.01758 5.82009 3.27746 6.44749 3.74005 6.91008C4.20264 7.37267 4.83004 7.63255 5.48424 7.63255ZM12.3909 15.5259C10.69 15.5259 9.05873 14.7462 7.856 13.3585C6.65327 11.9707 5.97758 10.0885 5.97758 8.12588M12.3909 5.65924V8.1259M12.3909 8.1259V10.5926M12.3909 8.1259H9.92421M12.3909 8.1259H14.8575M15.3509 12.5659C16.0051 12.5659 16.6325 12.8258 17.0951 13.2884C17.5577 13.7509 17.8176 14.3783 17.8176 15.0325C17.8176 15.6867 17.5577 16.3142 17.0951 16.7767C16.6325 17.2393 16.0051 17.4992 15.3509 17.4992C14.6967 17.4992 14.0693 17.2393 13.6067 16.7767C13.1441 16.3142 12.8842 15.6867 12.8842 15.0325C12.8842 14.3783 13.1441 13.7509 13.6067 13.2884C14.0693 12.8258 14.6967 12.5659 15.3509 12.5659Z" stroke="#595E6A" stroke-width="1.52055" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1189
|
-
</svg>
|
|
1190
|
-
`;
|
|
1191
|
-
const duckDevBranch = `
|
|
1192
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
1193
|
-
<path d="M4.9987 10.0013L5.00136 6.0013M4.9987 10.0013C5.44073 10.0013 5.86465 10.1769 6.17721 10.4895C6.48977 10.802 6.66536 11.2259 6.66536 11.668C6.66536 12.11 6.48977 12.5339 6.17721 12.8465C5.86465 13.159 5.44073 13.3346 4.9987 13.3346C4.55667 13.3346 4.13275 13.159 3.82019 12.8465C3.50763 12.5339 3.33203 12.11 3.33203 11.668C3.33203 11.2259 3.50763 10.802 3.82019 10.4895C4.13275 10.1769 4.55667 10.0013 4.9987 10.0013ZM5.00136 6.0013C5.44339 6.0013 5.86731 5.82571 6.17987 5.51315C6.49244 5.20059 6.66803 4.77666 6.66803 4.33464C6.66803 3.89261 6.49244 3.46868 6.17987 3.15612C5.86731 2.84356 5.44339 2.66797 5.00136 2.66797C4.55933 2.66797 4.13541 2.84356 3.82285 3.15612C3.51029 3.46868 3.3347 3.89261 3.3347 4.33464C3.3347 4.77666 3.51029 5.20059 3.82285 5.51315C4.13541 5.82571 4.55934 6.0013 5.00136 6.0013ZM9.66803 10.3346C8.51876 10.3346 7.41656 9.80785 6.6039 8.87017C5.79124 7.93249 5.5 7.3273 5.5 6.00122M11.668 8.33463C12.1101 8.33463 12.534 8.51023 12.8465 8.82279C13.1591 9.13535 13.3347 9.55927 13.3347 10.0013C13.3347 10.4433 13.1591 10.8672 12.8465 11.1798C12.534 11.4924 12.1101 11.668 11.668 11.668C11.226 11.668 10.8021 11.4924 10.4895 11.1798C10.177 10.8673 10.0014 10.4433 10.0014 10.0013C10.0014 9.55927 10.177 9.13535 10.4895 8.82279C10.8021 8.51023 11.226 8.33463 11.668 8.33463Z" stroke="#595E6A" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1194
|
-
</svg>
|
|
1195
|
-
`;
|
|
1196
|
-
const duckDevBranchSm = `
|
|
1197
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1198
|
-
<path d="M17.3604 12.5115H18.1104H17.3604ZM10.5063 12.3299L10.3199 13.0564H10.3199L10.5063 12.3299ZM8.26043 11.252L7.81022 11.8518H7.81022L8.26043 11.252ZM6.59806 9.39666L7.24355 9.01476L6.59806 9.39666ZM6.46413 13.4868L6.46789 6.70797L4.96789 6.70714L4.96413 13.486L6.46413 13.4868ZM15.0066 10.9077C15.4319 10.9077 15.8399 11.0767 16.1406 11.3774L17.2013 10.3168C16.6192 9.73469 15.8297 9.40769 15.0066 9.40769V10.9077ZM16.1406 11.3774C16.4414 11.6782 16.6104 12.0861 16.6104 12.5115H18.1104C18.1104 11.6883 17.7833 10.8988 17.2013 10.3168L16.1406 11.3774ZM16.6104 12.5115C16.6104 12.9368 16.4414 13.3447 16.1406 13.6455L17.2013 14.7062C17.7833 14.1241 18.1104 13.3346 18.1104 12.5115H16.6104ZM16.1406 13.6455C15.8398 13.9463 15.4319 14.1152 15.0066 14.1152L15.0066 15.6152C15.8297 15.6152 16.6192 15.2882 17.2013 14.7062L16.1406 13.6455ZM15.0066 14.1152C14.5812 14.1152 14.1733 13.9463 13.8725 13.6455L12.8119 14.7062C13.3939 15.2882 14.1834 15.6152 15.0066 15.6152L15.0066 14.1152ZM13.8725 13.6455C13.5718 13.3447 13.4028 12.9368 13.4028 12.5115H11.9028C11.9028 13.3346 12.2298 14.1241 12.8119 14.7062L13.8725 13.6455ZM13.4028 12.5115C13.4028 12.0861 13.5718 11.6782 13.8725 11.3774L12.8119 10.3168C12.2298 10.8988 11.9028 11.6883 11.9028 12.5115H13.4028ZM13.8725 11.3774C14.1733 11.0767 14.5812 10.9077 15.0066 10.9077V9.40769C14.1834 9.40769 13.3939 9.73469 12.8119 10.3168L13.8725 11.3774ZM5.71789 2.75C6.14324 2.75 6.55117 2.91897 6.85193 3.21974L7.91259 2.15907C7.33052 1.577 6.54106 1.25 5.71789 1.25L5.71789 2.75ZM6.85193 3.21974C7.1527 3.5205 7.32167 3.92843 7.32167 4.35378L8.82167 4.35378C8.82167 3.5306 8.49467 2.74115 7.91259 2.15907L6.85193 3.21974ZM7.32167 4.35378C7.32167 4.77913 7.1527 5.18705 6.85193 5.48782L7.91259 6.54848C8.49467 5.96641 8.82167 5.17695 8.82167 4.35378L7.32167 4.35378ZM6.85193 5.48782C6.55117 5.78859 6.14324 5.95755 5.71789 5.95755L5.71789 7.45755C6.54106 7.45755 7.33052 7.13055 7.91259 6.54848L6.85193 5.48782ZM5.71789 5.95755C5.29254 5.95755 4.88462 5.78859 4.58385 5.48782L3.52319 6.54848C4.10526 7.13055 4.89472 7.45755 5.71789 7.45755L5.71789 5.95755ZM4.58385 5.48782C4.28308 5.18705 4.11411 4.77913 4.11411 4.35378H2.61411C2.61411 5.17695 2.94112 5.96641 3.52319 6.54848L4.58385 5.48782ZM4.11411 4.35378C4.11411 3.92843 4.28308 3.5205 4.58385 3.21974L3.52319 2.15908C2.94112 2.74115 2.61411 3.5306 2.61411 4.35378H4.11411ZM4.58385 3.21974C4.88462 2.91897 5.29254 2.75 5.71789 2.75L5.71789 1.25C4.89472 1.25 4.10526 1.577 3.52319 2.15908L4.58385 3.21974ZM5.71413 14.2364C6.13948 14.2364 6.5474 14.4054 6.84817 14.7062L7.90883 13.6455C7.32676 13.0634 6.5373 12.7364 5.71413 12.7364V14.2364ZM6.84817 14.7062C7.14894 15.0069 7.31791 15.4149 7.31791 15.8402H8.81791C8.81791 15.017 8.4909 14.2276 7.90883 13.6455L6.84817 14.7062ZM7.31791 15.8402C7.31791 16.2656 7.14894 16.6735 6.84817 16.9742L7.90883 18.0349C8.4909 17.4528 8.81791 16.6634 8.81791 15.8402H7.31791ZM6.84817 16.9742C6.5474 17.275 6.13948 17.444 5.71413 17.444V18.944C6.5373 18.944 7.32676 18.617 7.90883 18.0349L6.84817 16.9742ZM5.71413 17.444C5.28878 17.444 4.88085 17.275 4.58009 16.9742L3.51943 18.0349C4.1015 18.617 4.89096 18.944 5.71413 18.944V17.444ZM4.58009 16.9742C4.27932 16.6735 4.11035 16.2656 4.11035 15.8402L2.61035 15.8402C2.61035 16.6634 2.93736 17.4528 3.51943 18.0349L4.58009 16.9742ZM4.11035 15.8402C4.11035 15.4149 4.27932 15.0069 4.58009 14.7062L3.51943 13.6455C2.93736 14.2276 2.61035 15.017 2.61035 15.8402L4.11035 15.8402ZM4.58009 14.7062C4.88085 14.4054 5.28878 14.2364 5.71413 14.2364V12.7364C4.89096 12.7364 4.1015 13.0634 3.51943 13.6455L4.58009 14.7062ZM12.8879 11.7239C12.1553 11.8283 11.4094 11.7874 10.6927 11.6035L10.3199 13.0564C11.2274 13.2893 12.1719 13.3411 13.0995 13.2089L12.8879 11.7239ZM10.6927 11.6035C9.97593 11.4196 9.30244 11.0963 8.71064 10.6522L7.81022 11.8518C8.55956 12.4143 9.41234 12.8236 10.3199 13.0564L10.6927 11.6035ZM8.71064 10.6522C8.11884 10.208 7.62032 9.6516 7.24355 9.01476L5.95257 9.77855C6.42964 10.5849 7.06087 11.2894 7.81022 11.8518L8.71064 10.6522ZM7.24355 9.01476C6.86677 8.37793 6.61912 7.67312 6.51474 6.94058L5.02974 7.15219C5.16191 8.07975 5.47549 8.97218 5.95257 9.77855L7.24355 9.01476Z" fill="#595E6A"/>
|
|
1199
|
-
</svg>
|
|
1200
|
-
`;
|
|
1201
1138
|
const duckDevPaperclip = `
|
|
1202
1139
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1203
1140
|
<g clip-path="url(#clip0_21839_133059)">
|
|
@@ -1210,178 +1147,58 @@ const duckDevPaperclip = `
|
|
|
1210
1147
|
</defs>
|
|
1211
1148
|
</svg>
|
|
1212
1149
|
`;
|
|
1213
|
-
const
|
|
1150
|
+
const duckDevPaperclipMedium = `
|
|
1214
1151
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1215
1152
|
<path d="M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1216
1153
|
</svg>
|
|
1217
1154
|
`;
|
|
1218
|
-
const
|
|
1155
|
+
const duckDevToolsMedium = `
|
|
1219
1156
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1220
1157
|
<path d="M16.3578 15.3946L16.3578 11.4709C16.3578 11.4138 16.3466 11.3572 16.3247 11.3044C16.3028 11.2517 16.2708 11.2037 16.2304 11.1633C16.19 11.1229 16.142 11.0908 16.0892 11.069C16.0365 11.0471 15.9799 11.0359 15.9227 11.0359H13.2571L13.259 11.0352C13.2004 11.0329 13.1419 11.0424 13.0871 11.0632C13.0323 11.084 12.9822 11.1156 12.9399 11.1563C12.8977 11.1969 12.864 11.2457 12.8411 11.2996C12.8181 11.3536 12.8063 11.4117 12.8064 11.4703L12.8064 15.3953M14.5837 11.0315V5.83144M16.3579 15.1003L16.3579 17.0628C16.358 17.1214 16.3462 17.1795 16.3232 17.2334C16.3003 17.2874 16.2666 17.3362 16.2244 17.3768C16.1821 17.4174 16.132 17.4491 16.0772 17.4699C16.0224 17.4907 15.9639 17.5002 15.9053 17.4978L15.9072 17.4972H13.2416C13.1844 17.4972 13.1278 17.486 13.0751 17.4641C13.0223 17.4422 12.9743 17.4102 12.9339 17.3698C12.8935 17.3294 12.8615 17.2814 12.8396 17.2286C12.8177 17.1758 12.8065 17.1193 12.8065 17.0621L12.8065 15.1003M5.59605 9.88524L5.59605 15.9265C5.59596 16.0853 5.62718 16.2425 5.68791 16.3893C5.74864 16.536 5.8377 16.6693 5.94999 16.7816C6.06228 16.8939 6.19561 16.983 6.34234 17.0437C6.48908 17.1044 6.64634 17.1356 6.80515 17.1356C7.12558 17.1355 7.43287 17.0082 7.65945 16.7816C7.88603 16.555 8.01334 16.2477 8.01339 15.9273L8.01254 9.88524C9.29298 9.32598 10.4295 8.04852 10.4295 6.56172C10.4299 5.07534 9.22163 3.54068 8.01254 3.23905L8.01296 5.83711L6.80429 7.28675L5.59605 5.83669L5.59605 3.23905C4.38738 3.54111 3.17871 5.07534 3.17871 6.56214C3.17914 8.04852 4.3156 9.32598 5.59605 9.88524ZM14.9913 5.5635L14.125 5.5635L13.2586 4.69714L13.6918 2.53125L15.4245 2.53125L15.8577 4.69714L14.9913 5.5635Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1221
1158
|
</svg>
|
|
1222
1159
|
`;
|
|
1223
|
-
const
|
|
1160
|
+
const duckDevPartsMedium = `
|
|
1224
1161
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1225
1162
|
<path d="M17.208 7.8125L16.333 6.9375L17.2705 6L13.9997 2.72917L13.0622 3.66667L12.1663 2.77083L12.7913 2.125C13.1108 1.80556 13.5066 1.64931 13.9788 1.65625C14.4511 1.66319 14.8469 1.82639 15.1663 2.14583L17.8538 4.83333C18.1733 5.15278 18.333 5.54514 18.333 6.01042C18.333 6.47569 18.1733 6.86806 17.8538 7.1875L17.208 7.8125ZM7.20801 17.8333C6.88856 18.1528 6.4962 18.3125 6.03092 18.3125C5.56565 18.3125 5.17329 18.1528 4.85384 17.8333L1.87467 14.8542C1.63856 14.6128 1.52051 14.3164 1.52051 13.9648C1.52051 13.6133 1.63856 13.3194 1.87467 13.0833L2.79134 12.1667L3.68717 13.0417L2.74967 13.9792L6.02051 17.25L6.95801 16.3125L7.83301 17.2083L7.20801 17.8333ZM15.4788 11.4167L17.2497 9.64583L10.3538 2.75L8.58301 4.52083L15.4788 11.4167ZM9.64551 17.25L11.4372 15.4583L4.54134 8.5625L2.74967 10.3542L9.64551 17.25ZM9.83301 12.0833L12.1038 9.8125L10.1872 7.89583L7.91634 10.1667L9.83301 12.0833ZM10.5205 18.125C10.2853 18.3611 9.99388 18.4792 9.64619 18.4792C9.29851 18.4792 9.00662 18.3611 8.77051 18.125L1.87467 11.2292C1.63856 10.994 1.52051 10.7025 1.52051 10.3549C1.52051 10.0072 1.63856 9.71528 1.87467 9.47917L3.64551 7.6875C3.88687 7.45139 4.18332 7.33333 4.53486 7.33333C4.8864 7.33333 5.18023 7.45139 5.41634 7.6875L7.02051 9.29167L9.31217 7L7.70801 5.39583C7.4719 5.16064 7.35384 4.8692 7.35384 4.52152C7.35384 4.17384 7.4719 3.88194 7.70801 3.64583L9.47884 1.85417C9.7202 1.61806 10.0167 1.5 10.3682 1.5C10.7197 1.5 11.0136 1.61806 11.2497 1.85417L18.1455 8.75C18.3816 8.99136 18.4997 9.28781 18.4997 9.63935C18.4997 9.9909 18.3816 10.2847 18.1455 10.5208L16.3538 12.2917C16.1186 12.5278 15.8272 12.6458 15.4795 12.6458C15.1318 12.6458 14.84 12.5278 14.6038 12.2917L12.9997 10.6875L10.708 12.9792L12.3122 14.5833C12.5483 14.8247 12.6663 15.1211 12.6663 15.4727C12.6663 15.8242 12.5483 16.1181 12.3122 16.3542L10.5205 18.125Z" fill="#595E6A"/>
|
|
1226
1163
|
</svg>
|
|
1227
1164
|
`;
|
|
1228
|
-
const duckDevEquipmentSm = `
|
|
1229
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1230
|
-
<path d="M3.45866 17.501V15.5427H6.10449L3.89616 8.001C3.45171 7.79266 3.10449 7.51141 2.85449 7.15725C2.60449 6.80308 2.47949 6.33433 2.47949 5.751C2.47949 5.09822 2.71908 4.53225 3.19824 4.05308C3.67741 3.57391 4.24338 3.33433 4.89616 3.33433C5.50727 3.33433 6.01421 3.49752 6.41699 3.82391C6.81977 4.1503 7.0906 4.58433 7.22949 5.126H10.2712V3.89683C10.2712 3.73016 10.3337 3.58433 10.4587 3.45933C10.5837 3.33433 10.7295 3.27183 10.8962 3.27183C11.0489 3.27183 11.1774 3.33086 11.2816 3.44891C11.3857 3.56697 11.4378 3.70238 11.4378 3.85516L13.0003 2.35516C13.1114 2.24405 13.2538 2.17113 13.4274 2.13641C13.601 2.10169 13.7781 2.126 13.9587 2.20933L17.2503 3.79266C17.3753 3.86211 17.4621 3.95933 17.5107 4.08433C17.5594 4.20933 17.5489 4.34127 17.4795 4.48016C17.41 4.61905 17.3094 4.70238 17.1774 4.73016C17.0455 4.75794 16.917 4.73711 16.792 4.66766L13.5628 3.10516L11.5212 5.16766V6.251L13.5628 8.39683L16.792 6.8135C16.9309 6.74405 17.0628 6.72669 17.1878 6.76141C17.3128 6.79613 17.41 6.88294 17.4795 7.02183C17.5489 7.16072 17.5594 7.29961 17.5107 7.4385C17.4621 7.57738 17.3684 7.68155 17.2295 7.751L14.042 9.251C13.8475 9.34822 13.66 9.39336 13.4795 9.38641C13.2989 9.37947 13.1392 9.30655 13.0003 9.16766L11.4378 7.66766C11.4378 7.86211 11.3857 8.00794 11.2816 8.10516C11.1774 8.20238 11.0489 8.251 10.8962 8.251C10.7295 8.251 10.5837 8.1885 10.4587 8.0635C10.3337 7.9385 10.2712 7.79266 10.2712 7.626V6.376H7.18783C7.18783 6.54266 7.14269 6.7128 7.05241 6.88641C6.96213 7.06002 6.85449 7.20238 6.72949 7.3135L11.0003 15.5427H14.292V17.501H3.45866ZM4.89616 6.91766C5.22949 6.91766 5.50727 6.80655 5.72949 6.58433C5.95171 6.36211 6.06283 6.08433 6.06283 5.751C6.06283 5.41766 5.95171 5.13988 5.72949 4.91766C5.50727 4.69544 5.22949 4.58433 4.89616 4.58433C4.56283 4.58433 4.28505 4.69544 4.06283 4.91766C3.8406 5.13988 3.72949 5.41766 3.72949 5.751C3.72949 6.08433 3.8406 6.36211 4.06283 6.58433C4.28505 6.80655 4.56283 6.91766 4.89616 6.91766ZM7.47949 15.5427H9.60449L5.66699 7.89683C5.62533 7.92461 5.55588 7.95238 5.45866 7.98016C5.36144 8.00794 5.28505 8.02877 5.22949 8.04266L7.47949 15.5427Z" fill="#595E6A"/>
|
|
1231
|
-
</svg>
|
|
1232
|
-
`;
|
|
1233
1165
|
const duckDevPrimitive = `
|
|
1234
1166
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1235
1167
|
<path d="M3.84376 6.66797L3.31889 6.87791C1.99497 7.40748 1.33301 7.67227 1.33301 8.0013C1.33301 8.33033 1.99497 8.59512 3.31889 9.12469L5.19121 9.87361C6.51513 10.4032 7.17709 10.668 7.99967 10.668C8.82226 10.668 9.48422 10.4032 10.8081 9.87361L12.6805 9.12469C14.0044 8.59512 14.6663 8.33033 14.6663 8.0013C14.6663 7.67227 14.0044 7.40748 12.6805 6.87791L12.1556 6.66797M3.84376 9.33464L3.31889 9.54458C1.99497 10.0742 1.33301 10.3389 1.33301 10.668C1.33301 10.997 1.99497 11.2618 3.31889 11.7914L5.19121 12.5403C6.51513 13.0699 7.17709 13.3346 7.99967 13.3346C8.82226 13.3346 9.48422 13.0699 10.8081 12.5403L12.6805 11.7914C14.0044 11.2618 14.6663 10.997 14.6663 10.668C14.6663 10.3389 14.0044 10.0742 12.6805 9.54458L12.1556 9.33464M10.8081 7.20695L12.6805 6.45802C14.0044 5.92845 14.6663 5.66367 14.6663 5.33464C14.6663 5.0056 14.0044 4.74082 12.6805 4.21125L10.8081 3.46232C9.48422 2.93275 8.82226 2.66797 7.99967 2.66797C7.17709 2.66797 6.51513 2.93275 5.19121 3.46232L3.31889 4.21125C1.99497 4.74082 1.33301 5.0056 1.33301 5.33464C1.33301 5.66367 1.99497 5.92845 3.31889 6.45802L5.19121 7.20695C6.51513 7.73652 7.17709 8.0013 7.99967 8.0013C8.82226 8.0013 9.48422 7.73652 10.8081 7.20695Z" stroke="#595E6A"/>
|
|
1236
1168
|
</svg>
|
|
1237
1169
|
`;
|
|
1238
|
-
const
|
|
1170
|
+
const duckDevPrimitiveMedium = `
|
|
1239
1171
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1240
1172
|
<path d="M4.80543 8.33203L4.14935 8.59446C2.49445 9.25643 1.66699 9.58741 1.66699 9.9987C1.66699 10.41 2.49445 10.741 4.14935 11.4029L6.48974 12.3391C8.14465 13.001 8.9721 13.332 10.0003 13.332C11.0286 13.332 11.856 13.001 13.5109 12.3391L15.8513 11.4029C17.5062 10.741 18.3337 10.41 18.3337 9.9987C18.3337 9.58741 17.5062 9.25643 15.8513 8.59446L15.1952 8.33203M4.80543 11.6654L4.14935 11.9278C2.49445 12.5898 1.66699 12.9207 1.66699 13.332C1.66699 13.7433 2.49445 14.0743 4.14935 14.7363L6.48974 15.6724C8.14465 16.3344 8.9721 16.6654 10.0003 16.6654C11.0286 16.6654 11.856 16.3344 13.5109 15.6724L15.8513 14.7363C17.5062 14.0743 18.3337 13.7433 18.3337 13.332C18.3337 12.9207 17.5062 12.5898 15.8513 11.9278L15.1952 11.6654M13.5109 9.00575L15.8513 8.0696C17.5062 7.40764 18.3337 7.07666 18.3337 6.66536C18.3337 6.25407 17.5062 5.92309 15.8513 5.26113L13.5109 4.32497C11.856 3.66301 11.0286 3.33203 10.0003 3.33203C8.9721 3.33203 8.14465 3.66301 6.48974 4.32497L4.14935 5.26113C2.49445 5.92309 1.66699 6.25407 1.66699 6.66536C1.66699 7.07666 2.49445 7.40764 4.14935 8.0696L6.48974 9.00575C8.14465 9.66772 8.9721 9.9987 10.0003 9.9987C11.0286 9.9987 11.856 9.66772 13.5109 9.00575Z" stroke="#595E6A" stroke-width="1.5"/>
|
|
1241
1173
|
</svg>
|
|
1242
1174
|
`;
|
|
1243
|
-
const duckDevSpool = `
|
|
1244
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1245
|
-
<path d="M5 14.6654C6.65685 14.6654 8 11.6806 8 7.9987C8 4.3168 6.65685 1.33203 5 1.33203M5 14.6654C3.34315 14.6654 2 11.6806 2 7.9987C2 4.3168 3.34315 1.33203 5 1.33203M5 14.6654H11C12.6569 14.6654 14 11.6806 14 7.9987C14 4.3168 12.6569 1.33203 11 1.33203H5M6 7.9987C6 10.2078 5.55228 11.9987 5 11.9987C4.44772 11.9987 4 10.2078 4 7.9987C4 5.78956 4.44772 3.9987 5 3.9987C5.55228 3.9987 6 5.78956 6 7.9987Z" stroke="#595E6A"/>
|
|
1246
|
-
</svg>
|
|
1247
|
-
`;
|
|
1248
|
-
const duckDevSpoolSm = `
|
|
1249
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1250
|
-
<path d="M13.75 18.3346C15.8211 18.3346 17.5 14.6037 17.5 10.0013C17.5 5.39893 15.8211 1.66797 13.75 1.66797" stroke="#595E6A" stroke-width="1.5"/>
|
|
1251
|
-
<path d="M10 10.0013C10 14.6037 8.32107 18.3346 6.25 18.3346C4.17893 18.3346 2.5 14.6037 2.5 10.0013C2.5 5.39893 4.17893 1.66797 6.25 1.66797C8.32107 1.66797 10 5.39893 10 10.0013Z" stroke="#595E6A" stroke-width="1.5"/>
|
|
1252
|
-
<path d="M6.25 18.3346C8.32107 18.3346 10 14.6037 10 10.0013C10 5.39893 8.32107 1.66797 6.25 1.66797" stroke="#595E6A" stroke-width="1.5"/>
|
|
1253
|
-
<path d="M7.5 10C7.5 12.7614 6.94036 15 6.25 15C5.55964 15 5 12.7614 5 10C5 7.23858 5.55964 5 6.25 5C6.94036 5 7.5 7.23858 7.5 10Z" stroke="#595E6A" stroke-width="1.5"/>
|
|
1254
|
-
<path d="M6.25 1.66797L13.75 1.66797" stroke="#595E6A" stroke-width="1.5"/>
|
|
1255
|
-
<path d="M6.25 18.332L13.75 18.332" stroke="#595E6A" stroke-width="1.5"/>
|
|
1256
|
-
</svg>
|
|
1257
|
-
`;
|
|
1258
1175
|
const duckDevTank = `
|
|
1259
1176
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1260
1177
|
<path d="M9.34494 2.97285L9.51297 3.44377L9.34494 2.97285ZM4.01161 4.8758L3.84358 4.40488V4.40488L4.01161 4.8758ZM9.64612 6.97978C9.45086 7.17504 9.45086 7.49162 9.64612 7.68689C9.84138 7.88215 10.158 7.88215 10.3532 7.68689L9.64612 6.97978ZM11.0199 7.02022C11.2152 6.82496 11.2152 6.50838 11.0199 6.31311C10.8246 6.11785 10.508 6.11785 10.3128 6.31311L11.0199 7.02022ZM5.64612 7.68689C5.84138 7.88215 6.15797 7.88215 6.35323 7.68689C6.54849 7.49162 6.54849 7.17504 6.35323 6.97978L5.64612 7.68689ZM5.68656 6.31311C5.4913 6.11785 5.17472 6.11785 4.97945 6.31311C4.78419 6.50838 4.78419 6.82496 4.97945 7.02022L5.68656 6.31311ZM10.3532 10.9798C10.158 10.7845 9.84138 10.7845 9.64612 10.9798C9.45086 11.175 9.45086 11.4916 9.64612 11.6869L10.3532 10.9798ZM10.3128 12.3536C10.508 12.5488 10.8246 12.5488 11.0199 12.3536C11.2152 12.1583 11.2152 11.8417 11.0199 11.6464L10.3128 12.3536ZM6.35323 11.6869C6.54849 11.4916 6.54849 11.175 6.35323 10.9798C6.15797 10.7845 5.84138 10.7845 5.64612 10.9798L6.35323 11.6869ZM4.97945 11.6464C4.78419 11.8417 4.78419 12.1583 4.97945 12.3536C5.17472 12.5488 5.4913 12.5488 5.68656 12.3536L4.97945 11.6464ZM6.52445 2.70458L6.39262 3.18689L6.39262 3.18689L6.52445 2.70458ZM6.81224 3.61846C6.8824 3.88554 7.15579 4.04518 7.42287 3.97502C7.68995 3.90486 7.84959 3.63147 7.77943 3.36439L6.81224 3.61846ZM2.83301 4.70673C2.83301 4.98287 3.05687 5.20673 3.33301 5.20673C3.60915 5.20673 3.83301 4.98287 3.83301 4.70673H2.83301ZM3.55844 3.10202L3.15887 2.80144L3.55844 3.10202ZM3.75981 2.89661L3.45164 2.50288L3.45164 2.50288L3.75981 2.89661ZM4.17963 5.34672L9.51297 3.44377L9.17691 2.50193L3.84358 4.40488L4.17963 5.34672ZM14.1663 6.82167V10.5889H15.1663V6.82167H14.1663ZM10.6663 14.1667H5.33301V15.1667H10.6663V14.1667ZM1.83301 10.5889V8.72462H0.833008V10.5889H1.83301ZM5.33301 14.1667C4.3758 14.1667 3.70915 14.1656 3.20636 14.0967C2.71895 14.0298 2.46065 13.9079 2.27573 13.7194L1.56185 14.4196C1.96272 14.8283 2.46872 15.0049 3.07057 15.0874C3.65703 15.1678 4.4046 15.1667 5.33301 15.1667V14.1667ZM0.833008 10.5889C0.833008 11.5362 0.831985 12.296 0.910523 12.8915C0.99083 13.5004 1.1623 14.0123 1.56185 14.4196L2.27573 13.7194C2.0895 13.5295 1.96808 13.2622 1.90194 12.7607C1.83403 12.2458 1.83301 11.5639 1.83301 10.5889H0.833008ZM14.1663 10.5889C14.1663 11.5639 14.1653 12.2458 14.0974 12.7607C14.0313 13.2622 13.9098 13.5295 13.7236 13.7194L14.4375 14.4196C14.837 14.0123 15.0085 13.5004 15.0888 12.8915C15.1674 12.296 15.1663 11.5362 15.1663 10.5889H14.1663ZM10.6663 15.1667C11.5947 15.1667 12.3423 15.1678 12.9288 15.0874C13.5306 15.0049 14.0366 14.8283 14.4375 14.4196L13.7236 13.7194C13.5387 13.9079 13.2804 14.0298 12.793 14.0967C12.2902 14.1656 11.6236 14.1667 10.6663 14.1667V15.1667ZM9.51297 3.44377C10.7405 3.00577 11.6078 2.69774 12.2738 2.56663C12.9278 2.4379 13.2733 2.50409 13.5306 2.69018L14.1166 1.8799C13.5312 1.45648 12.8494 1.43413 12.0807 1.58546C11.324 1.73442 10.3733 2.07505 9.17691 2.50193L9.51297 3.44377ZM15.1663 6.82167C15.1663 5.52857 15.1676 4.50363 15.0559 3.7288C14.9428 2.94428 14.6995 2.30144 14.1166 1.8799L13.5306 2.69018C13.7905 2.87816 13.9685 3.1946 14.0661 3.87149C14.1651 4.55808 14.1663 5.4967 14.1663 6.82167H15.1663ZM3.84358 4.40488C3.20745 4.63185 2.69046 4.81551 2.28924 5.01272C1.87606 5.21582 1.54145 5.45346 1.29145 5.81269L2.11224 6.38392C2.23107 6.21317 2.40437 6.07041 2.73037 5.91017C3.06834 5.74404 3.52181 5.58144 4.17963 5.34672L3.84358 4.40488ZM1.83301 8.72462C1.83301 8.01467 1.83372 7.52297 1.87606 7.14124C1.91707 6.7716 1.99287 6.55543 2.11224 6.38392L1.29145 5.81269C1.04198 6.17114 0.933367 6.56935 0.88216 7.03099C0.832295 7.48053 0.833008 8.03701 0.833008 8.72462H1.83301ZM7.99967 10.8333C7.51413 10.8333 7.20028 10.8323 6.96903 10.8012C6.75216 10.772 6.68418 10.7249 6.64612 10.6869L5.93901 11.394C6.19384 11.6488 6.50802 11.7482 6.83578 11.7923C7.14915 11.8344 7.5424 11.8333 7.99967 11.8333V10.8333ZM5.49967 9.33333C5.49967 9.7906 5.49861 10.1839 5.54074 10.4972C5.58481 10.825 5.68418 11.1392 5.93901 11.394L6.64612 10.6869C6.60806 10.6488 6.56098 10.5809 6.53183 10.364C6.50074 10.1327 6.49967 9.81887 6.49967 9.33333H5.49967ZM9.49967 9.33333C9.49967 9.81887 9.49861 10.1327 9.46752 10.364C9.43836 10.5809 9.39129 10.6488 9.35323 10.6869L10.0603 11.394C10.3152 11.1392 10.4145 10.825 10.4586 10.4972C10.5007 10.1839 10.4997 9.7906 10.4997 9.33333H9.49967ZM7.99967 11.8333C8.45694 11.8333 8.85019 11.8344 9.16357 11.7923C9.49133 11.7482 9.8055 11.6488 10.0603 11.394L9.35323 10.6869C9.31517 10.7249 9.24719 10.772 9.03032 10.8012C8.79907 10.8323 8.48521 10.8333 7.99967 10.8333V11.8333ZM7.99967 7.83333C8.48521 7.83333 8.79907 7.8344 9.03032 7.86549C9.24719 7.89464 9.31517 7.94172 9.35323 7.97978L10.0603 7.27267C9.8055 7.01784 9.49133 6.91847 9.16357 6.8744C8.85019 6.83227 8.45694 6.83333 7.99967 6.83333V7.83333ZM10.4997 9.33333C10.4997 8.87606 10.5007 8.48281 10.4586 8.16944C10.4145 7.84168 10.3152 7.5275 10.0603 7.27267L9.35323 7.97978C9.39129 8.01784 9.43836 8.08582 9.46752 8.30269C9.49861 8.53394 9.49967 8.84779 9.49967 9.33333H10.4997ZM7.99967 6.83333C7.5424 6.83333 7.14915 6.83227 6.83578 6.8744C6.50802 6.91847 6.19384 7.01784 5.93901 7.27267L6.64612 7.97978C6.68418 7.94172 6.75216 7.89464 6.96903 7.86549C7.20028 7.8344 7.51413 7.83333 7.99967 7.83333V6.83333ZM6.49967 9.33333C6.49967 8.84779 6.50074 8.53394 6.53183 8.30269C6.56098 8.08582 6.60806 8.01784 6.64612 7.97978L5.93901 7.27267C5.68418 7.5275 5.58481 7.84168 5.54074 8.16944C5.49861 8.48281 5.49967 8.87606 5.49967 9.33333H6.49967ZM10.3532 7.68689L11.0199 7.02022L10.3128 6.31311L9.64612 6.97978L10.3532 7.68689ZM6.35323 6.97978L5.68656 6.31311L4.97945 7.02022L5.64612 7.68689L6.35323 6.97978ZM9.64612 11.6869L10.3128 12.3536L11.0199 11.6464L10.3532 10.9798L9.64612 11.6869ZM5.64612 10.9798L4.97945 11.6464L5.68656 12.3536L6.35323 11.6869L5.64612 10.9798ZM5.33301 3.16667H5.87846V2.16667H5.33301V3.16667ZM5.87846 3.16667C6.24941 3.16667 6.33493 3.17112 6.39262 3.18689L6.65627 2.22227C6.43651 2.16221 6.18386 2.16667 5.87846 2.16667V3.16667ZM6.39262 3.18689C6.59312 3.24169 6.75578 3.4035 6.81224 3.61846L7.77943 3.36439C7.63415 2.81133 7.2087 2.37326 6.65627 2.22227L6.39262 3.18689ZM3.83301 4.70673C3.83301 4.26031 3.83372 3.96654 3.85816 3.74542C3.88155 3.53375 3.92144 3.4512 3.95801 3.4026L3.15887 2.80144C2.97001 3.05251 2.89718 3.33731 2.86421 3.63557C2.83229 3.92438 2.83301 4.28312 2.83301 4.70673H3.83301ZM5.33301 2.16667C4.9184 2.16667 4.56476 2.16589 4.27961 2.19868C3.98373 2.23271 3.70035 2.30821 3.45164 2.50288L4.06799 3.29035C4.11307 3.25507 4.18982 3.2156 4.39385 3.19214C4.60862 3.16744 4.89468 3.16667 5.33301 3.16667V2.16667ZM3.95801 3.4026C3.98992 3.36018 4.02694 3.32248 4.06799 3.29035L3.45164 2.50288C3.34142 2.58915 3.24304 2.68956 3.15887 2.80144L3.95801 3.4026Z" fill="#595E6A"/>
|
|
1261
1178
|
</svg>
|
|
1262
1179
|
`;
|
|
1263
|
-
const
|
|
1180
|
+
const duckDevTankMedium = `
|
|
1264
1181
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1265
1182
|
<path d="M9.34494 2.97285L9.51297 3.44377L9.34494 2.97285ZM4.01161 4.8758L3.84358 4.40488V4.40488L4.01161 4.8758ZM9.64612 6.97978C9.45086 7.17504 9.45086 7.49162 9.64612 7.68689C9.84138 7.88215 10.158 7.88215 10.3532 7.68689L9.64612 6.97978ZM11.0199 7.02022C11.2152 6.82496 11.2152 6.50838 11.0199 6.31311C10.8246 6.11785 10.508 6.11785 10.3128 6.31311L11.0199 7.02022ZM5.64612 7.68689C5.84138 7.88215 6.15797 7.88215 6.35323 7.68689C6.54849 7.49162 6.54849 7.17504 6.35323 6.97978L5.64612 7.68689ZM5.68656 6.31311C5.4913 6.11785 5.17472 6.11785 4.97945 6.31311C4.78419 6.50838 4.78419 6.82496 4.97945 7.02022L5.68656 6.31311ZM10.3532 10.9798C10.158 10.7845 9.84138 10.7845 9.64612 10.9798C9.45086 11.175 9.45086 11.4916 9.64612 11.6869L10.3532 10.9798ZM10.3128 12.3536C10.508 12.5488 10.8246 12.5488 11.0199 12.3536C11.2152 12.1583 11.2152 11.8417 11.0199 11.6464L10.3128 12.3536ZM6.35323 11.6869C6.54849 11.4916 6.54849 11.175 6.35323 10.9798C6.15797 10.7845 5.84138 10.7845 5.64612 10.9798L6.35323 11.6869ZM4.97945 11.6464C4.78419 11.8417 4.78419 12.1583 4.97945 12.3536C5.17472 12.5488 5.4913 12.5488 5.68656 12.3536L4.97945 11.6464ZM6.52445 2.70458L6.39262 3.18689L6.39262 3.18689L6.52445 2.70458ZM6.81224 3.61846C6.8824 3.88554 7.15579 4.04518 7.42287 3.97502C7.68995 3.90486 7.84959 3.63147 7.77943 3.36439L6.81224 3.61846ZM2.83301 4.70673C2.83301 4.98287 3.05687 5.20673 3.33301 5.20673C3.60915 5.20673 3.83301 4.98287 3.83301 4.70673H2.83301ZM3.55844 3.10202L3.15887 2.80144L3.55844 3.10202ZM3.75981 2.89661L3.45164 2.50288L3.45164 2.50288L3.75981 2.89661ZM4.17963 5.34672L9.51297 3.44377L9.17691 2.50193L3.84358 4.40488L4.17963 5.34672ZM14.1663 6.82167V10.5889H15.1663V6.82167H14.1663ZM10.6663 14.1667H5.33301V15.1667H10.6663V14.1667ZM1.83301 10.5889V8.72462H0.833008V10.5889H1.83301ZM5.33301 14.1667C4.3758 14.1667 3.70915 14.1656 3.20636 14.0967C2.71895 14.0298 2.46065 13.9079 2.27573 13.7194L1.56185 14.4196C1.96272 14.8283 2.46872 15.0049 3.07057 15.0874C3.65703 15.1678 4.4046 15.1667 5.33301 15.1667V14.1667ZM0.833008 10.5889C0.833008 11.5362 0.831985 12.296 0.910523 12.8915C0.99083 13.5004 1.1623 14.0123 1.56185 14.4196L2.27573 13.7194C2.0895 13.5295 1.96808 13.2622 1.90194 12.7607C1.83403 12.2458 1.83301 11.5639 1.83301 10.5889H0.833008ZM14.1663 10.5889C14.1663 11.5639 14.1653 12.2458 14.0974 12.7607C14.0313 13.2622 13.9098 13.5295 13.7236 13.7194L14.4375 14.4196C14.837 14.0123 15.0085 13.5004 15.0888 12.8915C15.1674 12.296 15.1663 11.5362 15.1663 10.5889H14.1663ZM10.6663 15.1667C11.5947 15.1667 12.3423 15.1678 12.9288 15.0874C13.5306 15.0049 14.0366 14.8283 14.4375 14.4196L13.7236 13.7194C13.5387 13.9079 13.2804 14.0298 12.793 14.0967C12.2902 14.1656 11.6236 14.1667 10.6663 14.1667V15.1667ZM9.51297 3.44377C10.7405 3.00577 11.6078 2.69774 12.2738 2.56663C12.9278 2.4379 13.2733 2.50409 13.5306 2.69018L14.1166 1.8799C13.5312 1.45648 12.8494 1.43413 12.0807 1.58546C11.324 1.73442 10.3733 2.07505 9.17691 2.50193L9.51297 3.44377ZM15.1663 6.82167C15.1663 5.52857 15.1676 4.50363 15.0559 3.7288C14.9428 2.94428 14.6995 2.30144 14.1166 1.8799L13.5306 2.69018C13.7905 2.87816 13.9685 3.1946 14.0661 3.87149C14.1651 4.55808 14.1663 5.4967 14.1663 6.82167H15.1663ZM3.84358 4.40488C3.20745 4.63185 2.69046 4.81551 2.28924 5.01272C1.87606 5.21582 1.54145 5.45346 1.29145 5.81269L2.11224 6.38392C2.23107 6.21317 2.40437 6.07041 2.73037 5.91017C3.06834 5.74404 3.52181 5.58144 4.17963 5.34672L3.84358 4.40488ZM1.83301 8.72462C1.83301 8.01467 1.83372 7.52297 1.87606 7.14124C1.91707 6.7716 1.99287 6.55543 2.11224 6.38392L1.29145 5.81269C1.04198 6.17114 0.933367 6.56935 0.88216 7.03099C0.832295 7.48053 0.833008 8.03701 0.833008 8.72462H1.83301ZM7.99967 10.8333C7.51413 10.8333 7.20028 10.8323 6.96903 10.8012C6.75216 10.772 6.68418 10.7249 6.64612 10.6869L5.93901 11.394C6.19384 11.6488 6.50802 11.7482 6.83578 11.7923C7.14915 11.8344 7.5424 11.8333 7.99967 11.8333V10.8333ZM5.49967 9.33333C5.49967 9.7906 5.49861 10.1839 5.54074 10.4972C5.58481 10.825 5.68418 11.1392 5.93901 11.394L6.64612 10.6869C6.60806 10.6488 6.56098 10.5809 6.53183 10.364C6.50074 10.1327 6.49967 9.81887 6.49967 9.33333H5.49967ZM9.49967 9.33333C9.49967 9.81887 9.49861 10.1327 9.46752 10.364C9.43836 10.5809 9.39129 10.6488 9.35323 10.6869L10.0603 11.394C10.3152 11.1392 10.4145 10.825 10.4586 10.4972C10.5007 10.1839 10.4997 9.7906 10.4997 9.33333H9.49967ZM7.99967 11.8333C8.45694 11.8333 8.85019 11.8344 9.16357 11.7923C9.49133 11.7482 9.8055 11.6488 10.0603 11.394L9.35323 10.6869C9.31517 10.7249 9.24719 10.772 9.03032 10.8012C8.79907 10.8323 8.48521 10.8333 7.99967 10.8333V11.8333ZM7.99967 7.83333C8.48521 7.83333 8.79907 7.8344 9.03032 7.86549C9.24719 7.89464 9.31517 7.94172 9.35323 7.97978L10.0603 7.27267C9.8055 7.01784 9.49133 6.91847 9.16357 6.8744C8.85019 6.83227 8.45694 6.83333 7.99967 6.83333V7.83333ZM10.4997 9.33333C10.4997 8.87606 10.5007 8.48281 10.4586 8.16944C10.4145 7.84168 10.3152 7.5275 10.0603 7.27267L9.35323 7.97978C9.39129 8.01784 9.43836 8.08582 9.46752 8.30269C9.49861 8.53394 9.49967 8.84779 9.49967 9.33333H10.4997ZM7.99967 6.83333C7.5424 6.83333 7.14915 6.83227 6.83578 6.8744C6.50802 6.91847 6.19384 7.01784 5.93901 7.27267L6.64612 7.97978C6.68418 7.94172 6.75216 7.89464 6.96903 7.86549C7.20028 7.8344 7.51413 7.83333 7.99967 7.83333V6.83333ZM6.49967 9.33333C6.49967 8.84779 6.50074 8.53394 6.53183 8.30269C6.56098 8.08582 6.60806 8.01784 6.64612 7.97978L5.93901 7.27267C5.68418 7.5275 5.58481 7.84168 5.54074 8.16944C5.49861 8.48281 5.49967 8.87606 5.49967 9.33333H6.49967ZM10.3532 7.68689L11.0199 7.02022L10.3128 6.31311L9.64612 6.97978L10.3532 7.68689ZM6.35323 6.97978L5.68656 6.31311L4.97945 7.02022L5.64612 7.68689L6.35323 6.97978ZM9.64612 11.6869L10.3128 12.3536L11.0199 11.6464L10.3532 10.9798L9.64612 11.6869ZM5.64612 10.9798L4.97945 11.6464L5.68656 12.3536L6.35323 11.6869L5.64612 10.9798ZM5.33301 3.16667H5.87846V2.16667H5.33301V3.16667ZM5.87846 3.16667C6.24941 3.16667 6.33493 3.17112 6.39262 3.18689L6.65627 2.22227C6.43651 2.16221 6.18386 2.16667 5.87846 2.16667V3.16667ZM6.39262 3.18689C6.59312 3.24169 6.75578 3.4035 6.81224 3.61846L7.77943 3.36439C7.63415 2.81133 7.2087 2.37326 6.65627 2.22227L6.39262 3.18689ZM3.83301 4.70673C3.83301 4.26031 3.83372 3.96654 3.85816 3.74542C3.88155 3.53375 3.92144 3.4512 3.95801 3.4026L3.15887 2.80144C2.97001 3.05251 2.89718 3.33731 2.86421 3.63557C2.83229 3.92438 2.83301 4.28312 2.83301 4.70673H3.83301ZM5.33301 2.16667C4.9184 2.16667 4.56476 2.16589 4.27961 2.19868C3.98373 2.23271 3.70035 2.30821 3.45164 2.50288L4.06799 3.29035C4.11307 3.25507 4.18982 3.2156 4.39385 3.19214C4.60862 3.16744 4.89468 3.16667 5.33301 3.16667V2.16667ZM3.95801 3.4026C3.98992 3.36018 4.02694 3.32248 4.06799 3.29035L3.45164 2.50288C3.34142 2.58915 3.24304 2.68956 3.15887 2.80144L3.95801 3.4026Z" fill="#595E6A"/>
|
|
1266
1183
|
</svg>
|
|
1267
1184
|
`;
|
|
1268
|
-
const duckDevAssembly = `
|
|
1269
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1270
|
-
<g clip-path="url(#clip0_23427_158063)">
|
|
1271
|
-
<path d="M2.22631 11.3331C4.06726 14.5218 8.14453 15.6143 11.3331 13.7733C12.6329 13.0229 13.5843 11.9009 14.1308 10.619C14.925 8.75608 14.8639 6.55536 13.7733 4.66648C12.6828 2.7776 10.8075 1.62428 8.797 1.38059C7.4136 1.2129 5.96622 1.4759 4.66648 2.22631C1.47786 4.06726 0.385359 8.14453 2.22631 11.3331Z" stroke="#595E6A"/>
|
|
1272
|
-
<g filter="url(#filter0_d_23427_158063)">
|
|
1273
|
-
<path d="M10.3337 9.5013C10.3337 9.96154 9.96056 10.3346 9.50033 10.3346C9.04009 10.3346 8.66699 9.96154 8.66699 9.5013C8.66699 9.04106 9.04009 8.66797 9.50033 8.66797C9.96056 8.66797 10.3337 9.04106 10.3337 9.5013Z" stroke="#595E6A" stroke-width="0.5" shape-rendering="crispEdges"/>
|
|
1274
|
-
</g>
|
|
1275
|
-
<g filter="url(#filter1_d_23427_158063)">
|
|
1276
|
-
<path d="M10.3337 6.5013C10.3337 6.96154 9.96056 7.33464 9.50033 7.33464C9.04009 7.33464 8.66699 6.96154 8.66699 6.5013C8.66699 6.04106 9.04009 5.66797 9.50033 5.66797C9.96056 5.66797 10.3337 6.04106 10.3337 6.5013Z" stroke="#595E6A" stroke-width="0.5" shape-rendering="crispEdges"/>
|
|
1277
|
-
</g>
|
|
1278
|
-
<g filter="url(#filter2_d_23427_158063)">
|
|
1279
|
-
<path d="M7.33366 9.5013C7.33366 9.96154 6.96056 10.3346 6.50033 10.3346C6.04009 10.3346 5.66699 9.96154 5.66699 9.5013C5.66699 9.04106 6.04009 8.66797 6.50033 8.66797C6.96056 8.66797 7.33366 9.04106 7.33366 9.5013Z" stroke="#595E6A" stroke-width="0.5" shape-rendering="crispEdges"/>
|
|
1280
|
-
<path d="M7.33366 6.5013C7.33366 6.96154 6.96056 7.33464 6.50033 7.33464C6.04009 7.33464 5.66699 6.96154 5.66699 6.5013C5.66699 6.04106 6.04009 5.66797 6.50033 5.66797C6.96056 5.66797 7.33366 6.04106 7.33366 6.5013Z" stroke="#595E6A" stroke-width="0.5" shape-rendering="crispEdges"/>
|
|
1281
|
-
</g>
|
|
1282
|
-
<path d="M10 12.168C10 12.4441 9.77614 12.668 9.5 12.668C9.22386 12.668 9 12.4441 9 12.168C9 11.8918 9.22386 11.668 9.5 11.668C9.77614 11.668 10 11.8918 10 12.168Z" fill="#595E6A"/>
|
|
1283
|
-
<path d="M7 12.168C7 12.4441 6.77614 12.668 6.5 12.668C6.22386 12.668 6 12.4441 6 12.168C6 11.8918 6.22386 11.668 6.5 11.668C6.77614 11.668 7 11.8918 7 12.168Z" fill="#595E6A"/>
|
|
1284
|
-
<path d="M10 12.168C10 12.4441 9.77614 12.668 9.5 12.668C9.22386 12.668 9 12.4441 9 12.168C9 11.8918 9.22386 11.668 9.5 11.668C9.77614 11.668 10 11.8918 10 12.168Z" fill="#595E6A"/>
|
|
1285
|
-
<path d="M10 3.83203C10 4.10817 9.77614 4.33203 9.5 4.33203C9.22386 4.33203 9 4.10817 9 3.83203C9 3.55589 9.22386 3.33203 9.5 3.33203C9.77614 3.33203 10 3.55589 10 3.83203Z" fill="#595E6A"/>
|
|
1286
|
-
<path d="M7 12.168C7 12.4441 6.77614 12.668 6.5 12.668C6.22386 12.668 6 12.4441 6 12.168C6 11.8918 6.22386 11.668 6.5 11.668C6.77614 11.668 7 11.8918 7 12.168Z" fill="#595E6A"/>
|
|
1287
|
-
<path d="M7 3.83203C7 4.10817 6.77614 4.33203 6.5 4.33203C6.22386 4.33203 6 4.10817 6 3.83203C6 3.55589 6.22386 3.33203 6.5 3.33203C6.77614 3.33203 7 3.55589 7 3.83203Z" fill="#595E6A"/>
|
|
1288
|
-
<path d="M12.167 6C12.4431 6 12.667 6.22386 12.667 6.5C12.667 6.77614 12.4431 7 12.167 7C11.8908 7 11.667 6.77614 11.667 6.5C11.667 6.22386 11.8908 6 12.167 6Z" fill="#595E6A"/>
|
|
1289
|
-
<path d="M3.83301 6C4.10915 6 4.33301 6.22386 4.33301 6.5C4.33301 6.77614 4.10915 7 3.83301 7C3.55687 7 3.33301 6.77614 3.33301 6.5C3.33301 6.22386 3.55687 6 3.83301 6Z" fill="#595E6A"/>
|
|
1290
|
-
<path d="M12.167 9C12.4431 9 12.667 9.22386 12.667 9.5C12.667 9.77614 12.4431 10 12.167 10C11.8908 10 11.667 9.77614 11.667 9.5C11.667 9.22386 11.8908 9 12.167 9Z" fill="#595E6A"/>
|
|
1291
|
-
<path d="M3.83301 9C4.10915 9 4.33301 9.22386 4.33301 9.5C4.33301 9.77614 4.10915 10 3.83301 10C3.55687 10 3.33301 9.77614 3.33301 9.5C3.33301 9.22386 3.55687 9 3.83301 9Z" fill="#595E6A"/>
|
|
1292
|
-
</g>
|
|
1293
|
-
<defs>
|
|
1294
|
-
<filter id="filter0_d_23427_158063" x="4.41699" y="8.41797" width="10.167" height="10.168" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
1295
|
-
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
1296
|
-
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
1297
|
-
<feOffset dy="4"/>
|
|
1298
|
-
<feGaussianBlur stdDeviation="2"/>
|
|
1299
|
-
<feComposite in2="hardAlpha" operator="out"/>
|
|
1300
|
-
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
|
1301
|
-
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_23427_158063"/>
|
|
1302
|
-
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_23427_158063" result="shape"/>
|
|
1303
|
-
</filter>
|
|
1304
|
-
<filter id="filter1_d_23427_158063" x="4.41699" y="5.41797" width="10.167" height="10.168" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
1305
|
-
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
1306
|
-
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
1307
|
-
<feOffset dy="4"/>
|
|
1308
|
-
<feGaussianBlur stdDeviation="2"/>
|
|
1309
|
-
<feComposite in2="hardAlpha" operator="out"/>
|
|
1310
|
-
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
|
1311
|
-
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_23427_158063"/>
|
|
1312
|
-
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_23427_158063" result="shape"/>
|
|
1313
|
-
</filter>
|
|
1314
|
-
<filter id="filter2_d_23427_158063" x="1.41699" y="5.41797" width="10.167" height="13.168" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
1315
|
-
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
1316
|
-
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
1317
|
-
<feOffset dy="4"/>
|
|
1318
|
-
<feGaussianBlur stdDeviation="2"/>
|
|
1319
|
-
<feComposite in2="hardAlpha" operator="out"/>
|
|
1320
|
-
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
|
1321
|
-
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_23427_158063"/>
|
|
1322
|
-
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_23427_158063" result="shape"/>
|
|
1323
|
-
</filter>
|
|
1324
|
-
<clipPath id="clip0_23427_158063">
|
|
1325
|
-
<rect width="16" height="16" rx="5" fill="white"/>
|
|
1326
|
-
</clipPath>
|
|
1327
|
-
</defs>
|
|
1328
|
-
</svg>
|
|
1329
|
-
`;
|
|
1330
|
-
const duckDevAssemblySm = `
|
|
1331
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1332
|
-
<g clip-path="url(#clip0_23427_158048)">
|
|
1333
|
-
<path d="M2.78289 14.1655C5.08407 18.1512 10.1807 19.5169 14.1664 17.2157C15.7911 16.2777 16.9804 14.8752 17.6635 13.2728C18.6563 10.9441 18.5798 8.19322 17.2166 5.83212C15.8535 3.47102 13.5093 2.02937 10.9963 1.72476C9.26701 1.51515 7.45777 1.8439 5.8331 2.78191C1.84733 5.0831 0.481699 10.1797 2.78289 14.1655Z" stroke="#595E6A" stroke-width="1.5"/>
|
|
1334
|
-
<path d="M12.9163 11.8737C12.9163 12.449 12.45 12.9154 11.8747 12.9154C11.2994 12.9154 10.833 12.449 10.833 11.8737C10.833 11.2984 11.2994 10.832 11.8747 10.832C12.45 10.832 12.9163 11.2984 12.9163 11.8737Z" stroke="#595E6A"/>
|
|
1335
|
-
<path d="M12.9163 8.1237C12.9163 8.69899 12.45 9.16536 11.8747 9.16536C11.2994 9.16536 10.833 8.69899 10.833 8.1237C10.833 7.5484 11.2994 7.08203 11.8747 7.08203C12.45 7.08203 12.9163 7.5484 12.9163 8.1237Z" stroke="#595E6A"/>
|
|
1336
|
-
<path d="M9.16634 11.8737C9.16634 12.449 8.69997 12.9154 8.12467 12.9154C7.54938 12.9154 7.08301 12.449 7.08301 11.8737C7.08301 11.2984 7.54938 10.832 8.12467 10.832C8.69997 10.832 9.16634 11.2984 9.16634 11.8737Z" stroke="#595E6A"/>
|
|
1337
|
-
<path d="M9.16634 8.1237C9.16634 8.69899 8.69997 9.16536 8.12467 9.16536C7.54938 9.16536 7.08301 8.69899 7.08301 8.1237C7.08301 7.5484 7.54938 7.08203 8.12467 7.08203C8.69997 7.08203 9.16634 7.5484 9.16634 8.1237Z" stroke="#595E6A"/>
|
|
1338
|
-
<path d="M12.5 15.207C12.5 15.5522 12.2202 15.832 11.875 15.832C11.5298 15.832 11.25 15.5522 11.25 15.207C11.25 14.8619 11.5298 14.582 11.875 14.582C12.2202 14.582 12.5 14.8619 12.5 15.207Z" fill="#595E6A"/>
|
|
1339
|
-
<path d="M8.75 15.207C8.75 15.5522 8.47018 15.832 8.125 15.832C7.77982 15.832 7.5 15.5522 7.5 15.207C7.5 14.8619 7.77982 14.582 8.125 14.582C8.47018 14.582 8.75 14.8619 8.75 15.207Z" fill="#595E6A"/>
|
|
1340
|
-
<path d="M12.5 15.207C12.5 15.5522 12.2202 15.832 11.875 15.832C11.5298 15.832 11.25 15.5522 11.25 15.207C11.25 14.8619 11.5298 14.582 11.875 14.582C12.2202 14.582 12.5 14.8619 12.5 15.207Z" fill="#595E6A"/>
|
|
1341
|
-
<path d="M12.5 4.79297C12.5 5.13815 12.2202 5.41797 11.875 5.41797C11.5298 5.41797 11.25 5.13815 11.25 4.79297C11.25 4.44779 11.5298 4.16797 11.875 4.16797C12.2202 4.16797 12.5 4.44779 12.5 4.79297Z" fill="#595E6A"/>
|
|
1342
|
-
<path d="M8.75 15.207C8.75 15.5522 8.47018 15.832 8.125 15.832C7.77982 15.832 7.5 15.5522 7.5 15.207C7.5 14.8619 7.77982 14.582 8.125 14.582C8.47018 14.582 8.75 14.8619 8.75 15.207Z" fill="#595E6A"/>
|
|
1343
|
-
<path d="M8.75 4.79297C8.75 5.13815 8.47018 5.41797 8.125 5.41797C7.77982 5.41797 7.5 5.13815 7.5 4.79297C7.5 4.44779 7.77982 4.16797 8.125 4.16797C8.47018 4.16797 8.75 4.44779 8.75 4.79297Z" fill="#595E6A"/>
|
|
1344
|
-
<path d="M15.208 7.5C15.5532 7.5 15.833 7.77982 15.833 8.125C15.833 8.47018 15.5532 8.75 15.208 8.75C14.8628 8.75 14.583 8.47018 14.583 8.125C14.583 7.77982 14.8628 7.5 15.208 7.5Z" fill="#595E6A"/>
|
|
1345
|
-
<path d="M4.79199 7.5C5.13717 7.5 5.41699 7.77982 5.41699 8.125C5.41699 8.47018 5.13717 8.75 4.79199 8.75C4.44681 8.75 4.16699 8.47018 4.16699 8.125C4.16699 7.77982 4.44681 7.5 4.79199 7.5Z" fill="#595E6A"/>
|
|
1346
|
-
<path d="M15.208 11.25C15.5532 11.25 15.833 11.5298 15.833 11.875C15.833 12.2202 15.5532 12.5 15.208 12.5C14.8628 12.5 14.583 12.2202 14.583 11.875C14.583 11.5298 14.8628 11.25 15.208 11.25Z" fill="#595E6A"/>
|
|
1347
|
-
<path d="M4.79199 11.25C5.13717 11.25 5.41699 11.5298 5.41699 11.875C5.41699 12.2202 5.13717 12.5 4.79199 12.5C4.44681 12.5 4.16699 12.2202 4.16699 11.875C4.16699 11.5298 4.44681 11.25 4.79199 11.25Z" fill="#595E6A"/>
|
|
1348
|
-
</g>
|
|
1349
|
-
<defs>
|
|
1350
|
-
<clipPath id="clip0_23427_158048">
|
|
1351
|
-
<rect width="20" height="20" rx="5" fill="white"/>
|
|
1352
|
-
</clipPath>
|
|
1353
|
-
</defs>
|
|
1354
|
-
</svg>
|
|
1355
|
-
`;
|
|
1356
1185
|
const duckDevVariant = `
|
|
1357
1186
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
1358
1187
|
<path d="M4.9 4.90078C6.36135 3.43943 7.09203 2.70875 8 2.70875C8.90797 2.70875 9.63865 3.43943 11.1 4.90078C12.5614 6.36214 13.292 7.09281 13.292 8.00078C13.292 8.90875 12.5614 9.63943 11.1 11.1008C9.63865 12.5621 8.90797 13.2928 8 13.2928C7.09203 13.2928 6.36135 12.5621 4.9 11.1008C3.43865 9.63943 2.70797 8.90875 2.70797 8.00078C2.70797 7.09281 3.43865 6.36214 4.9 4.90078Z" stroke="#595E6A" stroke-width="1.5"/>
|
|
1359
1188
|
</svg>
|
|
1360
1189
|
`;
|
|
1361
|
-
const
|
|
1190
|
+
const duckDevVariantMedium = `
|
|
1362
1191
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1363
1192
|
<path d="M6.125 6.125C7.95169 4.29831 8.86504 3.38496 10 3.38496C11.135 3.38496 12.0483 4.29831 13.875 6.125C15.7017 7.95169 16.615 8.86504 16.615 10C16.615 11.135 15.7017 12.0483 13.875 13.875C12.0483 15.7017 11.135 16.615 10 16.615C8.86504 16.615 7.95169 15.7017 6.125 13.875C4.29831 12.0483 3.38496 11.135 3.38496 10C3.38496 8.86504 4.29831 7.95169 6.125 6.125Z" stroke="#595E6A" stroke-width="1.5"/>
|
|
1364
1193
|
</svg>
|
|
1365
1194
|
`;
|
|
1366
|
-
const duckDevRichText = `
|
|
1367
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1368
|
-
<path d="M7.9002 7.19922H12.8002M7.5502 9.19922H12.1002M7.2002 11.1992H9.3002" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1369
|
-
<path d="M3.04004 2.80078H9.44004M6.17611 3.20289L4.78314 11.9978" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round"/>
|
|
1370
|
-
</svg>
|
|
1371
|
-
`;
|
|
1372
|
-
const duckDevRichTextSm = `
|
|
1373
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1374
|
-
<path d="M9.875 9H16M9.4375 11.5H15.125M9 14H11.625" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1375
|
-
<path d="M3.7998 3.5H11.7998M7.71989 4.00264L5.97868 14.9962" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round"/>
|
|
1376
|
-
</svg>
|
|
1377
|
-
`;
|
|
1378
1195
|
const duckDevChecklist = `
|
|
1379
1196
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1380
1197
|
<path d="M13.3359 3.33268H15.0026C15.4446 3.33268 15.8686 3.50828 16.1811 3.82084C16.4937 4.1334 16.6693 4.55732 16.6693 4.99935V16.666C16.6693 17.108 16.4937 17.532 16.1811 17.8445C15.8686 18.1571 15.4446 18.3327 15.0026 18.3327H5.0026C4.56058 18.3327 4.13665 18.1571 3.82409 17.8445C3.51153 17.532 3.33594 17.108 3.33594 16.666V4.99935C3.33594 4.55732 3.51153 4.1334 3.82409 3.82084C4.13665 3.50828 4.56058 3.33268 5.0026 3.33268H6.66927M7.5026 1.66602H12.5026C12.9628 1.66602 13.3359 2.03911 13.3359 2.49935V4.16602C13.3359 4.62625 12.9628 4.99935 12.5026 4.99935H7.5026C7.04237 4.99935 6.66927 4.62625 6.66927 4.16602V2.49935C6.66927 2.03911 7.04237 1.66602 7.5026 1.66602Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1381
1198
|
<path d="M7.5 11.168L8.92857 12.5013L12.5 9.16797" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1382
1199
|
</svg>
|
|
1383
1200
|
`;
|
|
1384
|
-
const
|
|
1201
|
+
const duckDevRefreshCcwMedium = `
|
|
1385
1202
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1386
1203
|
<path d="M0.833008 3.33527V8.33527M0.833008 8.33527H5.83301M0.833008 8.33527L4.69967 4.70193C5.5953 3.80586 6.70332 3.15127 7.92035 2.79925C9.13738 2.44722 10.4238 2.40923 11.6594 2.68882C12.8951 2.96841 14.0398 3.55646 14.9868 4.39812C15.9337 5.23977 16.652 6.30759 17.0747 7.50193M19.1663 16.6686V11.6686M19.1663 11.6686H14.1663M19.1663 11.6686L15.2997 15.3019C14.4041 16.198 13.296 16.8526 12.079 17.2046C10.862 17.5567 9.5756 17.5946 8.33991 17.3151C7.10423 17.0355 5.95951 16.4474 5.01256 15.6058C4.06562 14.7641 3.34731 13.6963 2.92467 12.5019" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1387
1204
|
</svg>
|
|
@@ -1398,7 +1215,7 @@ const duckDevRefreshCcw = `
|
|
|
1398
1215
|
</defs>
|
|
1399
1216
|
</svg>
|
|
1400
1217
|
`;
|
|
1401
|
-
const
|
|
1218
|
+
const duckDevBarChartMedium = `
|
|
1402
1219
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1403
1220
|
<path d="M10 16.6654V8.33203M15 16.6654V3.33203M5 16.6654V13.332" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1404
1221
|
</svg>
|
|
@@ -1413,12 +1230,12 @@ const duckDevCurvedArrow = `
|
|
|
1413
1230
|
<path d="M9.00033 5.66797L12.3337 9.0013M12.3337 9.0013L9.00033 12.3346M12.3337 9.0013L4.33366 9.0013C3.62641 9.0013 2.94814 8.72035 2.44804 8.22025C1.94794 7.72016 1.66699 7.04188 1.66699 6.33464L1.66699 1.66797" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1414
1231
|
</svg>
|
|
1415
1232
|
`;
|
|
1416
|
-
const
|
|
1233
|
+
const duckDevBulletMedium = `
|
|
1417
1234
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
|
|
1418
1235
|
<circle cx="10.0488" cy="10.5" r="5" fill="#DCDEE3"/>
|
|
1419
1236
|
</svg>
|
|
1420
1237
|
`;
|
|
1421
|
-
const
|
|
1238
|
+
const duckDevBulletFillMedium = `
|
|
1422
1239
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
|
|
1423
1240
|
<circle opacity="0.2" cx="10.0488" cy="10.5" r="8" fill="#0099FF"/>
|
|
1424
1241
|
<circle cx="10.0488" cy="10.5" r="4" fill="#0099FF"/>
|
|
@@ -1429,7 +1246,7 @@ const duckDevArrowRight = `
|
|
|
1429
1246
|
<path d="M3.33301 7.9987H12.6663M12.6663 7.9987L7.99967 3.33203M12.6663 7.9987L7.99967 12.6654" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1430
1247
|
</svg>
|
|
1431
1248
|
`;
|
|
1432
|
-
const
|
|
1249
|
+
const duckDevArrowRightMedium = `
|
|
1433
1250
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1434
1251
|
<path d="M4.16699 10.0013H15.8337M15.8337 10.0013L10.0003 4.16797M15.8337 10.0013L10.0003 15.8346" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1435
1252
|
</svg>
|
|
@@ -1439,7 +1256,7 @@ const duckDevForkLift = `
|
|
|
1439
1256
|
<path d="M13.3996 9.63322C13.731 9.63322 13.9996 9.36459 13.9996 9.03322C13.9996 8.70185 13.731 8.43322 13.3996 8.43322V9.63322ZM11.0237 0.890625C11.0237 0.559254 10.755 0.290625 10.4237 0.290625C10.0923 0.290625 9.82366 0.559254 9.82366 0.890625H11.0237ZM7.04311 1.7553C7.37448 1.7553 7.64311 1.48667 7.64311 1.1553C7.64311 0.823927 7.37448 0.555298 7.04311 0.555298V1.7553ZM4.76005 5.12275L5.18432 4.69849V4.69849L4.76005 5.12275ZM3.14066 8.88596C3.14066 9.42197 2.70614 9.85649 2.17013 9.85649V11.0565C3.36888 11.0565 4.34066 10.0847 4.34066 8.88596H3.14066ZM2.17013 9.85649C1.63413 9.85649 1.19961 9.42197 1.19961 8.88596H-0.000390649C-0.000390649 10.0847 0.971386 11.0565 2.17013 11.0565V9.85649ZM1.19961 8.88596C1.19961 8.34996 1.63413 7.91544 2.17013 7.91544V6.71544C0.971386 6.71544 -0.000390649 7.68721 -0.000390649 8.88596H1.19961ZM2.17013 7.91544C2.70614 7.91544 3.14066 8.34996 3.14066 8.88596H4.34066C4.34066 7.68721 3.36888 6.71544 2.17013 6.71544V7.91544ZM10.2985 8.63167C10.2985 9.16767 9.86399 9.60219 9.32799 9.60219V10.8022C10.5267 10.8022 11.4985 9.83042 11.4985 8.63167H10.2985ZM9.32799 9.60219C8.79198 9.60219 8.35746 9.16767 8.35746 8.63167H7.15746C7.15746 9.83042 8.12924 10.8022 9.32799 10.8022V9.60219ZM8.35746 8.63167C8.35746 8.09566 8.79198 7.66114 9.32799 7.66114V6.46114C8.12924 6.46114 7.15746 7.43292 7.15746 8.63167H8.35746ZM9.32799 7.66114C9.86399 7.66114 10.2985 8.09566 10.2985 8.63167H11.4985C11.4985 7.43292 10.5267 6.46114 9.32799 6.46114V7.66114ZM9.43988 6.85844L6.77368 0.759282L5.67415 1.23993L8.34034 7.33909L9.43988 6.85844ZM3.77699 9.63322H7.75811V8.43322H3.77699V9.63322ZM10.6481 9.63322H13.3996V8.43322H10.6481V9.63322ZM9.82366 0.890625V7.42831H11.0237V0.890625H9.82366ZM3.15033 1.7553H7.04311V0.555298H3.15033V1.7553ZM2.42178 4.87834V2.48385H1.22178V4.87834H2.42178ZM3.15033 0.555298C2.08522 0.555298 1.22178 1.41874 1.22178 2.48385H2.42178C2.42178 2.08148 2.74796 1.7553 3.15033 1.7553V0.555298ZM1.26389 5.52819H4.29034V4.32819H1.26389V5.52819ZM1.19961 8.90695V5.59247H-0.000390649V8.90695H1.19961ZM4.33579 5.54702L7.44346 8.65469L8.29199 7.80616L5.18432 4.69849L4.33579 5.54702ZM4.29034 5.52819C4.30739 5.52819 4.32374 5.53496 4.33579 5.54702L5.18432 4.69849C4.94722 4.46139 4.62565 4.32819 4.29034 4.32819V5.52819ZM1.26389 4.32819C0.565646 4.32819 -0.000390649 4.89423 -0.000390649 5.59247H1.19961C1.19961 5.55697 1.22839 5.52819 1.26389 5.52819V4.32819Z" fill="#595E6A"/>
|
|
1440
1257
|
</svg>
|
|
1441
1258
|
`;
|
|
1442
|
-
const
|
|
1259
|
+
const duckDevForkLiftMedium = `
|
|
1443
1260
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="15" viewBox="0 0 18 15" fill="none">
|
|
1444
1261
|
<path d="M17 12.4478C17.4142 12.4478 17.75 12.112 17.75 11.6978C17.75 11.2836 17.4142 10.9478 17 10.9478V12.4478ZM14.0301 1.51953C14.0301 1.10532 13.6943 0.769531 13.2801 0.769531C12.8658 0.769531 12.5301 1.10532 12.5301 1.51953H14.0301ZM9.05438 2.60037C9.46859 2.60037 9.80438 2.26459 9.80438 1.85037C9.80438 1.43616 9.46859 1.10037 9.05438 1.10037V2.60037ZM6.20056 6.80969L6.73089 6.27936L6.73089 6.27936L6.20056 6.80969ZM4.17631 11.5137C4.17631 12.1837 3.63316 12.7269 2.96316 12.7269V14.2269C4.46159 14.2269 5.67631 13.0121 5.67631 11.5137H4.17631ZM2.96316 12.7269C2.29315 12.7269 1.75 12.1837 1.75 11.5137H0.25C0.25 13.0121 1.46472 14.2269 2.96316 14.2269V12.7269ZM1.75 11.5137C1.75 10.8437 2.29315 10.3005 2.96316 10.3005V8.80055C1.46472 8.80055 0.25 10.0153 0.25 11.5137H1.75ZM2.96316 10.3005C3.63316 10.3005 4.17631 10.8437 4.17631 11.5137H5.67631C5.67631 10.0153 4.46159 8.80055 2.96316 8.80055V10.3005ZM13.1236 11.1958C13.1236 11.8658 12.5805 12.409 11.9105 12.409V13.909C13.4089 13.909 14.6236 12.6943 14.6236 11.1958H13.1236ZM11.9105 12.409C11.2405 12.409 10.6973 11.8658 10.6973 11.1958H9.19732C9.19732 12.6943 10.412 13.909 11.9105 13.909V12.409ZM10.6973 11.1958C10.6973 10.5258 11.2405 9.98268 11.9105 9.98268V8.48268C10.412 8.48268 9.19732 9.6974 9.19732 11.1958H10.6973ZM11.9105 9.98268C12.5805 9.98268 13.1236 10.5258 13.1236 11.1958H14.6236C14.6236 9.6974 13.4089 8.48268 11.9105 8.48268V9.98268ZM12.0503 8.9793L8.71759 1.35535L7.34317 1.95617L10.6759 9.58012L12.0503 8.9793ZM4.97172 12.4478H9.94813V10.9478H4.97172V12.4478ZM13.5606 12.4478H17V10.9478H13.5606V12.4478ZM12.5301 1.51953V9.69164H14.0301V1.51953H12.5301ZM4.1884 2.60037H9.05438V1.10037H4.1884V2.60037ZM3.27771 6.50418V3.51107H1.77771V6.50418H3.27771ZM4.1884 1.10037C2.85701 1.10037 1.77771 2.17968 1.77771 3.51107H3.27771C3.27771 3.00811 3.68544 2.60037 4.1884 2.60037V1.10037ZM1.83035 7.31649H5.61341V5.81649H1.83035V7.31649ZM1.75 11.5399V7.39683H0.25V11.5399H1.75ZM5.67023 7.34002L9.55482 11.2246L10.6155 10.164L6.73089 6.27936L5.67023 7.34002ZM5.61341 7.31649C5.63472 7.31649 5.65516 7.32495 5.67023 7.34002L6.73089 6.27936C6.43451 5.98299 6.03255 5.81649 5.61341 5.81649V7.31649ZM1.83035 5.81649C0.957546 5.81649 0.25 6.52403 0.25 7.39683H1.75C1.75 7.35246 1.78597 7.31649 1.83035 7.31649V5.81649Z" fill="#595E6A"/>
|
|
1445
1262
|
</svg>
|
|
@@ -1450,7 +1267,7 @@ const duckDevPartPrimitive = `
|
|
|
1450
1267
|
<path d="M8 2L2.5 5L8 7.5L13.5 5L8 2Z" fill="#595E6A"/>
|
|
1451
1268
|
</svg>
|
|
1452
1269
|
`;
|
|
1453
|
-
const
|
|
1270
|
+
const duckDevPartPrimitiveMedium = `
|
|
1454
1271
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1455
1272
|
<path d="M13.4 5.3L11.9 6.05L8 8M8 8L2.6 5.3M8 8V13.7M10.1468 2.8292L11.3468 3.4592C12.6374 4.1366 13.283 4.475 13.6418 5.084C14 5.6924 14 6.4502 14 7.964V8.0342C14 9.5492 14 10.307 13.6418 10.9154C13.283 11.5244 12.6374 11.8634 11.3468 12.5408L10.1468 13.1702C9.0932 13.7234 8.5664 14 8 14C7.4336 14 6.9068 13.724 5.8532 13.1708L4.6532 12.5408C3.3626 11.8634 2.717 11.525 2.3582 10.916C2 10.3076 2 9.5498 2 8.036V7.9658C2 6.4508 2 5.693 2.3582 5.0846C2.717 4.4756 3.3626 4.1366 4.6532 3.4598L5.8532 2.8298C6.9068 2.2766 7.4336 2 8 2C8.5664 2 9.0932 2.276 10.1468 2.8292Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round"/>
|
|
1456
1273
|
<path d="M8 2L2.5 5L8 7.5L13.5 5L8 2Z" fill="#595E6A"/>
|
|
@@ -1461,12 +1278,12 @@ const duckDevCutLinear = `
|
|
|
1461
1278
|
<path d="M13.4 5.3L8 8M8 8L2.6 5.3M8 8V13.7M5.3 3.5C5.70897 3.71525 6.44 4.1 6.44 4.1M9.86 5.9C9.86 5.9 8.49206 5.25898 8 5M11 8V9M11 10.5V11.5M10.1468 2.8292L11.3468 3.4592C12.6374 4.1366 13.283 4.475 13.6418 5.084C14 5.6924 14 6.4502 14 7.964V8.0342C14 9.5492 14 10.307 13.6418 10.9154C13.283 11.5244 12.6374 11.8634 11.3468 12.5408L10.1468 13.1702C9.0932 13.7234 8.5664 14 8 14C7.4336 14 6.9068 13.724 5.8532 13.1708L4.6532 12.5408C3.3626 11.8634 2.717 11.525 2.3582 10.916C2 10.3076 2 9.5498 2 8.036V7.9658C2 6.4508 2 5.693 2.3582 5.0846C2.717 4.4756 3.3626 4.1366 4.6532 3.4598L5.8532 2.8298C6.9068 2.2766 7.4336 2 8 2C8.5664 2 9.0932 2.276 10.1468 2.8292Z" stroke="#595E6A" stroke-linecap="round"/>
|
|
1462
1279
|
</svg>
|
|
1463
1280
|
`;
|
|
1464
|
-
const
|
|
1281
|
+
const duckDevCutLinearMedium = `
|
|
1465
1282
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1466
1283
|
<path d="M16.75 6.625L10 10M10 10L3.25 6.625M10 10V17.125M6.625 4.375C7.13621 4.64406 8.05 5.125 8.05 5.125M12.325 7.375C12.325 7.375 10.6151 6.57372 10 6.25M13.75 10V11.25M13.75 13.125V14.375M12.6835 3.5365L14.1835 4.324C15.7967 5.17075 16.6037 5.59375 17.0522 6.355C17.5 7.1155 17.5 8.06275 17.5 9.955V10.0428C17.5 11.9365 17.5 12.8837 17.0522 13.6442C16.6037 14.4055 15.7967 14.8293 14.1835 15.676L12.6835 16.4628C11.3665 17.1543 10.708 17.5 10 17.5C9.292 17.5 8.6335 17.155 7.3165 16.4635L5.8165 15.676C4.20325 14.8293 3.39625 14.4063 2.94775 13.645C2.5 12.8845 2.5 11.9373 2.5 10.045V9.95725C2.5 8.0635 2.5 7.11625 2.94775 6.35575C3.39625 5.5945 4.20325 5.17075 5.8165 4.32475L7.3165 3.53725C8.6335 2.84575 9.292 2.5 10 2.5C10.708 2.5 11.3665 2.845 12.6835 3.5365Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round"/>
|
|
1467
1284
|
</svg>
|
|
1468
1285
|
`;
|
|
1469
|
-
const
|
|
1286
|
+
const duckDevChecklistsMedium = `
|
|
1470
1287
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1471
1288
|
<g clip-path="url(#clip0_27172_11150)">
|
|
1472
1289
|
<path d="M5.54343 12.6507C5.25776 12.3508 4.78303 12.3392 4.48308 12.6249C4.18314 12.9105 4.17156 13.3853 4.45722 13.6852L5.54343 12.6507ZM5.95271 14.168L5.4096 14.6852C5.55116 14.8338 5.74745 14.918 5.95271 14.918C6.15796 14.918 6.35425 14.8338 6.49581 14.6852L5.95271 14.168ZM8.87676 12.1852C9.16243 11.8853 9.15085 11.4105 8.8509 11.1249C8.55095 10.8392 8.07622 10.8508 7.79056 11.1507L8.87676 12.1852ZM5.54343 6.81739C5.25776 6.51745 4.78303 6.50587 4.48308 6.79153C4.18314 7.0772 4.17156 7.55193 4.45722 7.85188L5.54343 6.81739ZM5.95271 8.33464L5.4096 8.85188C5.55116 9.00051 5.74745 9.08464 5.95271 9.08464C6.15796 9.08464 6.35425 9.00051 6.49581 8.85188L5.95271 8.33464ZM8.87676 6.35188C9.16243 6.05193 9.15085 5.5772 8.8509 5.29153C8.55095 5.00587 8.07622 5.01745 7.79056 5.31739L8.87676 6.35188ZM10.8337 6.7513C10.4194 6.7513 10.0837 7.08709 10.0837 7.5013C10.0837 7.91552 10.4194 8.2513 10.8337 8.2513V6.7513ZM15.0003 8.2513C15.4145 8.2513 15.7503 7.91552 15.7503 7.5013C15.7503 7.08709 15.4145 6.7513 15.0003 6.7513V8.2513ZM10.8337 12.5846C10.4194 12.5846 10.0837 12.9204 10.0837 13.3346C10.0837 13.7488 10.4194 14.0846 10.8337 14.0846V12.5846ZM15.0003 14.0846C15.4145 14.0846 15.7503 13.7488 15.7503 13.3346C15.7503 12.9204 15.4145 12.5846 15.0003 12.5846V14.0846ZM10.0003 17.5846C8.01494 17.5846 6.60135 17.583 5.5283 17.4388C4.47682 17.2974 3.86533 17.0315 3.41771 16.5839L2.35705 17.6446C3.12982 18.4173 4.11062 18.7617 5.32842 18.9254C6.52466 19.0862 8.05734 19.0846 10.0003 19.0846V17.5846ZM0.916992 10.0013C0.916992 11.9443 0.915399 13.477 1.07623 14.6732C1.23996 15.891 1.58428 16.8718 2.35705 17.6446L3.41771 16.5839C2.97009 16.1363 2.70422 15.5248 2.56285 14.4733C2.41859 13.4003 2.41699 11.9867 2.41699 10.0013H0.916992ZM17.5837 10.0013C17.5837 11.9867 17.5821 13.4003 17.4378 14.4733C17.2964 15.5248 17.0306 16.1363 16.5829 16.5839L17.6436 17.6446C18.4164 16.8718 18.7607 15.891 18.9244 14.6732C19.0853 13.477 19.0837 11.9443 19.0837 10.0013H17.5837ZM10.0003 19.0846C11.9433 19.0846 13.476 19.0862 14.6722 18.9254C15.89 18.7617 16.8708 18.4173 17.6436 17.6446L16.5829 16.5839C16.1353 17.0315 15.5238 17.2974 14.4724 17.4388C13.3993 17.583 11.9857 17.5846 10.0003 17.5846V19.0846ZM10.0003 2.41797C11.9857 2.41797 13.3993 2.41956 14.4724 2.56383C15.5238 2.7052 16.1353 2.97107 16.5829 3.41869L17.6436 2.35803C16.8708 1.58526 15.89 1.24094 14.6722 1.07721C13.476 0.916376 11.9433 0.917969 10.0003 0.917969V2.41797ZM19.0837 10.0013C19.0837 8.05832 19.0853 6.52563 18.9244 5.3294C18.7607 4.11159 18.4164 3.1308 17.6436 2.35803L16.5829 3.41869C17.0306 3.8663 17.2964 4.4778 17.4378 5.52927C17.5821 6.60232 17.5837 8.01591 17.5837 10.0013H19.0837ZM10.0003 0.917969C8.05734 0.917969 6.52466 0.916376 5.32842 1.07721C4.11062 1.24094 3.12982 1.58526 2.35705 2.35803L3.41771 3.41869C3.86533 2.97107 4.47682 2.7052 5.5283 2.56383C6.60135 2.41956 8.01494 2.41797 10.0003 2.41797V0.917969ZM2.41699 10.0013C2.41699 8.01591 2.41859 6.60232 2.56285 5.52927C2.70422 4.4778 2.97009 3.8663 3.41771 3.41869L2.35705 2.35803C1.58428 3.1308 1.23996 4.11159 1.07623 5.3294C0.915399 6.52563 0.916992 8.05832 0.916992 10.0013H2.41699ZM4.45722 13.6852L5.4096 14.6852L6.49581 13.6507L5.54343 12.6507L4.45722 13.6852ZM6.49581 14.6852L8.87676 12.1852L7.79056 11.1507L5.4096 13.6507L6.49581 14.6852ZM4.45722 7.85188L5.4096 8.85188L6.49581 7.81739L5.54343 6.81739L4.45722 7.85188ZM6.49581 8.85188L8.87676 6.35188L7.79056 5.31739L5.4096 7.81739L6.49581 8.85188ZM10.8337 8.2513H15.0003V6.7513H10.8337V8.2513ZM10.8337 14.0846H15.0003V12.5846H10.8337V14.0846Z" fill="#595E6A"/>
|
|
@@ -1488,37 +1305,17 @@ const duckDevImage = `
|
|
|
1488
1305
|
/>
|
|
1489
1306
|
</svg>
|
|
1490
1307
|
`;
|
|
1491
|
-
const duckDevViewInAr = `
|
|
1492
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
|
|
1493
|
-
<path d="M6.4702 2.47483C6.23275 2.6158 6.15455 2.92258 6.29553 3.16002C6.4365 3.39747 6.74327 3.47567 6.98072 3.3347L6.72546 2.90476L6.4702 2.47483ZM8.24935 2L8.50461 1.57007C8.34726 1.47664 8.15144 1.47664 7.99409 1.57007L8.24935 2ZM9.51798 3.3347C9.75542 3.47567 10.0622 3.39747 10.2032 3.16002C10.3441 2.92258 10.2659 2.6158 10.0285 2.47483L9.77324 2.90476L9.51798 3.3347ZM7.74935 4.2619C7.74935 4.53805 7.97321 4.7619 8.24935 4.7619C8.52549 4.7619 8.74935 4.53805 8.74935 4.2619H8.24935H7.74935ZM10.0285 14.1918C10.2659 14.0509 10.3441 13.7441 10.2032 13.5066C10.0622 13.2692 9.75542 13.191 9.51798 13.332L9.77324 13.7619L10.0285 14.1918ZM8.24935 14.6667L7.99409 15.0966C8.15144 15.19 8.34726 15.19 8.50461 15.0966L8.24935 14.6667ZM6.98072 13.332C6.74327 13.191 6.4365 13.2692 6.29553 13.5066C6.15455 13.7441 6.23275 14.0509 6.4702 14.1918L6.72546 13.7619L6.98072 13.332ZM8.74935 12.4048C8.74935 12.1286 8.52549 11.9048 8.24935 11.9048C7.97321 11.9048 7.74935 12.1286 7.74935 12.4048H8.24935H8.74935ZM2.41602 6.96234C2.41602 7.23848 2.63987 7.46234 2.91602 7.46234C3.19216 7.46234 3.41602 7.23848 3.41602 6.96234H2.91602H2.41602ZM2.91602 5.16667L2.65769 4.73857C2.5077 4.82908 2.41602 4.99149 2.41602 5.16667H2.91602ZM4.65073 4.70385C4.88716 4.56118 4.96317 4.25386 4.8205 4.01743C4.67783 3.781 4.37051 3.70499 4.13408 3.84766L4.3924 4.27576L4.65073 4.70385ZM4.52635 6.72541C4.76261 6.86836 5.07002 6.79272 5.21297 6.55646C5.35592 6.32019 5.28028 6.01278 5.04402 5.86983L4.78518 6.29762L4.52635 6.72541ZM14.0827 9.70433C14.0827 9.42819 13.8588 9.20433 13.5827 9.20433C13.3065 9.20433 13.0827 9.42819 13.0827 9.70433H13.5827H14.0827ZM13.5827 11.5L13.841 11.9281C13.991 11.8376 14.0827 11.6752 14.0827 11.5H13.5827ZM11.848 11.9628C11.6115 12.1055 11.5355 12.4128 11.6782 12.6492C11.8209 12.8857 12.1282 12.9617 12.3646 12.819L12.1063 12.3909L11.848 11.9628ZM11.9724 9.94126C11.7361 9.79831 11.4287 9.87395 11.2857 10.1102C11.1428 10.3465 11.2184 10.6539 11.4547 10.7968L11.7135 10.369L11.9724 9.94126ZM4.13115 12.8311C4.3666 12.9754 4.67443 12.9015 4.81872 12.666C4.96301 12.4306 4.88911 12.1227 4.65366 11.9784L4.3924 12.4048L4.13115 12.8311ZM2.91602 11.5H2.41602C2.41602 11.674 2.50643 11.8354 2.65476 11.9263L2.91602 11.5ZM3.41602 9.70433C3.41602 9.42819 3.19216 9.20433 2.91602 9.20433C2.63987 9.20433 2.41602 9.42819 2.41602 9.70433H2.91602H3.41602ZM5.0278 10.7957C5.26345 10.6517 5.33776 10.344 5.1938 10.1084C5.04983 9.87273 4.74209 9.79841 4.50645 9.94238L4.76713 10.369L5.0278 10.7957ZM12.3646 3.84766C12.1282 3.70499 11.8209 3.781 11.6782 4.01743C11.5355 4.25386 11.6115 4.56118 11.848 4.70385L12.1063 4.27576L12.3646 3.84766ZM13.5827 5.16667H14.0827C14.0827 4.99149 13.991 4.82908 13.841 4.73857L13.5827 5.16667ZM13.0827 6.96234C13.0827 7.23848 13.3065 7.46234 13.5827 7.46234C13.8588 7.46234 14.0827 7.23848 14.0827 6.96234H13.5827H13.0827ZM11.4547 5.86983C11.2184 6.01278 11.1428 6.32019 11.2857 6.55646C11.4287 6.79272 11.7361 6.86836 11.9724 6.72541L11.7135 6.29762L11.4547 5.86983ZM7.74935 10.1429C7.74935 10.419 7.97321 10.6429 8.24935 10.6429C8.52549 10.6429 8.74935 10.419 8.74935 10.1429H8.24935H7.74935ZM10.0285 7.8585C10.2659 7.71753 10.3441 7.41076 10.2032 7.17331C10.0622 6.93587 9.75542 6.85766 9.51798 6.99864L9.77324 7.42857L10.0285 7.8585ZM6.98072 6.99864C6.74327 6.85766 6.4365 6.93587 6.29553 7.17331C6.15455 7.41076 6.23275 7.71753 6.4702 7.8585L6.72546 7.42857L6.98072 6.99864ZM6.72546 2.90476L6.98072 3.3347L8.50461 2.42993L8.24935 2L7.99409 1.57007L6.4702 2.47483L6.72546 2.90476ZM8.24935 2L7.99409 2.42993L9.51798 3.3347L9.77324 2.90476L10.0285 2.47483L8.50461 1.57007L8.24935 2ZM8.24935 2H7.74935V4.2619H8.24935H8.74935V2H8.24935ZM9.77324 13.7619L9.51798 13.332L7.99409 14.2367L8.24935 14.6667L8.50461 15.0966L10.0285 14.1918L9.77324 13.7619ZM8.24935 14.6667L8.50461 14.2367L6.98072 13.332L6.72546 13.7619L6.4702 14.1918L7.99409 15.0966L8.24935 14.6667ZM8.24935 14.6667H8.74935V12.4048H8.24935H7.74935V14.6667H8.24935ZM2.91602 6.96234H3.41602V5.16667H2.91602H2.41602V6.96234H2.91602ZM2.91602 5.16667L3.17434 5.59476L4.65073 4.70385L4.3924 4.27576L4.13408 3.84766L2.65769 4.73857L2.91602 5.16667ZM2.91602 5.16667L2.65718 5.59446L4.52635 6.72541L4.78518 6.29762L5.04402 5.86983L3.17485 4.73888L2.91602 5.16667ZM13.5827 9.70433H13.0827V11.5H13.5827H14.0827V9.70433H13.5827ZM13.5827 11.5L13.3244 11.0719L11.848 11.9628L12.1063 12.3909L12.3646 12.819L13.841 11.9281L13.5827 11.5ZM13.5827 11.5L13.8415 11.0722L11.9724 9.94126L11.7135 10.369L11.4547 10.7968L13.3238 11.9278L13.5827 11.5ZM4.3924 12.4048L4.65366 11.9784L3.17727 11.0737L2.91602 11.5L2.65476 11.9263L4.13115 12.8311L4.3924 12.4048ZM2.91602 11.5H3.41602V9.70433H2.91602H2.41602V11.5H2.91602ZM2.91602 11.5L3.17669 11.9267L5.0278 10.7957L4.76713 10.369L4.50645 9.94238L2.65534 11.0733L2.91602 11.5ZM12.1063 4.27576L11.848 4.70385L13.3244 5.59476L13.5827 5.16667L13.841 4.73857L12.3646 3.84766L12.1063 4.27576ZM13.5827 5.16667H13.0827V6.96234H13.5827H14.0827V5.16667H13.5827ZM13.5827 5.16667L13.3238 4.73888L11.4547 5.86983L11.7135 6.29762L11.9724 6.72541L13.8415 5.59446L13.5827 5.16667ZM8.24935 10.1429H8.74935V8.33333H8.24935H7.74935V10.1429H8.24935ZM8.24935 8.33333L8.50461 8.76327L10.0285 7.8585L9.77324 7.42857L9.51798 6.99864L7.99409 7.9034L8.24935 8.33333ZM8.24935 8.33333L8.50461 7.9034L6.98072 6.99864L6.72546 7.42857L6.4702 7.8585L7.99409 8.76327L8.24935 8.33333Z" fill="#595E6A"/>
|
|
1494
|
-
</svg>
|
|
1495
|
-
`;
|
|
1496
|
-
const duckDevViewInArSm = `
|
|
1497
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
|
|
1498
|
-
<path d="M8.2129 2.98605C7.85673 3.19752 7.73943 3.65767 7.95089 4.01384C8.16235 4.37001 8.62251 4.48732 8.97868 4.27585L8.59579 3.63095L8.2129 2.98605ZM10.5007 2.5L10.8835 1.8551C10.6475 1.71497 10.3538 1.71497 10.1178 1.8551L10.5007 2.5ZM12.0226 4.27585C12.3788 4.48732 12.8389 4.37001 13.0504 4.01384C13.2619 3.65767 13.1446 3.19752 12.7884 2.98605L12.4055 3.63095L12.0226 4.27585ZM9.75065 5.32738C9.75065 5.74159 10.0864 6.07738 10.5007 6.07738C10.9149 6.07738 11.2507 5.74159 11.2507 5.32738H10.5007H9.75065ZM12.7884 17.8473C13.1446 17.6358 13.2619 17.1757 13.0504 16.8195C12.8389 16.4633 12.3788 16.346 12.0226 16.5575L12.4055 17.2024L12.7884 17.8473ZM10.5007 18.3333L10.1178 18.9782C10.3538 19.1184 10.6475 19.1184 10.8835 18.9782L10.5007 18.3333ZM8.97868 16.5575C8.62251 16.346 8.16235 16.4633 7.95089 16.8195C7.73943 17.1757 7.85673 17.6358 8.2129 17.8473L8.59579 17.2024L8.97868 16.5575ZM11.2507 15.506C11.2507 15.0917 10.9149 14.756 10.5007 14.756C10.0864 14.756 9.75065 15.0917 9.75065 15.506H10.5007H11.2507ZM3.08398 8.70292C3.08398 9.11713 3.41977 9.45292 3.83398 9.45292C4.2482 9.45292 4.58398 9.11713 4.58398 8.70292H3.83398H3.08398ZM3.83398 6.45833L3.44649 5.81619C3.22151 5.95195 3.08398 6.19556 3.08398 6.45833H3.83398ZM6.06696 5.98684C6.42161 5.77284 6.53562 5.31185 6.32161 4.95721C6.10761 4.60256 5.64662 4.48855 5.29198 4.70255L5.67947 5.3447L6.06696 5.98684ZM5.78219 8.51371C6.13658 8.72814 6.5977 8.61467 6.81213 8.26028C7.02655 7.90589 6.91309 7.44477 6.5587 7.23034L6.17044 7.87202L5.78219 8.51371ZM17.9173 12.1304C17.9173 11.7162 17.5815 11.3804 17.1673 11.3804C16.7531 11.3804 16.4173 11.7162 16.4173 12.1304H17.1673H17.9173ZM17.1673 14.375L17.5548 15.0171C17.7798 14.8814 17.9173 14.6378 17.9173 14.375H17.1673ZM14.9343 14.8465C14.5797 15.0605 14.4657 15.5215 14.6797 15.8761C14.8937 16.2308 15.3547 16.3448 15.7093 16.1308L15.3218 15.4886L14.9343 14.8465ZM15.2191 12.3196C14.8647 12.1052 14.4036 12.2187 14.1892 12.5731C13.9747 12.9274 14.0882 13.3886 14.4426 13.603L14.8309 12.9613L15.2191 12.3196ZM5.28759 16.1454C5.64076 16.3619 6.10251 16.251 6.31894 15.8978C6.53538 15.5447 6.42453 15.0829 6.07135 14.8665L5.67947 15.506L5.28759 16.1454ZM3.83398 14.375H3.08398C3.08398 14.6359 3.21961 14.8781 3.4421 15.0145L3.83398 14.375ZM4.58398 12.1304C4.58398 11.7162 4.2482 11.3804 3.83398 11.3804C3.41977 11.3804 3.08398 11.7162 3.08398 12.1304H3.83398H4.58398ZM6.53889 13.6013C6.89235 13.3854 7.00383 12.9238 6.78788 12.5703C6.57193 12.2168 6.11032 12.1054 5.75686 12.3213L6.14787 12.9613L6.53889 13.6013ZM15.7093 4.70255C15.3547 4.48855 14.8937 4.60256 14.6797 4.95721C14.4657 5.31185 14.5797 5.77284 14.9343 5.98684L15.3218 5.3447L15.7093 4.70255ZM17.1673 6.45833H17.9173C17.9173 6.19556 17.7798 5.95195 17.5548 5.81619L17.1673 6.45833ZM16.4173 8.70292C16.4173 9.11713 16.7531 9.45292 17.1673 9.45292C17.5815 9.45292 17.9173 9.11713 17.9173 8.70292H17.1673H16.4173ZM14.4426 7.23034C14.0882 7.44477 13.9747 7.90589 14.1892 8.26028C14.4036 8.61467 14.8647 8.72814 15.2191 8.51371L14.8309 7.87202L14.4426 7.23034ZM9.75065 12.6786C9.75065 13.0928 10.0864 13.4286 10.5007 13.4286C10.9149 13.4286 11.2507 13.0928 11.2507 12.6786H10.5007H9.75065ZM12.7884 9.93061C13.1446 9.71915 13.2619 9.25899 13.0504 8.90283C12.8389 8.54666 12.3788 8.42935 12.0226 8.64081L12.4055 9.28571L12.7884 9.93061ZM8.97868 8.64081C8.62251 8.42935 8.16235 8.54666 7.95089 8.90283C7.73943 9.25899 7.85673 9.71915 8.2129 9.93061L8.59579 9.28571L8.97868 8.64081ZM8.59579 3.63095L8.97868 4.27585L10.8835 3.1449L10.5007 2.5L10.1178 1.8551L8.2129 2.98605L8.59579 3.63095ZM10.5007 2.5L10.1178 3.1449L12.0226 4.27585L12.4055 3.63095L12.7884 2.98605L10.8835 1.8551L10.5007 2.5ZM10.5007 2.5H9.75065V5.32738H10.5007H11.2507V2.5H10.5007ZM12.4055 17.2024L12.0226 16.5575L10.1178 17.6884L10.5007 18.3333L10.8835 18.9782L12.7884 17.8473L12.4055 17.2024ZM10.5007 18.3333L10.8835 17.6884L8.97868 16.5575L8.59579 17.2024L8.2129 17.8473L10.1178 18.9782L10.5007 18.3333ZM10.5007 18.3333H11.2507V15.506H10.5007H9.75065V18.3333H10.5007ZM3.83398 8.70292H4.58398V6.45833H3.83398H3.08398V8.70292H3.83398ZM3.83398 6.45833L4.22148 7.10048L6.06696 5.98684L5.67947 5.3447L5.29198 4.70255L3.44649 5.81619L3.83398 6.45833ZM3.83398 6.45833L3.44573 7.10002L5.78219 8.51371L6.17044 7.87202L6.5587 7.23034L4.22224 5.81665L3.83398 6.45833ZM17.1673 12.1304H16.4173V14.375H17.1673H17.9173V12.1304H17.1673ZM17.1673 14.375L16.7798 13.7329L14.9343 14.8465L15.3218 15.4886L15.7093 16.1308L17.5548 15.0171L17.1673 14.375ZM17.1673 14.375L17.5556 13.7333L15.2191 12.3196L14.8309 12.9613L14.4426 13.603L16.7791 15.0167L17.1673 14.375ZM5.67947 15.506L6.07135 14.8665L4.22587 13.7355L3.83398 14.375L3.4421 15.0145L5.28759 16.1454L5.67947 15.506ZM3.83398 14.375H4.58398V12.1304H3.83398H3.08398V14.375H3.83398ZM3.83398 14.375L4.225 15.015L6.53889 13.6013L6.14787 12.9613L5.75686 12.3213L3.44297 13.735L3.83398 14.375ZM15.3218 5.3447L14.9343 5.98684L16.7798 7.10048L17.1673 6.45833L17.5548 5.81619L15.7093 4.70255L15.3218 5.3447ZM17.1673 6.45833H16.4173V8.70292H17.1673H17.9173V6.45833H17.1673ZM17.1673 6.45833L16.7791 5.81665L14.4426 7.23034L14.8309 7.87202L15.2191 8.51371L17.5556 7.10002L17.1673 6.45833ZM10.5007 12.6786H11.2507V10.4167H10.5007H9.75065V12.6786H10.5007ZM10.5007 10.4167L10.8835 11.0616L12.7884 9.93061L12.4055 9.28571L12.0226 8.64081L10.1178 9.77177L10.5007 10.4167ZM10.5007 10.4167L10.8835 9.77177L8.97868 8.64081L8.59579 9.28571L8.2129 9.93061L10.1178 11.0616L10.5007 10.4167Z" fill="#595E6A"/>
|
|
1499
|
-
</svg>
|
|
1500
|
-
`;
|
|
1501
|
-
const duckDevFloorplanSolid = `
|
|
1502
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1503
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.166016 0H5.12708L8.46148 2.22293L7.87055 3.1104L4.80495 1.06667H1.23268V14.9333H6.56602V8.53333H4.43268V7.46667H9.76602V8.53333H7.63268V14.9333H15.0993V8.53333H12.966V7.46667H15.0993V1.06667H10.8327V0H16.166V16H0.166016V0Z" fill="#595E6A"/>
|
|
1504
|
-
</svg>
|
|
1505
|
-
`;
|
|
1506
|
-
const duckDevFloorplanSolidSm = `
|
|
1507
|
-
<svg width="24" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1508
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.16602 4H9.12708L12.4615 6.22293L11.8705 7.1104L8.80495 5.06667H5.23268V18.9333H10.566V12.5333H8.43268V11.4667H13.766V12.5333H11.6327V18.9333H19.0993V12.5333H16.966V11.4667H19.0993V5.06667H14.8327V4H20.166V20H4.16602V4Z" fill="#595E6A"/>
|
|
1509
|
-
</svg>
|
|
1510
|
-
`;
|
|
1511
1308
|
const duckDevMoon = `
|
|
1512
1309
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1513
1310
|
<path d="M13.9999 8.52667C13.8951 9.66147 13.4692 10.7429 12.7721 11.6445C12.075 12.5461 11.1356 13.2305 10.0637 13.6177C8.99188 14.0049 7.83192 14.0787 6.7196 13.8307C5.60728 13.5827 4.5886 13.023 3.78275 12.2172C2.97691 11.4113 2.41723 10.3927 2.16921 9.28033C1.92118 8.16801 1.99508 7.00806 2.38224 5.9362C2.7694 4.86434 3.45382 3.92491 4.35541 3.22784C5.257 2.53076 6.33847 2.10487 7.47327 2C6.80888 2.89884 6.48917 4.0063 6.57229 5.12094C6.65541 6.23559 7.13584 7.28337 7.9262 8.07373C8.71656 8.86409 9.76435 9.34452 10.879 9.42765C11.9936 9.51077 13.1011 9.19106 13.9999 8.52667Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1514
1311
|
</svg>
|
|
1515
1312
|
`;
|
|
1516
|
-
const
|
|
1313
|
+
const duckDevMoonMedium = `
|
|
1517
1314
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1518
1315
|
<path d="M17.5004 10.6583C17.3693 12.0768 16.837 13.4287 15.9656 14.5557C15.0943 15.6826 13.92 16.5382 12.5802 17.0221C11.2403 17.5061 9.79039 17.5984 8.39999 17.2884C7.00959 16.9784 5.73623 16.2788 4.72893 15.2715C3.72162 14.2642 3.02202 12.9908 2.712 11.6004C2.40197 10.21 2.49434 8.76007 2.97829 7.42025C3.46224 6.08042 4.31777 4.90614 5.44475 4.03479C6.57174 3.16345 7.92357 2.63109 9.34207 2.5C8.51158 3.62356 8.11195 5.00787 8.21585 6.40118C8.31975 7.79448 8.92029 9.10422 9.90824 10.0922C10.8962 11.0801 12.2059 11.6807 13.5992 11.7846C14.9925 11.8885 16.3769 11.4888 17.5004 10.6583Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1519
1316
|
</svg>
|
|
1520
1317
|
`;
|
|
1521
|
-
const
|
|
1318
|
+
const duckDevSunMedium = `
|
|
1522
1319
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1523
1320
|
<path d="M10.0003 1.66797V2.5013M10.0003 17.5013V18.3346M18.3337 10.0013H17.5003M2.50033 10.0013H1.66699M15.8927 4.10897L15.5653 4.43633M4.43514 15.5665L4.10778 15.8939M15.8927 15.8936L15.5653 15.5663M4.43514 4.43612L4.10778 4.10875M15.0003 10.0013C15.0003 12.7627 12.7617 15.0013 10.0003 15.0013C7.2389 15.0013 5.00033 12.7627 5.00033 10.0013C5.00033 7.23988 7.2389 5.0013 10.0003 5.0013C12.7617 5.0013 15.0003 7.23988 15.0003 10.0013Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round"/>
|
|
1524
1321
|
</svg>
|
|
@@ -1528,7 +1325,7 @@ const duckDevTool = `
|
|
|
1528
1325
|
<path d="M9.7999 4.19722C9.67775 4.32184 9.60933 4.48938 9.60933 4.66389C9.60933 4.83839 9.67775 5.00593 9.7999 5.13055L10.8666 6.19722C10.9912 6.31937 11.1587 6.38779 11.3332 6.38779C11.5077 6.38779 11.6753 6.31937 11.7999 6.19722L14.3132 3.68389C14.6485 4.42468 14.75 5.25004 14.6042 6.04998C14.4585 6.84992 14.0724 7.58645 13.4974 8.16141C12.9225 8.73636 12.1859 9.12244 11.386 9.26819C10.5861 9.41394 9.7607 9.31244 9.0199 8.97722L4.41324 13.5839C4.14802 13.8491 3.78831 13.9981 3.41324 13.9981C3.03816 13.9981 2.67845 13.8491 2.41324 13.5839C2.14802 13.3187 1.99902 12.959 1.99902 12.5839C1.99902 12.2088 2.14802 11.8491 2.41324 11.5839L7.0199 6.97722C6.68468 6.23643 6.58318 5.41106 6.72893 4.61112C6.87468 3.81118 7.26076 3.07466 7.83572 2.4997C8.41067 1.92474 9.1472 1.53867 9.94714 1.39291C10.7471 1.24716 11.5724 1.34866 12.3132 1.68389L9.80657 4.19055L9.7999 4.19722Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1529
1326
|
</svg>
|
|
1530
1327
|
`;
|
|
1531
|
-
const
|
|
1328
|
+
const duckDevToolMedium = `
|
|
1532
1329
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1533
1330
|
<path d="M12.2501 5.25043C12.0974 5.40621 12.0119 5.61564 12.0119 5.83376C12.0119 6.05189 12.0974 6.26132 12.2501 6.4171L13.5835 7.75043C13.7392 7.90312 13.9487 7.98865 14.1668 7.98865C14.3849 7.98865 14.5943 7.90312 14.7501 7.75043L17.8918 4.60876C18.3108 5.53476 18.4377 6.56646 18.2555 7.56639C18.0733 8.56631 17.5907 9.48697 16.872 10.2057C16.1533 10.9244 15.2327 11.407 14.2327 11.5891C13.2328 11.7713 12.2011 11.6445 11.2751 11.2254L5.51679 16.9838C5.18527 17.3153 4.73563 17.5015 4.26679 17.5015C3.79795 17.5015 3.34831 17.3153 3.01679 16.9838C2.68527 16.6522 2.49902 16.2026 2.49902 15.7338C2.49902 15.2649 2.68527 14.8153 3.01679 14.4838L8.77512 8.72543C8.35609 7.79944 8.22922 6.76774 8.41141 5.76781C8.5936 4.76788 9.0762 3.84723 9.79489 3.12853C10.5136 2.40984 11.4342 1.92724 12.4342 1.74505C13.4341 1.56286 14.4658 1.68973 15.3918 2.10876L12.2585 5.2421L12.2501 5.25043Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1534
1331
|
</svg>
|
|
@@ -1541,53 +1338,22 @@ const duckDevCamera = `
|
|
|
1541
1338
|
</g>
|
|
1542
1339
|
</svg>
|
|
1543
1340
|
`;
|
|
1544
|
-
const
|
|
1341
|
+
const duckDevPanModeMedium = `
|
|
1545
1342
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1546
1343
|
<path d="M16.667 12.5013V6.22937C16.667 5.92693 16.5463 5.63688 16.3314 5.42302C16.1165 5.20917 15.8251 5.08902 15.5212 5.08902C15.2173 5.08902 14.9258 5.20917 14.7109 5.42302C14.496 5.63688 14.3753 5.92693 14.3753 6.22937V10.2206V3.94867C14.3753 3.64623 14.2546 3.35618 14.0397 3.14232C13.8248 2.92846 13.5334 2.80832 13.2295 2.80832C12.9256 2.80832 12.6342 2.92846 12.4193 3.14232C12.2044 3.35618 12.0837 3.64623 12.0837 3.94867V9.65042V2.80832C12.0837 2.50588 11.9629 2.21583 11.7481 2.00197C11.5332 1.78811 11.2417 1.66797 10.9378 1.66797C10.6339 1.66797 10.3425 1.78811 10.1276 2.00197C9.91271 2.21583 9.79199 2.50588 9.79199 2.80832V9.65042M9.79199 9.68606V4.51885C9.79199 4.21641 9.67127 3.92635 9.45639 3.7125C9.2415 3.49864 8.95005 3.3785 8.64616 3.3785C8.34226 3.3785 8.05082 3.49864 7.83593 3.7125C7.62105 3.92635 7.50033 4.21641 7.50033 4.51885V12.0846" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1547
1344
|
<path d="M16.667 12.0491C16.667 16.2414 14.3945 18.334 11.2699 18.334C8.14523 18.334 6.5541 16.729 5.83366 15.0006L3.75032 10.0007C3.51385 9.3561 3.62108 8.75833 4.1718 8.44373C4.72287 8.12877 5.44686 8.29089 5.74513 8.86081C5.74513 8.86081 6.81488 10.8253 7.50033 12.084" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1548
1345
|
</svg>
|
|
1549
1346
|
`;
|
|
1550
|
-
const duckDevCrane = `
|
|
1551
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
1552
|
-
<path d="M12.1614 9.48765V9.98765C12.4376 9.98765 12.6614 9.7638 12.6614 9.48765H12.1614ZM13.7496 11.1703C13.8345 10.9075 13.6904 10.6257 13.4277 10.5407C13.1649 10.4558 12.883 10.5999 12.7981 10.8626L13.7496 11.1703ZM12.6614 8.60596C12.6614 8.32982 12.4376 8.10596 12.1614 8.10596C11.8853 8.10596 11.6614 8.32982 11.6614 8.60596H12.6614ZM2.4418 13.606L2.47278 13.1069C2.31111 13.0969 2.1546 13.1658 2.05283 13.2918C1.95105 13.4178 1.91662 13.5853 1.96044 13.7412L2.4418 13.606ZM3.32634 14.2756V14.7756V14.2756ZM4.17329 13.7135L4.63403 13.9077C4.69698 13.7583 4.68365 13.5878 4.59826 13.45C4.51288 13.3123 4.36603 13.2245 4.20428 13.2144L4.17329 13.7135ZM6.30742 13.606L6.3384 13.1069C6.17674 13.0969 6.02023 13.1658 5.91845 13.2918C5.81668 13.4178 5.78225 13.5853 5.82607 13.7412L6.30742 13.606ZM7.19197 14.2756V14.7756V14.2756ZM8.03892 13.7135L8.49966 13.9077C8.56261 13.7583 8.54928 13.5878 8.46389 13.45C8.3785 13.3123 8.23165 13.2245 8.0699 13.2144L8.03892 13.7135ZM12.5855 2.21221C12.5855 1.93607 12.3617 1.71221 12.0855 1.71221C11.8094 1.71221 11.5855 1.93607 11.5855 2.21221H12.5855ZM13.0216 6.01846L13.4143 5.70897C13.3195 5.58867 13.1747 5.51846 13.0216 5.51846V6.01846ZM13.4512 6.56359L13.8821 6.81718C13.9866 6.63955 13.9714 6.41598 13.8439 6.2541L13.4512 6.56359ZM12.5913 8.02471V8.52471C12.7685 8.52471 12.9324 8.43098 13.0223 8.2783L12.5913 8.02471ZM11.2448 6.01846V5.51846C11.0917 5.51846 10.947 5.58867 10.8521 5.70897L11.2448 6.01846ZM10.8152 6.56359L10.4225 6.2541C10.295 6.41598 10.2798 6.63955 10.3843 6.81718L10.8152 6.56359ZM11.6751 8.02471L11.2441 8.2783C11.334 8.43098 11.4979 8.52471 11.6751 8.52471V8.02471ZM1.99023 11.2622V10.7622C1.71409 10.7622 1.49023 10.9861 1.49023 11.2622H1.99023ZM8.89492 11.2622H9.39492C9.39492 10.9861 9.17106 10.7622 8.89492 10.7622V11.2622ZM8.89492 13.631V14.131C9.17106 14.131 9.39492 13.9071 9.39492 13.631H8.89492ZM1.99023 13.631H1.49023C1.49023 13.9071 1.71409 14.131 1.99023 14.131V13.631ZM6.17382 11.266L6.17382 11.766C6.31885 11.766 6.45674 11.703 6.55171 11.5934C6.64668 11.4838 6.68938 11.3383 6.66872 11.1948L6.17382 11.266ZM2.92429 11.266L2.42429 11.2659C2.42428 11.3985 2.47696 11.5257 2.57072 11.6195C2.66449 11.7133 2.79168 11.766 2.92429 11.766L2.92429 11.266ZM5.56106 7.00649L5.27348 6.59747C5.11947 6.70575 5.03934 6.89135 5.06615 7.07768L5.56106 7.00649ZM2.9247 6.01491L2.66882 5.58534C2.51745 5.67551 2.42471 5.83868 2.4247 6.01487L2.9247 6.01491ZM12.032 1.6727L12.4931 1.47935L12.032 1.6727ZM11.7488 2.65593L11.4612 2.24691L11.7488 2.65593ZM10.8617 1.28711L10.6058 0.857546L10.8617 1.28711ZM10.4926 10.6565C10.4926 11.5782 11.2398 12.3254 12.1614 12.3254V11.3254C11.792 11.3254 11.4926 11.0259 11.4926 10.6565H10.4926ZM12.1614 8.98765C11.2398 8.98765 10.4926 9.73483 10.4926 10.6565H11.4926C11.4926 10.2871 11.792 9.98765 12.1614 9.98765V8.98765ZM12.1614 12.3254C12.9046 12.3254 13.533 11.84 13.7496 11.1703L12.7981 10.8626C12.7111 11.1318 12.4582 11.3254 12.1614 11.3254V12.3254ZM12.6614 9.48765V8.60596H11.6614V9.48765H12.6614ZM1.96044 13.7412C2.12805 14.3376 2.6754 14.7756 3.32634 14.7756V13.7756C3.13516 13.7756 2.97271 13.647 2.92315 13.4707L1.96044 13.7412ZM3.32634 14.7756C3.91538 14.7756 4.41945 14.4167 4.63403 13.9077L3.71256 13.5192C3.64869 13.6708 3.49918 13.7756 3.32634 13.7756V14.7756ZM4.20428 13.2144L2.47278 13.1069L2.41082 14.105L4.14231 14.2125L4.20428 13.2144ZM5.82607 13.7412C5.99367 14.3376 6.54103 14.7756 7.19197 14.7756V13.7756C7.00078 13.7756 6.83833 13.647 6.78877 13.4707L5.82607 13.7412ZM7.19197 14.7756C7.78101 14.7756 8.28507 14.4167 8.49966 13.9077L7.57818 13.5192C7.51431 13.6708 7.3648 13.7756 7.19197 13.7756V14.7756ZM8.0699 13.2144L6.3384 13.1069L6.27644 14.105L8.00794 14.2125L8.0699 13.2144ZM11.5855 2.21221V5.43409H12.5855V2.21221H11.5855ZM12.6289 6.32795L13.0585 6.87308L13.8439 6.2541L13.4143 5.70897L12.6289 6.32795ZM13.0202 6.31001L12.1604 7.77113L13.0223 8.2783L13.8821 6.81718L13.0202 6.31001ZM10.8521 5.70897L10.4225 6.2541L11.2079 6.87308L11.6376 6.32795L10.8521 5.70897ZM12.106 7.77113L11.2462 6.31001L10.3843 6.81718L11.2441 8.2783L12.106 7.77113ZM11.2448 6.51846H13.0216V5.51846H11.2448V6.51846ZM12.5913 7.52471H11.6751V8.52471H12.5913V7.52471ZM1.99023 11.7622H8.89492V10.7622H1.99023V11.7622ZM8.39492 11.2622V13.631H9.39492V11.2622H8.39492ZM8.89492 13.131H1.99023V14.131H8.89492V13.131ZM2.49023 13.631V11.2622H1.49023V13.631H2.49023ZM6.17382 10.766L2.92429 10.766L2.92429 11.766L6.17382 11.766L6.17382 10.766ZM11.4612 2.24691L5.27348 6.59747L5.84864 7.41551L12.0364 3.06495L11.4612 2.24691ZM5.06615 7.07768L5.67891 11.3372L6.66872 11.1948L6.05596 6.93529L5.06615 7.07768ZM3.42429 11.266L3.4247 6.01495L2.4247 6.01487L2.42429 11.2659L3.42429 11.266ZM3.18057 6.44447L11.1176 1.71668L10.6058 0.857546L2.66882 5.58534L3.18057 6.44447ZM11.5709 1.86604C11.6283 2.00301 11.5827 2.16149 11.4612 2.24691L12.0364 3.06495C12.5422 2.70933 12.7322 2.04956 12.4931 1.47935L11.5709 1.86604ZM12.4931 1.47935C12.1838 0.74155 11.2932 0.448123 10.6058 0.857546L11.1176 1.71668C11.2827 1.61833 11.4966 1.68881 11.5709 1.86604L12.4931 1.47935Z" fill="#595E6A"/>
|
|
1553
|
-
</svg>
|
|
1554
|
-
`;
|
|
1555
|
-
const duckDevCraneSm = `
|
|
1556
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1557
|
-
<path d="M14.9308 11.9959V12.7459C15.345 12.7459 15.6808 12.4101 15.6808 11.9959H14.9308ZM17.0349 14.1377C17.1623 13.7436 16.9462 13.3208 16.552 13.1933C16.1579 13.0659 15.7351 13.2821 15.6077 13.6762L17.0349 14.1377ZM15.6808 10.8938C15.6808 10.4796 15.345 10.1438 14.9308 10.1438C14.5166 10.1438 14.1808 10.4796 14.1808 10.8938H15.6808ZM2.78125 17.1438L2.82772 16.3953C2.58522 16.3802 2.35046 16.4836 2.19779 16.6726C2.04513 16.8616 1.99349 17.1128 2.05922 17.3467L2.78125 17.1438ZM3.88693 17.9809V18.7309V17.9809ZM4.94562 17.2782L5.63673 17.5695C5.73115 17.3455 5.71116 17.0896 5.58308 16.883C5.45499 16.6764 5.23472 16.5447 4.99209 16.5296L4.94562 17.2782ZM7.61328 17.1438L7.65975 16.3953C7.41726 16.3802 7.18249 16.4836 7.02983 16.6726C6.87716 16.8616 6.82552 17.1128 6.89125 17.3467L7.61328 17.1438ZM8.71897 17.9809V18.7309V17.9809ZM9.77765 17.2782L10.4688 17.5695C10.5632 17.3455 10.5432 17.0896 10.4151 16.883C10.287 16.6764 10.0667 16.5447 9.82412 16.5296L9.77765 17.2782ZM15.5863 2.90274C15.5863 2.48853 15.2505 2.15274 14.8363 2.15274C14.4221 2.15274 14.0863 2.48853 14.0863 2.90274H15.5863ZM16.006 7.65945L16.595 7.19521C16.4528 7.01476 16.2357 6.90945 16.006 6.90945V7.65945ZM16.543 8.34086L17.1894 8.72124C17.3461 8.45479 17.3234 8.11944 17.132 7.87662L16.543 8.34086ZM15.4682 10.1673V10.9173C15.7339 10.9173 15.9798 10.7767 16.1146 10.5476L15.4682 10.1673ZM13.7851 7.65945V6.90945C13.5553 6.90945 13.3382 7.01476 13.196 7.19521L13.7851 7.65945ZM13.248 8.34086L12.659 7.87662C12.4676 8.11944 12.4449 8.45479 12.6017 8.72124L13.248 8.34086ZM14.3228 10.1673L13.6764 10.5476C13.8112 10.7767 14.0571 10.9173 14.3228 10.9173V10.1673ZM2.2168 14.2141V13.4641C1.80258 13.4641 1.4668 13.7999 1.4668 14.2141H2.2168ZM10.8477 14.2141H11.5977C11.5977 13.7999 11.2619 13.4641 10.8477 13.4641V14.2141ZM10.8477 17.1751V17.9251C11.2619 17.9251 11.5977 17.5893 11.5977 17.1751H10.8477ZM2.2168 17.1751H1.4668C1.4668 17.5893 1.80258 17.9251 2.2168 17.9251V17.1751ZM7.44585 14.2153L7.44585 14.9653C7.6634 14.9653 7.87023 14.8708 8.01268 14.7064C8.15514 14.542 8.21919 14.3238 8.18821 14.1085L7.44585 14.2153ZM3.38394 14.2153L2.63394 14.2152C2.63393 14.4141 2.71294 14.6049 2.85359 14.7456C2.99425 14.8862 3.18502 14.9653 3.38394 14.9653L3.38394 14.2153ZM6.6799 8.89092L6.24853 8.27739C6.01753 8.43981 5.89733 8.71821 5.93754 8.99772L6.6799 8.89092ZM3.38445 7.65145L3.00063 7.0071C2.77358 7.14235 2.63447 7.38711 2.63445 7.65139L3.38445 7.65145ZM14.7686 2.22368L14.0769 2.5137L14.7686 2.22368ZM14.4145 3.45273L14.8459 4.06626L14.4145 3.45273ZM13.3057 1.7417L12.9219 1.09735L13.3057 1.7417ZM12.7197 13.457C12.7197 14.6782 13.7097 15.6681 14.9308 15.6681V14.1681C14.5381 14.1681 14.2197 13.8497 14.2197 13.457H12.7197ZM14.9308 11.2459C13.7097 11.2459 12.7197 12.2359 12.7197 13.457H14.2197C14.2197 13.0643 14.5381 12.7459 14.9308 12.7459V11.2459ZM14.9308 15.6681C15.9155 15.6681 16.748 15.0249 17.0349 14.1377L15.6077 13.6762C15.5151 13.9625 15.246 14.1681 14.9308 14.1681V15.6681ZM15.6808 11.9959V10.8938H14.1808V11.9959H15.6808ZM2.05922 17.3467C2.28348 18.1447 3.01579 18.7309 3.88693 18.7309V17.2309C3.70542 17.2309 3.55047 17.1088 3.50328 16.9409L2.05922 17.3467ZM3.88693 18.7309C4.67526 18.7309 5.34966 18.2505 5.63673 17.5695L4.25452 16.9869C4.19352 17.1316 4.05095 17.2309 3.88693 17.2309V18.7309ZM4.99209 16.5296L2.82772 16.3953L2.73478 17.8924L4.89915 18.0268L4.99209 16.5296ZM6.89125 17.3467C7.11551 18.1447 7.84782 18.7309 8.71897 18.7309V17.2309C8.53745 17.2309 8.3825 17.1088 8.33531 16.9409L6.89125 17.3467ZM8.71897 18.7309C9.50729 18.7309 10.1817 18.2505 10.4688 17.5695L9.08655 16.9869C9.02555 17.1316 8.88298 17.2309 8.71897 17.2309V18.7309ZM9.82412 16.5296L7.65975 16.3953L7.56681 17.8924L9.73118 18.0268L9.82412 16.5296ZM14.0863 2.90274V6.93008H15.5863V2.90274H14.0863ZM15.4169 8.12368L15.9539 8.80509L17.132 7.87662L16.595 7.19521L15.4169 8.12368ZM15.8966 7.96048L14.8218 9.78688L16.1146 10.5476L17.1894 8.72124L15.8966 7.96048ZM13.196 7.19521L12.659 7.87662L13.8371 8.80509L14.3741 8.12368L13.196 7.19521ZM14.9692 9.78688L13.8944 7.96048L12.6017 8.72124L13.6764 10.5476L14.9692 9.78688ZM13.7851 8.40945H16.006V6.90945H13.7851V8.40945ZM15.4682 9.41726H14.3228V10.9173H15.4682V9.41726ZM2.2168 14.9641H10.8477V13.4641H2.2168V14.9641ZM10.0977 14.2141V17.1751H11.5977V14.2141H10.0977ZM10.8477 16.4251H2.2168V17.9251H10.8477V16.4251ZM2.9668 17.1751V14.2141H1.4668V17.1751H2.9668ZM7.44585 13.4653L3.38394 13.4653L3.38394 14.9653L7.44585 14.9653L7.44585 13.4653ZM13.9832 2.8392L6.24853 8.27739L7.11127 9.50445L14.8459 4.06626L13.9832 2.8392ZM5.93754 8.99772L6.70349 14.3221L8.18821 14.1085L7.42226 8.78413L5.93754 8.99772ZM4.13394 14.2153L4.13445 7.6515L2.63445 7.65139L2.63394 14.2152L4.13394 14.2153ZM3.76827 8.2958L13.6895 2.38605L12.9219 1.09735L3.00063 7.0071L3.76827 8.2958ZM14.0769 2.5137C14.126 2.63076 14.087 2.76619 13.9832 2.8392L14.8459 4.06626C15.5262 3.58795 15.7818 2.70059 15.4603 1.93367L14.0769 2.5137ZM15.4603 1.93367C15.0442 0.941343 13.8463 0.54669 12.9219 1.09735L13.6895 2.38605C13.8306 2.302 14.0134 2.36224 14.0769 2.5137L15.4603 1.93367Z" fill="#595E6A"/>
|
|
1558
|
-
</svg>
|
|
1559
|
-
`;
|
|
1560
1347
|
const duckDevBin = `
|
|
1561
1348
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
1562
1349
|
<path d="M11.8886 2.66797L10.7997 12.6044C10.7785 12.806 10.6873 12.9922 10.5437 13.127C10.4001 13.2619 10.2142 13.3359 10.0219 13.3346H5.96967C5.7774 13.3359 5.5915 13.2619 5.44787 13.127C5.30423 12.9922 5.21304 12.806 5.1919 12.6044L4.11079 2.66797M3.33301 2.66797H12.6663M7.99967 2.66797V13.3346M4.46856 5.95002H11.5308M4.87301 9.64232H11.1263" stroke="#595E6A" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1563
1350
|
</svg>
|
|
1564
1351
|
`;
|
|
1565
|
-
const
|
|
1352
|
+
const duckDevBinMedium = `
|
|
1566
1353
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1567
1354
|
<path d="M14.8614 3.33203L13.5003 15.7525C13.4739 16.0045 13.3599 16.2373 13.1804 16.4059C13.0008 16.5744 12.7685 16.6669 12.5281 16.6653H7.46283C7.22248 16.6669 6.99011 16.5744 6.81057 16.4059C6.63103 16.2373 6.51704 16.0045 6.4906 15.7525L5.13921 3.33203M4.16699 3.33203H15.8337M10.0003 3.33203V16.6653M5.58644 7.43459H14.4142M6.09199 12.05H13.9087" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1568
1355
|
</svg>
|
|
1569
1356
|
`;
|
|
1570
|
-
const duckDevAuxSm = `
|
|
1571
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1572
|
-
<path d="M8.33333 9.23958L2.5 15.0729V18.4062H5.83333L11.6667 12.5729M12.0833 5.48958L15.4167 8.82291M5.83333 3.40625L10 7.57291L13.3333 4.23958C13.7754 3.79755 14.3749 3.54922 15 3.54922C15.6251 3.54922 16.2246 3.79755 16.6667 4.23958C17.1087 4.68161 17.357 5.28113 17.357 5.90625C17.357 6.53137 17.1087 7.13089 16.6667 7.57291L13.3333 10.9062L17.5 15.0729M4.16667 5.07292L2.5 6.73958L6.66667 10.9062M5.83333 7.57292L4.58333 8.82292M15.8333 16.7396L14.1667 18.4062L10 14.2396M13.3333 15.0729L12.0833 16.3229M2.5 3.40625L17.5 18.4062" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1573
|
-
</svg>
|
|
1574
|
-
`;
|
|
1575
|
-
const duckDev5sSm = `
|
|
1576
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="-3 -5 20 20" fill="none">
|
|
1577
|
-
<path d="M3.65236 9.54922C3.18632 9.54922 2.71149 9.48983 2.22787 9.37104C1.74424 9.25225 1.30018 9.06983 0.895694 8.82376C0.728623 8.72195 0.614312 8.60316 0.552759 8.4674C0.5 8.32316 0.48681 8.18316 0.51319 8.0474C0.548363 7.90316 0.614312 7.78437 0.711037 7.69104C0.816555 7.58922 0.93966 7.52983 1.08035 7.51286C1.22984 7.49589 1.39251 7.53407 1.56837 7.6274C1.89372 7.80558 2.22347 7.94134 2.55761 8.03467C2.89175 8.12801 3.24788 8.17467 3.62599 8.17467C3.9953 8.17467 4.31186 8.11104 4.57565 7.98376C4.83945 7.85649 5.04169 7.67831 5.18238 7.44922C5.32307 7.22013 5.39342 6.95286 5.39342 6.6474C5.39342 6.17225 5.24394 5.79043 4.94497 5.50195C4.646 5.20498 4.23711 5.05649 3.71831 5.05649C3.43693 5.05649 3.16434 5.10316 2.90055 5.19649C2.63675 5.28134 2.37735 5.43407 2.12235 5.65467C2.04321 5.72255 1.94209 5.79043 1.81898 5.85831C1.69588 5.9177 1.56398 5.9474 1.42329 5.9474C1.20346 5.9474 1.03639 5.89225 0.922074 5.78195C0.807762 5.67164 0.750606 5.51892 0.750606 5.32376V1.16195C0.750606 0.932855 0.812159 0.758916 0.935264 0.640128C1.06716 0.512855 1.25182 0.449219 1.48924 0.449219H5.82868C6.0661 0.449219 6.24636 0.508613 6.36947 0.627401C6.50136 0.737704 6.56731 0.903158 6.56731 1.12376C6.56731 1.33589 6.50136 1.50134 6.36947 1.62013C6.24636 1.73892 6.0661 1.79831 5.82868 1.79831H2.39933V4.64922H1.96407C2.19269 4.35225 2.49606 4.12316 2.87417 3.96195C3.25227 3.80073 3.66555 3.72013 4.11401 3.72013C4.70315 3.72013 5.21316 3.84316 5.64403 4.08922C6.08369 4.32679 6.42222 4.66195 6.65964 5.09467C6.90585 5.51892 7.02896 6.01528 7.02896 6.58377C7.02896 7.16922 6.89266 7.68679 6.62007 8.13649C6.34748 8.5777 5.95618 8.92558 5.44618 9.18013C4.94497 9.42619 4.34703 9.54922 3.65236 9.54922Z" fill="#595E6A"/>
|
|
1578
|
-
<path d="M10.7433 9.54922C10.3652 9.54922 9.96513 9.51104 9.54306 9.43467C9.12098 9.35831 8.74288 9.2268 8.40873 9.04013C8.26804 8.95528 8.16692 8.85771 8.10537 8.7474C8.05261 8.62861 8.03063 8.51407 8.03942 8.40377C8.05701 8.28498 8.10097 8.18316 8.17132 8.09831C8.25046 8.01346 8.34718 7.95831 8.46149 7.93286C8.5846 7.9074 8.7165 7.92861 8.85719 7.99649C9.20891 8.1577 9.53866 8.27225 9.84642 8.34013C10.1542 8.39952 10.4576 8.42922 10.7565 8.42922C11.1786 8.42922 11.4908 8.36134 11.693 8.22558C11.904 8.08134 12.0096 7.89467 12.0096 7.66558C12.0096 7.47043 11.9392 7.32195 11.7985 7.22013C11.6666 7.10983 11.4644 7.02922 11.1918 6.97831L9.8728 6.73649C9.32762 6.63467 8.90995 6.44376 8.61977 6.16376C8.33839 5.87528 8.1977 5.50619 8.1977 5.05649C8.1977 4.64922 8.31201 4.2971 8.54063 4.00013C8.77805 3.70316 9.1034 3.47407 9.51668 3.31286C9.92996 3.15164 10.4048 3.07104 10.9412 3.07104C11.3281 3.07104 11.6886 3.11346 12.0227 3.19831C12.3657 3.27467 12.6954 3.3977 13.012 3.5674C13.1439 3.63528 13.2318 3.72437 13.2758 3.83467C13.3285 3.94498 13.3417 4.05952 13.3153 4.17831C13.289 4.28861 13.2362 4.39043 13.1571 4.48376C13.0779 4.56861 12.9768 4.62376 12.8537 4.64922C12.7394 4.66619 12.6075 4.64073 12.458 4.57286C12.1854 4.4371 11.9216 4.33952 11.6666 4.28013C11.4204 4.22073 11.183 4.19104 10.9544 4.19104C10.5235 4.19104 10.2025 4.26316 9.99151 4.4074C9.78927 4.55164 9.68815 4.74255 9.68815 4.98013C9.68815 5.15831 9.7497 5.3068 9.8728 5.42558C9.99591 5.54437 10.185 5.62498 10.44 5.6674L11.7589 5.90922C12.3305 6.01104 12.7614 6.1977 13.0515 6.46922C13.3505 6.74073 13.5 7.10558 13.5 7.56376C13.5 8.18316 13.2494 8.67104 12.7482 9.0274C12.247 9.37528 11.5787 9.54922 10.7433 9.54922Z" fill="#595E6A"/>
|
|
1579
|
-
</svg>
|
|
1580
|
-
`;
|
|
1581
|
-
const duckDevRackSm = `
|
|
1582
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1583
|
-
<path d="M18 2.51562V16.6823V2.51562Z" fill="#595E6A"/>
|
|
1584
|
-
<path d="M18 2.51562V16.6823" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round"/>
|
|
1585
|
-
<path d="M10.5 2.51562V16.6823V2.51562ZM10.5 3.34896H16.3333H10.5ZM10.5 5.84896H16.3333H10.5ZM10.5 8.34896H16.3333H10.5ZM10.5 10.849H16.3333H10.5ZM10.5 13.349H16.3333H10.5Z" fill="#595E6A"/>
|
|
1586
|
-
<path d="M10.5 2.51562V16.6823M10.5 3.34896H16.3333M10.5 5.84896H16.3333M10.5 8.34896H16.3333M10.5 10.849H16.3333M10.5 13.349H16.3333" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round"/>
|
|
1587
|
-
<path d="M3 2.51562V16.6823V2.51562ZM3 3.34896H8.83333H3ZM3 5.84896H8.83333H3ZM3 8.34896H8.83333H3ZM3 10.849H8.83333H3ZM3 13.349H8.83333H3Z" fill="#595E6A"/>
|
|
1588
|
-
<path d="M3 2.51562V16.6823M3 3.34896H8.83333M3 5.84896H8.83333M3 8.34896H8.83333M3 10.849H8.83333M3 13.349H8.83333" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round"/>
|
|
1589
|
-
</svg>
|
|
1590
|
-
`;
|
|
1591
1357
|
const duckDevAccessories = `
|
|
1592
1358
|
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
|
|
1593
1359
|
<g clip-path="url(#clip0_30729_11302)">
|
|
@@ -1600,7 +1366,7 @@ const duckDevAccessories = `
|
|
|
1600
1366
|
</defs>
|
|
1601
1367
|
</svg>
|
|
1602
1368
|
`;
|
|
1603
|
-
const
|
|
1369
|
+
const duckDevAccessoriesMedium = `
|
|
1604
1370
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
|
|
1605
1371
|
<path d="M2.79187 5.97965C2.93733 5.73826 3.14172 5.53754 3.38607 5.39647L9.2194 2.06313C9.47277 1.91685 9.76017 1.83984 10.0527 1.83984C10.3453 1.83984 10.6327 1.91685 10.8861 2.06313L13.4508 3.58405M2.79187 5.97965C2.78666 5.9883 2.78152 5.99701 2.77645 6.00577C2.63019 6.25881 2.55303 6.54586 2.55273 6.83813V13.5048C2.55303 13.7971 2.63019 14.0841 2.77645 14.3372C2.92272 14.5902 3.13295 14.8003 3.38607 14.9465L9.2194 18.2798C9.47277 18.4261 9.76017 18.5031 10.0527 18.5031M2.79187 5.97965L2.77773 5.97147M2.79187 5.97965L10.0527 10.1798M10.0527 18.5031C10.3453 18.5031 10.6327 18.4261 10.8861 18.2798L16.7194 14.9465C16.9725 14.8003 17.1828 14.5902 17.329 14.3372C17.4753 14.0841 17.5524 13.7971 17.5527 13.5048V12.1034M10.0527 18.5031V18.5715M10.0527 18.5031V10.1798M10.0527 10.1798V10.1715M10.0527 10.1798L12.0356 9.07306M16.1361 5.23397V7.3173M16.1361 7.3173V9.40063M16.1361 7.3173H14.0527M16.1361 7.3173H18.2194" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1606
1372
|
</svg>
|
|
@@ -1610,12 +1376,12 @@ const duckDevLogisticVehicle = `
|
|
|
1610
1376
|
<path d="M15.8448 8.95608C15.8448 8.67994 15.6209 8.45608 15.3448 8.45608C15.0686 8.45608 14.8448 8.67994 14.8448 8.95608H15.8448ZM2.40039 8.95444L2.40052 8.45444C2.26789 8.45441 2.14068 8.50707 2.04688 8.60084C1.95309 8.69461 1.90039 8.82181 1.90039 8.95444H2.40039ZM8.88708 9.45608C9.16322 9.45615 9.38714 9.23235 9.38721 8.95621C9.38728 8.68006 9.16348 8.45615 8.88733 8.45608L8.88708 9.45608ZM13.39 4.30252L13.8508 4.10851C13.8468 4.09894 13.8425 4.0895 13.8379 4.0802L13.39 4.30252ZM11.7092 5.64719V6.14719V5.64719ZM11.2965 6.05992H11.7965H11.2965ZM11.2965 7.71322H10.7965H11.2965ZM11.7093 8.12595V7.62595V8.12595ZM3.80742 6.22319V5.72319C3.53128 5.72319 3.30742 5.94705 3.30742 6.22319H3.80742ZM6.93964 6.22319H7.43964C7.43964 5.94705 7.21578 5.72319 6.93964 5.72319V6.22319ZM14.8448 8.95608V10.8258H15.8448V8.95608H14.8448ZM2.90039 10.8258V8.95444H1.90039V10.8258H2.90039ZM2.40026 9.45444L8.88708 9.45608L8.88733 8.45608L2.40052 8.45444L2.40026 9.45444ZM10.9711 11.1378H7.08165V12.1378H10.9711V11.1378ZM4.2384 11.1378H3.21239V12.1378H4.2384V11.1378ZM14.5328 11.1378H13.9082V12.1378H14.5328V11.1378ZM1.90039 10.8258C1.90039 11.5504 2.48779 12.1378 3.21239 12.1378V11.1378C3.04008 11.1378 2.90039 10.9981 2.90039 10.8258H1.90039ZM14.8448 10.8258C14.8448 10.9981 14.7051 11.1378 14.5328 11.1378V12.1378C15.2574 12.1378 15.8448 11.5504 15.8448 10.8258H14.8448ZM15.8093 8.76043L13.8508 4.10851L12.9292 4.49652L14.8876 9.14845L15.8093 8.76043ZM12.6627 3.35156H9.70458V4.35156H12.6627V3.35156ZM8.39258 4.66356V8.95444H9.39258V4.66356H8.39258ZM9.70458 3.35156C8.97998 3.35156 8.39258 3.93896 8.39258 4.66356H9.39258C9.39258 4.49125 9.53226 4.35156 9.70458 4.35156V3.35156ZM13.8379 4.0802C13.6163 3.63386 13.161 3.35156 12.6627 3.35156V4.35156C12.7812 4.35156 12.8895 4.41869 12.9422 4.52483L13.8379 4.0802ZM13.9013 5.14719L11.7092 5.14719V6.14719L13.9013 6.14719V5.14719ZM10.7965 6.05992V7.71322H11.7965V6.05992H10.7965ZM11.7093 8.62595H14.9997V7.62595H11.7093V8.62595ZM10.7965 7.71322C10.7965 8.21731 11.2052 8.62595 11.7093 8.62595V7.62595C11.7574 7.62595 11.7965 7.66502 11.7965 7.71322H10.7965ZM11.7092 5.14719C11.2052 5.14719 10.7965 5.55584 10.7965 6.05992H11.7965C11.7965 6.10812 11.7574 6.14719 11.7092 6.14719V5.14719ZM3.80742 6.72319H6.93964V5.72319H3.80742V6.72319ZM4.30742 8.42998V6.22319H3.30742V8.42998H4.30742ZM6.43964 6.22319V8.42998H7.43964V6.22319H6.43964ZM6.44002 11.3965C6.44002 11.7822 6.12737 12.0948 5.74169 12.0948V13.0948C6.67965 13.0948 7.44002 12.3345 7.44002 11.3965H6.44002ZM5.74169 12.0948C5.35601 12.0948 5.04336 11.7822 5.04336 11.3965H4.04336C4.04336 12.3345 4.80373 13.0948 5.74169 13.0948V12.0948ZM5.04336 11.3965C5.04336 11.0108 5.35601 10.6982 5.74169 10.6982V9.69819C4.80373 9.69819 4.04336 10.4586 4.04336 11.3965H5.04336ZM5.74169 10.6982C6.12737 10.6982 6.44002 11.0108 6.44002 11.3965H7.44002C7.44002 10.4586 6.67965 9.69819 5.74169 9.69819V10.6982ZM13.0679 11.3972C13.0679 11.7832 12.755 12.0961 12.3689 12.0961V13.0961C13.3073 13.0961 14.0679 12.3355 14.0679 11.3972H13.0679ZM12.3689 12.0961C11.9829 12.0961 11.67 11.7832 11.67 11.3972H10.67C10.67 12.3355 11.4306 13.0961 12.3689 13.0961V12.0961ZM11.67 11.3972C11.67 11.0111 11.9829 10.6982 12.3689 10.6982V9.69819C11.4306 9.69819 10.67 10.4588 10.67 11.3972H11.67ZM12.3689 10.6982C12.755 10.6982 13.0679 11.0111 13.0679 11.3972H14.0679C14.0679 10.4588 13.3073 9.69819 12.3689 9.69819V10.6982Z" fill="#595E6A"/>
|
|
1611
1377
|
</svg>
|
|
1612
1378
|
`;
|
|
1613
|
-
const
|
|
1379
|
+
const duckDevLogisticVehicleMedium = `
|
|
1614
1380
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1615
1381
|
<path d="M19.6883 11.365C19.6883 10.9508 19.3525 10.615 18.9383 10.615C18.5241 10.615 18.1883 10.9508 18.1883 11.365H19.6883ZM2.75781 11.363L2.758 10.613C2.55906 10.6129 2.36824 10.6919 2.22755 10.8326C2.08686 10.9732 2.00781 11.164 2.00781 11.363H2.75781ZM10.8661 12.115C11.2804 12.1151 11.6162 11.7794 11.6163 11.3652C11.6164 10.951 11.2807 10.6151 10.8665 10.615L10.8661 12.115ZM16.4948 5.54807L17.1861 5.25706C17.18 5.2427 17.1736 5.22854 17.1666 5.21459L16.4948 5.54807ZM14.3939 7.22891V7.97891V7.22891ZM13.878 7.74482H14.628H13.878ZM13.878 9.81145H13.128H13.878ZM14.3939 10.3274V9.57735V10.3274ZM4.5166 7.94891V7.19891C4.10239 7.19891 3.7666 7.53469 3.7666 7.94891H4.5166ZM8.43187 7.94891H9.18187C9.18187 7.53469 8.84608 7.19891 8.43187 7.19891V7.94891ZM18.1883 11.365V13.7022H19.6883V11.365H18.1883ZM3.50781 13.7022V11.363H2.00781V13.7022H3.50781ZM2.75762 12.113L10.8661 12.115L10.8665 10.615L2.758 10.613L2.75762 12.113ZM13.4712 13.9672H8.60938V15.4672H13.4712V13.9672ZM5.05533 13.9672H3.77281V15.4672H5.05533V13.9672ZM17.9233 13.9672H17.1425V15.4672H17.9233V13.9672ZM2.00781 13.7022C2.00781 14.677 2.79803 15.4672 3.77281 15.4672V13.9672C3.62646 13.9672 3.50781 13.8486 3.50781 13.7022H2.00781ZM18.1883 13.7022C18.1883 13.8486 18.0696 13.9672 17.9233 13.9672V15.4672C18.8981 15.4672 19.6883 14.677 19.6883 13.7022H18.1883ZM19.6341 11.072L17.1861 5.25706L15.8036 5.83908L18.2517 11.654L19.6341 11.072ZM15.5857 4.23438H11.888V5.73438H15.5857V4.23438ZM10.123 5.99937V11.363H11.623V5.99937H10.123ZM11.888 4.23438C10.9133 4.23438 10.123 5.02459 10.123 5.99937H11.623C11.623 5.85302 11.7417 5.73438 11.888 5.73438V4.23438ZM17.1666 5.21459C16.8686 4.61414 16.2561 4.23438 15.5857 4.23438V5.73438C15.6864 5.73438 15.7783 5.79139 15.8231 5.88154L17.1666 5.21459ZM17.134 6.47891L14.3939 6.47891V7.97891L17.134 7.97891V6.47891ZM13.128 7.74482V9.81145H14.628V7.74482H13.128ZM14.3939 11.0774H18.5069V9.57735H14.3939V11.0774ZM13.128 9.81145C13.128 10.5106 13.6947 11.0774 14.3939 11.0774V9.57735C14.5232 9.57735 14.628 9.68216 14.628 9.81145H13.128ZM14.3939 6.47891C13.6947 6.47891 13.128 7.04568 13.128 7.74482H14.628C14.628 7.87411 14.5232 7.97891 14.3939 7.97891V6.47891ZM4.5166 8.69891H8.43187V7.19891H4.5166V8.69891ZM5.2666 10.7074V7.94891H3.7666V10.7074H5.2666ZM7.68187 7.94891V10.7074H9.18187V7.94891H7.68187ZM7.68235 14.4156C7.68235 14.8286 7.3475 15.1635 6.93444 15.1635V16.6635C8.17592 16.6635 9.18235 15.6571 9.18235 14.4156H7.68235ZM6.93444 15.1635C6.52138 15.1635 6.18652 14.8286 6.18652 14.4156H4.68652C4.68652 15.6571 5.69295 16.6635 6.93444 16.6635V15.1635ZM6.18652 14.4156C6.18652 14.0025 6.52137 13.6677 6.93444 13.6677V12.1677C5.69295 12.1677 4.68652 13.1741 4.68652 14.4156H6.18652ZM6.93444 13.6677C7.3475 13.6677 7.68235 14.0025 7.68235 14.4156H9.18235C9.18235 13.1741 8.17592 12.1677 6.93444 12.1677V13.6677ZM15.9672 14.4164C15.9672 14.8299 15.632 15.1651 15.2185 15.1651V16.6651C16.4604 16.6651 17.4672 15.6583 17.4672 14.4164H15.9672ZM15.2185 15.1651C14.805 15.1651 14.4698 14.8299 14.4698 14.4164H12.9698C12.9698 15.6583 13.9766 16.6651 15.2185 16.6651V15.1651ZM14.4698 14.4164C14.4698 14.0029 14.805 13.6677 15.2185 13.6677V12.1677C13.9766 12.1677 12.9698 13.1744 12.9698 14.4164H14.4698ZM15.2185 13.6677C15.632 13.6677 15.9672 14.0029 15.9672 14.4164H17.4672C17.4672 13.1744 16.4604 12.1677 15.2185 12.1677V13.6677Z" fill="#595E6A"/>
|
|
1616
1382
|
</svg>
|
|
1617
1383
|
`;
|
|
1618
|
-
const
|
|
1384
|
+
const duckDevComputerChipMedium = `
|
|
1619
1385
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1620
1386
|
<g clip-path="url(#clip0_29973_258335)">
|
|
1621
1387
|
<path d="M8.05748 4.64955V1.07812M13.7718 4.64955V1.07812M5.20034 13.221H1.62891M5.20034 7.5067H1.62891M13.7718 16.0781V19.6496M8.05748 16.0781V19.6496M16.6289 7.5067H20.2003M16.6289 13.221H20.2003M13.0575 11.0781H10.2003M15.2003 4.64955H6.62891C6.25003 4.64955 5.88666 4.80006 5.61875 5.06797C5.35084 5.33588 5.20034 5.69924 5.20034 6.07813V14.6496C5.20034 15.0284 5.35084 15.3918 5.61875 15.6597C5.88666 15.9276 6.25003 16.0781 6.62891 16.0781H15.2003C15.5792 16.0781 15.9426 15.9276 16.2105 15.6597C16.4784 15.3918 16.6289 15.0284 16.6289 14.6496V6.07813C16.6289 5.69924 16.4784 5.33588 16.2105 5.06797C15.9426 4.80006 15.5792 4.64955 15.2003 4.64955Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -1627,48 +1393,33 @@ const duckDevComputerChipSm = `
|
|
|
1627
1393
|
</defs>
|
|
1628
1394
|
</svg>
|
|
1629
1395
|
`;
|
|
1630
|
-
const duckDevRack = `
|
|
1631
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
1632
|
-
<path d="M14 2V13.3333V2Z" fill="#595E6A"/>
|
|
1633
|
-
<path d="M8 2V13.3333V2ZM8 2.66667H12.6667H8ZM8 4.66667H12.6667H8ZM8 6.66667H12.6667H8ZM8 8.66667H12.6667H8ZM8 10.6667H12.6667H8Z" fill="#595E6A"/>
|
|
1634
|
-
<path d="M2 2V13.3333V2ZM2 2.66667H6.66667H2ZM2 4.66667H6.66667H2ZM2 6.66667H6.66667H2ZM2 8.66667H6.66667H2ZM2 10.6667H6.66667H2Z" fill="#595E6A"/>
|
|
1635
|
-
<path d="M14 2V13.3333M8 2V13.3333M8 2.66667H12.6667M8 4.66667H12.6667M8 6.66667H12.6667M8 8.66667H12.6667M8 10.6667H12.6667M2 2V13.3333M2 2.66667H6.66667M2 4.66667H6.66667M2 6.66667H6.66667M2 8.66667H6.66667M2 10.6667H6.66667" stroke="#595E6A" stroke-linecap="round"/>
|
|
1636
|
-
</svg>
|
|
1637
|
-
`;
|
|
1638
1396
|
const duckDevCollapse = `
|
|
1639
1397
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
1640
1398
|
<path d="M4 3L8 6L12 3" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1641
1399
|
<path d="M12 12L8 9L4 12" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1642
1400
|
</svg>
|
|
1643
1401
|
`;
|
|
1644
|
-
const
|
|
1402
|
+
const duckDevCollapseMedium = `
|
|
1645
1403
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1646
1404
|
<path d="M3.33301 15.8346V4.16797" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1647
1405
|
<path d="M11.6667 5.83464L7.5 10.0013M7.5 10.0013L11.6667 14.168M7.5 10.0013L17.5 10.0013" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1648
1406
|
</svg>
|
|
1649
1407
|
`;
|
|
1650
|
-
const
|
|
1408
|
+
const duckDevBookOpenMedium = `
|
|
1651
1409
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1652
1410
|
<path d="M9.99935 5.83333C9.99935 4.94928 9.64816 4.10143 9.02304 3.47631C8.39792 2.85119 7.55007 2.5 6.66602 2.5H1.66602V15H7.49935C8.16239 15 8.79828 15.2634 9.26712 15.7322C9.73596 16.2011 9.99935 16.837 9.99935 17.5M9.99935 5.83333V17.5M9.99935 5.83333C9.99935 4.94928 10.3505 4.10143 10.9757 3.47631C11.6008 2.85119 12.4486 2.5 13.3327 2.5H18.3327V15H12.4993C11.8363 15 11.2004 15.2634 10.7316 15.7322C10.2627 16.2011 9.99935 16.837 9.99935 17.5" stroke="#7F8493" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1653
1411
|
</svg>
|
|
1654
1412
|
`;
|
|
1655
|
-
const
|
|
1413
|
+
const duckDevBriefcaseMedium = `
|
|
1656
1414
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1657
1415
|
<path d="M13.3327 17.5V4.16667C13.3327 3.72464 13.1571 3.30072 12.8445 2.98816C12.532 2.67559 12.108 2.5 11.666 2.5H8.33268C7.89065 2.5 7.46673 2.67559 7.15417 2.98816C6.84161 3.30072 6.66602 3.72464 6.66602 4.16667V17.5M3.33268 5.83333H16.666C17.5865 5.83333 18.3327 6.57953 18.3327 7.5V15.8333C18.3327 16.7538 17.5865 17.5 16.666 17.5H3.33268C2.41221 17.5 1.66602 16.7538 1.66602 15.8333V7.5C1.66602 6.57953 2.41221 5.83333 3.33268 5.83333Z" stroke="#7F8493" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1658
1416
|
</svg>
|
|
1659
1417
|
`;
|
|
1660
|
-
const
|
|
1418
|
+
const duckDevCreditCardMedium = `
|
|
1661
1419
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1662
1420
|
<path d="M0.833984 8.33398H19.1673M2.50065 3.33398H17.5007C18.4211 3.33398 19.1673 4.08018 19.1673 5.00065V15.0007C19.1673 15.9211 18.4211 16.6673 17.5007 16.6673H2.50065C1.58018 16.6673 0.833984 15.9211 0.833984 15.0007V5.00065C0.833984 4.08018 1.58018 3.33398 2.50065 3.33398Z" stroke="#7F8493" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1663
1421
|
</svg>
|
|
1664
1422
|
`;
|
|
1665
|
-
const duckDevTrelloSm = `
|
|
1666
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1667
|
-
<path d="M15.8333 2.5H4.16667C3.24619 2.5 2.5 3.24619 2.5 4.16667V15.8333C2.5 16.7538 3.24619 17.5 4.16667 17.5H15.8333C16.7538 17.5 17.5 16.7538 17.5 15.8333V4.16667C17.5 3.24619 16.7538 2.5 15.8333 2.5Z" stroke="#7F8493" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1668
|
-
<path d="M8.33333 5.83333H5.83333V13.3333H8.33333V5.83333Z" stroke="#7F8493" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1669
|
-
<path d="M14.1667 5.83333H11.6667V10H14.1667V5.83333Z" stroke="#7F8493" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1670
|
-
</svg>
|
|
1671
|
-
`;
|
|
1672
1423
|
const duckDevBookOpen = `
|
|
1673
1424
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1674
1425
|
<path d="M7.99967 4.66667C7.99967 3.95942 7.71872 3.28115 7.21863 2.78105C6.71853 2.28095 6.04025 2 5.33301 2H1.33301V12H5.99967C6.53011 12 7.03882 12.2107 7.41389 12.5858C7.78896 12.9609 7.99967 13.4696 7.99967 14M7.99967 4.66667V14M7.99967 4.66667C7.99967 3.95942 8.28063 3.28115 8.78072 2.78105C9.28082 2.28095 9.9591 2 10.6663 2H14.6663V12H9.99967C9.46924 12 8.96053 12.2107 8.58546 12.5858C8.21039 12.9609 7.99967 13.4696 7.99967 14" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -1691,13 +1442,6 @@ const duckDevCreditCard = `
|
|
|
1691
1442
|
</defs>
|
|
1692
1443
|
</svg>
|
|
1693
1444
|
`;
|
|
1694
|
-
const duckDevTrello = `
|
|
1695
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1696
|
-
<path d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1697
|
-
<path d="M6.66667 4.66667H4.66667V10.6667H6.66667V4.66667Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1698
|
-
<path d="M11.3333 4.66667H9.33333V8H11.3333V4.66667Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1699
|
-
</svg>
|
|
1700
|
-
`;
|
|
1701
1445
|
const duckDevSlash = `
|
|
1702
1446
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1703
1447
|
<g clip-path="url(#clip0_21839_132959)">
|
|
@@ -1710,7 +1454,7 @@ const duckDevSlash = `
|
|
|
1710
1454
|
</defs>
|
|
1711
1455
|
</svg>
|
|
1712
1456
|
`;
|
|
1713
|
-
const
|
|
1457
|
+
const duckDevSlashMedium = `
|
|
1714
1458
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1715
1459
|
<g clip-path="url(#clip0_21_2536)">
|
|
1716
1460
|
<path d="M4.10866 4.10964L15.892 15.893M18.3337 10.0013C18.3337 14.6037 14.6027 18.3346 10.0003 18.3346C5.39795 18.3346 1.66699 14.6037 1.66699 10.0013C1.66699 5.39893 5.39795 1.66797 10.0003 1.66797C14.6027 1.66797 18.3337 5.39893 18.3337 10.0013Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -1722,43 +1466,43 @@ const duckDevSlashSm = `
|
|
|
1722
1466
|
</defs>
|
|
1723
1467
|
</svg>
|
|
1724
1468
|
`;
|
|
1725
|
-
const
|
|
1469
|
+
const duckDevOrderMedium = `
|
|
1726
1470
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
|
|
1727
1471
|
<path d="M11.8541 1.66602L12.3844 1.13569C12.2438 0.995033 12.053 0.916016 11.8541 0.916016V1.66602ZM5.18742 1.66602V0.916016V1.66602ZM3.52075 3.33268H2.77075H3.52075ZM3.52075 16.666H2.77075H3.52075ZM4.00891 17.8445L3.47858 18.3749L4.00891 17.8445ZM16.3659 17.8445L16.8963 18.3749L16.3659 17.8445ZM16.8541 6.66602H17.6041C17.6041 6.4671 17.5251 6.27634 17.3844 6.13569L16.8541 6.66602ZM10.9374 6.66602C10.9374 6.2518 10.6016 5.91602 10.1874 5.91602C9.7732 5.91602 9.43742 6.2518 9.43742 6.66602H10.9374ZM11.1041 8.76602C11.1041 9.18023 11.4399 9.51602 11.8541 9.51602C12.2683 9.51602 12.6041 9.18023 12.6041 8.76602H11.1041ZM9.27075 11.766C9.27075 11.3518 8.93497 11.016 8.52075 11.016C8.10654 11.016 7.77075 11.3518 7.77075 11.766H9.27075ZM9.43742 14.166C9.43742 14.5802 9.7732 14.916 10.1874 14.916C10.6016 14.916 10.9374 14.5802 10.9374 14.166H9.43742ZM11.8541 1.66602V0.916016H5.18742V1.66602V2.41602H11.8541V1.66602ZM5.18742 1.66602V0.916016C4.54648 0.916016 3.93179 1.17063 3.47858 1.62384L4.00891 2.15417L4.53924 2.6845C4.71115 2.51259 4.9443 2.41602 5.18742 2.41602V1.66602ZM4.00891 2.15417L3.47858 1.62384C3.02536 2.07705 2.77075 2.69174 2.77075 3.33268H3.52075H4.27075C4.27075 3.08957 4.36733 2.85641 4.53924 2.6845L4.00891 2.15417ZM3.52075 3.33268H2.77075V16.666H3.52075H4.27075V3.33268H3.52075ZM3.52075 16.666H2.77075C2.77075 17.307 3.02536 17.9216 3.47858 18.3749L4.00891 17.8445L4.53924 17.3142C4.36733 17.1423 4.27075 16.9091 4.27075 16.666H3.52075ZM4.00891 17.8445L3.47858 18.3749C3.93179 18.8281 4.54648 19.0827 5.18742 19.0827V18.3327V17.5827C4.9443 17.5827 4.71115 17.4861 4.53924 17.3142L4.00891 17.8445ZM5.18742 18.3327V19.0827H15.1874V18.3327V17.5827H5.18742V18.3327ZM15.1874 18.3327V19.0827C15.8284 19.0827 16.443 18.8281 16.8963 18.3749L16.3659 17.8445L15.8356 17.3142C15.6637 17.4861 15.4305 17.5827 15.1874 17.5827V18.3327ZM16.3659 17.8445L16.8963 18.3749C17.3495 17.9216 17.6041 17.307 17.6041 16.666H16.8541H16.1041C16.1041 16.9091 16.0075 17.1423 15.8356 17.3142L16.3659 17.8445ZM16.8541 16.666H17.6041V6.66602H16.8541H16.1041V16.666H16.8541ZM16.8541 6.66602L17.3844 6.13569L12.3844 1.13569L11.8541 1.66602L11.3238 2.19635L16.3238 7.19635L16.8541 6.66602ZM10.1874 6.66602H9.43742V7.26602H10.1874H10.9374V6.66602H10.1874ZM11.8541 8.76602H12.6041C12.6041 7.45158 11.4461 6.51602 10.1874 6.51602V7.26602V8.01602C10.7699 8.01602 11.1041 8.42445 11.1041 8.76602H11.8541ZM10.1874 7.26602V6.51602C8.92876 6.51602 7.77075 7.45158 7.77075 8.76602H8.52075H9.27075C9.27075 8.42445 9.60496 8.01602 10.1874 8.01602V7.26602ZM8.52075 8.76602H7.77075C7.77075 9.45336 8.10237 9.96435 8.54935 10.3154C8.96608 10.6427 9.49344 10.843 9.97485 10.9853L10.1874 10.266L10.4 9.54677C9.9708 9.41993 9.66483 9.28419 9.47587 9.13578C9.31717 9.01113 9.27075 8.90667 9.27075 8.76602H8.52075ZM10.1874 10.266L9.97485 10.9853C10.404 11.1121 10.71 11.2478 10.899 11.3963C11.0577 11.5209 11.1041 11.6254 11.1041 11.766H11.8541H12.6041C12.6041 11.0787 12.2725 10.5677 11.8255 10.2166C11.4088 9.8893 10.8814 9.68904 10.4 9.54677L10.1874 10.266ZM11.8541 11.766H11.1041C11.1041 12.1076 10.7699 12.516 10.1874 12.516V13.266V14.016C11.4461 14.016 12.6041 13.0805 12.6041 11.766H11.8541ZM10.1874 13.266V12.516C9.60496 12.516 9.27075 12.1076 9.27075 11.766H8.52075H7.77075C7.77075 13.0805 8.92876 14.016 10.1874 14.016V13.266ZM10.1874 14.166H10.9374V13.266H10.1874H9.43742V14.166H10.1874Z" fill="#595E6A"/>
|
|
1728
1472
|
</svg>
|
|
1729
1473
|
`;
|
|
1730
|
-
const
|
|
1474
|
+
const duckDevCalendarMedium = `
|
|
1731
1475
|
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
|
|
1732
1476
|
<path d="M13.7381 1.66797V5.0013M7.07145 1.66797V5.0013M2.90479 8.33464H17.9048M4.57145 3.33464H16.2381C17.1586 3.33464 17.9048 4.08083 17.9048 5.0013V16.668C17.9048 17.5884 17.1586 18.3346 16.2381 18.3346H4.57145C3.65098 18.3346 2.90479 17.5884 2.90479 16.668V5.0013C2.90479 4.08083 3.65098 3.33464 4.57145 3.33464Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1733
1477
|
</svg>
|
|
1734
1478
|
`;
|
|
1735
|
-
const
|
|
1479
|
+
const duckDevBuildingMedium = `
|
|
1736
1480
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1737
1481
|
<path d="M3.125 17.5H16.875M3.75 2.5H16.25M4.375 2.5V17.5M15.625 2.5V17.5M7.5 5.625H8.75M7.5 8.125H8.75M7.5 10.625H8.75M11.25 5.625H12.5M11.25 8.125H12.5M11.25 10.625H12.5M7.5 17.5V14.6875C7.5 14.17 7.92 13.75 8.4375 13.75H11.5625C12.08 13.75 12.5 14.17 12.5 14.6875V17.5" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1738
1482
|
</svg>
|
|
1739
1483
|
`;
|
|
1740
|
-
const
|
|
1484
|
+
const duckDevStopCircleMedium = `
|
|
1741
1485
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1742
1486
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM6.58579 6.58579C6 7.17157 6 8.11438 6 10C6 11.8856 6 12.8284 6.58579 13.4142C7.17157 14 8.11438 14 10 14C11.8856 14 12.8284 14 13.4142 13.4142C14 12.8284 14 11.8856 14 10C14 8.11438 14 7.17157 13.4142 6.58579C12.8284 6 11.8856 6 10 6C8.11438 6 7.17157 6 6.58579 6.58579Z" fill="#FC5555"/>
|
|
1743
1487
|
</svg>
|
|
1744
1488
|
`;
|
|
1745
|
-
const
|
|
1489
|
+
const duckDevPauseCircleMedium = `
|
|
1746
1490
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1747
1491
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM6.07612 6.61732C6 6.80109 6 7.03406 6 7.5V12.5C6 12.9659 6 13.1989 6.07612 13.3827C6.17761 13.6277 6.37229 13.8224 6.61732 13.9239C6.80109 14 7.03406 14 7.5 14C7.96594 14 8.19891 14 8.38268 13.9239C8.62771 13.8224 8.82239 13.6277 8.92388 13.3827C9 13.1989 9 12.9659 9 12.5V7.5C9 7.03406 9 6.80109 8.92388 6.61732C8.82239 6.37229 8.62771 6.17761 8.38268 6.07612C8.19891 6 7.96594 6 7.5 6C7.03406 6 6.80109 6 6.61732 6.07612C6.37229 6.17761 6.17761 6.37229 6.07612 6.61732ZM11.0761 6.61732C11 6.80109 11 7.03406 11 7.5V12.5C11 12.9659 11 13.1989 11.0761 13.3827C11.1776 13.6277 11.3723 13.8224 11.6173 13.9239C11.8011 14 12.0341 14 12.5 14C12.9659 14 13.1989 14 13.3827 13.9239C13.6277 13.8224 13.8224 13.6277 13.9239 13.3827C14 13.1989 14 12.9659 14 12.5V7.5C14 7.03406 14 6.80109 13.9239 6.61732C13.8224 6.37229 13.6277 6.17761 13.3827 6.07612C13.1989 6 12.9659 6 12.5 6C12.0341 6 11.8011 6 11.6173 6.07612C11.3723 6.17761 11.1776 6.37229 11.0761 6.61732Z" fill="#595E6A"/>
|
|
1748
1492
|
</svg>
|
|
1749
1493
|
|
|
1750
1494
|
`;
|
|
1751
|
-
const
|
|
1495
|
+
const duckDevPlayCircleFilledMedium = `
|
|
1752
1496
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1753
1497
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM8.69349 13.8458L13.4137 11.059C14.1954 10.5974 14.1954 9.40259 13.4137 8.94103L8.69349 6.15419C7.93371 5.70561 7 6.28947 7 7.21316V12.7868C7 13.7105 7.93371 14.2944 8.69349 13.8458Z" fill="#29CC6A"/>
|
|
1754
1498
|
</svg>
|
|
1755
1499
|
`;
|
|
1756
|
-
const
|
|
1500
|
+
const duckDevMenuMedium = `
|
|
1757
1501
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1758
1502
|
<path d="M2.5 10H17.5M2.5 5H17.5M2.5 15H17.5" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1759
1503
|
</svg>
|
|
1760
1504
|
`;
|
|
1761
|
-
const
|
|
1505
|
+
const duckDevTeaCupMedium = `
|
|
1762
1506
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1763
1507
|
<path d="M1.92869 10.5812C1.88707 10.2252 1.86627 10.0472 1.87502 9.90042C1.92093 9.13109 2.48824 8.49367 3.24698 8.35876C3.39172 8.33301 3.57094 8.33301 3.92937 8.33301H12.7358C13.0942 8.33301 13.2734 8.33301 13.4182 8.35876C14.1769 8.49367 14.7443 9.13109 14.7901 9.90042C14.7989 10.0472 14.7781 10.2252 14.7364 10.5812L14.4026 13.4378C14.2519 14.7271 13.5629 15.8925 12.506 16.6461C11.7273 17.2013 10.7948 17.4997 9.83835 17.4997H6.8268C5.87041 17.4997 4.93785 17.2013 4.15912 16.6461C3.1022 15.8925 2.41328 14.7271 2.26259 13.4378L1.92869 10.5812Z" stroke="#6B7280" stroke-width="1.5"/>
|
|
1764
1508
|
<path d="M14.166 14.167H15.8327C17.2134 14.167 18.3327 13.0477 18.3327 11.667C18.3327 10.2862 17.2134 9.16699 15.8327 9.16699H14.5827" stroke="#6B7280" stroke-width="1.5"/>
|
|
@@ -1767,18 +1511,13 @@ const duckDevTeaCupSm = `
|
|
|
1767
1511
|
<path d="M12.0827 6.25033L12.1794 6.15356C12.6021 5.73092 12.6496 5.06183 12.291 4.58366C11.9324 4.10549 11.9799 3.4364 12.4026 3.01376L12.4994 2.91699" stroke="#6B7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1768
1512
|
</svg>
|
|
1769
1513
|
`;
|
|
1770
|
-
const
|
|
1771
|
-
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1772
|
-
<path d="M4.91643 2.70419C5.54975 1.56806 5.86641 1 6.33984 1C6.81327 1 7.12994 1.56806 7.76326 2.70419L7.92711 2.99812C8.10708 3.32097 8.19707 3.48239 8.33737 3.5889C8.47768 3.69541 8.65242 3.73495 9.0019 3.81402L9.32007 3.88601C10.5499 4.16428 11.1648 4.30341 11.3111 4.77387C11.4574 5.24432 11.0382 5.73454 10.1998 6.71496L9.98288 6.96861C9.74463 7.24722 9.6255 7.38652 9.57191 7.55886C9.51832 7.7312 9.53633 7.91706 9.57235 8.28878L9.60514 8.6272C9.7319 9.9353 9.79528 10.5894 9.41227 10.8801C9.02926 11.1709 8.45351 10.9058 7.30201 10.3756L7.0041 10.2384C6.67688 10.0878 6.51327 10.0124 6.33984 10.0124C6.16642 10.0124 6.00281 10.0878 5.67559 10.2384L5.37768 10.3756C4.22618 10.9058 3.65043 11.1709 3.26742 10.8801C2.8844 10.5894 2.94778 9.9353 3.07454 8.6272L3.10734 8.28878C3.14336 7.91706 3.16137 7.7312 3.10778 7.55886C3.05418 7.38652 2.93506 7.24722 2.6968 6.96861L2.47989 6.71496C1.64147 5.73454 1.22226 5.24432 1.36855 4.77387C1.51485 4.30341 2.12977 4.16428 3.35961 3.88601L3.67779 3.81402C4.02727 3.73495 4.20201 3.69541 4.34232 3.5889C4.48262 3.48239 4.57261 3.32097 4.75258 2.99812L4.91643 2.70419Z" fill="#4190FF" stroke="white"/>
|
|
1773
|
-
</svg>
|
|
1774
|
-
`;
|
|
1775
|
-
const duckDevSubstageInstructionSm = `
|
|
1514
|
+
const duckDevSubstageInstructionMedium = `
|
|
1776
1515
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1777
1516
|
<path d="M13.5391 3.33366H15.2057C15.6478 3.33366 16.0717 3.50925 16.3842 3.82181C16.6968 4.13437 16.8724 4.5583 16.8724 5.00033V16.667C16.8724 17.109 16.6968 17.5329 16.3842 17.8455C16.0717 18.1581 15.6478 18.3337 15.2057 18.3337H5.20573C4.7637 18.3337 4.33978 18.1581 4.02722 17.8455C3.71466 17.5329 3.53906 17.109 3.53906 16.667V5.00033C3.53906 4.5583 3.71466 4.13437 4.02722 3.82181C4.33978 3.50925 4.7637 3.33366 5.20573 3.33366H6.8724M7.70573 1.66699H12.7057C13.166 1.66699 13.5391 2.04009 13.5391 2.50033V4.16699C13.5391 4.62723 13.166 5.00033 12.7057 5.00033H7.70573C7.24549 5.00033 6.8724 4.62723 6.8724 4.16699V2.50033C6.8724 2.04009 7.24549 1.66699 7.70573 1.66699Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1778
1517
|
<path d="M12.5391 10.5938L14.5391 12.5938M14.5391 12.5938L12.5391 14.5938M14.5391 12.5938L9.03906 12.5938C8.50863 12.5938 7.99992 12.383 7.62485 12.008C7.24978 11.6329 7.03906 11.1242 7.03906 10.5938C7.03906 10.0633 7.24978 9.55461 7.62485 9.17954C7.99992 8.80447 8.50863 8.59375 9.03906 8.59375L9.53906 8.59375" stroke="#595E6A" stroke-width="1.25039" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1779
1518
|
</svg>
|
|
1780
1519
|
`;
|
|
1781
|
-
const
|
|
1520
|
+
const duckDevTaskInstructionMedium = `
|
|
1782
1521
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1783
1522
|
<path d="M13.5391 3.33366H15.2057C15.6478 3.33366 16.0717 3.50925 16.3842 3.82181C16.6968 4.13437 16.8724 4.5583 16.8724 5.00033V16.667C16.8724 17.109 16.6968 17.5329 16.3842 17.8455C16.0717 18.1581 15.6478 18.3337 15.2057 18.3337H5.20573C4.7637 18.3337 4.33978 18.1581 4.02722 17.8455C3.71466 17.5329 3.53906 17.109 3.53906 16.667V5.00033C3.53906 4.5583 3.71466 4.13437 4.02722 3.82181C4.33978 3.50925 4.7637 3.33366 5.20573 3.33366H6.8724M7.70573 1.66699H12.7057C13.166 1.66699 13.5391 2.04009 13.5391 2.50033V4.16699C13.5391 4.62723 13.166 5.00033 12.7057 5.00033H7.70573C7.24549 5.00033 6.8724 4.62723 6.8724 4.16699V2.50033C6.8724 2.04009 7.24549 1.66699 7.70573 1.66699Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1784
1523
|
<g clip-path="url(#clip0_3818_65351)">
|
|
@@ -1819,27 +1558,11 @@ const duckDevApprovalInstructionSm = `
|
|
|
1819
1558
|
<path d="M6.71875 9.36252L7.13939 9.89175L8.62398 8.48047M6.71875 11.8323L7.13939 12.3615L8.62398 10.9502M6.71875 14.302L7.13939 14.8313L8.62398 13.42M13.6469 14.1256H10.1828M13.6469 11.6559H10.1828M13.6469 9.18611H10.1828" stroke="#595E6A" stroke-width="0.866016" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1820
1559
|
</svg>
|
|
1821
1560
|
`;
|
|
1822
|
-
const duckDevClipBoardSm = `
|
|
1823
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1824
|
-
<path d="M16.2215 3.91119L15.6778 4.4278V4.4278L16.2215 3.91119ZM4.18994 3.91119L3.64623 3.39458H3.64623L4.18994 3.91119ZM9.09462 10.2721C8.6804 10.2721 8.34462 10.6079 8.34462 11.0221C8.34462 11.4363 8.6804 11.7721 9.09462 11.7721V10.2721ZM13.9094 11.7721C14.3236 11.7721 14.6594 11.4363 14.6594 11.0221C14.6594 10.6079 14.3236 10.2721 13.9094 10.2721V11.7721ZM6.50203 10.2721C6.08781 10.2721 5.75203 10.6079 5.75203 11.0221C5.75203 11.4363 6.08781 11.7721 6.50203 11.7721V10.2721ZM6.8724 11.7721C7.28661 11.7721 7.6224 11.4363 7.6224 11.0221C7.6224 10.6079 7.28661 10.2721 6.8724 10.2721V11.7721ZM6.50203 7.54352C6.08781 7.54352 5.75203 7.87931 5.75203 8.29352C5.75203 8.70774 6.08781 9.04352 6.50203 9.04352V7.54352ZM6.8724 9.04352C7.28661 9.04352 7.6224 8.70774 7.6224 8.29352C7.6224 7.87931 7.28661 7.54352 6.8724 7.54352V9.04352ZM6.50203 13.0007C6.08781 13.0007 5.75203 13.3365 5.75203 13.7507C5.75203 14.1649 6.08781 14.5007 6.50203 14.5007V13.0007ZM6.8724 14.5007C7.28661 14.5007 7.6224 14.1649 7.6224 13.7507C7.6224 13.3365 7.28661 13.0007 6.8724 13.0007V14.5007ZM9.09462 7.54352C8.6804 7.54352 8.34462 7.87931 8.34462 8.29352C8.34462 8.70774 8.6804 9.04352 9.09462 9.04352V7.54352ZM13.9094 9.04352C14.3236 9.04352 14.6594 8.70774 14.6594 8.29352C14.6594 7.87931 14.3236 7.54352 13.9094 7.54352V9.04352ZM9.09462 13.0007C8.6804 13.0007 8.34462 13.3365 8.34462 13.7507C8.34462 14.1649 8.6804 14.5007 9.09462 14.5007V13.0007ZM13.9094 14.5007C14.3236 14.5007 14.6594 14.1649 14.6594 13.7507C14.6594 13.3365 14.3236 13.0007 13.9094 13.0007V14.5007ZM16.8724 7.90373H16.1224V12.5813H16.8724H17.6224V7.90373H16.8724ZM12.428 18.3337V17.5837H7.98351V18.3337V19.0837H12.428V18.3337ZM3.53906 12.5813H4.28906V7.90373H3.53906H2.78906V12.5813H3.53906ZM7.98351 18.3337V17.5837C6.91366 17.5837 6.19062 17.5819 5.6502 17.5054C5.13545 17.4326 4.89833 17.3054 4.73364 17.132L4.18994 17.6486L3.64623 18.1653C4.13242 18.6769 4.74451 18.8922 5.44005 18.9906C6.10991 19.0854 6.95822 19.0837 7.98351 19.0837V18.3337ZM3.53906 12.5813H2.78906C2.78906 13.6735 2.78843 14.806 2.87343 15.7521C2.91603 16.2262 2.98218 16.6805 3.09018 17.0757C3.19454 17.4576 3.35817 17.8621 3.64623 18.1653L4.18994 17.6486L4.73364 17.132C4.69627 17.0927 4.61581 16.9682 4.53712 16.6802C4.46206 16.4056 4.40617 16.0493 4.36741 15.6179C4.28969 14.7527 4.28906 13.6941 4.28906 12.5813H3.53906ZM16.8724 12.5813H16.1224C16.1224 13.6941 16.1218 14.7527 16.044 15.6179C16.0053 16.0493 15.9494 16.4056 15.8743 16.6802C15.7956 16.9682 15.7152 17.0927 15.6778 17.132L16.2215 17.6486L16.7652 18.1653C17.0533 17.8621 17.2169 17.4576 17.3213 17.0757C17.4293 16.6805 17.4954 16.2262 17.538 15.7521C17.623 14.806 17.6224 13.6735 17.6224 12.5813H16.8724ZM12.428 18.3337V19.0837C13.4532 19.0837 14.3015 19.0854 14.9714 18.9906C15.6669 18.8922 16.279 18.6769 16.7652 18.1653L16.2215 17.6486L15.6778 17.132C15.5131 17.3054 15.276 17.4326 14.7613 17.5054C14.2208 17.5819 13.4978 17.5837 12.428 17.5837V18.3337ZM16.8724 7.90373H17.6224C17.6224 6.82139 17.6238 5.9379 17.535 5.24242C17.4439 4.52912 17.2463 3.90086 16.7652 3.39458L16.2215 3.91119L15.6778 4.4278C15.8476 4.60652 15.9755 4.87202 16.0471 5.43249C16.121 6.01077 16.1224 6.78105 16.1224 7.90373H16.8724ZM3.53906 7.90373H4.28906C4.28906 6.78105 4.2905 6.01077 4.36438 5.43249C4.43597 4.87202 4.56382 4.60652 4.73364 4.4278L4.18994 3.91119L3.64623 3.39458C3.16518 3.90086 2.96759 4.52912 2.87647 5.24242C2.78762 5.9379 2.78906 6.82139 2.78906 7.90373H3.53906ZM13.1687 3.22753L13.1643 3.97752C13.9761 3.98227 14.5306 4.00482 14.9435 4.08463C15.3318 4.1597 15.5319 4.27418 15.6778 4.4278L16.2215 3.91119L16.7652 3.39458C16.342 2.94917 15.8212 2.72654 15.2282 2.6119C14.6597 2.502 13.9724 2.48223 13.1731 2.47754L13.1687 3.22753ZM7.24277 3.22753L7.23837 2.47754C6.43903 2.48223 5.75174 2.502 5.18326 2.6119C4.59024 2.72654 4.06945 2.94917 3.64623 3.39458L4.18994 3.91119L4.73364 4.4278C4.8796 4.27418 5.07965 4.1597 5.46797 4.08463C5.88084 4.00482 6.43537 3.98227 7.24716 3.97752L7.24277 3.22753ZM9.09462 11.0221V11.7721H13.9094V11.0221V10.2721H9.09462V11.0221ZM6.50203 11.0221V11.7721H6.8724V11.0221V10.2721H6.50203V11.0221ZM6.50203 8.29352V9.04352H6.8724V8.29352V7.54352H6.50203V8.29352ZM6.50203 13.7507V14.5007H6.8724V13.7507V13.0007H6.50203V13.7507ZM9.09462 8.29352V9.04352H13.9094V8.29352V7.54352H9.09462V8.29352ZM9.09462 13.7507V14.5007H13.9094V13.7507V13.0007H9.09462V13.7507ZM8.35388 1.66699V2.41699H12.0576V1.66699V0.916992H8.35388V1.66699ZM13.1687 2.83638H12.4187V3.61597H13.1687H13.9187V2.83638H13.1687ZM12.0576 4.78536V4.03536H8.35388V4.78536V5.53536H12.0576V4.78536ZM7.24277 3.61597H7.99277V2.83638H7.24277H6.49277V3.61597H7.24277ZM8.35388 4.78536V4.03536C8.19011 4.03536 7.99277 3.88418 7.99277 3.61597H7.24277H6.49277C6.49277 4.63943 7.29035 5.53536 8.35388 5.53536V4.78536ZM13.1687 3.61597H12.4187C12.4187 3.88418 12.2214 4.03536 12.0576 4.03536V4.78536V5.53536C13.1211 5.53536 13.9187 4.63943 13.9187 3.61597H13.1687ZM12.0576 1.66699V2.41699C12.2214 2.41699 12.4187 2.56817 12.4187 2.83638H13.1687H13.9187C13.9187 1.81292 13.1211 0.916992 12.0576 0.916992V1.66699ZM8.35388 1.66699V0.916992C7.29035 0.916992 6.49277 1.81292 6.49277 2.83638H7.24277H7.99277C7.99277 2.56817 8.19011 2.41699 8.35388 2.41699V1.66699Z" fill="#595E6A"/>
|
|
1825
|
-
</svg>
|
|
1826
|
-
`;
|
|
1827
1561
|
const duckDevQuestionCircleBold = `
|
|
1828
1562
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1829
1563
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6496 8.00156C14.6496 11.6743 11.6723 14.6516 7.99961 14.6516C4.32692 14.6516 1.34961 11.6743 1.34961 8.00156C1.34961 4.32887 4.32692 1.35156 7.99961 1.35156C11.6723 1.35156 14.6496 4.32887 14.6496 8.00156ZM7.99961 5.17531C7.58643 5.17531 7.25148 5.51026 7.25148 5.92344C7.25148 6.19889 7.02819 6.42219 6.75273 6.42219C6.47728 6.42219 6.25398 6.19889 6.25398 5.92344C6.25398 4.95936 7.03553 4.17781 7.99961 4.17781C8.96369 4.17781 9.74523 4.95936 9.74523 5.92344C9.74523 6.39614 9.55668 6.82583 9.25178 7.1397C9.19042 7.20286 9.13189 7.26133 9.07606 7.31712C8.93253 7.46053 8.80679 7.58616 8.69647 7.72791C8.55081 7.91506 8.49836 8.05261 8.49836 8.16781V8.66656C8.49836 8.94201 8.27506 9.16531 7.99961 9.16531C7.72416 9.16531 7.50086 8.94201 7.50086 8.66656V8.16781C7.50086 7.73211 7.70369 7.37941 7.90928 7.11526C8.0614 6.9198 8.2526 6.72898 8.40777 6.57412C8.45458 6.5274 8.49811 6.48396 8.5363 6.44465C8.66766 6.30943 8.74773 6.12629 8.74773 5.92344C8.74773 5.51026 8.41279 5.17531 7.99961 5.17531ZM7.99961 11.3266C8.36688 11.3266 8.66461 11.0288 8.66461 10.6616C8.66461 10.2943 8.36688 9.99656 7.99961 9.99656C7.63234 9.99656 7.33461 10.2943 7.33461 10.6616C7.33461 11.0288 7.63234 11.3266 7.99961 11.3266Z" fill="#AEB2BC"/>
|
|
1830
1564
|
</svg>
|
|
1831
1565
|
`;
|
|
1832
|
-
const duckDevLock2 = `
|
|
1833
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1834
|
-
<path d="M14.167 8.95701H5.41699C4.72664 8.95701 4.16699 9.51666 4.16699 10.207V14.582C4.16699 15.2723 4.72664 15.832 5.41699 15.832H14.167C14.8573 15.832 15.417 15.2723 15.417 14.582V10.207C15.417 9.51666 14.8573 8.95701 14.167 8.95701Z" fill="#AEB2BC"/>
|
|
1835
|
-
<path d="M6.66699 8.95701V6.45702C6.66699 5.62822 6.99623 4.83337 7.58228 4.24732C8.16833 3.66127 8.96319 3.33203 9.79199 3.33203C10.6208 3.33203 11.4156 3.66127 12.0017 4.24732C12.5878 4.83337 12.917 5.62822 12.917 6.45702V8.95701M5.41699 8.95701H14.167C14.8573 8.95701 15.417 9.51666 15.417 10.207V14.582C15.417 15.2723 14.8573 15.832 14.167 15.832H5.41699C4.72664 15.832 4.16699 15.2723 4.16699 14.582V10.207C4.16699 9.51666 4.72664 8.95701 5.41699 8.95701Z" stroke="#AEB2BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1836
|
-
</svg>
|
|
1837
|
-
`;
|
|
1838
|
-
const duckDevClockBold = `
|
|
1839
|
-
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" width="16" height="16" viewBox="0 0 16 16">
|
|
1840
|
-
<path d="M14.666 7.999a6.666 6.666 0 1 1-13.333 0 6.666 6.666 0 0 1 13.333 0ZM8 4.832a.5.5 0 0 0-.5.5v2.667c0 .132.052.259.146.353l1.667 1.667a.5.5 0 0 0 .707-.707L8.5 7.792v-2.46a.5.5 0 0 0-.5-.5Z" fill="#aeb2bc"/>
|
|
1841
|
-
</svg>
|
|
1842
|
-
`;
|
|
1843
1566
|
const duckDevTextSm = `
|
|
1844
1567
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1845
1568
|
<path d="M3 7H17M3 10.5H17M3 14H9" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -1878,23 +1601,6 @@ const duckDevMessageSquareSm = `
|
|
|
1878
1601
|
<path d="M17.5 12.5C17.5 12.942 17.3244 13.366 17.0118 13.6785C16.6993 13.9911 16.2754 14.1667 15.8333 14.1667H5.83333L2.5 17.5V4.16667C2.5 3.72464 2.67559 3.30072 2.98816 2.98816C3.30072 2.67559 3.72464 2.5 4.16667 2.5H15.8333C16.2754 2.5 16.6993 2.67559 17.0118 2.98816C17.3244 3.30072 17.5 3.72464 17.5 4.16667V12.5Z" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1879
1602
|
</svg>
|
|
1880
1603
|
`;
|
|
1881
|
-
const duckDevSurfaceArea = `
|
|
1882
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
1883
|
-
<path d="M14.2402 1.33398H3.57357C2.84023 1.33398 2.24023 1.93398 2.24023 2.66732V13.334C2.24023 13.6876 2.38071 14.0267 2.63076 14.2768C2.88081 14.5268 3.21995 14.6673 3.57357 14.6673H14.2402C14.9802 14.6673 15.5736 14.074 15.5736 13.334V2.66732C15.5736 2.3137 15.4331 1.97456 15.183 1.72451C14.933 1.47446 14.5939 1.33398 14.2402 1.33398ZM3.57357 4.00065L4.9069 2.66732H8.17357L3.57357 7.26732V4.00065ZM3.57357 9.13398L10.0402 2.66732H13.3069L3.57357 12.4007V9.13398ZM14.2402 12.0007L12.9069 13.334H9.64023L14.2402 8.73398V12.0007ZM14.2402 6.86732L7.77357 13.334H4.5069L14.2402 3.60065V6.86732Z" fill="white"/>
|
|
1884
|
-
</svg>
|
|
1885
|
-
`;
|
|
1886
|
-
const duckDevClipboardCompletedBold = `
|
|
1887
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" >
|
|
1888
|
-
<path d="M6.33333 1.33398C5.78105 1.33398 5.33333 1.7817 5.33333 2.33398V3.00065C5.33333 3.55294 5.78105 4.00065 6.33333 4.00065H9.66667C10.219 4.00065 10.6667 3.55294 10.6667 3.00065V2.33398C10.6667 1.7817 10.219 1.33398 9.66667 1.33398H6.33333Z" fill="white"/>
|
|
1889
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.33333 2.69173C3.49473 2.73878 2.96532 2.87241 2.58579 3.25195C2 3.83773 2 4.78054 2 6.66616V10.6662C2 12.5518 2 13.4946 2.58579 14.0804C3.17157 14.6662 4.11438 14.6662 6 14.6662H10C11.8856 14.6662 12.8284 14.6662 13.4142 14.0804C14 13.4946 14 12.5518 14 10.6662V6.66616C14 4.78054 14 3.83773 13.4142 3.25195C13.0347 2.87241 12.5053 2.73878 11.6667 2.69173V3.00065C11.6667 4.10522 10.7712 5.00065 9.66667 5.00065H6.33333C5.22876 5.00065 4.33333 4.10522 4.33333 3.00065V2.69173ZM10.3412 8.36618C10.543 8.17776 10.5539 7.86137 10.3655 7.65949C10.1771 7.45762 9.86072 7.44671 9.65884 7.63513L7.14286 9.98338L6.34116 9.23513C6.13929 9.04671 5.82289 9.05762 5.63447 9.25949C5.44606 9.46137 5.45697 9.77776 5.65884 9.96618L6.8017 11.0328C6.9938 11.2121 7.29191 11.2121 7.48402 11.0328L10.3412 8.36618Z" fill="white"/>
|
|
1890
|
-
</svg>
|
|
1891
|
-
`;
|
|
1892
|
-
const duckDevClipboardListBold = `
|
|
1893
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1894
|
-
<path d="M6.33333 1.33398C5.78105 1.33398 5.33333 1.7817 5.33333 2.33398V3.00065C5.33333 3.55294 5.78105 4.00065 6.33333 4.00065H9.66667C10.219 4.00065 10.6667 3.55294 10.6667 3.00065V2.33398C10.6667 1.7817 10.219 1.33398 9.66667 1.33398H6.33333Z" fill="white"/>
|
|
1895
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.33333 2.69173C3.49473 2.73878 2.96532 2.87241 2.58579 3.25195C2 3.83773 2 4.78054 2 6.66616V10.6662C2 12.5518 2 13.4946 2.58579 14.0804C3.17157 14.6662 4.11438 14.6662 6 14.6662H10C11.8856 14.6662 12.8284 14.6662 13.4142 14.0804C14 13.4946 14 12.5518 14 10.6662V6.66616C14 4.78054 14 3.83773 13.4142 3.25195C13.0347 2.87241 12.5053 2.73878 11.6667 2.69173V3.00065C11.6667 4.10522 10.7712 5.00065 9.66667 5.00065H6.33333C5.22876 5.00065 4.33333 4.10522 4.33333 3.00065V2.69173ZM4.66667 6.50065C4.39052 6.50065 4.16667 6.72451 4.16667 7.00065C4.16667 7.27679 4.39052 7.50065 4.66667 7.50065H5C5.27614 7.50065 5.5 7.27679 5.5 7.00065C5.5 6.72451 5.27614 6.50065 5 6.50065H4.66667ZM7 6.50065C6.72386 6.50065 6.5 6.72451 6.5 7.00065C6.5 7.27679 6.72386 7.50065 7 7.50065H11.3333C11.6095 7.50065 11.8333 7.27679 11.8333 7.00065C11.8333 6.72451 11.6095 6.50065 11.3333 6.50065H7ZM4.66667 8.83398C4.39052 8.83398 4.16667 9.05784 4.16667 9.33398C4.16667 9.61013 4.39052 9.83398 4.66667 9.83398H5C5.27614 9.83398 5.5 9.61013 5.5 9.33398C5.5 9.05784 5.27614 8.83398 5 8.83398H4.66667ZM7 8.83398C6.72386 8.83398 6.5 9.05784 6.5 9.33398C6.5 9.61013 6.72386 9.83398 7 9.83398H11.3333C11.6095 9.83398 11.8333 9.61013 11.8333 9.33398C11.8333 9.05784 11.6095 8.83398 11.3333 8.83398H7ZM4.66667 11.1673C4.39052 11.1673 4.16667 11.3912 4.16667 11.6673C4.16667 11.9435 4.39052 12.1673 4.66667 12.1673H5C5.27614 12.1673 5.5 11.9435 5.5 11.6673C5.5 11.3912 5.27614 11.1673 5 11.1673H4.66667ZM7 11.1673C6.72386 11.1673 6.5 11.3912 6.5 11.6673C6.5 11.9435 6.72386 12.1673 7 12.1673H11.3333C11.6095 12.1673 11.8333 11.9435 11.8333 11.6673C11.8333 11.3912 11.6095 11.1673 11.3333 11.1673H7Z" fill="white"/>
|
|
1896
|
-
</svg>
|
|
1897
|
-
`;
|
|
1898
1604
|
const duckDevMinimize2Sm = `
|
|
1899
1605
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
1900
1606
|
<path d="M3.33333 11.6667H8.33333M8.33333 11.6667V16.6667M8.33333 11.6667L2.5 17.5M16.6667 8.33333H11.6667M11.6667 8.33333V3.33333M11.6667 8.33333L17.5 2.5" stroke="#595E6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -1929,236 +1635,197 @@ const duckDevPaletteSm = `
|
|
|
1929
1635
|
</defs>
|
|
1930
1636
|
</svg>
|
|
1931
1637
|
`;
|
|
1932
|
-
const duckDevBoldFileDefaultSm = `
|
|
1933
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
|
|
1934
|
-
<path fill="#EFF0F2" fill-rule="evenodd" d="M10 22h4c3.771 0 4.657 0 5.828-1.172C21 19.657 21 17.771 21 14v-.437c0-.873 0-1.529-.043-2.063h-3.052c-1.097 0-2.067 0-2.848-.105-.847-.114-1.694-.375-2.385-1.066-.692-.692-.953-1.539-1.067-2.386-.105-.781-.105-1.75-.105-2.848l.01-2.834c0-.083.007-.164.02-.244C11.121 2 10.636 2 10.03 2 6.239 2 5.343 2 4.172 3.172 3 4.343 3 6.229 3 10v4c0 3.771 0 5.657 1.172 6.828C5.343 22 6.229 22 10 22Z" clip-rule="evenodd"/>
|
|
1935
|
-
<path fill="#EFF0F2" d="M18.5 7c-1.113-1.247-3.107-2.946-3.107-2.946-1.128-1.015-1.692-1.523-2.384-1.788L13 5c0 2.357 0 3.536.732 4.268.732.732 1.06.615 3.416.615h3.58C20.366 9.18 19.448 8.062 18.5 7Z"/>
|
|
1936
|
-
</svg>
|
|
1937
|
-
`;
|
|
1938
1638
|
const CUI_ICONS = {
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1943
|
-
|
|
1639
|
+
duckDevDockMedium,
|
|
1640
|
+
duckDevImageMedium,
|
|
1641
|
+
duckDevWordDockMedium,
|
|
1642
|
+
duckDevPrinterMedium,
|
|
1643
|
+
duckDevBuildMedium,
|
|
1644
|
+
duckDevCupMedium,
|
|
1645
|
+
duckDevSlashMedium,
|
|
1944
1646
|
duckDevTextSm,
|
|
1945
1647
|
duckDevSlash,
|
|
1946
|
-
duckDevLoading,
|
|
1947
1648
|
duckDevCheck,
|
|
1948
|
-
|
|
1649
|
+
duckDevCheckMedium,
|
|
1949
1650
|
duckDevCheckCircle,
|
|
1950
|
-
|
|
1651
|
+
duckDevCheckCircleMedium,
|
|
1951
1652
|
duckDevCheckCircleV2,
|
|
1952
1653
|
duckDevMoreVertical,
|
|
1953
|
-
|
|
1654
|
+
duckDevMoreVerticalMedium,
|
|
1954
1655
|
duckDevTrash,
|
|
1955
|
-
|
|
1656
|
+
duckDevTrashMedium,
|
|
1956
1657
|
duckDevEdit,
|
|
1957
|
-
|
|
1958
|
-
|
|
1658
|
+
duckDevEditMedium,
|
|
1659
|
+
duckDevArrowSortMedium,
|
|
1959
1660
|
duckDevX,
|
|
1960
|
-
|
|
1661
|
+
duckDevXMedium,
|
|
1961
1662
|
duckDevXCircle,
|
|
1962
|
-
|
|
1663
|
+
duckDevXCircleMedium,
|
|
1963
1664
|
duckDevClear,
|
|
1964
|
-
|
|
1665
|
+
duckDevClearMedium,
|
|
1965
1666
|
duckDevEye,
|
|
1966
|
-
|
|
1667
|
+
duckDevEyeMedium,
|
|
1967
1668
|
duckDevEyeOff,
|
|
1968
|
-
|
|
1669
|
+
duckDevEyeOffMedium,
|
|
1969
1670
|
duckDevChevronUp,
|
|
1970
|
-
|
|
1671
|
+
duckDevChevronUpMedium,
|
|
1971
1672
|
duckDevChevronRight,
|
|
1972
|
-
|
|
1673
|
+
duckDevChevronRightMedium,
|
|
1973
1674
|
duckDevChevronDown,
|
|
1974
|
-
|
|
1675
|
+
duckDevChevronDownMedium,
|
|
1975
1676
|
duckDevChevronLeft,
|
|
1976
|
-
|
|
1677
|
+
duckDevChevronLeftMedium,
|
|
1977
1678
|
duckDevChevronsRight,
|
|
1978
|
-
|
|
1679
|
+
duckDevChevronsRightMedium,
|
|
1979
1680
|
duckDevChevronsLeft,
|
|
1980
|
-
|
|
1681
|
+
duckDevChevronsLeftMedium,
|
|
1981
1682
|
duckDevChevronsSwitch,
|
|
1982
1683
|
duckDevDatabase,
|
|
1983
|
-
|
|
1684
|
+
duckDevDatabaseMedium,
|
|
1984
1685
|
duckDevHome,
|
|
1985
|
-
|
|
1686
|
+
duckDevHomeMedium,
|
|
1986
1687
|
duckDevUser,
|
|
1987
|
-
|
|
1688
|
+
duckDevUserMedium,
|
|
1988
1689
|
duckDevUsers,
|
|
1989
1690
|
duckDevUsersBg,
|
|
1990
|
-
|
|
1691
|
+
duckDevUsersMedium,
|
|
1991
1692
|
duckDevUserPlus,
|
|
1992
|
-
|
|
1993
|
-
duckDevFormula,
|
|
1994
|
-
duckDevSettings,
|
|
1995
|
-
duckDevSettingsSm,
|
|
1996
|
-
duckDevSettingsBold,
|
|
1693
|
+
duckDevUserPlusMedium,
|
|
1997
1694
|
duckDevCopy,
|
|
1998
|
-
|
|
1695
|
+
duckDevCopyMedium,
|
|
1999
1696
|
duckDevSidebar,
|
|
2000
|
-
|
|
1697
|
+
duckDevSidebarMedium,
|
|
2001
1698
|
duckDevChart,
|
|
2002
1699
|
duckDevFolder,
|
|
2003
|
-
|
|
1700
|
+
duckDevFolderMedium,
|
|
2004
1701
|
duckDevFolderOpen,
|
|
2005
|
-
|
|
1702
|
+
duckDevFolderOpenMedium,
|
|
2006
1703
|
duckDevPlus,
|
|
2007
|
-
|
|
1704
|
+
duckDevPlusMedium,
|
|
2008
1705
|
duckDevPlusCircle,
|
|
2009
1706
|
duckDevFiltersLines,
|
|
2010
|
-
|
|
1707
|
+
duckDevFiltersLinesMedium,
|
|
2011
1708
|
duckDevSearch,
|
|
2012
|
-
|
|
1709
|
+
duckDevSearchMedium,
|
|
2013
1710
|
duckDevGrid,
|
|
2014
|
-
|
|
1711
|
+
duckDevGridMedium,
|
|
2015
1712
|
duckDevList,
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
duckDevSortAZSm,
|
|
1713
|
+
duckDevListMedium,
|
|
1714
|
+
duckDevSortAZMedium,
|
|
2019
1715
|
duckDevFlagBold,
|
|
2020
1716
|
duckDevFileText,
|
|
2021
|
-
|
|
1717
|
+
duckDevFileTextMedium,
|
|
2022
1718
|
duckDevLink,
|
|
2023
|
-
|
|
1719
|
+
duckDevExternalLinkMedium,
|
|
2024
1720
|
duckDevLinkBroken,
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
duckDevClockSm,
|
|
1721
|
+
duckDevLinkBrokenMedium,
|
|
1722
|
+
duckDevClockMedium,
|
|
2028
1723
|
duckDevInfo,
|
|
2029
|
-
|
|
1724
|
+
duckDevInfoMedium,
|
|
2030
1725
|
duckDevInfoCircle,
|
|
2031
1726
|
duckDevInfoCircleBg,
|
|
2032
1727
|
duckDevAlertTriangle,
|
|
2033
|
-
|
|
1728
|
+
duckDevAlertTriangleMedium,
|
|
2034
1729
|
duckDevAlertCircle,
|
|
2035
1730
|
duckDev2Layers,
|
|
2036
|
-
|
|
1731
|
+
duckDev2LayersMedium,
|
|
2037
1732
|
duckDev3Layers,
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
1733
|
+
duckDev3LayersMedium,
|
|
1734
|
+
duckDevLearningMedium,
|
|
1735
|
+
duckDevBellMedium,
|
|
2041
1736
|
duckDevMessageCircle,
|
|
2042
|
-
|
|
1737
|
+
duckDevMessageCircleMedium,
|
|
2043
1738
|
duckDevSlashDivider,
|
|
2044
1739
|
duckDevCaretDownFillXxs,
|
|
2045
1740
|
duckDevCaretDownFill,
|
|
2046
1741
|
duckDevDragHandleDots,
|
|
2047
1742
|
duckDevPlayCircle,
|
|
2048
|
-
|
|
2049
|
-
duckDevClipBoardBold,
|
|
2050
|
-
duckDevClipBoard,
|
|
2051
|
-
duckDevClipBoardSm,
|
|
1743
|
+
duckDevPlayCircleMedium,
|
|
2052
1744
|
duckDevUpload,
|
|
2053
|
-
|
|
1745
|
+
duckDevUploadMedium,
|
|
2054
1746
|
duckDevMaximize,
|
|
2055
|
-
|
|
1747
|
+
duckDevMaximizeMedium,
|
|
2056
1748
|
duckDevArrowUpRight,
|
|
2057
|
-
|
|
2058
|
-
duckDevAddBranchSm,
|
|
2059
|
-
duckDevBranch,
|
|
2060
|
-
duckDevBranchSm,
|
|
1749
|
+
duckDevArrowUpRightMedium,
|
|
2061
1750
|
duckDevPaperclip,
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
duckDevEquipmentSm,
|
|
1751
|
+
duckDevPaperclipMedium,
|
|
1752
|
+
duckDevToolsMedium,
|
|
1753
|
+
duckDevPartsMedium,
|
|
2066
1754
|
duckDevPrimitive,
|
|
2067
|
-
|
|
2068
|
-
duckDevSpool,
|
|
2069
|
-
duckDevSpoolSm,
|
|
1755
|
+
duckDevPrimitiveMedium,
|
|
2070
1756
|
duckDevTank,
|
|
2071
|
-
|
|
2072
|
-
duckDevAssembly,
|
|
2073
|
-
duckDevAssemblySm,
|
|
1757
|
+
duckDevTankMedium,
|
|
2074
1758
|
duckDevVariant,
|
|
2075
|
-
|
|
2076
|
-
duckDevRichText,
|
|
2077
|
-
duckDevRichTextSm,
|
|
1759
|
+
duckDevVariantMedium,
|
|
2078
1760
|
duckDevChecklist,
|
|
2079
|
-
|
|
1761
|
+
duckDevRefreshCcwMedium,
|
|
2080
1762
|
duckDevRefreshCcw,
|
|
2081
|
-
|
|
1763
|
+
duckDevBarChartMedium,
|
|
2082
1764
|
duckDevBarChart,
|
|
2083
1765
|
duckDevCurvedArrow,
|
|
2084
|
-
|
|
2085
|
-
|
|
1766
|
+
duckDevBulletFillMedium,
|
|
1767
|
+
duckDevBulletMedium,
|
|
2086
1768
|
duckDevArrowRight,
|
|
2087
|
-
|
|
1769
|
+
duckDevArrowRightMedium,
|
|
2088
1770
|
duckDevImage,
|
|
2089
|
-
|
|
1771
|
+
duckDevCutLinearMedium,
|
|
2090
1772
|
duckDevCutLinear,
|
|
2091
1773
|
duckDevForkLift,
|
|
2092
|
-
|
|
1774
|
+
duckDevForkLiftMedium,
|
|
2093
1775
|
duckDevPartPrimitive,
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
duckDevViewInAr,
|
|
2097
|
-
duckDevViewInArSm,
|
|
2098
|
-
duckDevFloorplanSolid,
|
|
2099
|
-
duckDevFloorplanSolidSm,
|
|
1776
|
+
duckDevPartPrimitiveMedium,
|
|
1777
|
+
duckDevChecklistsMedium,
|
|
2100
1778
|
duckDevMoon,
|
|
2101
|
-
|
|
2102
|
-
|
|
1779
|
+
duckDevMoonMedium,
|
|
1780
|
+
duckDevSunMedium,
|
|
2103
1781
|
duckDevTool,
|
|
2104
|
-
|
|
1782
|
+
duckDevToolMedium,
|
|
2105
1783
|
duckDevCamera,
|
|
2106
|
-
|
|
2107
|
-
duckDevCrane,
|
|
2108
|
-
duckDevCraneSm,
|
|
1784
|
+
duckDevPanModeMedium,
|
|
2109
1785
|
duckDevBin,
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
duckDev5sSm,
|
|
2113
|
-
duckDevRackSm,
|
|
2114
|
-
duckDevComputerChipSm,
|
|
2115
|
-
duckDevRack,
|
|
1786
|
+
duckDevBinMedium,
|
|
1787
|
+
duckDevComputerChipMedium,
|
|
2116
1788
|
duckDevAccessories,
|
|
2117
|
-
|
|
1789
|
+
duckDevAccessoriesMedium,
|
|
2118
1790
|
duckDevLogisticVehicle,
|
|
2119
|
-
|
|
1791
|
+
duckDevLogisticVehicleMedium,
|
|
2120
1792
|
duckDevCollapse,
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
duckDevTrelloSm,
|
|
1793
|
+
duckDevCollapseMedium,
|
|
1794
|
+
duckDevBookOpenMedium,
|
|
1795
|
+
duckDevBriefcaseMedium,
|
|
1796
|
+
duckDevCreditCardMedium,
|
|
2126
1797
|
duckDevBookOpen,
|
|
2127
1798
|
duckDevBriefcase,
|
|
2128
1799
|
duckDevCreditCard,
|
|
2129
|
-
duckDevTrello,
|
|
2130
1800
|
duckDevLogOut,
|
|
2131
|
-
|
|
2132
|
-
|
|
1801
|
+
duckDevOrderMedium,
|
|
1802
|
+
duckDevCalendarMedium,
|
|
2133
1803
|
duckDevMapPin,
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
1804
|
+
duckDevBuildingMedium,
|
|
1805
|
+
duckDevStopCircleMedium,
|
|
1806
|
+
duckDevPauseCircleMedium,
|
|
1807
|
+
duckDevPlayCircleFilledMedium,
|
|
1808
|
+
duckDevMenuMedium,
|
|
1809
|
+
duckDevTeaCupMedium,
|
|
1810
|
+
duckDevSubstageInstructionMedium,
|
|
1811
|
+
duckDevTaskInstructionMedium,
|
|
2142
1812
|
duckDevToolsInstructionSm,
|
|
2143
1813
|
duckDevApprovalInstructionSm,
|
|
2144
1814
|
duckDevQuestionCircleBold,
|
|
2145
|
-
duckDevClockBold,
|
|
2146
1815
|
duckDevHammerBold,
|
|
2147
1816
|
duckDevAlignLeftSm,
|
|
2148
1817
|
duckDevChecklistSm,
|
|
2149
1818
|
duckDevMessageSquare,
|
|
2150
1819
|
duckDevMessageSquareSm,
|
|
2151
|
-
duckDevSurfaceArea,
|
|
2152
1820
|
duckDevMinimize2,
|
|
2153
1821
|
duckDevMinimize2Sm,
|
|
2154
1822
|
duckDevHistorySm,
|
|
2155
1823
|
duckDevSun,
|
|
2156
1824
|
duckDevGlobeSm,
|
|
2157
1825
|
duckDevPaletteSm,
|
|
2158
|
-
|
|
2159
|
-
duckDevBoldFileDefaultSm,
|
|
1826
|
+
duckDevLogOutMedium,
|
|
2160
1827
|
duckDevEyeBold,
|
|
2161
|
-
|
|
1828
|
+
duckDevEyeBoldMedium
|
|
2162
1829
|
};
|
|
2163
1830
|
|
|
2164
1831
|
function camelToKebab(input) {
|
|
@@ -2169,7 +1836,6 @@ function camelToKebab(input) {
|
|
|
2169
1836
|
.toLowerCase();
|
|
2170
1837
|
}
|
|
2171
1838
|
function titleFromKey(key) {
|
|
2172
|
-
// Remove leading 'duckDev' if present, then split into words
|
|
2173
1839
|
const withoutPrefix = key.startsWith('duckDev') ? key.substring('duckDev'.length) : key;
|
|
2174
1840
|
const words = withoutPrefix.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');
|
|
2175
1841
|
// Trim and capitalize first letter of each word (keep existing upper case like V2)
|
|
@@ -2198,25 +1864,83 @@ class DuckDevInput {
|
|
|
2198
1864
|
formInputType = input('input', { ...(ngDevMode ? { debugName: "formInputType" } : {}) });
|
|
2199
1865
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
2200
1866
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2201
|
-
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 }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\n [for]=\"controlName()\"\n class=\"form-label\"\n>\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"formInputType() === 'checkbox'\"\n [formGroup]=\"form()\"\n>\n @switch (formInputType()) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input\n class=\"inp-cbx\"\n [id]=\"controlName()\"\n type=\"checkbox\"\n formControlName=\"{{ controlName() }}\"\n />\n <label\n class=\"cbx\"\n [for]=\"controlName()\"\n >\n <span>\n <svg\n width=\"12px\"\n height=\"10px\"\n viewbox=\"0 0 12 10\"\n >\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]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n ></textarea>\n }\n @default {\n <input\n [id]=\"controlName()\"\n [type]=\"type()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n />\n }\n }\n\n @if (errorMessage()) {\n <div class=\"error-message\">\n {{ errorMessage() }}\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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display: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%;resize:none}.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}.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-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-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}.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)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
1867
|
+
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 }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\n [for]=\"controlName()\"\n class=\"form-label\"\n>\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"formInputType() === 'checkbox'\"\n [formGroup]=\"form()\"\n>\n @switch (formInputType()) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input\n class=\"inp-cbx\"\n [id]=\"controlName()\"\n type=\"checkbox\"\n formControlName=\"{{ controlName() }}\"\n />\n <label\n class=\"cbx\"\n [for]=\"controlName()\"\n >\n <span>\n <svg\n width=\"12px\"\n height=\"10px\"\n viewbox=\"0 0 12 10\"\n >\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]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n ></textarea>\n }\n @default {\n <input\n [id]=\"controlName()\"\n [type]=\"type()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n />\n }\n }\n\n @if (errorMessage()) {\n <div class=\"error-message\">\n {{ errorMessage() }}\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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%;resize:none}.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}.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-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-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}.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)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
2202
1868
|
}
|
|
2203
1869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, decorators: [{
|
|
2204
1870
|
type: Component,
|
|
2205
1871
|
args: [{ selector: 'duck-dev-input', imports: [
|
|
2206
1872
|
ReactiveFormsModule
|
|
2207
|
-
], template: "<label\n [for]=\"controlName()\"\n class=\"form-label\"\n>\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"formInputType() === 'checkbox'\"\n [formGroup]=\"form()\"\n>\n @switch (formInputType()) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input\n class=\"inp-cbx\"\n [id]=\"controlName()\"\n type=\"checkbox\"\n formControlName=\"{{ controlName() }}\"\n />\n <label\n class=\"cbx\"\n [for]=\"controlName()\"\n >\n <span>\n <svg\n width=\"12px\"\n height=\"10px\"\n viewbox=\"0 0 12 10\"\n >\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]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n ></textarea>\n }\n @default {\n <input\n [id]=\"controlName()\"\n [type]=\"type()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n />\n }\n }\n\n @if (errorMessage()) {\n <div class=\"error-message\">\n {{ errorMessage() }}\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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display: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%;resize:none}.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}.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-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-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}.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)}}\n"] }]
|
|
1873
|
+
], template: "<label\n [for]=\"controlName()\"\n class=\"form-label\"\n>\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"formInputType() === 'checkbox'\"\n [formGroup]=\"form()\"\n>\n @switch (formInputType()) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input\n class=\"inp-cbx\"\n [id]=\"controlName()\"\n type=\"checkbox\"\n formControlName=\"{{ controlName() }}\"\n />\n <label\n class=\"cbx\"\n [for]=\"controlName()\"\n >\n <span>\n <svg\n width=\"12px\"\n height=\"10px\"\n viewbox=\"0 0 12 10\"\n >\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]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n ></textarea>\n }\n @default {\n <input\n [id]=\"controlName()\"\n [type]=\"type()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n />\n }\n }\n\n @if (errorMessage()) {\n <div class=\"error-message\">\n {{ errorMessage() }}\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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%;resize:none}.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}.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-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-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}.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)}}\n"] }]
|
|
2208
1874
|
}], 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 }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
|
|
2209
1875
|
|
|
1876
|
+
class DuckDevNotificationService {
|
|
1877
|
+
seq = 1;
|
|
1878
|
+
timers = new Map();
|
|
1879
|
+
items = signal([], { ...(ngDevMode ? { debugName: "items" } : {}) });
|
|
1880
|
+
show(options) {
|
|
1881
|
+
const id = this.seq++;
|
|
1882
|
+
const item = {
|
|
1883
|
+
id,
|
|
1884
|
+
type: options.type ?? 'success',
|
|
1885
|
+
position: options.position ?? 'top',
|
|
1886
|
+
title: options.title ?? this.defaultTitle(options.type ?? 'success'),
|
|
1887
|
+
message: options.message,
|
|
1888
|
+
duration: options.duration ?? 3000,
|
|
1889
|
+
};
|
|
1890
|
+
this.items.update(list => [item, ...list]);
|
|
1891
|
+
if (item.duration > 0) {
|
|
1892
|
+
const t = window.setTimeout(() => this.remove(id), item.duration + 350);
|
|
1893
|
+
this.timers.set(id, t);
|
|
1894
|
+
}
|
|
1895
|
+
return id;
|
|
1896
|
+
}
|
|
1897
|
+
success(message, opts = {}) {
|
|
1898
|
+
return this.show({ ...opts, type: 'success', message });
|
|
1899
|
+
}
|
|
1900
|
+
warning(message, opts = {}) {
|
|
1901
|
+
return this.show({ ...opts, type: 'warning', message });
|
|
1902
|
+
}
|
|
1903
|
+
error(message, opts = {}) {
|
|
1904
|
+
return this.show({ ...opts, type: 'error', message });
|
|
1905
|
+
}
|
|
1906
|
+
remove(id) {
|
|
1907
|
+
const timer = this.timers.get(id);
|
|
1908
|
+
if (timer) {
|
|
1909
|
+
clearTimeout(timer);
|
|
1910
|
+
this.timers.delete(id);
|
|
1911
|
+
}
|
|
1912
|
+
this.items.update(list => list.filter(i => i.id !== id));
|
|
1913
|
+
}
|
|
1914
|
+
clear() {
|
|
1915
|
+
this.items().forEach(i => this.remove(i.id));
|
|
1916
|
+
}
|
|
1917
|
+
defaultTitle(type) {
|
|
1918
|
+
switch (type) {
|
|
1919
|
+
case 'success':
|
|
1920
|
+
return 'Success';
|
|
1921
|
+
case 'warning':
|
|
1922
|
+
return 'Warning';
|
|
1923
|
+
case 'error':
|
|
1924
|
+
return 'Error';
|
|
1925
|
+
}
|
|
1926
|
+
}
|
|
1927
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1928
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotificationService, providedIn: 'root' });
|
|
1929
|
+
}
|
|
1930
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotificationService, decorators: [{
|
|
1931
|
+
type: Injectable,
|
|
1932
|
+
args: [{ providedIn: 'root' }]
|
|
1933
|
+
}] });
|
|
1934
|
+
|
|
2210
1935
|
class DuckDevSvgBlock {
|
|
2211
1936
|
sanitizer;
|
|
1937
|
+
notify = inject(DuckDevNotificationService);
|
|
2212
1938
|
icons = svgIcons;
|
|
2213
|
-
// search and pagination state
|
|
2214
1939
|
search = signal('', { ...(ngDevMode ? { debugName: "search" } : {}) });
|
|
2215
1940
|
page = signal(1, { ...(ngDevMode ? { debugName: "page" } : {}) });
|
|
2216
1941
|
pageSize = 50;
|
|
2217
1942
|
searchForm;
|
|
2218
1943
|
sub;
|
|
2219
|
-
// copy clipboard feedback
|
|
2220
1944
|
copiedId = signal(null, { ...(ngDevMode ? { debugName: "copiedId" } : {}) });
|
|
2221
1945
|
copiedTimer;
|
|
2222
1946
|
// derived lists
|
|
@@ -2256,9 +1980,10 @@ class DuckDevSvgBlock {
|
|
|
2256
1980
|
}
|
|
2257
1981
|
async copyTag(id, event) {
|
|
2258
1982
|
event?.stopPropagation?.();
|
|
2259
|
-
const tag =
|
|
1983
|
+
const tag = `<duck-dev-icon name="${id}"></duck-dev-icon>`;
|
|
2260
1984
|
try {
|
|
2261
1985
|
if (navigator.clipboard?.writeText) {
|
|
1986
|
+
this.notify.success(`There is a tag in the clipboard ${tag}`);
|
|
2262
1987
|
await navigator.clipboard.writeText(tag);
|
|
2263
1988
|
}
|
|
2264
1989
|
else {
|
|
@@ -2301,13 +2026,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2301
2026
|
|
|
2302
2027
|
class InputBlock {
|
|
2303
2028
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2304
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: InputBlock, isStandalone: true, selector: "app-input-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n\n <!-- Input Field Component -->\n <section class=\"component-section\">\n <h2>{{ 'inputComponent.inputField.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.inputField.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'inputComponent.inputField.usage' | transloco }}</h3>\n <p>{{ 'inputComponent.inputField.usageText1' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText2' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'inputComponent.inputField.inputs' | transloco }}</h3>\n <ul>\n <li><strong>form</strong> ({{ 'inputComponent.inputField.required' | transloco }}) - {{ 'inputComponent.inputField.inputForm' | transloco }}</li>\n <li><strong>controlName</strong> ({{ 'inputComponent.inputField.required' | transloco }}) - {{ 'inputComponent.inputField.inputControlName' | transloco }}</li>\n <li><strong>label</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputLabel' | transloco }}</li>\n <li><strong>placeholder</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputPlaceholder' | transloco }}</li>\n <li><strong>type</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputType' | transloco }}</li>\n <li><strong>formInputType</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputFormInputType' | transloco }}\n <ul>\n <li>'input' - {{ 'inputComponent.inputField.typeInput' | transloco }}</li>\n <li>'textarea' - {{ 'inputComponent.inputField.typeTextarea' | transloco }}</li>\n <li>'checkbox' - {{ 'inputComponent.inputField.typeCheckbox' | transloco }}</li>\n </ul>\n </li>\n <li><strong>errorMessage</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputErrorMessage' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'inputComponent.inputField.features' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature6' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'inputComponent.inputField.api' | transloco }}</h3>\n <ul>\n <li><strong>form: FormGroup</strong> - {{ 'inputComponent.inputField.apiForm' | transloco }}</li>\n <li><strong>controlName: string</strong> - {{ 'inputComponent.inputField.apiControlName' | transloco }}</li>\n <li><strong>label?: string</strong> - {{ 'inputComponent.inputField.apiLabel' | transloco }}</li>\n <li><strong>placeholder?: string</strong> - {{ 'inputComponent.inputField.apiPlaceholder' | transloco }}</li>\n <li><strong>type?: string</strong> - {{ 'inputComponent.inputField.apiType' | transloco }}</li>\n <li><strong>formInputType?: 'input' | 'textarea' | 'checkbox'</strong> - {{ 'inputComponent.inputField.apiFormInputType' | transloco }}</li>\n <li><strong>errorMessage?: string</strong> - {{ 'inputComponent.inputField.apiErrorMessage' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'inputComponent.inputField.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.implementation1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation6' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'inputComponent.inputField.example' | transloco }}</h3>\n <div class=\"example-wrapper\">\n <h4>{{ 'inputComponent.inputField.exampleComponent' | transloco }}</h4>\n <pre><code>import { Component } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { InputFieldComponent } from './input-field.component';\n\n @Component({\n selector: 'app-example',\n imports: [InputFieldComponent],\n template: `\n <form [formGroup]=\"exampleForm\">\n <!-- Text Input -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"username\"\n label=\"Username\"\n placeholder=\"Enter your username\"\n [errorMessage]=\"getUsernameError()\"\n />\n\n <!-- Email Input -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"email\"\n label=\"Email\"\n type=\"email\"\n placeholder=\"example@mail.com\"\n [errorMessage]=\"getEmailError()\"\n />\n\n <!-- Password Input -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"password\"\n label=\"Password\"\n type=\"password\"\n placeholder=\"Enter password\"\n [errorMessage]=\"getPasswordError()\"\n />\n\n <!-- Textarea -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"description\"\n label=\"Description\"\n formInputType=\"textarea\"\n placeholder=\"Enter description\"\n />\n\n <!-- Checkbox -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"agree\"\n label=\"Agreement\"\n formInputType=\"checkbox\"\n >\n I agree to the terms and conditions\n </dd-input-field>\n </form>\n `\n})\nexport class ExampleComponent {\n exampleForm: FormGroup;\n\n constructor(private fb: FormBuilder) {\n this.exampleForm = this.fb.group({\n username: ['', [Validators.required, Validators.minLength(3)]],\n email: ['', [Validators.required, Validators.email]],\n password: ['', [Validators.required, Validators.minLength(8)]],\n description: [''],\n agree: [false, Validators.requiredTrue]\n });\n }\n\n getUsernameError(): string {\n const control = this.exampleForm.get('username');\n if (control?.hasError('required') && control?.touched) {\n return 'Username is required';\n }\n if (control?.hasError('minlength') && control?.touched) {\n return 'Username must be at least 3 characters';\n }\n return '';\n }\n\n getEmailError(): string {\n const control = this.exampleForm.get('email');\n if (control?.hasError('required') && control?.touched) {\n return 'Email is required';\n }\n if (control?.hasError('email') && control?.touched) {\n return 'Invalid email format';\n }\n return '';\n }\n\n getPasswordError(): string {\n const control = this.exampleForm.get('password');\n if (control?.hasError('required') && control?.touched) {\n return 'Password is required';\n }\n if (control?.hasError('minlength') && control?.touched) {\n return 'Password must be at least 8 characters';\n }\n return '';\n }\n}</code></pre>\n </div>\n </div>\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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .example-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .example-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .example-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .example-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .example-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .example-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .example-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .example-block .example-wrapper{margin-top:15px}.demo-container .component-section .example-block .example-wrapper h4{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px}.demo-container .component-section .example-block .example-wrapper pre{background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:8px;padding:20px;overflow-x:auto}.demo-container .component-section .example-block .example-wrapper pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;color: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 .example-block .example-wrapper pre{padding:15px}.demo-container .component-section .example-block .example-wrapper pre code{font-size:12px}}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
2029
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: InputBlock, isStandalone: true, selector: "app-input-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n\n <!-- Input Field Component -->\n <section class=\"component-section\">\n <h2>{{ 'inputComponent.inputField.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.inputField.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'inputComponent.inputField.usage' | transloco }}</h3>\n <p>{{ 'inputComponent.inputField.usageText1' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText2' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'inputComponent.inputField.inputs' | transloco }}</h3>\n <ul>\n <li><strong>form</strong> ({{ 'inputComponent.inputField.required' | transloco }}) - {{ 'inputComponent.inputField.inputForm' | transloco }}</li>\n <li><strong>controlName</strong> ({{ 'inputComponent.inputField.required' | transloco }}) - {{ 'inputComponent.inputField.inputControlName' | transloco }}</li>\n <li><strong>label</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputLabel' | transloco }}</li>\n <li><strong>placeholder</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputPlaceholder' | transloco }}</li>\n <li><strong>type</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputType' | transloco }}</li>\n <li><strong>formInputType</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputFormInputType' | transloco }}\n <ul>\n <li>'input' - {{ 'inputComponent.inputField.typeInput' | transloco }}</li>\n <li>'textarea' - {{ 'inputComponent.inputField.typeTextarea' | transloco }}</li>\n <li>'checkbox' - {{ 'inputComponent.inputField.typeCheckbox' | transloco }}</li>\n </ul>\n </li>\n <li><strong>errorMessage</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputErrorMessage' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'inputComponent.inputField.features' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature6' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'inputComponent.inputField.api' | transloco }}</h3>\n <ul>\n <li><strong>form: FormGroup</strong> - {{ 'inputComponent.inputField.apiForm' | transloco }}</li>\n <li><strong>controlName: string</strong> - {{ 'inputComponent.inputField.apiControlName' | transloco }}</li>\n <li><strong>label?: string</strong> - {{ 'inputComponent.inputField.apiLabel' | transloco }}</li>\n <li><strong>placeholder?: string</strong> - {{ 'inputComponent.inputField.apiPlaceholder' | transloco }}</li>\n <li><strong>type?: string</strong> - {{ 'inputComponent.inputField.apiType' | transloco }}</li>\n <li><strong>formInputType?: 'input' | 'textarea' | 'checkbox'</strong> - {{ 'inputComponent.inputField.apiFormInputType' | transloco }}</li>\n <li><strong>errorMessage?: string</strong> - {{ 'inputComponent.inputField.apiErrorMessage' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'inputComponent.inputField.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.implementation1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation6' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'inputComponent.inputField.example' | transloco }}</h3>\n <div class=\"example-wrapper\">\n <h4>{{ 'inputComponent.inputField.exampleComponent' | transloco }}</h4>\n <pre><code>import { Component } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { InputFieldComponent } from './input-field.component';\n\n @Component({\n selector: 'app-example',\n imports: [InputFieldComponent],\n template: `\n <form [formGroup]=\"exampleForm\">\n <!-- Text Input -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"username\"\n label=\"Username\"\n placeholder=\"Enter your username\"\n [errorMessage]=\"getUsernameError()\"\n />\n\n <!-- Email Input -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"email\"\n label=\"Email\"\n type=\"email\"\n placeholder=\"example@mail.com\"\n [errorMessage]=\"getEmailError()\"\n />\n\n <!-- Password Input -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"password\"\n label=\"Password\"\n type=\"password\"\n placeholder=\"Enter password\"\n [errorMessage]=\"getPasswordError()\"\n />\n\n <!-- Textarea -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"description\"\n label=\"Description\"\n formInputType=\"textarea\"\n placeholder=\"Enter description\"\n />\n\n <!-- Checkbox -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"agree\"\n label=\"Agreement\"\n formInputType=\"checkbox\"\n >\n I agree to the terms and conditions\n </dd-input-field>\n </form>\n `\n})\nexport class ExampleComponent {\n exampleForm: FormGroup;\n\n constructor(private fb: FormBuilder) {\n this.exampleForm = this.fb.group({\n username: ['', [Validators.required, Validators.minLength(3)]],\n email: ['', [Validators.required, Validators.email]],\n password: ['', [Validators.required, Validators.minLength(8)]],\n description: [''],\n agree: [false, Validators.requiredTrue]\n });\n }\n\n getUsernameError(): string {\n const control = this.exampleForm.get('username');\n if (control?.hasError('required') && control?.touched) {\n return 'Username is required';\n }\n if (control?.hasError('minlength') && control?.touched) {\n return 'Username must be at least 3 characters';\n }\n return '';\n }\n\n getEmailError(): string {\n const control = this.exampleForm.get('email');\n if (control?.hasError('required') && control?.touched) {\n return 'Email is required';\n }\n if (control?.hasError('email') && control?.touched) {\n return 'Invalid email format';\n }\n return '';\n }\n\n getPasswordError(): string {\n const control = this.exampleForm.get('password');\n if (control?.hasError('required') && control?.touched) {\n return 'Password is required';\n }\n if (control?.hasError('minlength') && control?.touched) {\n return 'Password must be at least 8 characters';\n }\n return '';\n }\n}</code></pre>\n </div>\n </div>\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .example-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .example-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .example-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .example-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .example-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .example-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .example-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .example-block .example-wrapper{margin-top:15px}.demo-container .component-section .example-block .example-wrapper h4{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px}.demo-container .component-section .example-block .example-wrapper pre{background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:8px;padding:20px;overflow-x:auto}.demo-container .component-section .example-block .example-wrapper pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;color: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 .example-block .example-wrapper pre{padding:15px}.demo-container .component-section .example-block .example-wrapper pre code{font-size:12px}}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
2305
2030
|
}
|
|
2306
2031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, decorators: [{
|
|
2307
2032
|
type: Component,
|
|
2308
2033
|
args: [{ selector: 'app-input-block', imports: [
|
|
2309
2034
|
TranslocoPipe
|
|
2310
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n\n <!-- Input Field Component -->\n <section class=\"component-section\">\n <h2>{{ 'inputComponent.inputField.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.inputField.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'inputComponent.inputField.usage' | transloco }}</h3>\n <p>{{ 'inputComponent.inputField.usageText1' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText2' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'inputComponent.inputField.inputs' | transloco }}</h3>\n <ul>\n <li><strong>form</strong> ({{ 'inputComponent.inputField.required' | transloco }}) - {{ 'inputComponent.inputField.inputForm' | transloco }}</li>\n <li><strong>controlName</strong> ({{ 'inputComponent.inputField.required' | transloco }}) - {{ 'inputComponent.inputField.inputControlName' | transloco }}</li>\n <li><strong>label</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputLabel' | transloco }}</li>\n <li><strong>placeholder</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputPlaceholder' | transloco }}</li>\n <li><strong>type</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputType' | transloco }}</li>\n <li><strong>formInputType</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputFormInputType' | transloco }}\n <ul>\n <li>'input' - {{ 'inputComponent.inputField.typeInput' | transloco }}</li>\n <li>'textarea' - {{ 'inputComponent.inputField.typeTextarea' | transloco }}</li>\n <li>'checkbox' - {{ 'inputComponent.inputField.typeCheckbox' | transloco }}</li>\n </ul>\n </li>\n <li><strong>errorMessage</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputErrorMessage' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'inputComponent.inputField.features' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature6' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'inputComponent.inputField.api' | transloco }}</h3>\n <ul>\n <li><strong>form: FormGroup</strong> - {{ 'inputComponent.inputField.apiForm' | transloco }}</li>\n <li><strong>controlName: string</strong> - {{ 'inputComponent.inputField.apiControlName' | transloco }}</li>\n <li><strong>label?: string</strong> - {{ 'inputComponent.inputField.apiLabel' | transloco }}</li>\n <li><strong>placeholder?: string</strong> - {{ 'inputComponent.inputField.apiPlaceholder' | transloco }}</li>\n <li><strong>type?: string</strong> - {{ 'inputComponent.inputField.apiType' | transloco }}</li>\n <li><strong>formInputType?: 'input' | 'textarea' | 'checkbox'</strong> - {{ 'inputComponent.inputField.apiFormInputType' | transloco }}</li>\n <li><strong>errorMessage?: string</strong> - {{ 'inputComponent.inputField.apiErrorMessage' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'inputComponent.inputField.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.implementation1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation6' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'inputComponent.inputField.example' | transloco }}</h3>\n <div class=\"example-wrapper\">\n <h4>{{ 'inputComponent.inputField.exampleComponent' | transloco }}</h4>\n <pre><code>import { Component } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { InputFieldComponent } from './input-field.component';\n\n @Component({\n selector: 'app-example',\n imports: [InputFieldComponent],\n template: `\n <form [formGroup]=\"exampleForm\">\n <!-- Text Input -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"username\"\n label=\"Username\"\n placeholder=\"Enter your username\"\n [errorMessage]=\"getUsernameError()\"\n />\n\n <!-- Email Input -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"email\"\n label=\"Email\"\n type=\"email\"\n placeholder=\"example@mail.com\"\n [errorMessage]=\"getEmailError()\"\n />\n\n <!-- Password Input -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"password\"\n label=\"Password\"\n type=\"password\"\n placeholder=\"Enter password\"\n [errorMessage]=\"getPasswordError()\"\n />\n\n <!-- Textarea -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"description\"\n label=\"Description\"\n formInputType=\"textarea\"\n placeholder=\"Enter description\"\n />\n\n <!-- Checkbox -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"agree\"\n label=\"Agreement\"\n formInputType=\"checkbox\"\n >\n I agree to the terms and conditions\n </dd-input-field>\n </form>\n `\n})\nexport class ExampleComponent {\n exampleForm: FormGroup;\n\n constructor(private fb: FormBuilder) {\n this.exampleForm = this.fb.group({\n username: ['', [Validators.required, Validators.minLength(3)]],\n email: ['', [Validators.required, Validators.email]],\n password: ['', [Validators.required, Validators.minLength(8)]],\n description: [''],\n agree: [false, Validators.requiredTrue]\n });\n }\n\n getUsernameError(): string {\n const control = this.exampleForm.get('username');\n if (control?.hasError('required') && control?.touched) {\n return 'Username is required';\n }\n if (control?.hasError('minlength') && control?.touched) {\n return 'Username must be at least 3 characters';\n }\n return '';\n }\n\n getEmailError(): string {\n const control = this.exampleForm.get('email');\n if (control?.hasError('required') && control?.touched) {\n return 'Email is required';\n }\n if (control?.hasError('email') && control?.touched) {\n return 'Invalid email format';\n }\n return '';\n }\n\n getPasswordError(): string {\n const control = this.exampleForm.get('password');\n if (control?.hasError('required') && control?.touched) {\n return 'Password is required';\n }\n if (control?.hasError('minlength') && control?.touched) {\n return 'Password must be at least 8 characters';\n }\n return '';\n }\n}</code></pre>\n </div>\n </div>\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-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .example-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .example-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .example-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .example-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .example-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .example-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .example-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .example-block .example-wrapper{margin-top:15px}.demo-container .component-section .example-block .example-wrapper h4{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px}.demo-container .component-section .example-block .example-wrapper pre{background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:8px;padding:20px;overflow-x:auto}.demo-container .component-section .example-block .example-wrapper pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;color: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 .example-block .example-wrapper pre{padding:15px}.demo-container .component-section .example-block .example-wrapper pre code{font-size:12px}}\n"] }]
|
|
2035
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n\n <!-- Input Field Component -->\n <section class=\"component-section\">\n <h2>{{ 'inputComponent.inputField.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.inputField.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'inputComponent.inputField.usage' | transloco }}</h3>\n <p>{{ 'inputComponent.inputField.usageText1' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText2' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'inputComponent.inputField.inputs' | transloco }}</h3>\n <ul>\n <li><strong>form</strong> ({{ 'inputComponent.inputField.required' | transloco }}) - {{ 'inputComponent.inputField.inputForm' | transloco }}</li>\n <li><strong>controlName</strong> ({{ 'inputComponent.inputField.required' | transloco }}) - {{ 'inputComponent.inputField.inputControlName' | transloco }}</li>\n <li><strong>label</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputLabel' | transloco }}</li>\n <li><strong>placeholder</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputPlaceholder' | transloco }}</li>\n <li><strong>type</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputType' | transloco }}</li>\n <li><strong>formInputType</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputFormInputType' | transloco }}\n <ul>\n <li>'input' - {{ 'inputComponent.inputField.typeInput' | transloco }}</li>\n <li>'textarea' - {{ 'inputComponent.inputField.typeTextarea' | transloco }}</li>\n <li>'checkbox' - {{ 'inputComponent.inputField.typeCheckbox' | transloco }}</li>\n </ul>\n </li>\n <li><strong>errorMessage</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) - {{ 'inputComponent.inputField.inputErrorMessage' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'inputComponent.inputField.features' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature6' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'inputComponent.inputField.api' | transloco }}</h3>\n <ul>\n <li><strong>form: FormGroup</strong> - {{ 'inputComponent.inputField.apiForm' | transloco }}</li>\n <li><strong>controlName: string</strong> - {{ 'inputComponent.inputField.apiControlName' | transloco }}</li>\n <li><strong>label?: string</strong> - {{ 'inputComponent.inputField.apiLabel' | transloco }}</li>\n <li><strong>placeholder?: string</strong> - {{ 'inputComponent.inputField.apiPlaceholder' | transloco }}</li>\n <li><strong>type?: string</strong> - {{ 'inputComponent.inputField.apiType' | transloco }}</li>\n <li><strong>formInputType?: 'input' | 'textarea' | 'checkbox'</strong> - {{ 'inputComponent.inputField.apiFormInputType' | transloco }}</li>\n <li><strong>errorMessage?: string</strong> - {{ 'inputComponent.inputField.apiErrorMessage' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'inputComponent.inputField.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.implementation1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation6' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'inputComponent.inputField.example' | transloco }}</h3>\n <div class=\"example-wrapper\">\n <h4>{{ 'inputComponent.inputField.exampleComponent' | transloco }}</h4>\n <pre><code>import { Component } from '@angular/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\nimport { InputFieldComponent } from './input-field.component';\n\n @Component({\n selector: 'app-example',\n imports: [InputFieldComponent],\n template: `\n <form [formGroup]=\"exampleForm\">\n <!-- Text Input -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"username\"\n label=\"Username\"\n placeholder=\"Enter your username\"\n [errorMessage]=\"getUsernameError()\"\n />\n\n <!-- Email Input -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"email\"\n label=\"Email\"\n type=\"email\"\n placeholder=\"example@mail.com\"\n [errorMessage]=\"getEmailError()\"\n />\n\n <!-- Password Input -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"password\"\n label=\"Password\"\n type=\"password\"\n placeholder=\"Enter password\"\n [errorMessage]=\"getPasswordError()\"\n />\n\n <!-- Textarea -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"description\"\n label=\"Description\"\n formInputType=\"textarea\"\n placeholder=\"Enter description\"\n />\n\n <!-- Checkbox -->\n <dd-input-field\n [form]=\"exampleForm\"\n controlName=\"agree\"\n label=\"Agreement\"\n formInputType=\"checkbox\"\n >\n I agree to the terms and conditions\n </dd-input-field>\n </form>\n `\n})\nexport class ExampleComponent {\n exampleForm: FormGroup;\n\n constructor(private fb: FormBuilder) {\n this.exampleForm = this.fb.group({\n username: ['', [Validators.required, Validators.minLength(3)]],\n email: ['', [Validators.required, Validators.email]],\n password: ['', [Validators.required, Validators.minLength(8)]],\n description: [''],\n agree: [false, Validators.requiredTrue]\n });\n }\n\n getUsernameError(): string {\n const control = this.exampleForm.get('username');\n if (control?.hasError('required') && control?.touched) {\n return 'Username is required';\n }\n if (control?.hasError('minlength') && control?.touched) {\n return 'Username must be at least 3 characters';\n }\n return '';\n }\n\n getEmailError(): string {\n const control = this.exampleForm.get('email');\n if (control?.hasError('required') && control?.touched) {\n return 'Email is required';\n }\n if (control?.hasError('email') && control?.touched) {\n return 'Invalid email format';\n }\n return '';\n }\n\n getPasswordError(): string {\n const control = this.exampleForm.get('password');\n if (control?.hasError('required') && control?.touched) {\n return 'Password is required';\n }\n if (control?.hasError('minlength') && control?.touched) {\n return 'Password must be at least 8 characters';\n }\n return '';\n }\n}</code></pre>\n </div>\n </div>\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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .example-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .example-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .example-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .example-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .example-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .example-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .example-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .example-block .example-wrapper{margin-top:15px}.demo-container .component-section .example-block .example-wrapper h4{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px}.demo-container .component-section .example-block .example-wrapper pre{background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:8px;padding:20px;overflow-x:auto}.demo-container .component-section .example-block .example-wrapper pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;color: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 .example-block .example-wrapper pre{padding:15px}.demo-container .component-section .example-block .example-wrapper pre code{font-size:12px}}\n"] }]
|
|
2036
|
+
}] });
|
|
2037
|
+
|
|
2038
|
+
class NotificationBlock {
|
|
2039
|
+
notify = inject(DuckDevNotificationService);
|
|
2040
|
+
showSample() {
|
|
2041
|
+
this.notify.success('Saved successfully', { title: 'Done', position: 'top', duration: 3000 });
|
|
2042
|
+
}
|
|
2043
|
+
successTop() {
|
|
2044
|
+
this.notify.success('All changes have been saved.', { title: 'Success', position: 'top' });
|
|
2045
|
+
}
|
|
2046
|
+
warningCenter() {
|
|
2047
|
+
this.notify.warning('Check the entered data.', { title: 'Warning', position: 'center', duration: 0 });
|
|
2048
|
+
}
|
|
2049
|
+
errorBottom() {
|
|
2050
|
+
this.notify.error('Something went wrong.', { title: 'Error', position: 'bottom' });
|
|
2051
|
+
}
|
|
2052
|
+
// Additional demos
|
|
2053
|
+
showTop() {
|
|
2054
|
+
this.notify.show({ message: 'Generic info message', title: 'Info', position: 'top', duration: 2500, type: 'success' });
|
|
2055
|
+
}
|
|
2056
|
+
showCenterNoAuto() {
|
|
2057
|
+
this.notify.show({ message: 'This will stay until you click it', title: 'Manual close', position: 'center', duration: 0, type: 'warning' });
|
|
2058
|
+
}
|
|
2059
|
+
showBottomLong() {
|
|
2060
|
+
this.notify.show({ message: 'Takes a bit longer to disappear', title: 'Longer duration', position: 'bottom', duration: 6000, type: 'success' });
|
|
2061
|
+
}
|
|
2062
|
+
clearAll() {
|
|
2063
|
+
this.notify.clear();
|
|
2064
|
+
}
|
|
2065
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2066
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: NotificationBlock, isStandalone: true, selector: "app-notification-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'notifications.title' | transloco }}</h1>\n\n <!-- Quick demo -->\n <div class=\"example-row quick-actions\">\n <button class=\"demo-btn\" (click)=\"showSample()\">{{ 'notifications.quickDemo' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"clearAll()\">{{ 'notifications.clearAll' | transloco }}</button>\n </div>\n\n <!-- Basics -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'notifications.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-notification-container />\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) {}\n\nonSave() {\n this.notify.success('Saved successfully', { title: 'Done', position: 'top', duration: 3000 });\n}\n</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'notifications.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>type</strong> - {{ 'notifications.basic.inputType' | transloco }}</li>\n <li><strong>title</strong> - {{ 'notifications.basic.inputTitle' | transloco }}</li>\n <li><strong>message</strong> - {{ 'notifications.basic.inputMessage' | transloco }}</li>\n <li><strong>duration</strong> - {{ 'notifications.basic.inputDuration' | transloco }}</li>\n <li><strong>position</strong> - {{ 'notifications.basic.inputPosition' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'notifications.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"successTop()\">{{ 'notifications.examples.successTop' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"warningCenter()\">{{ 'notifications.examples.warningCenter' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"errorBottom()\">{{ 'notifications.examples.errorBottom' | transloco }}</button>\n </div>\n </div>\n </section>\n\n <!-- Service and Container -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.service.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.service.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'notifications.service.install' | transloco }}</h3>\n <pre><code>// 1) Place container once in app layout (e.g., AppComponent template)\n<duck-dev-notification-container />\n\n// 2) Inject and use the service in any component\nconstructor(private notify: DuckDevNotificationService) {}\n\nthis.notify.show({\n type: 'success',\n title: '{{ 'notifications.snippets.titleSuccess' | transloco }}',\n message: '{{ 'notifications.snippets.sampleMessage' | transloco }}',\n position: 'top',\n duration: 3000\n});\n</code></pre>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'notifications.api.title' | transloco }}</h3>\n <ul class=\"api-list\">\n <li><code>show(options: NotificationOptions)</code> \u2014 {{ 'notifications.api.show' | transloco }}</li>\n <li><code>success(message, options?)</code> \u2014 {{ 'notifications.api.success' | transloco }}</li>\n <li><code>warning(message, options?)</code> \u2014 {{ 'notifications.api.warning' | transloco }}</li>\n <li><code>error(message, options?)</code> \u2014 {{ 'notifications.api.error' | transloco }}</li>\n <li><code>remove(id)</code> \u2014 {{ 'notifications.api.remove' | transloco }}</li>\n <li><code>clear()</code> \u2014 {{ 'notifications.api.clear' | transloco }}</li>\n </ul>\n <h4>{{ 'notifications.api.optionsTitle' | transloco }}</h4>\n <pre><code>interface NotificationOptions {\n type?: 'success' | 'warning' | 'error';\n title?: string;\n message: string;\n position?: 'top' | 'center' | 'bottom';\n duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n}</code></pre>\n </div>\n </section>\n\n <!-- Positions & duration examples -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.positions.description' | transloco }}</p>\n <div class=\"examples-block\">\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"showTop()\">{{ 'notifications.positions.top' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"showCenterNoAuto()\">{{ 'notifications.positions.centerNoAuto' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"showBottomLong()\">{{ 'notifications.positions.bottomLong' | transloco }}</button>\n </div>\n </div>\n <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n </section>\n\n <!-- Advanced -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n <ul>\n <li>{{ 'notifications.advanced.cssOnly' | transloco }}</li>\n <li>{{ 'notifications.advanced.palette' | transloco }}</li>\n <li>{{ 'notifications.advanced.stacking' | transloco }}</li>\n <li>{{ 'notifications.advanced.accessibility' | transloco }}</li>\n </ul>\n </section>\n\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: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 .api-block{margin-bottom:25px}.demo-container .component-section .api-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 .api-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .api-block .api-list{list-style:none;padding:0;margin:0 0 12px}.demo-container .component-section .api-block .api-list li{padding:8px 12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:6px;color:var(--dd-base-500);font-size:14px}.demo-container .component-section .api-block .api-list li+li{margin-top:8px}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .tip{margin-top:8px;color:var(--dd-base-400)}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}@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}}\n"], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
|
|
2067
|
+
}
|
|
2068
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationBlock, decorators: [{
|
|
2069
|
+
type: Component,
|
|
2070
|
+
args: [{ selector: 'app-notification-block', imports: [TranslocoModule], template: "<div class=\"demo-container\">\n <h1>{{ 'notifications.title' | transloco }}</h1>\n\n <!-- Quick demo -->\n <div class=\"example-row quick-actions\">\n <button class=\"demo-btn\" (click)=\"showSample()\">{{ 'notifications.quickDemo' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"clearAll()\">{{ 'notifications.clearAll' | transloco }}</button>\n </div>\n\n <!-- Basics -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'notifications.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-notification-container />\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) {}\n\nonSave() {\n this.notify.success('Saved successfully', { title: 'Done', position: 'top', duration: 3000 });\n}\n</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'notifications.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>type</strong> - {{ 'notifications.basic.inputType' | transloco }}</li>\n <li><strong>title</strong> - {{ 'notifications.basic.inputTitle' | transloco }}</li>\n <li><strong>message</strong> - {{ 'notifications.basic.inputMessage' | transloco }}</li>\n <li><strong>duration</strong> - {{ 'notifications.basic.inputDuration' | transloco }}</li>\n <li><strong>position</strong> - {{ 'notifications.basic.inputPosition' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'notifications.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"successTop()\">{{ 'notifications.examples.successTop' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"warningCenter()\">{{ 'notifications.examples.warningCenter' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"errorBottom()\">{{ 'notifications.examples.errorBottom' | transloco }}</button>\n </div>\n </div>\n </section>\n\n <!-- Service and Container -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.service.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.service.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'notifications.service.install' | transloco }}</h3>\n <pre><code>// 1) Place container once in app layout (e.g., AppComponent template)\n<duck-dev-notification-container />\n\n// 2) Inject and use the service in any component\nconstructor(private notify: DuckDevNotificationService) {}\n\nthis.notify.show({\n type: 'success',\n title: '{{ 'notifications.snippets.titleSuccess' | transloco }}',\n message: '{{ 'notifications.snippets.sampleMessage' | transloco }}',\n position: 'top',\n duration: 3000\n});\n</code></pre>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'notifications.api.title' | transloco }}</h3>\n <ul class=\"api-list\">\n <li><code>show(options: NotificationOptions)</code> \u2014 {{ 'notifications.api.show' | transloco }}</li>\n <li><code>success(message, options?)</code> \u2014 {{ 'notifications.api.success' | transloco }}</li>\n <li><code>warning(message, options?)</code> \u2014 {{ 'notifications.api.warning' | transloco }}</li>\n <li><code>error(message, options?)</code> \u2014 {{ 'notifications.api.error' | transloco }}</li>\n <li><code>remove(id)</code> \u2014 {{ 'notifications.api.remove' | transloco }}</li>\n <li><code>clear()</code> \u2014 {{ 'notifications.api.clear' | transloco }}</li>\n </ul>\n <h4>{{ 'notifications.api.optionsTitle' | transloco }}</h4>\n <pre><code>interface NotificationOptions {\n type?: 'success' | 'warning' | 'error';\n title?: string;\n message: string;\n position?: 'top' | 'center' | 'bottom';\n duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n}</code></pre>\n </div>\n </section>\n\n <!-- Positions & duration examples -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n <p class=\"description\">{{ 'notifications.positions.description' | transloco }}</p>\n <div class=\"examples-block\">\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"showTop()\">{{ 'notifications.positions.top' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"showCenterNoAuto()\">{{ 'notifications.positions.centerNoAuto' | transloco }}</button>\n <button class=\"demo-btn\" (click)=\"showBottomLong()\">{{ 'notifications.positions.bottomLong' | transloco }}</button>\n </div>\n </div>\n <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n </section>\n\n <!-- Advanced -->\n <section class=\"component-section\">\n <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n <ul>\n <li>{{ 'notifications.advanced.cssOnly' | transloco }}</li>\n <li>{{ 'notifications.advanced.palette' | transloco }}</li>\n <li>{{ 'notifications.advanced.stacking' | transloco }}</li>\n <li>{{ 'notifications.advanced.accessibility' | transloco }}</li>\n </ul>\n </section>\n\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: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 .api-block{margin-bottom:25px}.demo-container .component-section .api-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 .api-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .api-block .api-list{list-style:none;padding:0;margin:0 0 12px}.demo-container .component-section .api-block .api-list li{padding:8px 12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:6px;color:var(--dd-base-500);font-size:14px}.demo-container .component-section .api-block .api-list li+li{margin-top:8px}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .tip{margin-top:8px;color:var(--dd-base-400)}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}@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}}\n"] }]
|
|
2071
|
+
}] });
|
|
2072
|
+
|
|
2073
|
+
class DuckDevIcon {
|
|
2074
|
+
sanitizer;
|
|
2075
|
+
static iconMap = new Map(svgIcons.map(i => [i.id, i.svg]));
|
|
2076
|
+
name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}) });
|
|
2077
|
+
constructor(sanitizer) {
|
|
2078
|
+
this.sanitizer = sanitizer;
|
|
2079
|
+
}
|
|
2080
|
+
svgHtml = computed(() => {
|
|
2081
|
+
const n = this.name();
|
|
2082
|
+
const svg = DuckDevIcon.iconMap.get(n) ?? '';
|
|
2083
|
+
return this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
2084
|
+
}, { ...(ngDevMode ? { debugName: "svgHtml" } : {}) });
|
|
2085
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevIcon, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
2086
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevIcon, isStandalone: true, selector: "duck-dev-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
2087
|
+
<span class="duck-dev-icon" [innerHTML]="svgHtml()"></span>
|
|
2088
|
+
`, isInline: true, styles: [":host{display:inline-flex;line-height:0}.duck-dev-icon{display:inline-flex}\n"] });
|
|
2089
|
+
}
|
|
2090
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevIcon, decorators: [{
|
|
2091
|
+
type: Component,
|
|
2092
|
+
args: [{ selector: 'duck-dev-icon', standalone: true, template: `
|
|
2093
|
+
<span class="duck-dev-icon" [innerHTML]="svgHtml()"></span>
|
|
2094
|
+
`, styles: [":host{display:inline-flex;line-height:0}.duck-dev-icon{display:inline-flex}\n"] }]
|
|
2095
|
+
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
|
|
2096
|
+
|
|
2097
|
+
class DuckDevNotification {
|
|
2098
|
+
type = input('success', { ...(ngDevMode ? { debugName: "type" } : {}) });
|
|
2099
|
+
title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
|
|
2100
|
+
message = input.required({ ...(ngDevMode ? { debugName: "message" } : {}) });
|
|
2101
|
+
duration = input(3000, { ...(ngDevMode ? { debugName: "duration" } : {}) });
|
|
2102
|
+
position = input('top', { ...(ngDevMode ? { debugName: "position" } : {}) });
|
|
2103
|
+
closed = output();
|
|
2104
|
+
isVisible = signal(false, { ...(ngDevMode ? { debugName: "isVisible" } : {}) });
|
|
2105
|
+
state = signal('enter', { ...(ngDevMode ? { debugName: "state" } : {}) });
|
|
2106
|
+
timer;
|
|
2107
|
+
ngOnInit() {
|
|
2108
|
+
// Start visible with CSS-only transition
|
|
2109
|
+
setTimeout(() => {
|
|
2110
|
+
this.isVisible.set(true);
|
|
2111
|
+
this.state.set('enter');
|
|
2112
|
+
}, 10);
|
|
2113
|
+
if (this.duration() > 0) {
|
|
2114
|
+
this.timer = window.setTimeout(() => {
|
|
2115
|
+
this.close();
|
|
2116
|
+
}, this.duration());
|
|
2117
|
+
}
|
|
2118
|
+
}
|
|
2119
|
+
close() {
|
|
2120
|
+
this.state.set('leave');
|
|
2121
|
+
setTimeout(() => {
|
|
2122
|
+
this.isVisible.set(false);
|
|
2123
|
+
this.closed.emit();
|
|
2124
|
+
}, 300);
|
|
2125
|
+
}
|
|
2126
|
+
ngOnDestroy() {
|
|
2127
|
+
if (this.timer) {
|
|
2128
|
+
clearTimeout(this.timer);
|
|
2129
|
+
}
|
|
2130
|
+
}
|
|
2131
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2132
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevNotification, isStandalone: true, selector: "duck-dev-notification", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isVisible()) {\n <div\n [class]=\"'notification notification--' + type() + ' notification--pos-' + position() + ' notification--' + state()\"\n (click)=\"close()\">\n <div class=\"notification__icon\">\n <span>@switch (type()){\n @case('success'){\n <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n }\n @case ('warning'){\n <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n }\n @case ('error'){\n <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n }\n }</span>\n </div>\n <div class=\"notification__content\">\n <h4 class=\"notification__title\">{{ title() }}</h4>\n <p class=\"notification__message\">{{ message() }}</p>\n </div>\n <button\n class=\"notification__close\"\n (click)=\"close()\"\n type=\"button\"\n aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\">\n \u00D7\n </button>\n </div>\n}\n", styles: [".notification{position:fixed;right:20px;min-width:320px;max-width:500px;padding:16px;border-radius:8px;box-shadow:0 4px 12px #00000026;display:flex;align-items:flex-start;gap:12px;cursor:pointer;z-index:2147483647;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease}.notification--pos-top{top:20px}.notification--pos-center{left:50%;top:50%;right:auto;transform:translate(-50%,-50%) scale(.98)}.notification--pos-bottom{bottom:20px}.notification--enter{opacity:1;visibility:visible}.notification--enter.notification--pos-top{transform:translateY(0)}.notification--leave.notification--pos-top{transform:translateY(-8px)}.notification--enter.notification--pos-bottom{transform:translateY(0)}.notification--leave.notification--pos-bottom{transform:translateY(8px)}.notification--enter.notification--pos-center{transform:translate(-50%,-50%) scale(1)}.notification--leave.notification--pos-center{transform:translate(-50%,-50%) scale(.98)}.notification--success{background:var(--dd-base-success)}.notification--warning{background:var(--dd-base-accent-yellow);color:var(--dd-base-600)}.notification--error{background:var(--dd-base-accent-orange);color:var(--dd-base-600)}.notification__icon{font-size:24px;font-weight:700;flex-shrink:0}.notification__content{flex:1}.notification__title{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--dd-base-600)}.notification__message{margin:0;font-size:14px;opacity:.9}.notification__close{background:none;border:none;color:inherit;font-size:24px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;flex-shrink:0;opacity:.7;transition:opacity .2s}.notification__close:hover{opacity:1}\n"], dependencies: [{ kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }] });
|
|
2133
|
+
}
|
|
2134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, decorators: [{
|
|
2135
|
+
type: Component,
|
|
2136
|
+
args: [{ selector: 'duck-dev-notification', imports: [DuckDevIcon], template: "@if (isVisible()) {\n <div\n [class]=\"'notification notification--' + type() + ' notification--pos-' + position() + ' notification--' + state()\"\n (click)=\"close()\">\n <div class=\"notification__icon\">\n <span>@switch (type()){\n @case('success'){\n <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n }\n @case ('warning'){\n <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n }\n @case ('error'){\n <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n }\n }</span>\n </div>\n <div class=\"notification__content\">\n <h4 class=\"notification__title\">{{ title() }}</h4>\n <p class=\"notification__message\">{{ message() }}</p>\n </div>\n <button\n class=\"notification__close\"\n (click)=\"close()\"\n type=\"button\"\n aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\">\n \u00D7\n </button>\n </div>\n}\n", styles: [".notification{position:fixed;right:20px;min-width:320px;max-width:500px;padding:16px;border-radius:8px;box-shadow:0 4px 12px #00000026;display:flex;align-items:flex-start;gap:12px;cursor:pointer;z-index:2147483647;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease}.notification--pos-top{top:20px}.notification--pos-center{left:50%;top:50%;right:auto;transform:translate(-50%,-50%) scale(.98)}.notification--pos-bottom{bottom:20px}.notification--enter{opacity:1;visibility:visible}.notification--enter.notification--pos-top{transform:translateY(0)}.notification--leave.notification--pos-top{transform:translateY(-8px)}.notification--enter.notification--pos-bottom{transform:translateY(0)}.notification--leave.notification--pos-bottom{transform:translateY(8px)}.notification--enter.notification--pos-center{transform:translate(-50%,-50%) scale(1)}.notification--leave.notification--pos-center{transform:translate(-50%,-50%) scale(.98)}.notification--success{background:var(--dd-base-success)}.notification--warning{background:var(--dd-base-accent-yellow);color:var(--dd-base-600)}.notification--error{background:var(--dd-base-accent-orange);color:var(--dd-base-600)}.notification__icon{font-size:24px;font-weight:700;flex-shrink:0}.notification__content{flex:1}.notification__title{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--dd-base-600)}.notification__message{margin:0;font-size:14px;opacity:.9}.notification__close{background:none;border:none;color:inherit;font-size:24px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;flex-shrink:0;opacity:.7;transition:opacity .2s}.notification__close:hover{opacity:1}\n"] }]
|
|
2137
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
2138
|
+
|
|
2139
|
+
class DuckDevNotificationContainer {
|
|
2140
|
+
service = inject(DuckDevNotificationService);
|
|
2141
|
+
hostRef = inject((ElementRef));
|
|
2142
|
+
originalParent;
|
|
2143
|
+
nextSibling;
|
|
2144
|
+
ngOnInit() {
|
|
2145
|
+
const el = this.hostRef.nativeElement;
|
|
2146
|
+
// Move host to document.body so fixed children are viewport-anchored and above app layout
|
|
2147
|
+
this.originalParent = el.parentNode;
|
|
2148
|
+
this.nextSibling = el.nextSibling;
|
|
2149
|
+
document.body.appendChild(el);
|
|
2150
|
+
}
|
|
2151
|
+
ngOnDestroy() {
|
|
2152
|
+
// Try to restore the element to its original place (useful in dev HMR or if component is destroyed)
|
|
2153
|
+
const el = this.hostRef.nativeElement;
|
|
2154
|
+
if (this.originalParent) {
|
|
2155
|
+
try {
|
|
2156
|
+
if (this.nextSibling && this.originalParent.contains(this.nextSibling)) {
|
|
2157
|
+
this.originalParent.insertBefore(el, this.nextSibling);
|
|
2158
|
+
}
|
|
2159
|
+
else {
|
|
2160
|
+
this.originalParent.appendChild(el);
|
|
2161
|
+
}
|
|
2162
|
+
}
|
|
2163
|
+
catch {
|
|
2164
|
+
// noop if parent is gone
|
|
2165
|
+
}
|
|
2166
|
+
}
|
|
2167
|
+
else if (el.parentNode === document.body) {
|
|
2168
|
+
document.body.removeChild(el);
|
|
2169
|
+
}
|
|
2170
|
+
}
|
|
2171
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotificationContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2172
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevNotificationContainer, isStandalone: true, selector: "duck-dev-notification-container", ngImport: i0, template: `
|
|
2173
|
+
@for (n of service.items(); track n.id) {
|
|
2174
|
+
<duck-dev-notification
|
|
2175
|
+
[type]="n.type"
|
|
2176
|
+
[title]="n.title"
|
|
2177
|
+
[message]="n.message"
|
|
2178
|
+
[duration]="n.duration"
|
|
2179
|
+
[position]="n.position"
|
|
2180
|
+
(closed)="service.remove(n.id)"
|
|
2181
|
+
/>
|
|
2182
|
+
}
|
|
2183
|
+
`, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: DuckDevNotification, selector: "duck-dev-notification", inputs: ["type", "title", "message", "duration", "position"], outputs: ["closed"] }] });
|
|
2184
|
+
}
|
|
2185
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotificationContainer, decorators: [{
|
|
2186
|
+
type: Component,
|
|
2187
|
+
args: [{ selector: 'duck-dev-notification-container', standalone: true, imports: [DuckDevNotification], template: `
|
|
2188
|
+
@for (n of service.items(); track n.id) {
|
|
2189
|
+
<duck-dev-notification
|
|
2190
|
+
[type]="n.type"
|
|
2191
|
+
[title]="n.title"
|
|
2192
|
+
[message]="n.message"
|
|
2193
|
+
[duration]="n.duration"
|
|
2194
|
+
[position]="n.position"
|
|
2195
|
+
(closed)="service.remove(n.id)"
|
|
2196
|
+
/>
|
|
2197
|
+
}
|
|
2198
|
+
`, styles: [":host{display:contents}\n"] }]
|
|
2311
2199
|
}] });
|
|
2312
2200
|
|
|
2313
2201
|
class MainDocumentationPage {
|
|
@@ -2317,7 +2205,8 @@ class MainDocumentationPage {
|
|
|
2317
2205
|
{ id: 'buttons', label: this.translocoService.translate('tabs.buttons') },
|
|
2318
2206
|
{ id: 'loaders', label: this.translocoService.translate('tabs.loaders') },
|
|
2319
2207
|
{ id: 'tabs', label: this.translocoService.translate('tabs.tabs') },
|
|
2320
|
-
{ id: 'input', label: this.translocoService.translate('
|
|
2208
|
+
{ id: 'input', label: this.translocoService.translate('tabs.input') },
|
|
2209
|
+
{ id: 'notifications', label: this.translocoService.translate('tabs.notifications') },
|
|
2321
2210
|
{ id: 'svg', label: this.translocoService.translate('tabs.svg') }
|
|
2322
2211
|
];
|
|
2323
2212
|
activeTab = signal(this.tabs[0], { ...(ngDevMode ? { debugName: "activeTab" } : {}) });
|
|
@@ -2325,7 +2214,7 @@ class MainDocumentationPage {
|
|
|
2325
2214
|
this.activeTab.set(tab);
|
|
2326
2215
|
}
|
|
2327
2216
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2328
|
-
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 @if (activeTab().id === 'buttons') {\n <app-button-block />\n }\n @if (activeTab().id === 'loaders') {\n <app-loader-block />\n }\n @if (activeTab().id === 'tabs') {\n <app-tabs-block />\n }\n @if(activeTab().id === 'input'){\n <app-input-block />\n }\n @if (activeTab().id === 'svg') {\n <app-duck-dev-svg-block />\n }\n</duck-dev-tab-vertical>\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" }] });
|
|
2217
|
+
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 @if (activeTab().id === 'buttons') {\n <app-button-block />\n }\n @if (activeTab().id === 'loaders') {\n <app-loader-block />\n }\n @if (activeTab().id === 'tabs') {\n <app-tabs-block />\n }\n @if(activeTab().id === 'input'){\n <app-input-block />\n }\n @if(activeTab().id === 'notifications'){\n <app-notification-block />\n }\n @if (activeTab().id === 'svg') {\n <app-duck-dev-svg-block />\n }\n</duck-dev-tab-vertical>\n\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" }] });
|
|
2329
2218
|
}
|
|
2330
2219
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
|
|
2331
2220
|
type: Component,
|
|
@@ -2335,13 +2224,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2335
2224
|
TabsBlock,
|
|
2336
2225
|
DuckDevSvgBlock,
|
|
2337
2226
|
DuckDevTabVertical,
|
|
2338
|
-
InputBlock
|
|
2339
|
-
|
|
2227
|
+
InputBlock,
|
|
2228
|
+
NotificationBlock,
|
|
2229
|
+
DuckDevNotificationContainer
|
|
2230
|
+
], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @if (activeTab().id === 'buttons') {\n <app-button-block />\n }\n @if (activeTab().id === 'loaders') {\n <app-loader-block />\n }\n @if (activeTab().id === 'tabs') {\n <app-tabs-block />\n }\n @if(activeTab().id === 'input'){\n <app-input-block />\n }\n @if(activeTab().id === 'notifications'){\n <app-notification-block />\n }\n @if (activeTab().id === 'svg') {\n <app-duck-dev-svg-block />\n }\n</duck-dev-tab-vertical>\n\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
|
|
2340
2231
|
}] });
|
|
2341
2232
|
|
|
2342
2233
|
const DuckDevLibTranslations = {
|
|
2343
|
-
en: import('./duck-dev-lib-en-
|
|
2344
|
-
ru: import('./duck-dev-lib-ru-
|
|
2234
|
+
en: import('./duck-dev-lib-en-G203o4VW.mjs'),
|
|
2235
|
+
ru: import('./duck-dev-lib-ru-DY4qccwH.mjs')
|
|
2345
2236
|
};
|
|
2346
2237
|
|
|
2347
2238
|
/*
|
|
@@ -2352,5 +2243,5 @@ const DuckDevLibTranslations = {
|
|
|
2352
2243
|
* Generated bundle index. Do not edit.
|
|
2353
2244
|
*/
|
|
2354
2245
|
|
|
2355
|
-
export { ButtonBlurLift, ButtonEnumColor, ButtonFlip, ButtonGlideOver, DuckDevInput, DuckDevLibTranslations, DuckDevTab, DuckDevTabVertical, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage };
|
|
2246
|
+
export { ButtonBlurLift, ButtonEnumColor, ButtonFlip, ButtonGlideOver, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage };
|
|
2356
2247
|
//# sourceMappingURL=duck-dev-lib.mjs.map
|