duck-dev-lib 0.0.29 → 0.0.31
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-BfbNUZFJ.mjs → duck-dev-lib-en-D3xSOZcG.mjs} +47 -2
- package/fesm2022/{duck-dev-lib-ru-06o10qCz.mjs.map → duck-dev-lib-en-D3xSOZcG.mjs.map} +1 -1
- package/fesm2022/{duck-dev-lib-ru-06o10qCz.mjs → duck-dev-lib-ru-yPN1VRKz.mjs} +47 -2
- package/fesm2022/{duck-dev-lib-en-BfbNUZFJ.mjs.map → duck-dev-lib-ru-yPN1VRKz.mjs.map} +1 -1
- package/fesm2022/duck-dev-lib.mjs +47 -48
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/duck-dev-lib.d.ts +7 -1
|
@@ -418,6 +418,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
418
418
|
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(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"] }]
|
|
419
419
|
}], 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 }] }] } });
|
|
420
420
|
|
|
421
|
+
class DuckDevCardSection {
|
|
422
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
423
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: DuckDevCardSection, isStandalone: true, selector: "dd-card-section", ngImport: i0, template: "<section class=\"component-section\">\n <ng-content/>\n</section>\n", styles: [".component-section{margin-bottom:10rem;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}\n"] });
|
|
424
|
+
}
|
|
425
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardSection, decorators: [{
|
|
426
|
+
type: Component,
|
|
427
|
+
args: [{ selector: 'dd-card-section', standalone: true, imports: [], template: "<section class=\"component-section\">\n <ng-content/>\n</section>\n", styles: [".component-section{margin-bottom:10rem;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}\n"] }]
|
|
428
|
+
}] });
|
|
429
|
+
|
|
421
430
|
class ButtonBlock {
|
|
422
431
|
colorViolet = AccentEnumColor.Violet;
|
|
423
432
|
colorOrange = AccentEnumColor.Orange;
|
|
@@ -425,11 +434,11 @@ class ButtonBlock {
|
|
|
425
434
|
colorGray = AccentEnumColor.Gray;
|
|
426
435
|
colorDark = AccentEnumColor.Dark;
|
|
427
436
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
428
|
-
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>\n <strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) -\n {{ 'buttons.glideOver.inputTextButton' | transloco }}\n </li>\n <li>\n <strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}\n </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>\n <strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) -\n {{ 'buttons.blurLift.inputTextButton' | transloco }}\n </li>\n <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n <li>\n <strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}\n </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\n textButton=\"Click Me\"\n [hoverText]=\"'Action!'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Hover\"\n [hoverText]=\"'Orange!'\"\n [colorButton]=\"colorOrange\"\n />\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\n textButton=\"Gray Button\"\n [hoverText]=\"'Hover'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Dark Button\"\n [hoverText]=\"'Magic!'\"\n [colorButton]=\"colorDark\"\n />\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\n [text]=\"'Prev'\"\n [direction]=\"'previous'\"\n [colorButton]=\"colorGray\"\n />\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 <!-- Button Casper -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.casper.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.casper.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-casper\n [text]=\"'Text'\"\n [isDisabled]=\"false\"\n [colorButton]=\"buttonColor\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.casper.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> \u2014 {{ 'buttons.casper.inputText' | transloco }}</li>\n <li><strong>isDisabled</strong> \u2014 {{ 'buttons.casper.inputIsDisabled' | transloco }}</li>\n <li><strong>colorButton</strong> \u2014 {{ 'buttons.casper.inputColorButton' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleWhite' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleViolet' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleOrange' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleGray' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleDark' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\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: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
437
|
+
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 <dd-card-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>\n <strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) -\n {{ 'buttons.glideOver.inputTextButton' | transloco }}\n </li>\n <li>\n <strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}\n </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 </dd-card-section>\n\n <!-- Button Blur Lift -->\n <dd-card-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>\n <strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) -\n {{ 'buttons.blurLift.inputTextButton' | transloco }}\n </li>\n <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n <li>\n <strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}\n </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\n textButton=\"Click Me\"\n [hoverText]=\"'Action!'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Hover\"\n [hoverText]=\"'Orange!'\"\n [colorButton]=\"colorOrange\"\n />\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\n textButton=\"Gray Button\"\n [hoverText]=\"'Hover'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Dark Button\"\n [hoverText]=\"'Magic!'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <!-- Button Color Flip -->\n <dd-card-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\n [text]=\"'Prev'\"\n [direction]=\"'previous'\"\n [colorButton]=\"colorGray\"\n />\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 </dd-card-section>\n <!-- Button Casper -->\n <dd-card-section>\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.casper.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.casper.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-casper\n [text]=\"'Text'\"\n [isDisabled]=\"false\"\n [colorButton]=\"buttonColor\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.casper.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> \u2014 {{ 'buttons.casper.inputText' | transloco }}</li>\n <li><strong>isDisabled</strong> \u2014 {{ 'buttons.casper.inputIsDisabled' | transloco }}</li>\n <li><strong>colorButton</strong> \u2014 {{ 'buttons.casper.inputColorButton' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleWhite' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleViolet' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleOrange' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleGray' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleDark' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-button-glide-over,.demo-container .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: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
429
438
|
}
|
|
430
439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, decorators: [{
|
|
431
440
|
type: Component,
|
|
432
|
-
args: [{ selector: 'app-button-block', imports: [ButtonBlurLift, ButtonGlideOver, TranslocoPipe, ButtonFlip, ButtonCasper], 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>\n <strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) -\n {{ 'buttons.glideOver.inputTextButton' | transloco }}\n </li>\n <li>\n <strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}\n </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>\n <strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) -\n {{ 'buttons.blurLift.inputTextButton' | transloco }}\n </li>\n <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n <li>\n <strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}\n </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\n textButton=\"Click Me\"\n [hoverText]=\"'Action!'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Hover\"\n [hoverText]=\"'Orange!'\"\n [colorButton]=\"colorOrange\"\n />\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\n textButton=\"Gray Button\"\n [hoverText]=\"'Hover'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Dark Button\"\n [hoverText]=\"'Magic!'\"\n [colorButton]=\"colorDark\"\n />\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\n [text]=\"'Prev'\"\n [direction]=\"'previous'\"\n [colorButton]=\"colorGray\"\n />\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 <!-- Button Casper -->\n <section class=\"component-section\">\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.casper.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.casper.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-casper\n [text]=\"'Text'\"\n [isDisabled]=\"false\"\n [colorButton]=\"buttonColor\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.casper.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> \u2014 {{ 'buttons.casper.inputText' | transloco }}</li>\n <li><strong>isDisabled</strong> \u2014 {{ 'buttons.casper.inputIsDisabled' | transloco }}</li>\n <li><strong>colorButton</strong> \u2014 {{ 'buttons.casper.inputColorButton' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleWhite' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleViolet' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleOrange' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleGray' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleDark' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\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"] }]
|
|
441
|
+
args: [{ selector: 'app-button-block', imports: [ButtonBlurLift, ButtonGlideOver, TranslocoPipe, ButtonFlip, ButtonCasper, DuckDevCardSection], template: "<div class=\"demo-container\">\n <h1>{{ 'buttons.title' | transloco }}</h1>\n\n <!-- Button Glide Over -->\n <dd-card-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>\n <strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) -\n {{ 'buttons.glideOver.inputTextButton' | transloco }}\n </li>\n <li>\n <strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}\n </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 </dd-card-section>\n\n <!-- Button Blur Lift -->\n <dd-card-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>\n <strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) -\n {{ 'buttons.blurLift.inputTextButton' | transloco }}\n </li>\n <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n <li>\n <strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}\n </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\n textButton=\"Click Me\"\n [hoverText]=\"'Action!'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Hover\"\n [hoverText]=\"'Orange!'\"\n [colorButton]=\"colorOrange\"\n />\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\n textButton=\"Gray Button\"\n [hoverText]=\"'Hover'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n <duck-dev-button-blur-lift\n textButton=\"Dark Button\"\n [hoverText]=\"'Magic!'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <!-- Button Color Flip -->\n <dd-card-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\n [text]=\"'Prev'\"\n [direction]=\"'previous'\"\n [colorButton]=\"colorGray\"\n />\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 </dd-card-section>\n <!-- Button Casper -->\n <dd-card-section>\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.casper.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.casper.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-casper\n [text]=\"'Text'\"\n [isDisabled]=\"false\"\n [colorButton]=\"buttonColor\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.casper.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> \u2014 {{ 'buttons.casper.inputText' | transloco }}</li>\n <li><strong>isDisabled</strong> \u2014 {{ 'buttons.casper.inputIsDisabled' | transloco }}</li>\n <li><strong>colorButton</strong> \u2014 {{ 'buttons.casper.inputColorButton' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleWhite' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleViolet' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleOrange' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleGray' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.casper.exampleDark' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </div>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-button-glide-over,.demo-container .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"] }]
|
|
433
442
|
}] });
|
|
434
443
|
|
|
435
444
|
class LoaderBlock {
|
|
@@ -2100,11 +2109,11 @@ class DuckDevSvgBlock {
|
|
|
2100
2109
|
this.page.set(p + 1);
|
|
2101
2110
|
}
|
|
2102
2111
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSvgBlock, deps: [{ token: i1$1.DomSanitizer }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
2103
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSvgBlock, isStandalone: true, selector: "app-duck-dev-svg-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <
|
|
2112
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSvgBlock, isStandalone: true, selector: "app-duck-dev-svg-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n <div class=\"icons-toolbar\">\n <duck-dev-input\n [form]=\"searchForm\"\n controlName=\"search\"\n [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n type=\"text\"\n />\n <div class=\"icons-stats\">\n Page {{ page() }} / {{ totalPages() }} \u2022 Showing\n {{ paginatedIcons().length === 0 ? 0 : (page() - 1) * pageSize + 1 }}\u2013\n {{ (page() - 1) * pageSize + paginatedIcons().length }}\n of {{ filteredIcons().length }}\n </div>\n </div>\n\n @if (filteredIcons().length === 0) {\n <p>No icons found.</p>\n } @else {\n <div class=\"icons-showcase\">\n @for (icon of paginatedIcons(); track icon.id) {\n <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code\n class=\"icon-tag\"\n [title]=\"\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n \"\n ><{{ icon.id }}></code\n >\n <div class=\"copy-hint\">\n {{\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n }}\n </div>\n </div>\n }\n </div>\n\n <div class=\"pagination-controls\">\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n (click)=\"prevPage()\"\n [direction]=\"'previous'\"\n ></duck-dev-button-flip>\n <span>Page {{ page() }} of {{ totalPages() }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n </div>\n }\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"], dependencies: [{ kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "errorMessage"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
2104
2113
|
}
|
|
2105
2114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSvgBlock, decorators: [{
|
|
2106
2115
|
type: Component,
|
|
2107
|
-
args: [{ selector: 'app-duck-dev-svg-block', imports: [TranslocoPipe, DuckDevInput, ButtonFlip], template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <
|
|
2116
|
+
args: [{ selector: 'app-duck-dev-svg-block', imports: [TranslocoPipe, DuckDevInput, ButtonFlip, DuckDevCardSection], template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n <div class=\"icons-toolbar\">\n <duck-dev-input\n [form]=\"searchForm\"\n controlName=\"search\"\n [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n type=\"text\"\n />\n <div class=\"icons-stats\">\n Page {{ page() }} / {{ totalPages() }} \u2022 Showing\n {{ paginatedIcons().length === 0 ? 0 : (page() - 1) * pageSize + 1 }}\u2013\n {{ (page() - 1) * pageSize + paginatedIcons().length }}\n of {{ filteredIcons().length }}\n </div>\n </div>\n\n @if (filteredIcons().length === 0) {\n <p>No icons found.</p>\n } @else {\n <div class=\"icons-showcase\">\n @for (icon of paginatedIcons(); track icon.id) {\n <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code\n class=\"icon-tag\"\n [title]=\"\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n \"\n ><{{ icon.id }}></code\n >\n <div class=\"copy-hint\">\n {{\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n }}\n </div>\n </div>\n }\n </div>\n\n <div class=\"pagination-controls\">\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n (click)=\"prevPage()\"\n [direction]=\"'previous'\"\n ></duck-dev-button-flip>\n <span>Page {{ page() }} of {{ totalPages() }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n </div>\n }\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"] }]
|
|
2108
2117
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: i1.FormBuilder }] });
|
|
2109
2118
|
|
|
2110
2119
|
class InputBlock {
|
|
@@ -2370,20 +2379,20 @@ class BadgeBlock {
|
|
|
2370
2379
|
return el;
|
|
2371
2380
|
}
|
|
2372
2381
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2373
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <
|
|
2382
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <dd-card-section>\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
2374
2383
|
}
|
|
2375
2384
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, decorators: [{
|
|
2376
2385
|
type: Component,
|
|
2377
|
-
args: [{ selector: 'app-badge-block', standalone: true, imports: [Badge, TranslocoPipe, DuckDevCardAccent, DdFlexDirectionDirective], template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <
|
|
2386
|
+
args: [{ selector: 'app-badge-block', standalone: true, imports: [Badge, TranslocoPipe, DuckDevCardAccent, DdFlexDirectionDirective, DuckDevCardSection], template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <dd-card-section>\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
2378
2387
|
}], ctorParameters: () => [] });
|
|
2379
2388
|
|
|
2380
2389
|
class DirectiveBlock {
|
|
2381
2390
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DirectiveBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2382
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: DirectiveBlock, isStandalone: true, selector: "app-directive-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n <
|
|
2391
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: DirectiveBlock, isStandalone: true, selector: "app-directive-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'directivesDoc.ddFlexTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'directivesDoc.ddFlexDescription' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n <pre><code><div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"12\" [justifyContent]=\"'space-between'\" [alignItems]=\"'center'\">\n <span>Item 1</span>\n <span>Item 2</span>\n</div></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n <ul>\n <li><strong>ddFlexDirection</strong> \u2013 {{ 'directivesDoc.inputDirection' | transloco }}</li>\n <li><strong>gap</strong> \u2013 {{ 'directivesDoc.inputGap' | transloco }}</li>\n <li><strong>justifyContent</strong> \u2013 {{ 'directivesDoc.inputJustify' | transloco }}</li>\n <li><strong>alignItems</strong> \u2013 {{ 'directivesDoc.inputAlign' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row8' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n <span class=\"chip\">A</span>\n <span class=\"chip\">B</span>\n <span class=\"chip\">C</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.col12' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'col'\" [gap]=\"12\">\n <span class=\"chip\">One</span>\n <span class=\"chip\">Two</span>\n <span class=\"chip\">Three</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row1rem' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"'1rem'\">\n <span class=\"chip\">Left</span>\n <span class=\"chip\">Right</span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\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 h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .demo-box{width:100%;min-height:60px;padding:12px;border-radius:8px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}@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: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
2383
2392
|
}
|
|
2384
2393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DirectiveBlock, decorators: [{
|
|
2385
2394
|
type: Component,
|
|
2386
|
-
args: [{ selector: 'app-directive-block', standalone: true, imports: [DdFlexDirectionDirective, TranslocoPipe], template: "<div class=\"demo-container\">\n <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n <
|
|
2395
|
+
args: [{ selector: 'app-directive-block', standalone: true, imports: [DdFlexDirectionDirective, TranslocoPipe, DuckDevCardSection], template: "<div class=\"demo-container\">\n <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'directivesDoc.ddFlexTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'directivesDoc.ddFlexDescription' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n <pre><code><div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"12\" [justifyContent]=\"'space-between'\" [alignItems]=\"'center'\">\n <span>Item 1</span>\n <span>Item 2</span>\n</div></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n <ul>\n <li><strong>ddFlexDirection</strong> \u2013 {{ 'directivesDoc.inputDirection' | transloco }}</li>\n <li><strong>gap</strong> \u2013 {{ 'directivesDoc.inputGap' | transloco }}</li>\n <li><strong>justifyContent</strong> \u2013 {{ 'directivesDoc.inputJustify' | transloco }}</li>\n <li><strong>alignItems</strong> \u2013 {{ 'directivesDoc.inputAlign' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row8' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n <span class=\"chip\">A</span>\n <span class=\"chip\">B</span>\n <span class=\"chip\">C</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.col12' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'col'\" [gap]=\"12\">\n <span class=\"chip\">One</span>\n <span class=\"chip\">Two</span>\n <span class=\"chip\">Three</span>\n </div>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'directivesDoc.row1rem' | transloco }}</p>\n <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"'1rem'\">\n <span class=\"chip\">Left</span>\n <span class=\"chip\">Right</span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\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 h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .demo-box{width:100%;min-height:60px;padding:12px;border-radius:8px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}@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"] }]
|
|
2387
2396
|
}] });
|
|
2388
2397
|
|
|
2389
2398
|
class DuckDevAccordionComponent {
|
|
@@ -2409,11 +2418,11 @@ class AccordionBlock {
|
|
|
2409
2418
|
colorGray = AccentEnumColor.Gray;
|
|
2410
2419
|
colorDark = AccentEnumColor.Dark;
|
|
2411
2420
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2412
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: AccordionBlock, isStandalone: true, selector: "app-accordion-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n
|
|
2421
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: AccordionBlock, isStandalone: true, selector: "app-accordion-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n<dd-card-section>\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n</dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
2413
2422
|
}
|
|
2414
2423
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, decorators: [{
|
|
2415
2424
|
type: Component,
|
|
2416
|
-
args: [{ selector: 'app-accordion-block', standalone: true, imports: [TranslocoPipe, DuckDevAccordionComponent], template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n
|
|
2425
|
+
args: [{ selector: 'app-accordion-block', standalone: true, imports: [TranslocoPipe, DuckDevAccordionComponent, DuckDevCardSection], template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n<dd-card-section>\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n</dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}@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"] }]
|
|
2417
2426
|
}] });
|
|
2418
2427
|
|
|
2419
2428
|
class SliderFlip {
|
|
@@ -2566,11 +2575,11 @@ class CardBlock {
|
|
|
2566
2575
|
return el;
|
|
2567
2576
|
}
|
|
2568
2577
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2569
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: CardBlock, isStandalone: true, selector: "app-card-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'cardDoc.title' | transloco }}</h1>\n\n <
|
|
2578
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: CardBlock, isStandalone: true, selector: "app-card-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'cardDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'cardDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n</dd-card-accent></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"exampleViolet.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"exampleOrange.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"exampleGray.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-accent [color]=\"colorDark\">\n <div [innerHTML]=\"exampleDark.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n </div>\n </dd-card-section>\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 h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
2570
2579
|
}
|
|
2571
2580
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, decorators: [{
|
|
2572
2581
|
type: Component,
|
|
2573
|
-
args: [{ selector: 'app-card-block', standalone: true, imports: [DuckDevCardAccent, TranslocoPipe], template: "<div class=\"demo-container\">\n <h1>{{ 'cardDoc.title' | transloco }}</h1>\n\n <
|
|
2582
|
+
args: [{ selector: 'app-card-block', standalone: true, imports: [DuckDevCardAccent, TranslocoPipe, DuckDevCardSection], template: "<div class=\"demo-container\">\n <h1>{{ 'cardDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'cardDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n</dd-card-accent></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"exampleViolet.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"exampleOrange.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"exampleGray.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-accent [color]=\"colorDark\">\n <div [innerHTML]=\"exampleDark.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n </div>\n </dd-card-section>\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 h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"] }]
|
|
2574
2583
|
}], ctorParameters: () => [] });
|
|
2575
2584
|
|
|
2576
2585
|
class DuckDevTooltip {
|
|
@@ -2578,7 +2587,6 @@ class DuckDevTooltip {
|
|
|
2578
2587
|
color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
2579
2588
|
placement = input('top', { ...(ngDevMode ? { debugName: "placement" } : {}) });
|
|
2580
2589
|
delayCloseMs = input(120, { ...(ngDevMode ? { debugName: "delayCloseMs" } : {}) });
|
|
2581
|
-
// Internal open state
|
|
2582
2590
|
open = signal(false, { ...(ngDevMode ? { debugName: "open" } : {}) });
|
|
2583
2591
|
closeTimer = null;
|
|
2584
2592
|
handleEnter() {
|
|
@@ -2588,7 +2596,6 @@ class DuckDevTooltip {
|
|
|
2588
2596
|
}
|
|
2589
2597
|
this.open.set(true);
|
|
2590
2598
|
}
|
|
2591
|
-
// close with delay (on mouseleave/focusout)
|
|
2592
2599
|
handleLeave() {
|
|
2593
2600
|
const delay = Math.max(0, this.delayCloseMs());
|
|
2594
2601
|
if (this.closeTimer) {
|
|
@@ -2597,55 +2604,46 @@ class DuckDevTooltip {
|
|
|
2597
2604
|
this.closeTimer = setTimeout(() => this.open.set(false), delay);
|
|
2598
2605
|
}
|
|
2599
2606
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2600
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTooltip, isStandalone: true, selector: "dd-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delayCloseMs: { classPropertyName: "delayCloseMs", publicName: "delayCloseMs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-tooltip\" (mouseenter)=\"handleEnter()\" (mouseleave)=\"handleLeave()\" (focusin)=\"handleEnter()\" (focusout)=\"handleLeave()\">\n <div class=\"dd-tooltip__trigger\">\n <ng-content />\n </div>\n\n @if(open()){\n <div class=\"dd-tooltip__bubble\"\n animate.enter=\"enterAnimation\"\n animate.leave=\"leaveAnimation\"\n [style.--dd-tooltip-anim-ms.ms]=\"delayCloseMs()\"\n [attr.data-placement]=\"placement()\" [attr.data-color]=\"color()\">\n <div class=\"dd-tooltip__arrow\" aria-hidden=\"true\"></div>\n <span class=\"dd-tooltip__text\">{{ text() }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip{position:relative;display:inline-block}.dd-tooltip__bubble{position:absolute;z-index:5;max-width:280px;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.3;border:1px solid transparent;box-shadow:0 6px 24px #0000001f;background:var(--dd-base-800);color:var(--dd-base-0);pointer-events:none;transform:translate(-50%,-8px)}.dd-tooltip__bubble[data-color=violet]{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=orange]{background:var(--dd-base-accent-orange);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=gray]{background:var(--dd-base-200);color:var(--dd-base-700);border-color:var(--dd-base-400)}.dd-tooltip__bubble[data-color=dark]{background:var(--dd-base-800);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=white]{background:var(--dd-base-0);color:var(--dd-base-700);border-color:var(--dd-base-300)}.dd-tooltip__bubble[data-placement=top],.dd-tooltip__bubble[data-placement=top-start],.dd-tooltip__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-8px)}.dd-tooltip__bubble[data-placement=top-start]{left:0;transform:translateY(-8px)}.dd-tooltip__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-8px)}.dd-tooltip__bubble[data-placement=bottom],.dd-tooltip__bubble[data-placement=bottom-start],.dd-tooltip__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,8px)}.dd-tooltip__bubble[data-placement=bottom-start]{left:0;transform:translateY(8px)}.dd-tooltip__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,8px)}.dd-tooltip__bubble[data-placement=left],.dd-tooltip__bubble[data-placement=left-start],.dd-tooltip__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-8px,-50%)}.dd-tooltip__bubble[data-placement=left-start]{top:0;transform:translate(-8px)}.dd-tooltip__bubble[data-placement=left-end]{top:100%;transform:translate(-8px,-100%)}.dd-tooltip__bubble[data-placement=right],.dd-tooltip__bubble[data-placement=right-start],.dd-tooltip__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(8px,-50%)}.dd-tooltip__bubble[data-placement=right-start]{top:0;transform:translate(8px)}.dd-tooltip__bubble[data-placement=right-end]{top:100%;transform:translate(8px,-100%)}.dd-tooltip__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background:inherit;border:inherit}.dd-tooltip__bubble[data-placement=top]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=top-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=top-end]>.dd-tooltip__arrow{bottom:-4px}.dd-tooltip__bubble[data-placement=top]>.dd-tooltip__arrow{left:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=top-start]>.dd-tooltip__arrow{left:8px}.dd-tooltip__bubble[data-placement=top-end]>.dd-tooltip__arrow{right:8px}.dd-tooltip__bubble[data-placement=bottom]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=bottom-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=bottom-end]>.dd-tooltip__arrow{top:-4px}.dd-tooltip__bubble[data-placement=bottom]>.dd-tooltip__arrow{left:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=bottom-start]>.dd-tooltip__arrow{left:8px}.dd-tooltip__bubble[data-placement=bottom-end]>.dd-tooltip__arrow{right:8px}.dd-tooltip__bubble[data-placement=left]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=left-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=left-end]>.dd-tooltip__arrow{right:-4px}.dd-tooltip__bubble[data-placement=left]>.dd-tooltip__arrow{top:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=left-start]>.dd-tooltip__arrow{top:8px}.dd-tooltip__bubble[data-placement=left-end]>.dd-tooltip__arrow{bottom:8px}.dd-tooltip__bubble[data-placement=right]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=right-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=right-end]>.dd-tooltip__arrow{left:-4px}.dd-tooltip__bubble[data-placement=right]>.dd-tooltip__arrow{top:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=right-start]>.dd-tooltip__arrow{top:8px}.dd-tooltip__bubble[data-placement=right-end]>.dd-tooltip__arrow{bottom:8px}.enterAnimation{animation:enter-animation var(--dd-tooltip-anim-ms, .3s) ease-in}@keyframes enter-animation{0%{opacity:0}to{opacity:1}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}\n"] });
|
|
2607
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTooltip, isStandalone: true, selector: "dd-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delayCloseMs: { classPropertyName: "delayCloseMs", publicName: "delayCloseMs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-tooltip\" (mouseenter)=\"handleEnter()\" (mouseleave)=\"handleLeave()\" (focusin)=\"handleEnter()\" (focusout)=\"handleLeave()\">\n <div class=\"dd-tooltip__trigger\">\n <ng-content />\n </div>\n\n @if(open()){\n <div class=\"dd-tooltip__bubble\"\n animate.enter=\"enterAnimation\"\n animate.leave=\"leaveAnimation\"\n [style.--dd-tooltip-anim-ms.ms]=\"delayCloseMs()\"\n [attr.data-placement]=\"placement()\" [attr.data-color]=\"color()\">\n <div class=\"dd-tooltip__arrow\" aria-hidden=\"true\"></div>\n <span class=\"dd-tooltip__text\">{{ text() }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip{position:relative;display:inline-block}.dd-tooltip__bubble{position:absolute;z-index:5;max-width:280px;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.3;border:1px solid transparent;box-shadow:0 6px 24px #0000001f;background:var(--dd-base-800);color:var(--dd-base-0);pointer-events:none;transform:translate(-50%,-8px)}.dd-tooltip__bubble[data-color=violet]{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=orange]{background:var(--dd-base-accent-orange);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=gray]{background:var(--dd-base-200);color:var(--dd-base-700);border-color:var(--dd-base-400)}.dd-tooltip__bubble[data-color=dark]{background:var(--dd-base-800);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=white]{background:var(--dd-base-0);color:var(--dd-base-700);border-color:var(--dd-base-300)}.dd-tooltip__bubble[data-placement=top],.dd-tooltip__bubble[data-placement=top-start],.dd-tooltip__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-8px)}.dd-tooltip__bubble[data-placement=top-start]{left:0;transform:translateY(-8px)}.dd-tooltip__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-8px)}.dd-tooltip__bubble[data-placement=bottom],.dd-tooltip__bubble[data-placement=bottom-start],.dd-tooltip__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,8px)}.dd-tooltip__bubble[data-placement=bottom-start]{left:0;transform:translateY(8px)}.dd-tooltip__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,8px)}.dd-tooltip__bubble[data-placement=left],.dd-tooltip__bubble[data-placement=left-start],.dd-tooltip__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-8px,-50%)}.dd-tooltip__bubble[data-placement=left-start]{top:0;transform:translate(-8px)}.dd-tooltip__bubble[data-placement=left-end]{top:100%;transform:translate(-8px,-100%)}.dd-tooltip__bubble[data-placement=right],.dd-tooltip__bubble[data-placement=right-start],.dd-tooltip__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(8px,-50%)}.dd-tooltip__bubble[data-placement=right-start]{top:0;transform:translate(8px)}.dd-tooltip__bubble[data-placement=right-end]{top:100%;transform:translate(8px,-100%)}.dd-tooltip__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg)}.dd-tooltip__arrow:before,.dd-tooltip__arrow:after{content:\"\";position:absolute;inset:0;transform:none}.dd-tooltip__arrow:before{background:inherit}.dd-tooltip__arrow:after{inset:-1px;background:transparent;border:inherit}.dd-tooltip__bubble[data-placement=top]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=top-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=top-end]>.dd-tooltip__arrow{bottom:-4px}.dd-tooltip__bubble[data-placement=top]>.dd-tooltip__arrow{left:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=top-start]>.dd-tooltip__arrow{left:8px}.dd-tooltip__bubble[data-placement=top-end]>.dd-tooltip__arrow{right:8px}.dd-tooltip__bubble[data-placement=bottom]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=bottom-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=bottom-end]>.dd-tooltip__arrow{top:-4px}.dd-tooltip__bubble[data-placement=bottom]>.dd-tooltip__arrow{left:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=bottom-start]>.dd-tooltip__arrow{left:8px}.dd-tooltip__bubble[data-placement=bottom-end]>.dd-tooltip__arrow{right:8px}.dd-tooltip__bubble[data-placement=left]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=left-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=left-end]>.dd-tooltip__arrow{right:-4px}.dd-tooltip__bubble[data-placement=left]>.dd-tooltip__arrow{top:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=left-start]>.dd-tooltip__arrow{top:8px}.dd-tooltip__bubble[data-placement=left-end]>.dd-tooltip__arrow{bottom:8px}.dd-tooltip__bubble[data-placement=right]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=right-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=right-end]>.dd-tooltip__arrow{left:-4px}.dd-tooltip__bubble[data-placement=right]>.dd-tooltip__arrow{top:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=right-start]>.dd-tooltip__arrow{top:8px}.dd-tooltip__bubble[data-placement=right-end]>.dd-tooltip__arrow{bottom:8px}.enterAnimation{animation:enter-animation var(--dd-tooltip-anim-ms, .3s) ease-in}@keyframes enter-animation{0%{opacity:0}to{opacity:1}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}\n"] });
|
|
2601
2608
|
}
|
|
2602
2609
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTooltip, decorators: [{
|
|
2603
2610
|
type: Component,
|
|
2604
|
-
args: [{ selector: 'dd-tooltip', standalone: true, imports: [], template: "<div class=\"dd-tooltip\" (mouseenter)=\"handleEnter()\" (mouseleave)=\"handleLeave()\" (focusin)=\"handleEnter()\" (focusout)=\"handleLeave()\">\n <div class=\"dd-tooltip__trigger\">\n <ng-content />\n </div>\n\n @if(open()){\n <div class=\"dd-tooltip__bubble\"\n animate.enter=\"enterAnimation\"\n animate.leave=\"leaveAnimation\"\n [style.--dd-tooltip-anim-ms.ms]=\"delayCloseMs()\"\n [attr.data-placement]=\"placement()\" [attr.data-color]=\"color()\">\n <div class=\"dd-tooltip__arrow\" aria-hidden=\"true\"></div>\n <span class=\"dd-tooltip__text\">{{ text() }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip{position:relative;display:inline-block}.dd-tooltip__bubble{position:absolute;z-index:5;max-width:280px;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.3;border:1px solid transparent;box-shadow:0 6px 24px #0000001f;background:var(--dd-base-800);color:var(--dd-base-0);pointer-events:none;transform:translate(-50%,-8px)}.dd-tooltip__bubble[data-color=violet]{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=orange]{background:var(--dd-base-accent-orange);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=gray]{background:var(--dd-base-200);color:var(--dd-base-700);border-color:var(--dd-base-400)}.dd-tooltip__bubble[data-color=dark]{background:var(--dd-base-800);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=white]{background:var(--dd-base-0);color:var(--dd-base-700);border-color:var(--dd-base-300)}.dd-tooltip__bubble[data-placement=top],.dd-tooltip__bubble[data-placement=top-start],.dd-tooltip__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-8px)}.dd-tooltip__bubble[data-placement=top-start]{left:0;transform:translateY(-8px)}.dd-tooltip__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-8px)}.dd-tooltip__bubble[data-placement=bottom],.dd-tooltip__bubble[data-placement=bottom-start],.dd-tooltip__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,8px)}.dd-tooltip__bubble[data-placement=bottom-start]{left:0;transform:translateY(8px)}.dd-tooltip__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,8px)}.dd-tooltip__bubble[data-placement=left],.dd-tooltip__bubble[data-placement=left-start],.dd-tooltip__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-8px,-50%)}.dd-tooltip__bubble[data-placement=left-start]{top:0;transform:translate(-8px)}.dd-tooltip__bubble[data-placement=left-end]{top:100%;transform:translate(-8px,-100%)}.dd-tooltip__bubble[data-placement=right],.dd-tooltip__bubble[data-placement=right-start],.dd-tooltip__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(8px,-50%)}.dd-tooltip__bubble[data-placement=right-start]{top:0;transform:translate(8px)}.dd-tooltip__bubble[data-placement=right-end]{top:100%;transform:translate(8px,-100%)}.dd-tooltip__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background:inherit;border:inherit}.dd-tooltip__bubble[data-placement=top]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=top-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=top-end]>.dd-tooltip__arrow{bottom:-4px}.dd-tooltip__bubble[data-placement=top]>.dd-tooltip__arrow{left:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=top-start]>.dd-tooltip__arrow{left:8px}.dd-tooltip__bubble[data-placement=top-end]>.dd-tooltip__arrow{right:8px}.dd-tooltip__bubble[data-placement=bottom]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=bottom-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=bottom-end]>.dd-tooltip__arrow{top:-4px}.dd-tooltip__bubble[data-placement=bottom]>.dd-tooltip__arrow{left:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=bottom-start]>.dd-tooltip__arrow{left:8px}.dd-tooltip__bubble[data-placement=bottom-end]>.dd-tooltip__arrow{right:8px}.dd-tooltip__bubble[data-placement=left]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=left-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=left-end]>.dd-tooltip__arrow{right:-4px}.dd-tooltip__bubble[data-placement=left]>.dd-tooltip__arrow{top:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=left-start]>.dd-tooltip__arrow{top:8px}.dd-tooltip__bubble[data-placement=left-end]>.dd-tooltip__arrow{bottom:8px}.dd-tooltip__bubble[data-placement=right]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=right-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=right-end]>.dd-tooltip__arrow{left:-4px}.dd-tooltip__bubble[data-placement=right]>.dd-tooltip__arrow{top:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=right-start]>.dd-tooltip__arrow{top:8px}.dd-tooltip__bubble[data-placement=right-end]>.dd-tooltip__arrow{bottom:8px}.enterAnimation{animation:enter-animation var(--dd-tooltip-anim-ms, .3s) ease-in}@keyframes enter-animation{0%{opacity:0}to{opacity:1}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
2611
|
+
args: [{ selector: 'dd-tooltip', standalone: true, imports: [], template: "<div class=\"dd-tooltip\" (mouseenter)=\"handleEnter()\" (mouseleave)=\"handleLeave()\" (focusin)=\"handleEnter()\" (focusout)=\"handleLeave()\">\n <div class=\"dd-tooltip__trigger\">\n <ng-content />\n </div>\n\n @if(open()){\n <div class=\"dd-tooltip__bubble\"\n animate.enter=\"enterAnimation\"\n animate.leave=\"leaveAnimation\"\n [style.--dd-tooltip-anim-ms.ms]=\"delayCloseMs()\"\n [attr.data-placement]=\"placement()\" [attr.data-color]=\"color()\">\n <div class=\"dd-tooltip__arrow\" aria-hidden=\"true\"></div>\n <span class=\"dd-tooltip__text\">{{ text() }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip{position:relative;display:inline-block}.dd-tooltip__bubble{position:absolute;z-index:5;max-width:280px;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.3;border:1px solid transparent;box-shadow:0 6px 24px #0000001f;background:var(--dd-base-800);color:var(--dd-base-0);pointer-events:none;transform:translate(-50%,-8px)}.dd-tooltip__bubble[data-color=violet]{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=orange]{background:var(--dd-base-accent-orange);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=gray]{background:var(--dd-base-200);color:var(--dd-base-700);border-color:var(--dd-base-400)}.dd-tooltip__bubble[data-color=dark]{background:var(--dd-base-800);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=white]{background:var(--dd-base-0);color:var(--dd-base-700);border-color:var(--dd-base-300)}.dd-tooltip__bubble[data-placement=top],.dd-tooltip__bubble[data-placement=top-start],.dd-tooltip__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-8px)}.dd-tooltip__bubble[data-placement=top-start]{left:0;transform:translateY(-8px)}.dd-tooltip__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-8px)}.dd-tooltip__bubble[data-placement=bottom],.dd-tooltip__bubble[data-placement=bottom-start],.dd-tooltip__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,8px)}.dd-tooltip__bubble[data-placement=bottom-start]{left:0;transform:translateY(8px)}.dd-tooltip__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,8px)}.dd-tooltip__bubble[data-placement=left],.dd-tooltip__bubble[data-placement=left-start],.dd-tooltip__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-8px,-50%)}.dd-tooltip__bubble[data-placement=left-start]{top:0;transform:translate(-8px)}.dd-tooltip__bubble[data-placement=left-end]{top:100%;transform:translate(-8px,-100%)}.dd-tooltip__bubble[data-placement=right],.dd-tooltip__bubble[data-placement=right-start],.dd-tooltip__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(8px,-50%)}.dd-tooltip__bubble[data-placement=right-start]{top:0;transform:translate(8px)}.dd-tooltip__bubble[data-placement=right-end]{top:100%;transform:translate(8px,-100%)}.dd-tooltip__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg)}.dd-tooltip__arrow:before,.dd-tooltip__arrow:after{content:\"\";position:absolute;inset:0;transform:none}.dd-tooltip__arrow:before{background:inherit}.dd-tooltip__arrow:after{inset:-1px;background:transparent;border:inherit}.dd-tooltip__bubble[data-placement=top]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=top-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=top-end]>.dd-tooltip__arrow{bottom:-4px}.dd-tooltip__bubble[data-placement=top]>.dd-tooltip__arrow{left:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=top-start]>.dd-tooltip__arrow{left:8px}.dd-tooltip__bubble[data-placement=top-end]>.dd-tooltip__arrow{right:8px}.dd-tooltip__bubble[data-placement=bottom]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=bottom-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=bottom-end]>.dd-tooltip__arrow{top:-4px}.dd-tooltip__bubble[data-placement=bottom]>.dd-tooltip__arrow{left:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=bottom-start]>.dd-tooltip__arrow{left:8px}.dd-tooltip__bubble[data-placement=bottom-end]>.dd-tooltip__arrow{right:8px}.dd-tooltip__bubble[data-placement=left]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=left-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=left-end]>.dd-tooltip__arrow{right:-4px}.dd-tooltip__bubble[data-placement=left]>.dd-tooltip__arrow{top:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=left-start]>.dd-tooltip__arrow{top:8px}.dd-tooltip__bubble[data-placement=left-end]>.dd-tooltip__arrow{bottom:8px}.dd-tooltip__bubble[data-placement=right]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=right-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=right-end]>.dd-tooltip__arrow{left:-4px}.dd-tooltip__bubble[data-placement=right]>.dd-tooltip__arrow{top:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=right-start]>.dd-tooltip__arrow{top:8px}.dd-tooltip__bubble[data-placement=right-end]>.dd-tooltip__arrow{bottom:8px}.enterAnimation{animation:enter-animation var(--dd-tooltip-anim-ms, .3s) ease-in}@keyframes enter-animation{0%{opacity:0}to{opacity:1}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
2605
2612
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], delayCloseMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "delayCloseMs", required: false }] }] } });
|
|
2606
2613
|
|
|
2607
2614
|
class TooltipBlock {
|
|
2608
|
-
t = inject(TranslocoService);
|
|
2609
2615
|
colorViolet = AccentEnumColor.Violet;
|
|
2610
2616
|
colorOrange = AccentEnumColor.Orange;
|
|
2611
2617
|
colorWhite = AccentEnumColor.White;
|
|
2612
2618
|
colorGray = AccentEnumColor.Gray;
|
|
2613
2619
|
colorDark = AccentEnumColor.Dark;
|
|
2614
|
-
// Description and inputs content elements
|
|
2615
|
-
descEl;
|
|
2616
|
-
inputTextEl;
|
|
2617
|
-
inputColorEl;
|
|
2618
|
-
inputPlacementEl;
|
|
2619
|
-
inputDelayEl;
|
|
2620
|
-
// Example descriptions
|
|
2621
|
-
exampleBasicEl;
|
|
2622
|
-
examplePlacementEl;
|
|
2623
|
-
constructor() {
|
|
2624
|
-
this.descEl = this.createEl(this.t.translate('tooltipDoc.basic.description'));
|
|
2625
|
-
this.inputTextEl = this.createEl(this.t.translate('tooltipDoc.inputsDesc.text'));
|
|
2626
|
-
this.inputColorEl = this.createEl(this.t.translate('tooltipDoc.inputsDesc.color'));
|
|
2627
|
-
this.inputPlacementEl = this.createEl(this.t.translate('tooltipDoc.inputsDesc.placement'));
|
|
2628
|
-
this.inputDelayEl = this.createEl(this.t.translate('tooltipDoc.inputsDesc.delay'));
|
|
2629
|
-
this.exampleBasicEl = this.createEl(this.t.translate('tooltipDoc.examplesDesc.basic'));
|
|
2630
|
-
this.examplePlacementEl = this.createEl(this.t.translate('tooltipDoc.examplesDesc.placement'));
|
|
2631
|
-
}
|
|
2632
|
-
createEl(html) {
|
|
2633
|
-
const el = document.createElement('div');
|
|
2634
|
-
el.innerHTML = html;
|
|
2635
|
-
return el;
|
|
2636
|
-
}
|
|
2637
2620
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2638
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: TooltipBlock, isStandalone: true, selector: "app-tooltip-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"
|
|
2621
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: TooltipBlock, isStandalone: true, selector: "app-tooltip-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n>\n <button>Hover me</button>\n</dd-tooltip></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n\n <!-- Filled maps for quick reference -->\n <ul>\n <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n <li><strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange, Gray, White.</li>\n <li><strong>placement:</strong> TooltipPlacement \u2014\n top | bottom | right | left | top-start | top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end\n </li>\n <li><strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse leave (default: 120).</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.basic' | transloco)\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.top' | transloco)\" [color]=\"colorViolet\" [placement]=\"'top'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.right' | transloco)\" [color]=\"colorOrange\" [placement]=\"'right'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.leftStart' | transloco)\" [color]=\"colorGray\" [placement]=\"'left-start'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.bottomEnd' | transloco)\" [color]=\"colorWhite\" [placement]=\"'bottom-end'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\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 .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .component-section .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-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}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevTooltip, selector: "dd-tooltip", inputs: ["text", "color", "placement", "delayCloseMs"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
2639
2622
|
}
|
|
2640
2623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipBlock, decorators: [{
|
|
2641
2624
|
type: Component,
|
|
2642
|
-
args: [{ selector: 'app-tooltip-block', standalone: true, imports: [DuckDevCardAccent, TranslocoPipe, DuckDevTooltip, DdFlexDirectionDirective], template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"
|
|
2643
|
-
}]
|
|
2625
|
+
args: [{ selector: 'app-tooltip-block', standalone: true, imports: [DuckDevCardAccent, TranslocoPipe, DuckDevTooltip, DdFlexDirectionDirective], template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n>\n <button>Hover me</button>\n</dd-tooltip></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n\n <!-- Filled maps for quick reference -->\n <ul>\n <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n <li><strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange, Gray, White.</li>\n <li><strong>placement:</strong> TooltipPlacement \u2014\n top | bottom | right | left | top-start | top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end\n </li>\n <li><strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse leave (default: 120).</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.basic' | transloco)\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.top' | transloco)\" [color]=\"colorViolet\" [placement]=\"'top'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.right' | transloco)\" [color]=\"colorOrange\" [placement]=\"'right'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.leftStart' | transloco)\" [color]=\"colorGray\" [placement]=\"'left-start'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.bottomEnd' | transloco)\" [color]=\"colorWhite\" [placement]=\"'bottom-end'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\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 .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .component-section .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-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}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
2626
|
+
}] });
|
|
2627
|
+
|
|
2628
|
+
class QuickStartBlock {
|
|
2629
|
+
colorViolet = AccentEnumColor.Violet;
|
|
2630
|
+
colorOrange = AccentEnumColor.Orange;
|
|
2631
|
+
colorWhite = AccentEnumColor.White;
|
|
2632
|
+
colorGray = AccentEnumColor.Gray;
|
|
2633
|
+
colorDark = AccentEnumColor.Dark;
|
|
2634
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QuickStartBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2635
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: QuickStartBlock, isStandalone: true, selector: "app-quick-start-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'quickStart.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <dd-card-accent [color]=\"colorWhite\">\n <div class=\"description\" [innerHTML]=\"'quickStart.intro' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div class=\"description\" [innerHTML]=\"'quickStart.principles' | transloco\"></div>\n </dd-card-accent>\n\n <h2>{{ 'quickStart.sections.install' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div class=\"description\">{{ 'quickStart.install.text' | transloco }}</div>\n </dd-card-accent>\n <div class=\"usage-block\">\n <pre><code>{{ 'quickStart.install.snippet' | transloco }}</code></pre>\n </div>\n\n <h2>{{ 'quickStart.sections.palette' | transloco }}</h2>\n <dd-card-accent [color]=\"colorViolet\">\n <div class=\"description\">{{ 'quickStart.palette.text' | transloco }}</div>\n </dd-card-accent>\n <div class=\"usage-block\">\n <pre><code>/* variables you can use in CSS */\n--dd-base-0 .. --dd-base-600\n--dd-base-secondary\n--dd-base-accent-orange\n--dd-base-accent-blue\n/* see projects/duck-dev-lib/src/styles/variables.scss for full list */\n</code></pre>\n </div>\n\n <h2>{{ 'quickStart.sections.themeSwitch' | transloco }}</h2>\n <ng-template #themeHtml>\n <pre><code>{{ 'quickStart.themeSwitch.snippet' | transloco }}</code></pre>\n </ng-template>\n <ng-template #themeToggle>\n <pre><code>{{ 'quickStart.themeSwitch.toggleSnippet' | transloco }}</code></pre>\n </ng-template>\n\n <dd-card-accent [color]=\"colorOrange\">\n <div class=\"description\">{{ 'quickStart.themeSwitch.text' | transloco }}</div>\n </dd-card-accent>\n\n <div class=\"examples-block\">\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'quickStart.themeSwitch.indexLabel' | transloco }}</p>\n <duck-dev-accordion [title]=\"('quickStart.themeSwitch.indexHtmlTitle' | transloco)\" [content]=\"themeHtml\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'quickStart.themeSwitch.toggleLabel' | transloco }}</p>\n <duck-dev-accordion [title]=\"('quickStart.themeSwitch.toggleTitle' | transloco)\" [content]=\"themeToggle\" [color]=\"colorViolet\" />\n </div>\n </div>\n </div>\n\n <h2>{{ 'quickStart.sections.custom' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div class=\"description\">{{ 'quickStart.custom.text' | transloco }}</div>\n </dd-card-accent>\n <div class=\"usage-block\">\n <pre><code>{{ 'quickStart.custom.snippet' | transloco }}</code></pre>\n </div>\n\n <h2>{{ 'quickStart.sections.use' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div class=\"description\">{{ 'quickStart.use.text' | transloco }}</div>\n </dd-card-accent>\n\n <div class=\"examples-block\">\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'quickStart.use.buttonsTitle' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n <duck-dev-button-casper [text]=\"'Orange'\" [colorButton]=\"colorOrange\" />\n <duck-dev-button-casper [text]=\"'Dark'\" [colorButton]=\"colorDark\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'quickStart.use.cardsTitle' | transloco }}</p>\n <dd-card-accent [color]=\"colorViolet\">\n <div>Violet card accent</div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div>Orange card accent</div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div>Gray card accent</div>\n </dd-card-accent>\n </div>\n </div>\n </div>\n </section>\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 .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}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
2636
|
+
}
|
|
2637
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QuickStartBlock, decorators: [{
|
|
2638
|
+
type: Component,
|
|
2639
|
+
args: [{ selector: 'app-quick-start-block', standalone: true, imports: [TranslocoPipe, DuckDevCardAccent, DuckDevAccordionComponent, ButtonCasper,], template: "<div class=\"demo-container\">\n <h1>{{ 'quickStart.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <dd-card-accent [color]=\"colorWhite\">\n <div class=\"description\" [innerHTML]=\"'quickStart.intro' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div class=\"description\" [innerHTML]=\"'quickStart.principles' | transloco\"></div>\n </dd-card-accent>\n\n <h2>{{ 'quickStart.sections.install' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div class=\"description\">{{ 'quickStart.install.text' | transloco }}</div>\n </dd-card-accent>\n <div class=\"usage-block\">\n <pre><code>{{ 'quickStart.install.snippet' | transloco }}</code></pre>\n </div>\n\n <h2>{{ 'quickStart.sections.palette' | transloco }}</h2>\n <dd-card-accent [color]=\"colorViolet\">\n <div class=\"description\">{{ 'quickStart.palette.text' | transloco }}</div>\n </dd-card-accent>\n <div class=\"usage-block\">\n <pre><code>/* variables you can use in CSS */\n--dd-base-0 .. --dd-base-600\n--dd-base-secondary\n--dd-base-accent-orange\n--dd-base-accent-blue\n/* see projects/duck-dev-lib/src/styles/variables.scss for full list */\n</code></pre>\n </div>\n\n <h2>{{ 'quickStart.sections.themeSwitch' | transloco }}</h2>\n <ng-template #themeHtml>\n <pre><code>{{ 'quickStart.themeSwitch.snippet' | transloco }}</code></pre>\n </ng-template>\n <ng-template #themeToggle>\n <pre><code>{{ 'quickStart.themeSwitch.toggleSnippet' | transloco }}</code></pre>\n </ng-template>\n\n <dd-card-accent [color]=\"colorOrange\">\n <div class=\"description\">{{ 'quickStart.themeSwitch.text' | transloco }}</div>\n </dd-card-accent>\n\n <div class=\"examples-block\">\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'quickStart.themeSwitch.indexLabel' | transloco }}</p>\n <duck-dev-accordion [title]=\"('quickStart.themeSwitch.indexHtmlTitle' | transloco)\" [content]=\"themeHtml\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'quickStart.themeSwitch.toggleLabel' | transloco }}</p>\n <duck-dev-accordion [title]=\"('quickStart.themeSwitch.toggleTitle' | transloco)\" [content]=\"themeToggle\" [color]=\"colorViolet\" />\n </div>\n </div>\n </div>\n\n <h2>{{ 'quickStart.sections.custom' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div class=\"description\">{{ 'quickStart.custom.text' | transloco }}</div>\n </dd-card-accent>\n <div class=\"usage-block\">\n <pre><code>{{ 'quickStart.custom.snippet' | transloco }}</code></pre>\n </div>\n\n <h2>{{ 'quickStart.sections.use' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div class=\"description\">{{ 'quickStart.use.text' | transloco }}</div>\n </dd-card-accent>\n\n <div class=\"examples-block\">\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'quickStart.use.buttonsTitle' | transloco }}</p>\n <duck-dev-button-casper [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n <duck-dev-button-casper [text]=\"'Orange'\" [colorButton]=\"colorOrange\" />\n <duck-dev-button-casper [text]=\"'Dark'\" [colorButton]=\"colorDark\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'quickStart.use.cardsTitle' | transloco }}</p>\n <dd-card-accent [color]=\"colorViolet\">\n <div>Violet card accent</div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div>Orange card accent</div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div>Gray card accent</div>\n </dd-card-accent>\n </div>\n </div>\n </div>\n </section>\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 .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}@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"] }]
|
|
2640
|
+
}] });
|
|
2644
2641
|
|
|
2645
2642
|
class MainDocumentationPage {
|
|
2646
2643
|
translocoService = inject(TranslocoService);
|
|
2647
2644
|
title = signal('demo', { ...(ngDevMode ? { debugName: "title" } : {}) });
|
|
2648
2645
|
tabs = [
|
|
2646
|
+
{ id: 'quick-start', label: this.translocoService.translate('tabs.quick-start') },
|
|
2649
2647
|
{ id: 'accordion', label: this.translocoService.translate('tabs.accordion') },
|
|
2650
2648
|
{ id: 'buttons', label: this.translocoService.translate('tabs.buttons') },
|
|
2651
2649
|
{ id: 'loaders', label: this.translocoService.translate('tabs.loaders') },
|
|
@@ -2664,7 +2662,7 @@ class MainDocumentationPage {
|
|
|
2664
2662
|
this.activeTab.set(tab);
|
|
2665
2663
|
}
|
|
2666
2664
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2667
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('accordion') {\n <app-accordion-block />\n }\n @case ('buttons') {\n <app-button-block />\n }\n @case ('loaders') {\n <app-loader-block />\n }\n @case ('tabs') {\n <app-tabs-block />\n }\n @case ('tooltip'){\n <app-tooltip-block />\n }\n @case ('badge') {\n <app-badge-block />\n }\n @case ('directives') {\n <app-directive-block />\n }\n @case ('card') {\n <app-card-block />\n }\n @case ('input') {\n <app-input-block />\n }\n @case ('notifications') {\n <app-notification-block />\n }\n @case ('slider') {\n <app-slider-block />\n }\n @case ('svg') {\n <app-duck-dev-svg-block />\n }\n }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }, { kind: "component", type: TooltipBlock, selector: "app-tooltip-block" }] });
|
|
2665
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('quick-start'){\n <app-quick-start-block />\n }\n @case ('accordion') {\n <app-accordion-block />\n }\n @case ('buttons') {\n <app-button-block />\n }\n @case ('loaders') {\n <app-loader-block />\n }\n @case ('tabs') {\n <app-tabs-block />\n }\n @case ('tooltip'){\n <app-tooltip-block />\n }\n @case ('badge') {\n <app-badge-block />\n }\n @case ('directives') {\n <app-directive-block />\n }\n @case ('card') {\n <app-card-block />\n }\n @case ('input') {\n <app-input-block />\n }\n @case ('notifications') {\n <app-notification-block />\n }\n @case ('slider') {\n <app-slider-block />\n }\n @case ('svg') {\n <app-duck-dev-svg-block />\n }\n }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }, { kind: "component", type: TooltipBlock, selector: "app-tooltip-block" }, { kind: "component", type: QuickStartBlock, selector: "app-quick-start-block" }] });
|
|
2668
2666
|
}
|
|
2669
2667
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
|
|
2670
2668
|
type: Component,
|
|
@@ -2683,12 +2681,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2683
2681
|
SliderBlock,
|
|
2684
2682
|
CardBlock,
|
|
2685
2683
|
TooltipBlock,
|
|
2686
|
-
|
|
2684
|
+
QuickStartBlock,
|
|
2685
|
+
], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('quick-start'){\n <app-quick-start-block />\n }\n @case ('accordion') {\n <app-accordion-block />\n }\n @case ('buttons') {\n <app-button-block />\n }\n @case ('loaders') {\n <app-loader-block />\n }\n @case ('tabs') {\n <app-tabs-block />\n }\n @case ('tooltip'){\n <app-tooltip-block />\n }\n @case ('badge') {\n <app-badge-block />\n }\n @case ('directives') {\n <app-directive-block />\n }\n @case ('card') {\n <app-card-block />\n }\n @case ('input') {\n <app-input-block />\n }\n @case ('notifications') {\n <app-notification-block />\n }\n @case ('slider') {\n <app-slider-block />\n }\n @case ('svg') {\n <app-duck-dev-svg-block />\n }\n }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
|
|
2687
2686
|
}] });
|
|
2688
2687
|
|
|
2689
2688
|
const DuckDevLibTranslations = {
|
|
2690
|
-
en: import('./duck-dev-lib-en-
|
|
2691
|
-
ru: import('./duck-dev-lib-ru-
|
|
2689
|
+
en: import('./duck-dev-lib-en-D3xSOZcG.mjs'),
|
|
2690
|
+
ru: import('./duck-dev-lib-ru-yPN1VRKz.mjs'),
|
|
2692
2691
|
};
|
|
2693
2692
|
|
|
2694
2693
|
/*
|
|
@@ -2699,5 +2698,5 @@ const DuckDevLibTranslations = {
|
|
|
2699
2698
|
* Generated bundle index. Do not edit.
|
|
2700
2699
|
*/
|
|
2701
2700
|
|
|
2702
|
-
export { AccentEnumColor, Badge, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevCardAccent, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage, SliderClassic };
|
|
2701
|
+
export { AccentEnumColor, Badge, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevCardAccent, DuckDevCardSection, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage, SliderClassic };
|
|
2703
2702
|
//# sourceMappingURL=duck-dev-lib.mjs.map
|