duck-dev-lib 0.0.42 → 0.0.43

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.
Files changed (8) hide show
  1. package/fesm2022/{duck-dev-lib-en-Cr4fDFwj.mjs → duck-dev-lib-en-Co6vywqB.mjs} +7 -2
  2. package/fesm2022/{duck-dev-lib-en-Cr4fDFwj.mjs.map → duck-dev-lib-en-Co6vywqB.mjs.map} +1 -1
  3. package/fesm2022/{duck-dev-lib-ru-eYhKbOtN.mjs → duck-dev-lib-ru-39r_p4Cd.mjs} +7 -2
  4. package/fesm2022/{duck-dev-lib-ru-eYhKbOtN.mjs.map → duck-dev-lib-ru-39r_p4Cd.mjs.map} +1 -1
  5. package/fesm2022/duck-dev-lib.mjs +186 -31
  6. package/fesm2022/duck-dev-lib.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/types/duck-dev-lib.d.ts +53 -4
package/fesm2022/duck-dev-lib.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, afterNextRender, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, PLATFORM_ID, viewChild, ContentChildren } from '@angular/core';
2
+ import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, inject, Injectable, afterNextRender, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, PLATFORM_ID, viewChild, ContentChildren } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { NgStyle, CommonModule, JsonPipe, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
5
5
  import * as i1$3 from '@jsverse/transloco';
@@ -558,13 +558,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
558
558
  }] });
559
559
 
560
560
  class ButtonBlock {
561
+ t = inject(TranslocoService);
561
562
  colorViolet = AccentEnumColor.Violet;
562
563
  colorOrange = AccentEnumColor.Orange;
563
564
  colorWhite = AccentEnumColor.White;
564
565
  colorGray = AccentEnumColor.Gray;
565
566
  colorDark = AccentEnumColor.Dark;
567
+ styleTabs = [
568
+ { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
569
+ { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
570
+ ];
571
+ activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
572
+ onStyleTabChange(tab) {
573
+ this.activeStyleTab.set(tab);
574
+ }
566
575
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
567
- 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>&lt;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/&gt;</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>&lt;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/&gt;</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>&lt;duck-dev-button-flip\n [text]=\"'Text'\"\n [colorButton]=\"buttonColor\"\n [disabled]=\"false\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/&gt;</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>&lt;duck-dev-button-casper\n [text]=\"'Text'\"\n [isDisabled]=\"false\"\n [colorButton]=\"buttonColor\"\n/&gt;</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\n <app-button-neobrutal-block />\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: "component", type: ButtonNeobrutalBlock, selector: "app-button-neobrutal-block" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
576
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ButtonBlock, isStandalone: true, selector: "app-button-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'buttons.title' | transloco }}</h1>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\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>&lt;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/&gt;</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>&lt;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/&gt;</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>&lt;duck-dev-button-flip\n [text]=\"'Text'\"\n [colorButton]=\"buttonColor\"\n [disabled]=\"false\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/&gt;</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>&lt;duck-dev-button-casper\n [text]=\"'Text'\"\n [isDisabled]=\"false\"\n [colorButton]=\"buttonColor\"\n/&gt;</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 } @else {\n <app-button-neobrutal-block />\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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: "component", type: ButtonNeobrutalBlock, selector: "app-button-neobrutal-block" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
568
577
  }
569
578
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, decorators: [{
570
579
  type: Component,
@@ -576,12 +585,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
576
585
  ButtonCasper,
577
586
  DuckDevCardSection,
578
587
  ButtonNeobrutalBlock,
579
- ], 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>&lt;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/&gt;</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>&lt;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/&gt;</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>&lt;duck-dev-button-flip\n [text]=\"'Text'\"\n [colorButton]=\"buttonColor\"\n [disabled]=\"false\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/&gt;</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>&lt;duck-dev-button-casper\n [text]=\"'Text'\"\n [isDisabled]=\"false\"\n [colorButton]=\"buttonColor\"\n/&gt;</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\n <app-button-neobrutal-block />\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"] }]
588
+ DuckDevTab,
589
+ ], template: "<div class=\"demo-container\">\n <h1>{{ 'buttons.title' | transloco }}</h1>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\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>&lt;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/&gt;</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>&lt;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/&gt;</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>&lt;duck-dev-button-flip\n [text]=\"'Text'\"\n [colorButton]=\"buttonColor\"\n [disabled]=\"false\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/&gt;</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>&lt;duck-dev-button-casper\n [text]=\"'Text'\"\n [isDisabled]=\"false\"\n [colorButton]=\"buttonColor\"\n/&gt;</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 } @else {\n <app-button-neobrutal-block />\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: 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"] }]
580
590
  }] });
581
591
 
582
592
  class LoaderBlock {
593
+ t = inject(TranslocoService);
594
+ styleTabs = [
595
+ { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
596
+ { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
597
+ ];
598
+ activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
599
+ onStyleTabChange(tab) {
600
+ this.activeStyleTab.set(tab);
601
+ }
583
602
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
584
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderBlock, isStandalone: true, selector: "app-loader-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-classic /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-loading-bubble /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code>&lt;lib-loader-three-dots /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-neobrutal-stamp /&gt;\n&lt;duck-dev-loader-neobrutal-bars /&gt;\n&lt;duck-dev-loader-neobrutal-marquee /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-three-dots,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-stamp,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-bars,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-marquee{display:flex;justify-content:center;align-items:center}.demo-container .component-section .examples-block .example-row .example-item.example-item-neobrutal{background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 35%,var(--dd-base-0) 35% 100%);border-width:3px;border-color:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: LoaderClassic, selector: "duck-dev-loader-classic" }, { kind: "component", type: LoaderLoadingBubble, selector: "duck-dev-loader-loading-bubble" }, { kind: "component", type: LoaderThreeDots, selector: "duck-dev-loader-three-dots" }, { kind: "component", type: LoaderNeobrutalStamp, selector: "duck-dev-loader-neobrutal-stamp" }, { kind: "component", type: LoaderNeobrutalBars, selector: "duck-dev-loader-neobrutal-bars" }, { kind: "component", type: LoaderNeobrutalMarquee, selector: "duck-dev-loader-neobrutal-marquee" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
603
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: LoaderBlock, isStandalone: true, selector: "app-loader-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-classic /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-loading-bubble /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code>&lt;lib-loader-three-dots /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-neobrutal-stamp /&gt;\n&lt;duck-dev-loader-neobrutal-bars /&gt;\n&lt;duck-dev-loader-neobrutal-marquee /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-three-dots,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-stamp,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-bars,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-marquee{display:flex;justify-content:center;align-items:center}.demo-container .component-section .examples-block .example-row .example-item.example-item-neobrutal{background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 35%,var(--dd-base-0) 35% 100%);border-width:3px;border-color:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: LoaderClassic, selector: "duck-dev-loader-classic" }, { kind: "component", type: LoaderLoadingBubble, selector: "duck-dev-loader-loading-bubble" }, { kind: "component", type: LoaderThreeDots, selector: "duck-dev-loader-three-dots" }, { kind: "component", type: LoaderNeobrutalStamp, selector: "duck-dev-loader-neobrutal-stamp" }, { kind: "component", type: LoaderNeobrutalBars, selector: "duck-dev-loader-neobrutal-bars" }, { kind: "component", type: LoaderNeobrutalMarquee, selector: "duck-dev-loader-neobrutal-marquee" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
585
604
  }
586
605
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, decorators: [{
587
606
  type: Component,
@@ -593,7 +612,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
593
612
  LoaderNeobrutalBars,
594
613
  LoaderNeobrutalMarquee,
595
614
  TranslocoPipe,
596
- ], template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-classic /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-loading-bubble /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code>&lt;lib-loader-three-dots /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-neobrutal-stamp /&gt;\n&lt;duck-dev-loader-neobrutal-bars /&gt;\n&lt;duck-dev-loader-neobrutal-marquee /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-three-dots,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-stamp,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-bars,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-marquee{display:flex;justify-content:center;align-items:center}.demo-container .component-section .examples-block .example-row .example-item.example-item-neobrutal{background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 35%,var(--dd-base-0) 35% 100%);border-width:3px;border-color:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
615
+ DuckDevTab,
616
+ ], template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-classic /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-loading-bubble /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code>&lt;lib-loader-three-dots /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-loader-neobrutal-stamp /&gt;\n&lt;duck-dev-loader-neobrutal-bars /&gt;\n&lt;duck-dev-loader-neobrutal-marquee /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:40px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease;min-height:150px;justify-content:center}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-three-dots,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-stamp,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-bars,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-marquee{display:flex;justify-content:center;align-items:center}.demo-container .component-section .examples-block .example-row .example-item.example-item-neobrutal{background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 35%,var(--dd-base-0) 35% 100%);border-width:3px;border-color:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
597
617
  }] });
598
618
 
599
619
  class DuckDevCardAccent {
@@ -755,36 +775,64 @@ function getNeobrutalCardStyle(color) {
755
775
 
756
776
  class DuckDevCardNeobrutalPoster {
757
777
  color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
778
+ railTop = input.required({ ...(ngDevMode ? { debugName: "railTop" } : {}) });
779
+ railMiddle = input.required({ ...(ngDevMode ? { debugName: "railMiddle" } : {}) });
780
+ railBottom = input.required({ ...(ngDevMode ? { debugName: "railBottom" } : {}) });
781
+ eyebrow = input.required({ ...(ngDevMode ? { debugName: "eyebrow" } : {}) });
782
+ title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
783
+ description = input.required({ ...(ngDevMode ? { debugName: "description" } : {}) });
784
+ badge = input.required({ ...(ngDevMode ? { debugName: "badge" } : {}) });
785
+ metricLabel = input.required({ ...(ngDevMode ? { debugName: "metricLabel" } : {}) });
786
+ metric = input.required({ ...(ngDevMode ? { debugName: "metric" } : {}) });
758
787
  cardStyle = computed(() => getNeobrutalCardStyle(this.color()), { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
759
788
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalPoster, deps: [], target: i0.ɵɵFactoryTarget.Component });
760
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalPoster, isStandalone: true, selector: "dd-card-neobrutal-poster", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-poster\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-poster__headline\" aria-hidden=\"true\">\n <span>Neo</span>\n <span>Brut</span>\n <span>Card</span>\n </div>\n\n <div class=\"dd-card-neo-poster__panel\">\n <div class=\"dd-card-neo-poster__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-poster{display:grid;grid-template-columns:90px 1fr;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-poster__headline{display:grid;align-content:stretch;background:var(--dd-neo-card-accent);border-right:4px solid var(--dd-neo-card-border)}.dd-card-neo-poster__headline span{display:grid;place-items:center;padding:12px 8px;border-bottom:4px solid var(--dd-neo-card-border);font-size:14px;font-weight:900;letter-spacing:.18em;line-height:1;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}.dd-card-neo-poster__headline span:last-child{border-bottom:0}.dd-card-neo-poster__panel{position:relative;padding:22px 22px 22px 26px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-neo-card-panel)}.dd-card-neo-poster__panel:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-neo-card-border)}.dd-card-neo-poster__content{font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-poster__content :first-child{margin-top:0}.dd-card-neo-poster__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-poster{grid-template-columns:1fr;box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__headline{grid-template-columns:repeat(3,1fr);border-right:0;border-bottom:4px solid var(--dd-neo-card-border)}.dd-card-neo-poster__headline span{writing-mode:horizontal-tb;transform:none;border-right:4px solid var(--dd-neo-card-border);border-bottom:0}.dd-card-neo-poster__headline span:last-child{border-right:0}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
789
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalPoster, isStandalone: true, selector: "dd-card-neobrutal-poster", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, railTop: { classPropertyName: "railTop", publicName: "railTop", isSignal: true, isRequired: true, transformFunction: null }, railMiddle: { classPropertyName: "railMiddle", publicName: "railMiddle", isSignal: true, isRequired: true, transformFunction: null }, railBottom: { classPropertyName: "railBottom", publicName: "railBottom", isSignal: true, isRequired: true, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: true, transformFunction: null }, metricLabel: { classPropertyName: "metricLabel", publicName: "metricLabel", isSignal: true, isRequired: true, transformFunction: null }, metric: { classPropertyName: "metric", publicName: "metric", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-poster\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-poster__panel\">\n <div class=\"dd-card-neo-poster__meta\">\n <p class=\"dd-card-neo-poster__eyebrow\">{{ eyebrow() }}</p>\n <p class=\"dd-card-neo-poster__badge\">{{ badge() }}</p>\n </div>\n\n <div class=\"dd-card-neo-poster__content\">\n <h3 class=\"dd-card-neo-poster__title\">{{ title() }}</h3>\n <p class=\"dd-card-neo-poster__description\">{{ description() }}</p>\n </div>\n\n <div class=\"dd-card-neo-poster__metric\">\n <span class=\"dd-card-neo-poster__metric-label\">{{ metricLabel() }}</span>\n <strong class=\"dd-card-neo-poster__metric-value\">{{ metric() }}</strong>\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-poster{display:grid;grid-template-columns:92px minmax(0,1fr);background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-poster__headline span:last-child{border-bottom:0}.dd-card-neo-poster__panel{position:relative;display:grid;gap:18px;padding:24px 24px 24px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 20%,transparent) 0 17%,transparent 17% 100%),repeating-linear-gradient(-45deg,color-mix(in srgb,var(--dd-neo-card-border) 9%,transparent) 0 10px,transparent 10px 22px),var(--dd-neo-card-panel)}.dd-card-neo-poster__panel:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-neo-card-border)}.dd-card-neo-poster__content{display:grid;gap:10px}.dd-card-neo-poster__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__badge,.dd-card-neo-poster__title,.dd-card-neo-poster__description,.dd-card-neo-poster__metric-label,.dd-card-neo-poster__metric-value{margin:0}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__metric-label{font-size:12px;font-weight:900;letter-spacing:.18em;line-height:1.1;text-transform:uppercase}.dd-card-neo-poster__badge{padding:7px 10px 5px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:12px;font-weight:900;letter-spacing:.14em;line-height:1;text-transform:uppercase}.dd-card-neo-poster__title{max-width:11ch;font-size:clamp(30px,5vw,44px);font-weight:1000;line-height:.9;letter-spacing:-.05em;text-transform:uppercase;text-wrap:balance}.dd-card-neo-poster__description{max-width:38ch;font-size:15px;line-height:1.5;font-weight:800}.dd-card-neo-poster__metric{display:grid;justify-items:start;gap:6px;width:fit-content;padding:12px 14px 10px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-surface);box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__metric-value{font-size:clamp(28px,5vw,52px);font-weight:1000;line-height:.9;letter-spacing:-.07em}@media(max-width:640px){.dd-card-neo-poster{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__headline{grid-template-columns:repeat(3,1fr);border-right:0;border-bottom:4px solid var(--dd-neo-card-border)}.dd-card-neo-poster__headline span{min-height:auto;writing-mode:horizontal-tb;transform:none;border-right:4px solid var(--dd-neo-card-border);border-bottom:0}.dd-card-neo-poster__headline span:last-child{border-right:0}.dd-card-neo-poster__panel{padding:20px 20px 20px 24px}.dd-card-neo-poster__meta{flex-direction:column;align-items:flex-start}.dd-card-neo-poster__title{max-width:none}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
761
790
  }
762
791
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalPoster, decorators: [{
763
792
  type: Component,
764
- args: [{ selector: 'dd-card-neobrutal-poster', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-poster\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-poster__headline\" aria-hidden=\"true\">\n <span>Neo</span>\n <span>Brut</span>\n <span>Card</span>\n </div>\n\n <div class=\"dd-card-neo-poster__panel\">\n <div class=\"dd-card-neo-poster__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-poster{display:grid;grid-template-columns:90px 1fr;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-poster__headline{display:grid;align-content:stretch;background:var(--dd-neo-card-accent);border-right:4px solid var(--dd-neo-card-border)}.dd-card-neo-poster__headline span{display:grid;place-items:center;padding:12px 8px;border-bottom:4px solid var(--dd-neo-card-border);font-size:14px;font-weight:900;letter-spacing:.18em;line-height:1;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}.dd-card-neo-poster__headline span:last-child{border-bottom:0}.dd-card-neo-poster__panel{position:relative;padding:22px 22px 22px 26px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-neo-card-panel)}.dd-card-neo-poster__panel:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-neo-card-border)}.dd-card-neo-poster__content{font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-poster__content :first-child{margin-top:0}.dd-card-neo-poster__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-poster{grid-template-columns:1fr;box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__headline{grid-template-columns:repeat(3,1fr);border-right:0;border-bottom:4px solid var(--dd-neo-card-border)}.dd-card-neo-poster__headline span{writing-mode:horizontal-tb;transform:none;border-right:4px solid var(--dd-neo-card-border);border-bottom:0}.dd-card-neo-poster__headline span:last-child{border-right:0}}\n"] }]
765
- }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
793
+ args: [{ selector: 'dd-card-neobrutal-poster', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-poster\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-poster__panel\">\n <div class=\"dd-card-neo-poster__meta\">\n <p class=\"dd-card-neo-poster__eyebrow\">{{ eyebrow() }}</p>\n <p class=\"dd-card-neo-poster__badge\">{{ badge() }}</p>\n </div>\n\n <div class=\"dd-card-neo-poster__content\">\n <h3 class=\"dd-card-neo-poster__title\">{{ title() }}</h3>\n <p class=\"dd-card-neo-poster__description\">{{ description() }}</p>\n </div>\n\n <div class=\"dd-card-neo-poster__metric\">\n <span class=\"dd-card-neo-poster__metric-label\">{{ metricLabel() }}</span>\n <strong class=\"dd-card-neo-poster__metric-value\">{{ metric() }}</strong>\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-poster{display:grid;grid-template-columns:92px minmax(0,1fr);background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-poster__headline span:last-child{border-bottom:0}.dd-card-neo-poster__panel{position:relative;display:grid;gap:18px;padding:24px 24px 24px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 20%,transparent) 0 17%,transparent 17% 100%),repeating-linear-gradient(-45deg,color-mix(in srgb,var(--dd-neo-card-border) 9%,transparent) 0 10px,transparent 10px 22px),var(--dd-neo-card-panel)}.dd-card-neo-poster__panel:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-neo-card-border)}.dd-card-neo-poster__content{display:grid;gap:10px}.dd-card-neo-poster__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__badge,.dd-card-neo-poster__title,.dd-card-neo-poster__description,.dd-card-neo-poster__metric-label,.dd-card-neo-poster__metric-value{margin:0}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__metric-label{font-size:12px;font-weight:900;letter-spacing:.18em;line-height:1.1;text-transform:uppercase}.dd-card-neo-poster__badge{padding:7px 10px 5px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:12px;font-weight:900;letter-spacing:.14em;line-height:1;text-transform:uppercase}.dd-card-neo-poster__title{max-width:11ch;font-size:clamp(30px,5vw,44px);font-weight:1000;line-height:.9;letter-spacing:-.05em;text-transform:uppercase;text-wrap:balance}.dd-card-neo-poster__description{max-width:38ch;font-size:15px;line-height:1.5;font-weight:800}.dd-card-neo-poster__metric{display:grid;justify-items:start;gap:6px;width:fit-content;padding:12px 14px 10px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-surface);box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__metric-value{font-size:clamp(28px,5vw,52px);font-weight:1000;line-height:.9;letter-spacing:-.07em}@media(max-width:640px){.dd-card-neo-poster{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__headline{grid-template-columns:repeat(3,1fr);border-right:0;border-bottom:4px solid var(--dd-neo-card-border)}.dd-card-neo-poster__headline span{min-height:auto;writing-mode:horizontal-tb;transform:none;border-right:4px solid var(--dd-neo-card-border);border-bottom:0}.dd-card-neo-poster__headline span:last-child{border-right:0}.dd-card-neo-poster__panel{padding:20px 20px 20px 24px}.dd-card-neo-poster__meta{flex-direction:column;align-items:flex-start}.dd-card-neo-poster__title{max-width:none}}\n"] }]
794
+ }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], railTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "railTop", required: true }] }], railMiddle: [{ type: i0.Input, args: [{ isSignal: true, alias: "railMiddle", required: true }] }], railBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "railBottom", required: true }] }], eyebrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyebrow", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: true }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: true }] }], metricLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricLabel", required: true }] }], metric: [{ type: i0.Input, args: [{ isSignal: true, alias: "metric", required: true }] }] } });
766
795
 
767
796
  class DuckDevCardNeobrutalSlab {
768
797
  color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
798
+ strapLabel = input.required({ ...(ngDevMode ? { debugName: "strapLabel" } : {}) });
769
799
  cardStyle = computed(() => getNeobrutalCardStyle(this.color()), { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
770
800
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
771
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalSlab, isStandalone: true, selector: "dd-card-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-slab\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">Duck Dev</div>\n <div class=\"dd-card-neo-slab__panel\">\n <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n <div class=\"dd-card-neo-slab__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text)}.dd-card-neo-slab__strap{position:absolute;top:-18px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
801
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalSlab, isStandalone: true, selector: "dd-card-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strapLabel: { classPropertyName: "strapLabel", publicName: "strapLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-slab\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n <div class=\"dd-card-neo-slab__panel\">\n <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n <div class=\"dd-card-neo-slab__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text)}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
772
802
  }
773
803
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalSlab, decorators: [{
774
804
  type: Component,
775
- args: [{ selector: 'dd-card-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-slab\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">Duck Dev</div>\n <div class=\"dd-card-neo-slab__panel\">\n <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n <div class=\"dd-card-neo-slab__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text)}.dd-card-neo-slab__strap{position:absolute;top:-18px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"] }]
776
- }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
805
+ args: [{ selector: 'dd-card-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-slab\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n <div class=\"dd-card-neo-slab__panel\">\n <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n <div class=\"dd-card-neo-slab__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text)}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"] }]
806
+ }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "strapLabel", required: true }] }] } });
777
807
 
778
808
  class DuckDevCardNeobrutalStamp {
779
809
  color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
810
+ chromeStart = input.required({ ...(ngDevMode ? { debugName: "chromeStart" } : {}) });
811
+ chromeEnd = input.required({ ...(ngDevMode ? { debugName: "chromeEnd" } : {}) });
812
+ sealLabel = input.required({ ...(ngDevMode ? { debugName: "sealLabel" } : {}) });
780
813
  cardStyle = computed(() => getNeobrutalCardStyle(this.color()), { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
781
814
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
782
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalStamp, isStandalone: true, selector: "dd-card-neobrutal-stamp", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-stamp\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-stamp__chrome\" aria-hidden=\"true\">\n <span>Fresh UI</span>\n <span>Duck Dev</span>\n </div>\n\n <div class=\"dd-card-neo-stamp__body\">\n <div class=\"dd-card-neo-stamp__seal\" aria-hidden=\"true\">Seal</div>\n <div class=\"dd-card-neo-stamp__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-stamp{display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-border);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-stamp__chrome{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase}.dd-card-neo-stamp__body{position:relative;padding:22px;background:linear-gradient(45deg,color-mix(in srgb,var(--dd-neo-card-accent) 18%,transparent) 0 12%,transparent 12% 100%),repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--dd-neo-card-border) 6%,transparent) 12px 14px),var(--dd-neo-card-panel)}.dd-card-neo-stamp__seal{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(14deg)}.dd-card-neo-stamp__content{max-width:calc(100% - 92px);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-stamp__content :first-child{margin-top:0}.dd-card-neo-stamp__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-stamp{box-shadow:8px 8px 0 var(--dd-neo-card-border)}.dd-card-neo-stamp__body{padding-top:96px}.dd-card-neo-stamp__seal{top:16px;left:16px;right:auto}.dd-card-neo-stamp__content{max-width:100%}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
815
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalStamp, isStandalone: true, selector: "dd-card-neobrutal-stamp", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, chromeStart: { classPropertyName: "chromeStart", publicName: "chromeStart", isSignal: true, isRequired: true, transformFunction: null }, chromeEnd: { classPropertyName: "chromeEnd", publicName: "chromeEnd", isSignal: true, isRequired: true, transformFunction: null }, sealLabel: { classPropertyName: "sealLabel", publicName: "sealLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-stamp\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-stamp__chrome\" aria-hidden=\"true\">\n <span>{{ chromeStart() }}</span>\n <span>{{ chromeEnd() }}</span>\n </div>\n\n <div class=\"dd-card-neo-stamp__body\">\n <div class=\"dd-card-neo-stamp__seal\" aria-hidden=\"true\">{{ sealLabel() }}</div>\n <div class=\"dd-card-neo-stamp__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-stamp{display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-border);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-stamp__chrome{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase}.dd-card-neo-stamp__body{position:relative;padding:22px;background:linear-gradient(45deg,color-mix(in srgb,var(--dd-neo-card-accent) 18%,transparent) 0 12%,transparent 12% 100%),repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--dd-neo-card-border) 6%,transparent) 12px 14px),var(--dd-neo-card-panel)}.dd-card-neo-stamp__seal{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(14deg)}.dd-card-neo-stamp__content{max-width:calc(100% - 92px);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-stamp__content :first-child{margin-top:0}.dd-card-neo-stamp__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-stamp{box-shadow:8px 8px 0 var(--dd-neo-card-border)}.dd-card-neo-stamp__body{padding-top:96px}.dd-card-neo-stamp__seal{top:16px;left:16px;right:auto}.dd-card-neo-stamp__content{max-width:100%}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
783
816
  }
784
817
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalStamp, decorators: [{
785
818
  type: Component,
786
- args: [{ selector: 'dd-card-neobrutal-stamp', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-stamp\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-stamp__chrome\" aria-hidden=\"true\">\n <span>Fresh UI</span>\n <span>Duck Dev</span>\n </div>\n\n <div class=\"dd-card-neo-stamp__body\">\n <div class=\"dd-card-neo-stamp__seal\" aria-hidden=\"true\">Seal</div>\n <div class=\"dd-card-neo-stamp__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-stamp{display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-border);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-stamp__chrome{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase}.dd-card-neo-stamp__body{position:relative;padding:22px;background:linear-gradient(45deg,color-mix(in srgb,var(--dd-neo-card-accent) 18%,transparent) 0 12%,transparent 12% 100%),repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--dd-neo-card-border) 6%,transparent) 12px 14px),var(--dd-neo-card-panel)}.dd-card-neo-stamp__seal{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(14deg)}.dd-card-neo-stamp__content{max-width:calc(100% - 92px);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-stamp__content :first-child{margin-top:0}.dd-card-neo-stamp__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-stamp{box-shadow:8px 8px 0 var(--dd-neo-card-border)}.dd-card-neo-stamp__body{padding-top:96px}.dd-card-neo-stamp__seal{top:16px;left:16px;right:auto}.dd-card-neo-stamp__content{max-width:100%}}\n"] }]
787
- }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
819
+ args: [{ selector: 'dd-card-neobrutal-stamp', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-stamp\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-stamp__chrome\" aria-hidden=\"true\">\n <span>{{ chromeStart() }}</span>\n <span>{{ chromeEnd() }}</span>\n </div>\n\n <div class=\"dd-card-neo-stamp__body\">\n <div class=\"dd-card-neo-stamp__seal\" aria-hidden=\"true\">{{ sealLabel() }}</div>\n <div class=\"dd-card-neo-stamp__content\">\n <ng-content />\n </div>\n </div>\n</article>\n", styles: [".dd-card-neo-stamp{display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-border);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-stamp__chrome{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase}.dd-card-neo-stamp__body{position:relative;padding:22px;background:linear-gradient(45deg,color-mix(in srgb,var(--dd-neo-card-accent) 18%,transparent) 0 12%,transparent 12% 100%),repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--dd-neo-card-border) 6%,transparent) 12px 14px),var(--dd-neo-card-panel)}.dd-card-neo-stamp__seal{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(14deg)}.dd-card-neo-stamp__content{max-width:calc(100% - 92px);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-stamp__content :first-child{margin-top:0}.dd-card-neo-stamp__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-stamp{box-shadow:8px 8px 0 var(--dd-neo-card-border)}.dd-card-neo-stamp__body{padding-top:96px}.dd-card-neo-stamp__seal{top:16px;left:16px;right:auto}.dd-card-neo-stamp__content{max-width:100%}}\n"] }]
820
+ }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], chromeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chromeStart", required: true }] }], chromeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "chromeEnd", required: true }] }], sealLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sealLabel", required: true }] }] } });
821
+
822
+ class DuckDevCardNeobrutalTicket {
823
+ color = input(AccentEnumColor.Gray, { ...(ngDevMode ? { debugName: "color" } : {}) });
824
+ flashLabel = input.required({ ...(ngDevMode ? { debugName: "flashLabel" } : {}) });
825
+ stubTop = input.required({ ...(ngDevMode ? { debugName: "stubTop" } : {}) });
826
+ stubMiddle = input.required({ ...(ngDevMode ? { debugName: "stubMiddle" } : {}) });
827
+ stubBottom = input.required({ ...(ngDevMode ? { debugName: "stubBottom" } : {}) });
828
+ cardStyle = computed(() => getNeobrutalCardStyle(this.color()), { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
829
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
830
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalTicket, isStandalone: true, selector: "dd-card-neobrutal-ticket", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, flashLabel: { classPropertyName: "flashLabel", publicName: "flashLabel", isSignal: true, isRequired: true, transformFunction: null }, stubTop: { classPropertyName: "stubTop", publicName: "stubTop", isSignal: true, isRequired: true, transformFunction: null }, stubMiddle: { classPropertyName: "stubMiddle", publicName: "stubMiddle", isSignal: true, isRequired: true, transformFunction: null }, stubBottom: { classPropertyName: "stubBottom", publicName: "stubBottom", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-ticket\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-ticket__body\">\n <div class=\"dd-card-neo-ticket__flash\" aria-hidden=\"true\">{{ flashLabel() }}</div>\n <div class=\"dd-card-neo-ticket__content\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"dd-card-neo-ticket__stub\" aria-hidden=\"true\">\n <span>{{ stubTop() }}</span>\n <span>{{ stubMiddle() }}</span>\n <span>{{ stubBottom() }}</span>\n </div>\n</article>\n", styles: [".dd-card-neo-ticket{display:grid;grid-template-columns:minmax(0,1fr) 92px;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-ticket__body{position:relative;padding:24px 26px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 22%,transparent) 0 18%,transparent 18% 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-neo-card-border) 8%,transparent) 14px 16px),var(--dd-neo-card-panel)}.dd-card-neo-ticket__body:before,.dd-card-neo-ticket__body:after{content:\"\";position:absolute;right:-16px;width:28px;height:28px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface)}.dd-card-neo-ticket__body:before{top:18px}.dd-card-neo-ticket__body:after{bottom:18px}.dd-card-neo-ticket__flash{position:absolute;top:16px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 10px 5px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-6deg)}.dd-card-neo-ticket__content{padding-top:34px;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-ticket__content :first-child{margin-top:0}.dd-card-neo-ticket__content :last-child{margin-bottom:0}.dd-card-neo-ticket__stub{display:grid;align-content:center;justify-items:center;gap:10px;padding:18px 10px;border-left:4px dashed var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-ticket__stub span{font-size:12px;font-weight:1000;letter-spacing:.18em;line-height:1;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}@media(max-width:640px){.dd-card-neo-ticket{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-ticket__body{padding:22px 22px 20px}.dd-card-neo-ticket__body:before,.dd-card-neo-ticket__body:after{right:auto;left:24px;width:24px;height:24px}.dd-card-neo-ticket__body:before{top:auto;bottom:-16px}.dd-card-neo-ticket__body:after{left:auto;right:24px;bottom:-16px}.dd-card-neo-ticket__stub{grid-template-columns:repeat(3,1fr);align-items:center;gap:0;padding:14px 12px;border-left:0;border-top:4px dashed var(--dd-neo-card-border)}.dd-card-neo-ticket__stub span{writing-mode:horizontal-tb;transform:none;text-align:center}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
831
+ }
832
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalTicket, decorators: [{
833
+ type: Component,
834
+ args: [{ selector: 'dd-card-neobrutal-ticket', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-ticket\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-neo-ticket__body\">\n <div class=\"dd-card-neo-ticket__flash\" aria-hidden=\"true\">{{ flashLabel() }}</div>\n <div class=\"dd-card-neo-ticket__content\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"dd-card-neo-ticket__stub\" aria-hidden=\"true\">\n <span>{{ stubTop() }}</span>\n <span>{{ stubMiddle() }}</span>\n <span>{{ stubBottom() }}</span>\n </div>\n</article>\n", styles: [".dd-card-neo-ticket{display:grid;grid-template-columns:minmax(0,1fr) 92px;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-ticket__body{position:relative;padding:24px 26px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 22%,transparent) 0 18%,transparent 18% 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-neo-card-border) 8%,transparent) 14px 16px),var(--dd-neo-card-panel)}.dd-card-neo-ticket__body:before,.dd-card-neo-ticket__body:after{content:\"\";position:absolute;right:-16px;width:28px;height:28px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface)}.dd-card-neo-ticket__body:before{top:18px}.dd-card-neo-ticket__body:after{bottom:18px}.dd-card-neo-ticket__flash{position:absolute;top:16px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 10px 5px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-6deg)}.dd-card-neo-ticket__content{padding-top:34px;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-ticket__content :first-child{margin-top:0}.dd-card-neo-ticket__content :last-child{margin-bottom:0}.dd-card-neo-ticket__stub{display:grid;align-content:center;justify-items:center;gap:10px;padding:18px 10px;border-left:4px dashed var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-ticket__stub span{font-size:12px;font-weight:1000;letter-spacing:.18em;line-height:1;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}@media(max-width:640px){.dd-card-neo-ticket{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-ticket__body{padding:22px 22px 20px}.dd-card-neo-ticket__body:before,.dd-card-neo-ticket__body:after{right:auto;left:24px;width:24px;height:24px}.dd-card-neo-ticket__body:before{top:auto;bottom:-16px}.dd-card-neo-ticket__body:after{left:auto;right:24px;bottom:-16px}.dd-card-neo-ticket__stub{grid-template-columns:repeat(3,1fr);align-items:center;gap:0;padding:14px 12px;border-left:0;border-top:4px dashed var(--dd-neo-card-border)}.dd-card-neo-ticket__stub span{writing-mode:horizontal-tb;transform:none;text-align:center}}\n"] }]
835
+ }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], flashLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "flashLabel", required: true }] }], stubTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "stubTop", required: true }] }], stubMiddle: [{ type: i0.Input, args: [{ isSignal: true, alias: "stubMiddle", required: true }] }], stubBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "stubBottom", required: true }] }] } });
788
836
 
789
837
  class DuckDevCardOutline {
790
838
  color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
@@ -927,6 +975,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
927
975
  }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
928
976
 
929
977
  class TabsBlock {
978
+ t = inject(TranslocoService);
979
+ styleTabs = [
980
+ { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
981
+ { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
982
+ ];
930
983
  neoHorizontalTabs = [
931
984
  { id: 'rush', label: 'Rush lane' },
932
985
  { id: 'drop', label: 'Drop room' },
@@ -937,8 +990,12 @@ class TabsBlock {
937
990
  { id: 'stack', label: 'Stack' },
938
991
  { id: 'blast', label: 'Blast' },
939
992
  ];
993
+ activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
940
994
  activeHorizontalTab = signal(this.neoHorizontalTabs[0], { ...(ngDevMode ? { debugName: "activeHorizontalTab" } : {}) });
941
995
  activeVerticalTab = signal(this.neoVerticalTabs[0], { ...(ngDevMode ? { debugName: "activeVerticalTab" } : {}) });
996
+ onStyleTabChange(tab) {
997
+ this.activeStyleTab.set(tab);
998
+ }
942
999
  onHorizontalTabChange(tab) {
943
1000
  this.activeHorizontalTab.set(tab);
944
1001
  }
@@ -946,11 +1003,11 @@ class TabsBlock {
946
1003
  this.activeVerticalTab.set(tab);
947
1004
  }
948
1005
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
949
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n <!-- Duck Dev Tab -->\n <dd-card-section>\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'tabsComponent.tab.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) -\n {{ 'tabsComponent.tab.inputTabs' | transloco }}\n <ul>\n <li>\n <strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}\n </li>\n <li>\n <strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}\n </li>\n <li>\n <strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) -\n {{ 'tabsComponent.tab.inputTabsContent' | transloco }}\n </li>\n </ul>\n </li>\n </ul>\n </div>\n\n <div class=\"outputs-block\">\n <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n <ul>\n <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n <ul>\n <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.neobrutal.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</p>\n <p>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</p>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tabsComponent.neobrutal.examples' | transloco }}</h3>\n\n <div class=\"example-shell\">\n <p class=\"example-label\">{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</p>\n <div class=\"neo-demo-tabs\">\n <div class=\"neo-demo-tabs__header\">\n <button\n *ngFor=\"let tab of neoHorizontalTabs; let i = index\"\n class=\"neo-demo-tab-button\"\n [class.active]=\"activeHorizontalTab().id === tab.id\"\n (click)=\"onHorizontalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n </div>\n\n <div class=\"neo-demo-tabs__content\">\n <article *ngIf=\"activeHorizontalTab().id === 'rush'\" class=\"neo-panel\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerRush' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeHorizontalTab().id === 'drop'\" class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerDrop' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeHorizontalTab().id === 'review'\" class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerReview' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n </div>\n </div>\n </div>\n\n <div class=\"example-shell\">\n <p class=\"example-label\">{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</p>\n <div class=\"neo-demo-vertical\">\n <div class=\"neo-demo-vertical__sidebar\">\n <button\n *ngFor=\"let tab of neoVerticalTabs; let i = index\"\n class=\"neo-demo-vertical-button\"\n [class.active]=\"activeVerticalTab().id === tab.id\"\n (click)=\"onVerticalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n </div>\n\n <div class=\"neo-demo-vertical__content\">\n <article *ngIf=\"activeVerticalTab().id === 'pulse'\" class=\"neo-story\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyPulseChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeVerticalTab().id === 'stack'\" class=\"neo-story neo-story-alt\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyStackChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeVerticalTab().id === 'blast'\" class=\"neo-story neo-story-dark\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyBlastChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n </article>\n </div>\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 .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .examples-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .examples-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .examples-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .examples-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .examples-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .examples-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .examples-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .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-shell{margin-bottom:24px;padding:24px;border:3px solid var(--dd-base-600);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.demo-container .component-section .examples-block .example-label{margin:0 0 18px;color:var(--dd-base-600);font-size:.92rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-content-grid,.neo-story{min-height:180px}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-base-600);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-base-600);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-base-600);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical-icon{display:flex;width:20px;height:20px;flex-shrink:0}.neo-demo-vertical-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-base-600);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-base-600);border-radius:22px;background:var(--dd-base-0)}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.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-shell{padding:18px}.neo-demo-vertical{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
1006
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'tabsComponent.tab.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) -\n {{ 'tabsComponent.tab.inputTabs' | transloco }}\n <ul>\n <li>\n <strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}\n </li>\n <li>\n <strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}\n </li>\n <li>\n <strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) -\n {{ 'tabsComponent.tab.inputTabsContent' | transloco }}\n </li>\n </ul>\n </li>\n </ul>\n </div>\n\n <div class=\"outputs-block\">\n <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n <ul>\n <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n <ul>\n <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n </ul>\n </div>\n } @else {\n <h2>{{ 'tabsComponent.neobrutal.examples' | transloco }}</h2>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.neobrutal.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</p>\n <p>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</p>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tabsComponent.neobrutal.examples' | transloco }}</h3>\n\n <div class=\"example-shell\">\n <p class=\"example-label\">{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</p>\n <div class=\"neo-demo-tabs\">\n <div class=\"neo-demo-tabs__header\">\n <button\n *ngFor=\"let tab of neoHorizontalTabs; let i = index\"\n class=\"neo-demo-tab-button\"\n [class.active]=\"activeHorizontalTab().id === tab.id\"\n (click)=\"onHorizontalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n </div>\n\n <div class=\"neo-demo-tabs__content\">\n <article *ngIf=\"activeHorizontalTab().id === 'rush'\" class=\"neo-panel\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerRush' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeHorizontalTab().id === 'drop'\" class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerDrop' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeHorizontalTab().id === 'review'\" class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerReview' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n </div>\n </div>\n </div>\n\n <div class=\"example-shell\">\n <p class=\"example-label\">{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</p>\n <div class=\"neo-demo-vertical\">\n <div class=\"neo-demo-vertical__sidebar\">\n <button\n *ngFor=\"let tab of neoVerticalTabs; let i = index\"\n class=\"neo-demo-vertical-button\"\n [class.active]=\"activeVerticalTab().id === tab.id\"\n (click)=\"onVerticalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n </div>\n\n <div class=\"neo-demo-vertical__content\">\n <article *ngIf=\"activeVerticalTab().id === 'pulse'\" class=\"neo-story\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyPulseChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeVerticalTab().id === 'stack'\" class=\"neo-story neo-story-alt\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyStackChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeVerticalTab().id === 'blast'\" class=\"neo-story neo-story-dark\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyBlastChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n </article>\n </div>\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .examples-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .examples-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .examples-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .examples-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .examples-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .examples-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .examples-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .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-shell{margin-bottom:24px;padding:24px;border:3px solid var(--dd-base-600);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.demo-container .component-section .examples-block .example-label{margin:0 0 18px;color:var(--dd-base-600);font-size:.92rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-content-grid,.neo-story{min-height:180px}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-base-600);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-base-600);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-base-600);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical-icon{display:flex;width:20px;height:20px;flex-shrink:0}.neo-demo-vertical-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-base-600);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-base-600);border-radius:22px;background:var(--dd-base-0)}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.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-shell{padding:18px}.neo-demo-vertical{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
950
1007
  }
951
1008
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, decorators: [{
952
1009
  type: Component,
953
- args: [{ selector: 'app-tabs-block', imports: [CommonModule, TranslocoPipe, DuckDevCardSection], template: "<div class=\"demo-container\">\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n <!-- Duck Dev Tab -->\n <dd-card-section>\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'tabsComponent.tab.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) -\n {{ 'tabsComponent.tab.inputTabs' | transloco }}\n <ul>\n <li>\n <strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}\n </li>\n <li>\n <strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}\n </li>\n <li>\n <strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) -\n {{ 'tabsComponent.tab.inputTabsContent' | transloco }}\n </li>\n </ul>\n </li>\n </ul>\n </div>\n\n <div class=\"outputs-block\">\n <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n <ul>\n <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n <ul>\n <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.neobrutal.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</p>\n <p>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</p>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tabsComponent.neobrutal.examples' | transloco }}</h3>\n\n <div class=\"example-shell\">\n <p class=\"example-label\">{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</p>\n <div class=\"neo-demo-tabs\">\n <div class=\"neo-demo-tabs__header\">\n <button\n *ngFor=\"let tab of neoHorizontalTabs; let i = index\"\n class=\"neo-demo-tab-button\"\n [class.active]=\"activeHorizontalTab().id === tab.id\"\n (click)=\"onHorizontalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n </div>\n\n <div class=\"neo-demo-tabs__content\">\n <article *ngIf=\"activeHorizontalTab().id === 'rush'\" class=\"neo-panel\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerRush' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeHorizontalTab().id === 'drop'\" class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerDrop' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeHorizontalTab().id === 'review'\" class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerReview' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n </div>\n </div>\n </div>\n\n <div class=\"example-shell\">\n <p class=\"example-label\">{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</p>\n <div class=\"neo-demo-vertical\">\n <div class=\"neo-demo-vertical__sidebar\">\n <button\n *ngFor=\"let tab of neoVerticalTabs; let i = index\"\n class=\"neo-demo-vertical-button\"\n [class.active]=\"activeVerticalTab().id === tab.id\"\n (click)=\"onVerticalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n </div>\n\n <div class=\"neo-demo-vertical__content\">\n <article *ngIf=\"activeVerticalTab().id === 'pulse'\" class=\"neo-story\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyPulseChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeVerticalTab().id === 'stack'\" class=\"neo-story neo-story-alt\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyStackChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeVerticalTab().id === 'blast'\" class=\"neo-story neo-story-dark\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyBlastChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n </article>\n </div>\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 .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .examples-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .examples-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .examples-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .examples-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .examples-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .examples-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .examples-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .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-shell{margin-bottom:24px;padding:24px;border:3px solid var(--dd-base-600);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.demo-container .component-section .examples-block .example-label{margin:0 0 18px;color:var(--dd-base-600);font-size:.92rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-content-grid,.neo-story{min-height:180px}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-base-600);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-base-600);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-base-600);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical-icon{display:flex;width:20px;height:20px;flex-shrink:0}.neo-demo-vertical-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-base-600);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-base-600);border-radius:22px;background:var(--dd-base-0)}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.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-shell{padding:18px}.neo-demo-vertical{grid-template-columns:1fr}}\n"] }]
1010
+ args: [{ selector: 'app-tabs-block', imports: [CommonModule, TranslocoPipe, DuckDevCardSection, DuckDevTab], template: "<div class=\"demo-container\">\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'tabsComponent.tab.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) -\n {{ 'tabsComponent.tab.inputTabs' | transloco }}\n <ul>\n <li>\n <strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}\n </li>\n <li>\n <strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}\n </li>\n <li>\n <strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) -\n {{ 'tabsComponent.tab.inputTabsContent' | transloco }}\n </li>\n </ul>\n </li>\n </ul>\n </div>\n\n <div class=\"outputs-block\">\n <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n <ul>\n <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n <ul>\n <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n </ul>\n </div>\n } @else {\n <h2>{{ 'tabsComponent.neobrutal.examples' | transloco }}</h2>\n\n <div class=\"usage-block\">\n <h3>{{ 'tabsComponent.neobrutal.usage' | transloco }}</h3>\n <p>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</p>\n <p>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</p>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tabsComponent.neobrutal.examples' | transloco }}</h3>\n\n <div class=\"example-shell\">\n <p class=\"example-label\">{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</p>\n <div class=\"neo-demo-tabs\">\n <div class=\"neo-demo-tabs__header\">\n <button\n *ngFor=\"let tab of neoHorizontalTabs; let i = index\"\n class=\"neo-demo-tab-button\"\n [class.active]=\"activeHorizontalTab().id === tab.id\"\n (click)=\"onHorizontalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n </div>\n\n <div class=\"neo-demo-tabs__content\">\n <article *ngIf=\"activeHorizontalTab().id === 'rush'\" class=\"neo-panel\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerRush' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeHorizontalTab().id === 'drop'\" class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerDrop' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeHorizontalTab().id === 'review'\" class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerReview' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n </div>\n </div>\n </div>\n\n <div class=\"example-shell\">\n <p class=\"example-label\">{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</p>\n <div class=\"neo-demo-vertical\">\n <div class=\"neo-demo-vertical__sidebar\">\n <button\n *ngFor=\"let tab of neoVerticalTabs; let i = index\"\n class=\"neo-demo-vertical-button\"\n [class.active]=\"activeVerticalTab().id === tab.id\"\n (click)=\"onVerticalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n </div>\n\n <div class=\"neo-demo-vertical__content\">\n <article *ngIf=\"activeVerticalTab().id === 'pulse'\" class=\"neo-story\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyPulseChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeVerticalTab().id === 'stack'\" class=\"neo-story neo-story-alt\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyStackChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n </article>\n <article *ngIf=\"activeVerticalTab().id === 'blast'\" class=\"neo-story neo-story-dark\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyBlastChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n </article>\n </div>\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .examples-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .examples-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .examples-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .examples-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .examples-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .examples-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .examples-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .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-shell{margin-bottom:24px;padding:24px;border:3px solid var(--dd-base-600);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.demo-container .component-section .examples-block .example-label{margin:0 0 18px;color:var(--dd-base-600);font-size:.92rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-content-grid,.neo-story{min-height:180px}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-base-600);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-base-600);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-base-600);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical-icon{display:flex;width:20px;height:20px;flex-shrink:0}.neo-demo-vertical-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-base-600);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-base-600);border-radius:22px;background:var(--dd-base-0)}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.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-shell{padding:18px}.neo-demo-vertical{grid-template-columns:1fr}}\n"] }]
954
1011
  }] });
955
1012
 
956
1013
  const duckDevDockMedium = `
@@ -2477,6 +2534,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
2477
2534
  args: [{ selector: 'duck-dev-input-neobrutal-poster', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<div class=\"neo-poster\">\n <label [for]=\"control\" class=\"neo-poster__label\">{{ label() }}</label>\n\n <div class=\"neo-poster__field\" [class.neo-poster__field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-poster-check\">\n <input class=\"neo-poster-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"neo-poster-check__label\" [for]=\"control\">\n <span class=\"neo-poster-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-poster-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-poster__input neo-poster__input_textarea\"\n [class.neo-poster__input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-poster-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-poster__input neo-poster__input_select\"\n [class.neo-poster__input_error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-poster__input\"\n [class.neo-poster__input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-poster__error\">{{ erMessage }}</div>\n }\n </div>\n</div>\n", styles: [":host{display:block}.neo-poster{display:grid;grid-template-columns:88px 1fr;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-poster__label{display:grid;place-items:center;padding:14px 8px;border-right:4px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}.neo-poster__field{position:relative;padding:12px 12px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-poster__field_checkbox{padding-bottom:32px}.neo-poster__input{width:100%;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-100);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700}.neo-poster__input:focus{outline:none;background:var(--dd-base-0)}.neo-poster__input::placeholder{color:var(--dd-base-400)}.neo-poster__input_textarea{min-height:136px;resize:vertical}.neo-poster__input_select{appearance:none;padding-right:50px;cursor:pointer}.neo-poster-select{position:relative}.neo-poster-select:after{content:\"GO\";position:absolute;top:50%;right:8px;transform:translateY(-50%);padding:4px 6px;border:3px solid var(--dd-base-600);background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:9px;font-weight:900;letter-spacing:.12em}.neo-poster__input_error{border-color:var(--dd-base-accent-orange)}.neo-poster__error{position:absolute;left:12px;bottom:6px;color:var(--dd-base-accent-orange);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-poster-check__input{display:none}.neo-poster-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-poster-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-base-600);background:var(--dd-base-100)}.neo-poster-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-poster-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box{background:var(--dd-base-accent-yellow)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box svg{stroke-dashoffset:0}@media(max-width:640px){.neo-poster{grid-template-columns:1fr}.neo-poster__label{writing-mode:horizontal-tb;transform:none;border-right:0;border-bottom:4px solid var(--dd-base-600)}}\n"] }]
2478
2535
  }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
2479
2536
 
2537
+ class DuckDevInputNeobrutalRadio {
2538
+ form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
2539
+ controlName = input.required({ ...(ngDevMode ? { debugName: "controlName" } : {}) });
2540
+ label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
2541
+ description = input('', { ...(ngDevMode ? { debugName: "description" } : {}) });
2542
+ options = input.required({ ...(ngDevMode ? { debugName: "options" } : {}) });
2543
+ errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
2544
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
2545
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalRadio, isStandalone: true, selector: "duck-dev-input-neobrutal-radio", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n <div class=\"neo-radio__copy\">\n <label class=\"neo-radio__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n }\n </div>\n\n <div\n class=\"neo-radio__group\"\n [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n role=\"radiogroup\"\n [attr.aria-describedby]=\"describedBy\"\n >\n @for (option of options(); track option.value; let index = $index) {\n <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n <input\n class=\"neo-radio__input\"\n type=\"radio\"\n [id]=\"control + '-' + index\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n formControlName=\"{{ control }}\"\n />\n <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n <span class=\"neo-radio__text\">{{ option.label }}</span>\n </label>\n }\n </div>\n\n @if (erMessage) {\n <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-0)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,white);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-radio__option:hover,.neo-radio__option:has(.neo-radio__input:focus-visible){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-radio__group_error .neo-radio__option{border-color:var(--dd-base-accent-orange)}.neo-radio__option_disabled{opacity:.55;cursor:not-allowed}.neo-radio__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
2546
+ }
2547
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalRadio, decorators: [{
2548
+ type: Component,
2549
+ args: [{ selector: 'duck-dev-input-neobrutal-radio', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n <div class=\"neo-radio__copy\">\n <label class=\"neo-radio__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n }\n </div>\n\n <div\n class=\"neo-radio__group\"\n [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n role=\"radiogroup\"\n [attr.aria-describedby]=\"describedBy\"\n >\n @for (option of options(); track option.value; let index = $index) {\n <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n <input\n class=\"neo-radio__input\"\n type=\"radio\"\n [id]=\"control + '-' + index\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n formControlName=\"{{ control }}\"\n />\n <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n <span class=\"neo-radio__text\">{{ option.label }}</span>\n </label>\n }\n </div>\n\n @if (erMessage) {\n <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-0)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,white);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-radio__option:hover,.neo-radio__option:has(.neo-radio__input:focus-visible){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-radio__group_error .neo-radio__option{border-color:var(--dd-base-accent-orange)}.neo-radio__option_disabled{opacity:.55;cursor:not-allowed}.neo-radio__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}\n"] }]
2550
+ }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
2551
+
2480
2552
  class DuckDevInputNeobrutalSlab {
2481
2553
  form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
2482
2554
  controlName = input.required({ ...(ngDevMode ? { debugName: "controlName" } : {}) });
@@ -2487,11 +2559,11 @@ class DuckDevInputNeobrutalSlab {
2487
2559
  options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
2488
2560
  errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
2489
2561
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
2490
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalSlab, isStandalone: true, selector: "duck-dev-input-neobrutal-slab", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n <span class=\"neo-label__tag\">Input</span>\n <span>{{ label() }}</span>\n</label>\n\n<div class=\"neo-field neo-field_slab\" [class.neo-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-check\">\n <input class=\"neo-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"neo-check__label\" [for]=\"control\">\n <span class=\"neo-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-input neo-input_textarea\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-input neo-input_select\"\n [class.neo-input_error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-input\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-base-600);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-base-600);border-radius:0;background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-base-600);border-bottom:4px solid var(--dd-base-600);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px color-mix(in srgb,var(--dd-base-accent-orange) 70%,var(--dd-base-600))}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
2562
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalSlab, isStandalone: true, selector: "duck-dev-input-neobrutal-slab", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n <span>{{ label() }}</span>\n</label>\n\n<div class=\"neo-field neo-field_slab\" [class.neo-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-check\">\n <input class=\"neo-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"neo-check__label\" [for]=\"control\">\n <span class=\"neo-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-input neo-input_textarea\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-input neo-input_select\"\n [class.neo-input_error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-input\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-base-600);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-base-600);border-radius:0;background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-base-600);border-bottom:4px solid var(--dd-base-600);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px color-mix(in srgb,var(--dd-base-accent-orange) 70%,var(--dd-base-600))}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
2491
2563
  }
2492
2564
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, decorators: [{
2493
2565
  type: Component,
2494
- args: [{ selector: 'duck-dev-input-neobrutal-slab', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n <span class=\"neo-label__tag\">Input</span>\n <span>{{ label() }}</span>\n</label>\n\n<div class=\"neo-field neo-field_slab\" [class.neo-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-check\">\n <input class=\"neo-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"neo-check__label\" [for]=\"control\">\n <span class=\"neo-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-input neo-input_textarea\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-input neo-input_select\"\n [class.neo-input_error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-input\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-base-600);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-base-600);border-radius:0;background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-base-600);border-bottom:4px solid var(--dd-base-600);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px color-mix(in srgb,var(--dd-base-accent-orange) 70%,var(--dd-base-600))}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"] }]
2566
+ args: [{ selector: 'duck-dev-input-neobrutal-slab', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n <span>{{ label() }}</span>\n</label>\n\n<div class=\"neo-field neo-field_slab\" [class.neo-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-check\">\n <input class=\"neo-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"neo-check__label\" [for]=\"control\">\n <span class=\"neo-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-input neo-input_textarea\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-input neo-input_select\"\n [class.neo-input_error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-input\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-base-600);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-base-600);border-radius:0;background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-base-600);border-bottom:4px solid var(--dd-base-600);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px color-mix(in srgb,var(--dd-base-accent-orange) 70%,var(--dd-base-600))}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"] }]
2495
2567
  }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
2496
2568
 
2497
2569
  class DuckDevInputNeobrutalStrip {
@@ -2511,6 +2583,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
2511
2583
  args: [{ selector: 'duck-dev-input-neobrutal-strip', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n <span>{{ label() }}</span>\n <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div class=\"neo-strip-field\" [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-strip-check\">\n <input class=\"neo-strip-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"neo-strip-check__label\" [for]=\"control\">\n <span class=\"neo-strip-check__box\">\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span class=\"neo-strip-check__text\"><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input neo-strip-input_textarea\"\n [class.neo-strip-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"neo-strip-select\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"neo-strip-input neo-strip-input_select\"\n [class.neo-strip-input_error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-strip-input\"\n [class.neo-strip-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-strip-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-base-600)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-base-600);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-600)}.neo-strip-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-strip-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box{background:var(--dd-base-accent-orange)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box svg{stroke-dashoffset:0}\n"] }]
2512
2584
  }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
2513
2585
 
2586
+ class DuckDevInputNeobrutalToggle {
2587
+ form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
2588
+ controlName = input.required({ ...(ngDevMode ? { debugName: "controlName" } : {}) });
2589
+ label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
2590
+ description = input('', { ...(ngDevMode ? { debugName: "description" } : {}) });
2591
+ offLabel = input.required({ ...(ngDevMode ? { debugName: "offLabel" } : {}) });
2592
+ onLabel = input.required({ ...(ngDevMode ? { debugName: "onLabel" } : {}) });
2593
+ errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
2594
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
2595
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalToggle, isStandalone: true, selector: "duck-dev-input-neobrutal-toggle", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: true, transformFunction: null }, onLabel: { classPropertyName: "onLabel", publicName: "onLabel", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let toggleControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-toggle\" [formGroup]=\"formName\">\n <div class=\"neo-toggle__copy\">\n <label [for]=\"control\" class=\"neo-toggle__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-toggle__description\" [id]=\"control + '-description'\">\n {{ description() }}\n </p>\n }\n </div>\n\n <label\n class=\"neo-toggle__switch\"\n [class.neo-toggle__switch_checked]=\"toggleControl?.value\"\n [class.neo-toggle__switch_error]=\"toggleControl?.invalid && toggleControl?.touched\"\n [for]=\"control\"\n >\n <input\n class=\"neo-toggle__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n [attr.aria-describedby]=\"describedBy\"\n />\n\n <span class=\"neo-toggle__rail\" aria-hidden=\"true\">\n <span class=\"neo-toggle__thumb\"></span>\n </span>\n\n <span class=\"neo-toggle__state\">\n <span class=\"neo-toggle__chip neo-toggle__chip_off\">{{ offLabel() }}</span>\n <span class=\"neo-toggle__chip neo-toggle__chip_on\">{{ onLabel() }}</span>\n </span>\n </label>\n\n @if (erMessage) {\n <div class=\"neo-toggle__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-toggle{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-toggle__copy{display:grid;gap:6px}.neo-toggle__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-toggle__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-toggle__switch{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;cursor:pointer}.neo-toggle__input{position:absolute;opacity:0;pointer-events:none}.neo-toggle__rail{position:relative;display:block;width:92px;height:48px;box-sizing:border-box;border:4px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);box-shadow:6px 6px 0 var(--dd-base-accent-blue);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-toggle__thumb{position:absolute;top:6px;left:6px;width:28px;height:28px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);transition:transform .18s ease}.neo-toggle__state{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.neo-toggle__chip{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px 4px;border:3px solid var(--dd-base-600);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase}.neo-toggle__chip_off{background:var(--dd-base-0)}.neo-toggle__chip_on{background:var(--dd-base-accent-green)}.neo-toggle__switch_checked .neo-toggle__rail{background:var(--dd-base-accent-green);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_checked .neo-toggle__thumb{transform:translate(36px)}.neo-toggle__switch:hover .neo-toggle__rail,.neo-toggle__input:focus-visible+.neo-toggle__rail{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_error .neo-toggle__rail{border-color:var(--dd-base-accent-orange)}.neo-toggle__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}@media(max-width:640px){.neo-toggle__switch{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
2596
+ }
2597
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalToggle, decorators: [{
2598
+ type: Component,
2599
+ args: [{ selector: 'duck-dev-input-neobrutal-toggle', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let toggleControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-toggle\" [formGroup]=\"formName\">\n <div class=\"neo-toggle__copy\">\n <label [for]=\"control\" class=\"neo-toggle__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-toggle__description\" [id]=\"control + '-description'\">\n {{ description() }}\n </p>\n }\n </div>\n\n <label\n class=\"neo-toggle__switch\"\n [class.neo-toggle__switch_checked]=\"toggleControl?.value\"\n [class.neo-toggle__switch_error]=\"toggleControl?.invalid && toggleControl?.touched\"\n [for]=\"control\"\n >\n <input\n class=\"neo-toggle__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n [attr.aria-describedby]=\"describedBy\"\n />\n\n <span class=\"neo-toggle__rail\" aria-hidden=\"true\">\n <span class=\"neo-toggle__thumb\"></span>\n </span>\n\n <span class=\"neo-toggle__state\">\n <span class=\"neo-toggle__chip neo-toggle__chip_off\">{{ offLabel() }}</span>\n <span class=\"neo-toggle__chip neo-toggle__chip_on\">{{ onLabel() }}</span>\n </span>\n </label>\n\n @if (erMessage) {\n <div class=\"neo-toggle__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-toggle{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-toggle__copy{display:grid;gap:6px}.neo-toggle__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-toggle__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-toggle__switch{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;cursor:pointer}.neo-toggle__input{position:absolute;opacity:0;pointer-events:none}.neo-toggle__rail{position:relative;display:block;width:92px;height:48px;box-sizing:border-box;border:4px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);box-shadow:6px 6px 0 var(--dd-base-accent-blue);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-toggle__thumb{position:absolute;top:6px;left:6px;width:28px;height:28px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);transition:transform .18s ease}.neo-toggle__state{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.neo-toggle__chip{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px 4px;border:3px solid var(--dd-base-600);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase}.neo-toggle__chip_off{background:var(--dd-base-0)}.neo-toggle__chip_on{background:var(--dd-base-accent-green)}.neo-toggle__switch_checked .neo-toggle__rail{background:var(--dd-base-accent-green);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_checked .neo-toggle__thumb{transform:translate(36px)}.neo-toggle__switch:hover .neo-toggle__rail,.neo-toggle__input:focus-visible+.neo-toggle__rail{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_error .neo-toggle__rail{border-color:var(--dd-base-accent-orange)}.neo-toggle__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}@media(max-width:640px){.neo-toggle__switch{grid-template-columns:1fr}}\n"] }]
2600
+ }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: true }] }], onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: true }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
2601
+
2514
2602
  class DuckDevNotificationService {
2515
2603
  seq = 1;
2516
2604
  timers = new Map();
@@ -2665,12 +2753,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
2665
2753
  class InputBlock {
2666
2754
  fb = inject(FormBuilder);
2667
2755
  t = inject(TranslocoService);
2756
+ styleTabs = [
2757
+ { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
2758
+ { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
2759
+ ];
2668
2760
  accountTypeOptions = [
2669
2761
  { value: 'designer', label: 'Designer' },
2670
2762
  { value: 'developer', label: 'Developer' },
2671
2763
  { value: 'manager', label: 'Product Manager' },
2672
2764
  { value: 'founder', label: 'Founder' },
2673
2765
  ];
2766
+ workspaceModeOptions = [
2767
+ { value: 'focus', label: 'Focus mode' },
2768
+ { value: 'review', label: 'Review mode' },
2769
+ { value: 'launch', label: 'Launch mode' },
2770
+ ];
2674
2771
  textExampleForm = this.fb.group({
2675
2772
  fullName: ['', [Validators.required, Validators.minLength(3)]],
2676
2773
  });
@@ -2686,6 +2783,8 @@ class InputBlock {
2686
2783
  role: ['', Validators.required],
2687
2784
  bio: [''],
2688
2785
  agreement: [false, Validators.requiredTrue],
2786
+ launchMode: ['focus', Validators.required],
2787
+ instantSync: [true],
2689
2788
  });
2690
2789
  exampleMarkup = `<form [formGroup]="profileForm" class="profile-form">
2691
2790
  <duck-dev-input
@@ -2758,6 +2857,10 @@ getError(controlName: string): string {
2758
2857
 
2759
2858
  return 'Check the field value';
2760
2859
  }`;
2860
+ activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
2861
+ onStyleTabChange(tab) {
2862
+ this.activeStyleTab.set(tab);
2863
+ }
2761
2864
  getError(controlName, form = this.demoForm) {
2762
2865
  const control = form.get(controlName);
2763
2866
  if (!control || !control.touched || !control.invalid) {
@@ -2778,7 +2881,7 @@ getError(controlName: string): string {
2778
2881
  return this.t.translate('inputComponent.demo.errors.invalid');
2779
2882
  }
2780
2883
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2781
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: InputBlock, isStandalone: true, selector: "app-input-block", ngImport: i0, template: "<div class=\"demo-container\">\n <section class=\"hero\">\n <span class=\"eyebrow\">{{ 'inputComponent.eyebrow' | transloco }}</span>\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n <p class=\"hero-description\">\n {{ 'inputComponent.description' | transloco }}\n </p>\n\n <div class=\"hero-points\">\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointType' | transloco }}</span>\n <span class=\"hero-point-value\">{{ 'inputComponent.heroPointTypeValue' | transloco }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{\n 'inputComponent.heroPointIntegration' | transloco\n }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointIntegrationValue' | transloco\n }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointUseCase' | transloco }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointUseCaseValue' | transloco\n }}</span>\n </div>\n </div>\n </section>\n\n <div class=\"overview-grid\">\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.overviewTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.overviewDescription' | transloco }}\n </p>\n </dd-card-section>\n\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.featuresTitle' | transloco }}</h2>\n <ul class=\"feature-list\">\n <li>{{ 'inputComponent.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.feature5' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <div class=\"examples-grid\">\n <dd-card-section class=\"example-card\">\n <h2>{{ 'inputComponent.examplesTitle' | transloco }}</h2>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleText' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textExampleForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName', textExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleSelect' | transloco }}</h3>\n <duck-dev-input\n [form]=\"selectExampleForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role', selectExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleSelectCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleTextarea' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textareaExampleForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextareaCaption' | transloco }}</p>\n </div>\n </dd-card-section>\n\n <dd-card-section class=\"api-card\">\n <h2>{{ 'inputComponent.apiTitle' | transloco }}</h2>\n <ul class=\"api-list\">\n <li><strong>form</strong> - {{ 'inputComponent.apiForm' | transloco }}</li>\n <li><strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}</li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li><strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}</li>\n <li><strong>type</strong> - {{ 'inputComponent.apiType' | transloco }}</li>\n <li>\n <strong>formInputType</strong> - {{ 'inputComponent.apiFormInputType' | transloco }}\n </li>\n <li><strong>options</strong> - {{ 'inputComponent.apiOptions' | transloco }}</li>\n <li><strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <dd-card-section class=\"showcase-card\">\n <div class=\"showcase-head\">\n <div>\n <h2>{{ 'inputComponent.showcaseTitle' | transloco }}</h2>\n <p class=\"showcase-caption\">\n {{ 'inputComponent.showcaseDescription' | transloco }}\n </p>\n </div>\n <div class=\"showcase-value\">\n {{ 'inputComponent.showcaseValue' | transloco }}:\n {{ demoForm.value | json }}\n </div>\n </div>\n\n <form class=\"demo-form\" [formGroup]=\"demoForm\">\n <div class=\"showcase-grid\">\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseSelect' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item_wide\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseTextarea' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseCheckbox' | transloco }}</p>\n <div class=\"showcase-inline\">\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input>\n </div>\n </div>\n </div>\n </form>\n </dd-card-section>\n\n <dd-card-section class=\"showcase-card showcase-card--neobrutal\">\n <div class=\"showcase-head\">\n <div>\n <h2>Neobrutalism Inputs</h2>\n <p class=\"showcase-caption\">\n Extra brutal variants for promo forms, loud dashboards and expressive settings screens.\n </p>\n </div>\n </div>\n\n <div class=\"showcase-grid showcase-grid--neobrutal\">\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Text</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Select</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Poster / Textarea</p>\n <duck-dev-input-neobrutal-poster\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Email</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Checkbox</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input-neobrutal-slab>\n </div>\n </div>\n </dd-card-section>\n\n <div class=\"code-grid\">\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeTemplate' | transloco }}</h3>\n <pre><code>{{ exampleMarkup }}</code></pre>\n </dd-card-section>\n\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeLogic' | transloco }}</h3>\n <pre><code>{{ exampleLogic }}</code></pre>\n </dd-card-section>\n </div>\n</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 72px;display:grid;gap:28px;color:var(--dd-base-600)}.demo-container h1{font-size:40px;font-weight:700;color:var(--dd-base-600);margin:0;text-align:left}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin:0 0 12px}.demo-container h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin:0 0 14px}.demo-container p{margin:0}.hero{padding:36px;border-radius:32px;background:radial-gradient(circle at top left,rgba(125,92,255,.18),transparent 34%),radial-gradient(circle at bottom right,rgba(255,146,43,.18),transparent 30%),linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid rgba(125,92,255,.12);box-shadow:0 28px 60px #12121714}.eyebrow{display:inline-flex;margin-bottom:16px;padding:8px 14px;border-radius:999px;background:#7d5cff1f;color:var(--dd-base-accent-blue);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hero-description{max-width:720px;margin-top:12px;font-size:17px;line-height:1.7;color:var(--dd-base-400)}.hero-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.hero-point{padding:18px 20px;border-radius:22px;background:#ffffffc2;border:1px solid rgba(18,18,23,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-point-label{display:block;margin-bottom:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dd-base-accent-blue)}.hero-point-value{font-size:15px;line-height:1.5;color:var(--dd-base-500)}.overview-grid,.examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:26px;border-radius:28px;background:var(--dd-base-0);border:1px solid rgba(18,18,23,.08);box-shadow:0 20px 40px #1212170f}.description{font-size:15px;line-height:1.7;color:var(--dd-base-400)}.feature-list,.api-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}.feature-list li,.api-list li{padding:16px 18px;border-radius:18px;background:var(--dd-base-100);border:1px solid rgba(18,18,23,.04);line-height:1.6;color:var(--dd-base-500)}.api-list strong{color:var(--dd-base-accent-blue)}.examples-grid{align-items:start}.example-card{display:grid;gap:16px}.example-preview{padding:20px;border-radius:22px;background:linear-gradient(180deg,rgba(125,92,255,.08),transparent),var(--dd-base-100);border:1px solid rgba(125,92,255,.08)}.demo-form{display:grid;gap:18px}.checkbox-note{font-size:14px;line-height:1.5;color:var(--dd-base-400)}.showcase-card{background:radial-gradient(circle at top right,rgba(255,146,43,.12),transparent 26%),var(--dd-base-0)}.showcase-card--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 22%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.showcase-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:22px}.showcase-caption{font-size:14px;line-height:1.6;color:var(--dd-base-400)}.showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-item{padding:20px;border-radius:24px;background:linear-gradient(180deg,var(--dd-base-100),rgba(255,255,255,.92));border:1px solid rgba(18,18,23,.05)}.showcase-item--neobrutal{border:4px solid var(--dd-base-600);border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 16%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-yellow)}.showcase-item_wide{grid-column:1/-1}.showcase-label{margin-bottom:14px;font-size:14px;font-weight:600;color:var(--dd-base-400)}.showcase-inline{display:flex;align-items:center;gap:14px}.showcase-value{margin-top:12px;font-size:14px;color:var(--dd-base-accent-blue)}.code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-grid--neobrutal{align-items:start}.code-card pre{margin:0;padding:20px;overflow-x:auto;border-radius:22px;background:#141821}.code-card code{color:#f6f7fb;font-size:13px;line-height:1.7}@media(max-width:900px){.hero-points,.overview-grid,.examples-grid,.showcase-grid,.code-grid{grid-template-columns:1fr}}@media(max-width:768px){.demo-container{padding:24px 14px 56px}.demo-container h1{font-size:30px}.hero,.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:20px;border-radius:22px}.showcase-head,.showcase-inline{flex-direction:column;align-items:stretch}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalPoster, selector: "duck-dev-input-neobrutal-poster", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalSlab, selector: "duck-dev-input-neobrutal-slab", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalStrip, selector: "duck-dev-input-neobrutal-strip", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: JsonPipe, name: "json" }] });
2884
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: InputBlock, isStandalone: true, selector: "app-input-block", ngImport: i0, template: "<div class=\"demo-container\">\n <section class=\"hero\">\n <span class=\"eyebrow\">{{ 'inputComponent.eyebrow' | transloco }}</span>\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n <p class=\"hero-description\">\n {{ 'inputComponent.description' | transloco }}\n </p>\n\n <div class=\"hero-points\">\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointType' | transloco }}</span>\n <span class=\"hero-point-value\">{{ 'inputComponent.heroPointTypeValue' | transloco }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{\n 'inputComponent.heroPointIntegration' | transloco\n }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointIntegrationValue' | transloco\n }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointUseCase' | transloco }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointUseCaseValue' | transloco\n }}</span>\n </div>\n </div>\n </section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <div class=\"overview-grid\">\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.overviewTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.overviewDescription' | transloco }}\n </p>\n </dd-card-section>\n\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.featuresTitle' | transloco }}</h2>\n <ul class=\"feature-list\">\n <li>{{ 'inputComponent.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.feature5' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <div class=\"examples-grid\">\n <dd-card-section class=\"example-card\">\n <h2>{{ 'inputComponent.examplesTitle' | transloco }}</h2>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleText' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textExampleForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName', textExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleSelect' | transloco }}</h3>\n <duck-dev-input\n [form]=\"selectExampleForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role', selectExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleSelectCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleTextarea' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textareaExampleForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextareaCaption' | transloco }}</p>\n </div>\n </dd-card-section>\n\n <dd-card-section class=\"api-card\">\n <h2>{{ 'inputComponent.apiTitle' | transloco }}</h2>\n <ul class=\"api-list\">\n <li><strong>form</strong> - {{ 'inputComponent.apiForm' | transloco }}</li>\n <li><strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}</li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li><strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}</li>\n <li><strong>type</strong> - {{ 'inputComponent.apiType' | transloco }}</li>\n <li>\n <strong>formInputType</strong> - {{ 'inputComponent.apiFormInputType' | transloco }}\n </li>\n <li><strong>options</strong> - {{ 'inputComponent.apiOptions' | transloco }}</li>\n <li><strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <dd-card-section class=\"showcase-card\">\n <div class=\"showcase-head\">\n <div>\n <h2>{{ 'inputComponent.showcaseTitle' | transloco }}</h2>\n <p class=\"showcase-caption\">\n {{ 'inputComponent.showcaseDescription' | transloco }}\n </p>\n </div>\n <div class=\"showcase-value\">\n {{ 'inputComponent.showcaseValue' | transloco }}:\n {{ demoForm.value | json }}\n </div>\n </div>\n\n <form class=\"demo-form\" [formGroup]=\"demoForm\">\n <div class=\"showcase-grid\">\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseSelect' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item_wide\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseTextarea' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseCheckbox' | transloco }}</p>\n <div class=\"showcase-inline\">\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input>\n </div>\n </div>\n </div>\n </form>\n </dd-card-section>\n } @else {\n <dd-card-section class=\"showcase-card showcase-card--neobrutal\">\n <div class=\"showcase-head\">\n <div>\n <h2>Neobrutalism Inputs</h2>\n <p class=\"showcase-caption\">\n Extra brutal variants for promo forms, loud dashboards and expressive settings screens.\n </p>\n </div>\n </div>\n\n <div class=\"showcase-grid showcase-grid--neobrutal\">\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Text</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Select</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Poster / Textarea</p>\n <duck-dev-input-neobrutal-poster\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Email</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Checkbox</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input-neobrutal-slab>\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Toggle / Boolean</p>\n <duck-dev-input-neobrutal-toggle\n [form]=\"demoForm\"\n controlName=\"instantSync\"\n label=\"Instant sync\"\n description=\"Push UI changes to the preview canvas the moment a control changes.\"\n offLabel=\"Paused\"\n onLabel=\"Live\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Radio / Mode</p>\n <duck-dev-input-neobrutal-radio\n [form]=\"demoForm\"\n controlName=\"launchMode\"\n label=\"Workspace mode\"\n description=\"Pick the brutal layout state the team sees first.\"\n [options]=\"workspaceModeOptions\"\n [errorMessage]=\"getError('launchMode')\"\n />\n </div>\n </div>\n </dd-card-section>\n }\n\n <div class=\"code-grid\">\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeTemplate' | transloco }}</h3>\n <pre><code>{{ exampleMarkup }}</code></pre>\n </dd-card-section>\n\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeLogic' | transloco }}</h3>\n <pre><code>{{ exampleLogic }}</code></pre>\n </dd-card-section>\n </div>\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px 72px;display:grid;gap:28px;color:var(--dd-base-600)}.demo-container h1{font-size:40px;font-weight:700;color:var(--dd-base-600);margin:0;text-align:left}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin:0 0 12px}.demo-container h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin:0 0 14px}.demo-container p{margin:0}.hero{padding:36px;border-radius:32px;background:radial-gradient(circle at top left,rgba(125,92,255,.18),transparent 34%),radial-gradient(circle at bottom right,rgba(255,146,43,.18),transparent 30%),linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid rgba(125,92,255,.12);box-shadow:0 28px 60px #12121714}.eyebrow{display:inline-flex;margin-bottom:16px;padding:8px 14px;border-radius:999px;background:#7d5cff1f;color:var(--dd-base-accent-blue);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hero-description{max-width:720px;margin-top:12px;font-size:17px;line-height:1.7;color:var(--dd-base-400)}.hero-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.hero-point{padding:18px 20px;border-radius:22px;background:#ffffffc2;border:1px solid rgba(18,18,23,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-point-label{display:block;margin-bottom:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dd-base-accent-blue)}.hero-point-value{font-size:15px;line-height:1.5;color:var(--dd-base-500)}.overview-grid,.examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:26px;border-radius:28px;background:var(--dd-base-0);border:1px solid rgba(18,18,23,.08);box-shadow:0 20px 40px #1212170f}.description{font-size:15px;line-height:1.7;color:var(--dd-base-400)}.feature-list,.api-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}.feature-list li,.api-list li{padding:16px 18px;border-radius:18px;background:var(--dd-base-100);border:1px solid rgba(18,18,23,.04);line-height:1.6;color:var(--dd-base-500)}.api-list strong{color:var(--dd-base-accent-blue)}.examples-grid{align-items:start}.example-card{display:grid;gap:16px}.example-preview{padding:20px;border-radius:22px;background:linear-gradient(180deg,rgba(125,92,255,.08),transparent),var(--dd-base-100);border:1px solid rgba(125,92,255,.08)}.demo-form{display:grid;gap:18px}.checkbox-note{font-size:14px;line-height:1.5;color:var(--dd-base-400)}.showcase-card{background:radial-gradient(circle at top right,rgba(255,146,43,.12),transparent 26%),var(--dd-base-0)}.showcase-card--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 22%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.showcase-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:22px}.showcase-caption{font-size:14px;line-height:1.6;color:var(--dd-base-400)}.showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-item{padding:20px;border-radius:24px;background:linear-gradient(180deg,var(--dd-base-100),rgba(255,255,255,.92));border:1px solid rgba(18,18,23,.05)}.showcase-item--neobrutal{border:4px solid var(--dd-base-600);border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 16%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-yellow)}.showcase-item_wide{grid-column:1/-1}.showcase-label{margin-bottom:14px;font-size:14px;font-weight:600;color:var(--dd-base-400)}.showcase-inline{display:flex;align-items:center;gap:14px}.showcase-value{margin-top:12px;font-size:14px;color:var(--dd-base-accent-blue)}.code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-grid--neobrutal{align-items:start}.code-card pre{margin:0;padding:20px;overflow-x:auto;border-radius:22px;background:#141821}.code-card code{color:#f6f7fb;font-size:13px;line-height:1.7}@media(max-width:900px){.hero-points,.overview-grid,.examples-grid,.showcase-grid,.code-grid{grid-template-columns:1fr}}@media(max-width:768px){.demo-container{padding:24px 14px 56px}.demo-container h1{font-size:30px}.hero,.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:20px;border-radius:22px}.showcase-head,.showcase-inline{flex-direction:column;align-items:stretch}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalPoster, selector: "duck-dev-input-neobrutal-poster", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalRadio, selector: "duck-dev-input-neobrutal-radio", inputs: ["form", "controlName", "label", "description", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalSlab, selector: "duck-dev-input-neobrutal-slab", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalStrip, selector: "duck-dev-input-neobrutal-strip", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalToggle, selector: "duck-dev-input-neobrutal-toggle", inputs: ["form", "controlName", "label", "description", "offLabel", "onLabel", "errorMessage"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: JsonPipe, name: "json" }] });
2782
2885
  }
2783
2886
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, decorators: [{
2784
2887
  type: Component,
@@ -2787,11 +2890,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
2787
2890
  DuckDevCardSection,
2788
2891
  DuckDevInput,
2789
2892
  DuckDevInputNeobrutalPoster,
2893
+ DuckDevInputNeobrutalRadio,
2790
2894
  DuckDevInputNeobrutalSlab,
2791
2895
  DuckDevInputNeobrutalStrip,
2896
+ DuckDevInputNeobrutalToggle,
2792
2897
  ReactiveFormsModule,
2793
2898
  JsonPipe,
2794
- ], template: "<div class=\"demo-container\">\n <section class=\"hero\">\n <span class=\"eyebrow\">{{ 'inputComponent.eyebrow' | transloco }}</span>\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n <p class=\"hero-description\">\n {{ 'inputComponent.description' | transloco }}\n </p>\n\n <div class=\"hero-points\">\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointType' | transloco }}</span>\n <span class=\"hero-point-value\">{{ 'inputComponent.heroPointTypeValue' | transloco }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{\n 'inputComponent.heroPointIntegration' | transloco\n }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointIntegrationValue' | transloco\n }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointUseCase' | transloco }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointUseCaseValue' | transloco\n }}</span>\n </div>\n </div>\n </section>\n\n <div class=\"overview-grid\">\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.overviewTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.overviewDescription' | transloco }}\n </p>\n </dd-card-section>\n\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.featuresTitle' | transloco }}</h2>\n <ul class=\"feature-list\">\n <li>{{ 'inputComponent.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.feature5' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <div class=\"examples-grid\">\n <dd-card-section class=\"example-card\">\n <h2>{{ 'inputComponent.examplesTitle' | transloco }}</h2>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleText' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textExampleForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName', textExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleSelect' | transloco }}</h3>\n <duck-dev-input\n [form]=\"selectExampleForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role', selectExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleSelectCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleTextarea' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textareaExampleForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextareaCaption' | transloco }}</p>\n </div>\n </dd-card-section>\n\n <dd-card-section class=\"api-card\">\n <h2>{{ 'inputComponent.apiTitle' | transloco }}</h2>\n <ul class=\"api-list\">\n <li><strong>form</strong> - {{ 'inputComponent.apiForm' | transloco }}</li>\n <li><strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}</li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li><strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}</li>\n <li><strong>type</strong> - {{ 'inputComponent.apiType' | transloco }}</li>\n <li>\n <strong>formInputType</strong> - {{ 'inputComponent.apiFormInputType' | transloco }}\n </li>\n <li><strong>options</strong> - {{ 'inputComponent.apiOptions' | transloco }}</li>\n <li><strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <dd-card-section class=\"showcase-card\">\n <div class=\"showcase-head\">\n <div>\n <h2>{{ 'inputComponent.showcaseTitle' | transloco }}</h2>\n <p class=\"showcase-caption\">\n {{ 'inputComponent.showcaseDescription' | transloco }}\n </p>\n </div>\n <div class=\"showcase-value\">\n {{ 'inputComponent.showcaseValue' | transloco }}:\n {{ demoForm.value | json }}\n </div>\n </div>\n\n <form class=\"demo-form\" [formGroup]=\"demoForm\">\n <div class=\"showcase-grid\">\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseSelect' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item_wide\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseTextarea' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseCheckbox' | transloco }}</p>\n <div class=\"showcase-inline\">\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input>\n </div>\n </div>\n </div>\n </form>\n </dd-card-section>\n\n <dd-card-section class=\"showcase-card showcase-card--neobrutal\">\n <div class=\"showcase-head\">\n <div>\n <h2>Neobrutalism Inputs</h2>\n <p class=\"showcase-caption\">\n Extra brutal variants for promo forms, loud dashboards and expressive settings screens.\n </p>\n </div>\n </div>\n\n <div class=\"showcase-grid showcase-grid--neobrutal\">\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Text</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Select</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Poster / Textarea</p>\n <duck-dev-input-neobrutal-poster\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Email</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Checkbox</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input-neobrutal-slab>\n </div>\n </div>\n </dd-card-section>\n\n <div class=\"code-grid\">\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeTemplate' | transloco }}</h3>\n <pre><code>{{ exampleMarkup }}</code></pre>\n </dd-card-section>\n\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeLogic' | transloco }}</h3>\n <pre><code>{{ exampleLogic }}</code></pre>\n </dd-card-section>\n </div>\n</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 72px;display:grid;gap:28px;color:var(--dd-base-600)}.demo-container h1{font-size:40px;font-weight:700;color:var(--dd-base-600);margin:0;text-align:left}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin:0 0 12px}.demo-container h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin:0 0 14px}.demo-container p{margin:0}.hero{padding:36px;border-radius:32px;background:radial-gradient(circle at top left,rgba(125,92,255,.18),transparent 34%),radial-gradient(circle at bottom right,rgba(255,146,43,.18),transparent 30%),linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid rgba(125,92,255,.12);box-shadow:0 28px 60px #12121714}.eyebrow{display:inline-flex;margin-bottom:16px;padding:8px 14px;border-radius:999px;background:#7d5cff1f;color:var(--dd-base-accent-blue);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hero-description{max-width:720px;margin-top:12px;font-size:17px;line-height:1.7;color:var(--dd-base-400)}.hero-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.hero-point{padding:18px 20px;border-radius:22px;background:#ffffffc2;border:1px solid rgba(18,18,23,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-point-label{display:block;margin-bottom:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dd-base-accent-blue)}.hero-point-value{font-size:15px;line-height:1.5;color:var(--dd-base-500)}.overview-grid,.examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:26px;border-radius:28px;background:var(--dd-base-0);border:1px solid rgba(18,18,23,.08);box-shadow:0 20px 40px #1212170f}.description{font-size:15px;line-height:1.7;color:var(--dd-base-400)}.feature-list,.api-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}.feature-list li,.api-list li{padding:16px 18px;border-radius:18px;background:var(--dd-base-100);border:1px solid rgba(18,18,23,.04);line-height:1.6;color:var(--dd-base-500)}.api-list strong{color:var(--dd-base-accent-blue)}.examples-grid{align-items:start}.example-card{display:grid;gap:16px}.example-preview{padding:20px;border-radius:22px;background:linear-gradient(180deg,rgba(125,92,255,.08),transparent),var(--dd-base-100);border:1px solid rgba(125,92,255,.08)}.demo-form{display:grid;gap:18px}.checkbox-note{font-size:14px;line-height:1.5;color:var(--dd-base-400)}.showcase-card{background:radial-gradient(circle at top right,rgba(255,146,43,.12),transparent 26%),var(--dd-base-0)}.showcase-card--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 22%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.showcase-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:22px}.showcase-caption{font-size:14px;line-height:1.6;color:var(--dd-base-400)}.showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-item{padding:20px;border-radius:24px;background:linear-gradient(180deg,var(--dd-base-100),rgba(255,255,255,.92));border:1px solid rgba(18,18,23,.05)}.showcase-item--neobrutal{border:4px solid var(--dd-base-600);border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 16%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-yellow)}.showcase-item_wide{grid-column:1/-1}.showcase-label{margin-bottom:14px;font-size:14px;font-weight:600;color:var(--dd-base-400)}.showcase-inline{display:flex;align-items:center;gap:14px}.showcase-value{margin-top:12px;font-size:14px;color:var(--dd-base-accent-blue)}.code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-grid--neobrutal{align-items:start}.code-card pre{margin:0;padding:20px;overflow-x:auto;border-radius:22px;background:#141821}.code-card code{color:#f6f7fb;font-size:13px;line-height:1.7}@media(max-width:900px){.hero-points,.overview-grid,.examples-grid,.showcase-grid,.code-grid{grid-template-columns:1fr}}@media(max-width:768px){.demo-container{padding:24px 14px 56px}.demo-container h1{font-size:30px}.hero,.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:20px;border-radius:22px}.showcase-head,.showcase-inline{flex-direction:column;align-items:stretch}}\n"] }]
2899
+ DuckDevTab,
2900
+ ], template: "<div class=\"demo-container\">\n <section class=\"hero\">\n <span class=\"eyebrow\">{{ 'inputComponent.eyebrow' | transloco }}</span>\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n <p class=\"hero-description\">\n {{ 'inputComponent.description' | transloco }}\n </p>\n\n <div class=\"hero-points\">\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointType' | transloco }}</span>\n <span class=\"hero-point-value\">{{ 'inputComponent.heroPointTypeValue' | transloco }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{\n 'inputComponent.heroPointIntegration' | transloco\n }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointIntegrationValue' | transloco\n }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointUseCase' | transloco }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointUseCaseValue' | transloco\n }}</span>\n </div>\n </div>\n </section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <div class=\"overview-grid\">\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.overviewTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.overviewDescription' | transloco }}\n </p>\n </dd-card-section>\n\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.featuresTitle' | transloco }}</h2>\n <ul class=\"feature-list\">\n <li>{{ 'inputComponent.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.feature5' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <div class=\"examples-grid\">\n <dd-card-section class=\"example-card\">\n <h2>{{ 'inputComponent.examplesTitle' | transloco }}</h2>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleText' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textExampleForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName', textExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleSelect' | transloco }}</h3>\n <duck-dev-input\n [form]=\"selectExampleForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role', selectExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleSelectCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleTextarea' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textareaExampleForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextareaCaption' | transloco }}</p>\n </div>\n </dd-card-section>\n\n <dd-card-section class=\"api-card\">\n <h2>{{ 'inputComponent.apiTitle' | transloco }}</h2>\n <ul class=\"api-list\">\n <li><strong>form</strong> - {{ 'inputComponent.apiForm' | transloco }}</li>\n <li><strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}</li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li><strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}</li>\n <li><strong>type</strong> - {{ 'inputComponent.apiType' | transloco }}</li>\n <li>\n <strong>formInputType</strong> - {{ 'inputComponent.apiFormInputType' | transloco }}\n </li>\n <li><strong>options</strong> - {{ 'inputComponent.apiOptions' | transloco }}</li>\n <li><strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <dd-card-section class=\"showcase-card\">\n <div class=\"showcase-head\">\n <div>\n <h2>{{ 'inputComponent.showcaseTitle' | transloco }}</h2>\n <p class=\"showcase-caption\">\n {{ 'inputComponent.showcaseDescription' | transloco }}\n </p>\n </div>\n <div class=\"showcase-value\">\n {{ 'inputComponent.showcaseValue' | transloco }}:\n {{ demoForm.value | json }}\n </div>\n </div>\n\n <form class=\"demo-form\" [formGroup]=\"demoForm\">\n <div class=\"showcase-grid\">\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseSelect' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item_wide\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseTextarea' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseCheckbox' | transloco }}</p>\n <div class=\"showcase-inline\">\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input>\n </div>\n </div>\n </div>\n </form>\n </dd-card-section>\n } @else {\n <dd-card-section class=\"showcase-card showcase-card--neobrutal\">\n <div class=\"showcase-head\">\n <div>\n <h2>Neobrutalism Inputs</h2>\n <p class=\"showcase-caption\">\n Extra brutal variants for promo forms, loud dashboards and expressive settings screens.\n </p>\n </div>\n </div>\n\n <div class=\"showcase-grid showcase-grid--neobrutal\">\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Text</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Select</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Poster / Textarea</p>\n <duck-dev-input-neobrutal-poster\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Email</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Checkbox</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input-neobrutal-slab>\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Toggle / Boolean</p>\n <duck-dev-input-neobrutal-toggle\n [form]=\"demoForm\"\n controlName=\"instantSync\"\n label=\"Instant sync\"\n description=\"Push UI changes to the preview canvas the moment a control changes.\"\n offLabel=\"Paused\"\n onLabel=\"Live\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Radio / Mode</p>\n <duck-dev-input-neobrutal-radio\n [form]=\"demoForm\"\n controlName=\"launchMode\"\n label=\"Workspace mode\"\n description=\"Pick the brutal layout state the team sees first.\"\n [options]=\"workspaceModeOptions\"\n [errorMessage]=\"getError('launchMode')\"\n />\n </div>\n </div>\n </dd-card-section>\n }\n\n <div class=\"code-grid\">\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeTemplate' | transloco }}</h3>\n <pre><code>{{ exampleMarkup }}</code></pre>\n </dd-card-section>\n\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeLogic' | transloco }}</h3>\n <pre><code>{{ exampleLogic }}</code></pre>\n </dd-card-section>\n </div>\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px 72px;display:grid;gap:28px;color:var(--dd-base-600)}.demo-container h1{font-size:40px;font-weight:700;color:var(--dd-base-600);margin:0;text-align:left}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin:0 0 12px}.demo-container h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin:0 0 14px}.demo-container p{margin:0}.hero{padding:36px;border-radius:32px;background:radial-gradient(circle at top left,rgba(125,92,255,.18),transparent 34%),radial-gradient(circle at bottom right,rgba(255,146,43,.18),transparent 30%),linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid rgba(125,92,255,.12);box-shadow:0 28px 60px #12121714}.eyebrow{display:inline-flex;margin-bottom:16px;padding:8px 14px;border-radius:999px;background:#7d5cff1f;color:var(--dd-base-accent-blue);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hero-description{max-width:720px;margin-top:12px;font-size:17px;line-height:1.7;color:var(--dd-base-400)}.hero-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.hero-point{padding:18px 20px;border-radius:22px;background:#ffffffc2;border:1px solid rgba(18,18,23,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-point-label{display:block;margin-bottom:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dd-base-accent-blue)}.hero-point-value{font-size:15px;line-height:1.5;color:var(--dd-base-500)}.overview-grid,.examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:26px;border-radius:28px;background:var(--dd-base-0);border:1px solid rgba(18,18,23,.08);box-shadow:0 20px 40px #1212170f}.description{font-size:15px;line-height:1.7;color:var(--dd-base-400)}.feature-list,.api-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}.feature-list li,.api-list li{padding:16px 18px;border-radius:18px;background:var(--dd-base-100);border:1px solid rgba(18,18,23,.04);line-height:1.6;color:var(--dd-base-500)}.api-list strong{color:var(--dd-base-accent-blue)}.examples-grid{align-items:start}.example-card{display:grid;gap:16px}.example-preview{padding:20px;border-radius:22px;background:linear-gradient(180deg,rgba(125,92,255,.08),transparent),var(--dd-base-100);border:1px solid rgba(125,92,255,.08)}.demo-form{display:grid;gap:18px}.checkbox-note{font-size:14px;line-height:1.5;color:var(--dd-base-400)}.showcase-card{background:radial-gradient(circle at top right,rgba(255,146,43,.12),transparent 26%),var(--dd-base-0)}.showcase-card--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 22%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.showcase-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:22px}.showcase-caption{font-size:14px;line-height:1.6;color:var(--dd-base-400)}.showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-item{padding:20px;border-radius:24px;background:linear-gradient(180deg,var(--dd-base-100),rgba(255,255,255,.92));border:1px solid rgba(18,18,23,.05)}.showcase-item--neobrutal{border:4px solid var(--dd-base-600);border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 16%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-yellow)}.showcase-item_wide{grid-column:1/-1}.showcase-label{margin-bottom:14px;font-size:14px;font-weight:600;color:var(--dd-base-400)}.showcase-inline{display:flex;align-items:center;gap:14px}.showcase-value{margin-top:12px;font-size:14px;color:var(--dd-base-accent-blue)}.code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-grid--neobrutal{align-items:start}.code-card pre{margin:0;padding:20px;overflow-x:auto;border-radius:22px;background:#141821}.code-card code{color:#f6f7fb;font-size:13px;line-height:1.7}@media(max-width:900px){.hero-points,.overview-grid,.examples-grid,.showcase-grid,.code-grid{grid-template-columns:1fr}}@media(max-width:768px){.demo-container{padding:24px 14px 56px}.demo-container h1{font-size:30px}.hero,.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:20px;border-radius:22px}.showcase-head,.showcase-inline{flex-direction:column;align-items:stretch}}\n"] }]
2795
2901
  }] });
2796
2902
 
2797
2903
  class DuckDevIcon {
@@ -3093,6 +3199,11 @@ class BadgeBlock {
3093
3199
  colorWhite = AccentEnumColor.White;
3094
3200
  colorGray = AccentEnumColor.Gray;
3095
3201
  colorDark = AccentEnumColor.Dark;
3202
+ styleTabs = [
3203
+ { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
3204
+ { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
3205
+ ];
3206
+ activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
3096
3207
  // Card content elements
3097
3208
  descEl;
3098
3209
  inputTextEl;
@@ -3106,13 +3217,16 @@ class BadgeBlock {
3106
3217
  this.inputVariantEl = this.createEl(this.t.translate('badgeDoc.inputsDesc.variant'));
3107
3218
  this.inputSizeEl = this.createEl(this.t.translate('badgeDoc.inputsDesc.size'));
3108
3219
  }
3220
+ onStyleTabChange(tab) {
3221
+ this.activeStyleTab.set(tab);
3222
+ }
3109
3223
  createEl(html) {
3110
3224
  const el = document.createElement('div');
3111
3225
  el.innerHTML = html;
3112
3226
  return el;
3113
3227
  }
3114
3228
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
3115
- 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>&lt;dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /&gt;</code></pre>\n </div>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/&gt;</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\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Slab</p>\n <dd-badge-neobrutal-slab [text]=\"'Hot drop'\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Stamp</p>\n <dd-badge-neobrutal-stamp [text]=\"'Duck verified'\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Ticket</p>\n <dd-badge-neobrutal-ticket [text]=\"'Night mode'\" [color]=\"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:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: BadgeNeobrutalSlab, selector: "dd-badge-neobrutal-slab", inputs: ["text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalStamp, selector: "dd-badge-neobrutal-stamp", inputs: ["text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalTicket, selector: "dd-badge-neobrutal-ticket", inputs: ["text", "color", "size"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
3229
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code>&lt;dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Badge</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Slab</p>\n <dd-badge-neobrutal-slab [text]=\"'Hot drop'\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Stamp</p>\n <dd-badge-neobrutal-stamp [text]=\"'Duck verified'\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Ticket</p>\n <dd-badge-neobrutal-ticket [text]=\"'Night mode'\" [color]=\"colorDark\" />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: BadgeNeobrutalSlab, selector: "dd-badge-neobrutal-slab", inputs: ["text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalStamp, selector: "dd-badge-neobrutal-stamp", inputs: ["text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalTicket, selector: "dd-badge-neobrutal-ticket", inputs: ["text", "color", "size"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
3116
3230
  }
3117
3231
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, decorators: [{
3118
3232
  type: Component,
@@ -3125,7 +3239,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
3125
3239
  DuckDevCardAccent,
3126
3240
  DdFlexDirectionDirective,
3127
3241
  DuckDevCardSection,
3128
- ], 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>&lt;dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /&gt;</code></pre>\n </div>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/&gt;</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\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Slab</p>\n <dd-badge-neobrutal-slab [text]=\"'Hot drop'\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Stamp</p>\n <dd-badge-neobrutal-stamp [text]=\"'Duck verified'\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Ticket</p>\n <dd-badge-neobrutal-ticket [text]=\"'Night mode'\" [color]=\"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:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
3242
+ DuckDevTab,
3243
+ ], template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code>&lt;dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Badge</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Slab</p>\n <dd-badge-neobrutal-slab [text]=\"'Hot drop'\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Stamp</p>\n <dd-badge-neobrutal-stamp [text]=\"'Duck verified'\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Ticket</p>\n <dd-badge-neobrutal-ticket [text]=\"'Night mode'\" [color]=\"colorDark\" />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
3129
3244
  }], ctorParameters: () => [] });
3130
3245
 
3131
3246
  class DirectiveBlock {
@@ -3171,13 +3286,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
3171
3286
  }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
3172
3287
 
3173
3288
  class AccordionBlock {
3289
+ t = inject(TranslocoService);
3174
3290
  colorViolet = AccentEnumColor.Violet;
3175
3291
  colorOrange = AccentEnumColor.Orange;
3176
3292
  colorWhite = AccentEnumColor.White;
3177
3293
  colorGray = AccentEnumColor.Gray;
3178
3294
  colorDark = AccentEnumColor.Dark;
3295
+ styleTabs = [
3296
+ { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
3297
+ { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
3298
+ ];
3299
+ activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
3300
+ onStyleTabChange(tab) {
3301
+ this.activeStyleTab.set(tab);
3302
+ }
3179
3303
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
3180
- 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>&lt;duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorOrange\"\n/&gt;</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 class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorOrange\"\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}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-base-600);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevAccordionNeobrutalComponent, selector: "duck-dev-accordion-neobrutal", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
3304
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: AccordionBlock, isStandalone: true, selector: "app-accordion-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorOrange\"\n/&gt;</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 example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-base-600);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevAccordionNeobrutalComponent, selector: "duck-dev-accordion-neobrutal", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
3181
3305
  }
3182
3306
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, decorators: [{
3183
3307
  type: Component,
@@ -3186,7 +3310,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
3186
3310
  DuckDevAccordionComponent,
3187
3311
  DuckDevAccordionNeobrutalComponent,
3188
3312
  DuckDevCardSection,
3189
- ], 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>&lt;duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorOrange\"\n/&gt;</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 class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorOrange\"\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}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-base-600);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
3313
+ DuckDevTab,
3314
+ ], template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code>&lt;duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorOrange\"\n/&gt;</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 example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-base-600);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
3190
3315
  }] });
3191
3316
 
3192
3317
  class SliderFlip {
@@ -3308,6 +3433,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
3308
3433
  args: [{ selector: 'app-slider-block', standalone: true, imports: [TranslocoPipe, SliderFlip, SliderClassic, DuckDevCardSection], template: "<div class=\"demo-container\">\n <h1>{{ 'slider.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'slider.raindrops.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'slider.raindrops.usage' | transloco }}</h3>\n <pre><code>&lt;dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n [color]=\"'White'\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'slider.raindrops.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n {{ 'slider.raindrops.inputItems' | transloco }}\n </li>\n <li><strong>intervalMs</strong> - {{ 'slider.raindrops.inputInterval' | transloco }}</li>\n <li><strong>autoplay</strong> - {{ 'slider.raindrops.inputAutoplay' | transloco }}</li>\n <li><strong>color</strong> - {{ 'slider.colorDescription' | transloco }}</li>\n </ul>\n </div>\n\n <!-- Meaningful demo slides -->\n <ng-template #slide>\n <section class=\"dd-doc-slide dd-doc-slide-hero\" aria-label=\"Overview\">\n <h3 class=\"dd-doc-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n <p class=\"dd-doc-slide__subtitle\">\n {{ 'slider.demo.heroSubtitle' | transloco }}\n </p>\n <a\n class=\"dd-doc-slide__cta\"\n href=\"#components\"\n aria-label=\"{{ 'slider.demo.heroCta' | transloco }}\"\n >{{ 'slider.demo.heroCta' | transloco }}</a\n >\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-doc-slide dd-doc-slide-features\" aria-label=\"Highlights\">\n <ul class=\"dd-doc-feature-list\" role=\"list\">\n <li class=\"dd-doc-feature\">\n <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n </li>\n <li class=\"dd-doc-feature\">\n <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n </li>\n <li class=\"dd-doc-feature\">\n <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n </li>\n </ul>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-doc-slide dd-doc-slide-code\" aria-label=\"Usage example\">\n <h4 class=\"dd-doc-slide-code__title\">\n {{ 'slider.demo.code.quickStartTitle' | transloco }}\n </h4>\n <pre class=\"dd-doc-code\"><code>&lt;dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"&gt;\n&lt;/dd-slider-flip&gt;</code></pre>\n <p class=\"dd-doc-note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n </section>\n </ng-template>\n\n <div class=\"examples-block\">\n <h3>{{ 'slider.raindrops.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'slider.raindrops.exampleBasic' | transloco }}</p>\n <dd-slider-flip [items]=\"slides()\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n <dd-slider-classic [items]=\"slides()\" />\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'slider.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'slider.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'slider.classic.usage' | transloco }}</h3>\n <pre><code>&lt;dd-slider-classic\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'slider.classic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n {{ 'slider.classic.inputItems' | transloco }}\n </li>\n <li><strong>intervalMs</strong> - {{ 'slider.classic.inputInterval' | transloco }}</li>\n <li><strong>autoplay</strong> - {{ 'slider.classic.inputAutoplay' | transloco }}</li>\n <li><strong>color</strong> - {{ 'slider.colorDescription' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'slider.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n <dd-slider-classic [items]=\"slides()\" />\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)}.demo-container .examples-block .example-row .example-item dd-slider-flip,.demo-container .examples-block .example-row .example-item dd-slider-classic{display:block;width:100%;aspect-ratio:16/9;max-height:min(60vh,420px)}.demo-container .examples-block .example-row .example-item :host ::ng-deep dd-slider-flip .container,.demo-container .examples-block .example-row .example-item :host ::ng-deep dd-slider-classic .container{height:100%}.demo-container .examples-block .example-row .example-item{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}@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%}}.dd-doc-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-doc-slide-hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-doc-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-doc-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-doc-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300)}.dd-doc-slide__cta:hover{background:var(--dd-base-500)}.dd-doc-slide-features{background:var(--dd-base-0)}.dd-doc-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-doc-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-doc-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-doc-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}.dd-doc-slide-code{align-items:stretch}.dd-doc-slide-code__title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-doc-code{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left}.dd-doc-note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}@media(max-width:768px){.dd-doc-feature-list{grid-template-columns:1fr}.dd-doc-slide__title{font-size:20px}.dd-doc-slide__subtitle{font-size:14px}}\n"] }]
3309
3434
  }], propDecorators: { slideTemplates: [{ type: i0.ViewChildren, args: ['slide', { isSignal: true }] }] } });
3310
3435
 
3436
+ class NeobrutalTicketCardBlock {
3437
+ colorGray = AccentEnumColor.Gray;
3438
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NeobrutalTicketCardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
3439
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: NeobrutalTicketCardBlock, isStandalone: true, selector: "app-neobrutal-ticket-card-block", host: { styleAttribute: "display: contents;" }, ngImport: i0, template: "<div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Ticket / Gray</p>\n <dd-card-neobrutal-ticket\n [color]=\"colorGray\"\n flashLabel=\"Hot drop\"\n stubTop=\"Admit\"\n stubMiddle=\"Duck\"\n stubBottom=\"Dev\"\n >\n <h4>Beta access</h4>\n <p>Priority invite is open for teams shipping a bold UI refresh this sprint.</p>\n </dd-card-neobrutal-ticket>\n</div>\n", dependencies: [{ kind: "component", type: DuckDevCardNeobrutalTicket, selector: "dd-card-neobrutal-ticket", inputs: ["color", "flashLabel", "stubTop", "stubMiddle", "stubBottom"] }] });
3440
+ }
3441
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NeobrutalTicketCardBlock, decorators: [{
3442
+ type: Component,
3443
+ args: [{ selector: 'app-neobrutal-ticket-card-block', standalone: true, imports: [DuckDevCardNeobrutalTicket], host: { style: 'display: contents;' }, template: "<div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Ticket / Gray</p>\n <dd-card-neobrutal-ticket\n [color]=\"colorGray\"\n flashLabel=\"Hot drop\"\n stubTop=\"Admit\"\n stubMiddle=\"Duck\"\n stubBottom=\"Dev\"\n >\n <h4>Beta access</h4>\n <p>Priority invite is open for teams shipping a bold UI refresh this sprint.</p>\n </dd-card-neobrutal-ticket>\n</div>\n" }]
3444
+ }] });
3445
+
3311
3446
  class CardBlock {
3312
3447
  t = inject(TranslocoService);
3313
3448
  colorViolet = AccentEnumColor.Violet;
@@ -3315,6 +3450,11 @@ class CardBlock {
3315
3450
  colorWhite = AccentEnumColor.White;
3316
3451
  colorGray = AccentEnumColor.Gray;
3317
3452
  colorDark = AccentEnumColor.Dark;
3453
+ styleTabs = [
3454
+ { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
3455
+ { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
3456
+ ];
3457
+ activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
3318
3458
  // Inputs list content elements
3319
3459
  inputContentEl;
3320
3460
  inputColorEl;
@@ -3363,13 +3503,16 @@ class CardBlock {
3363
3503
  this.signalExampleGray = this.createEl(this.t.translate('cardDoc.signal.examplesDesc.gray'));
3364
3504
  this.signalExampleDark = this.createEl(this.t.translate('cardDoc.signal.examplesDesc.dark'));
3365
3505
  }
3506
+ onStyleTabChange(tab) {
3507
+ this.activeStyleTab.set(tab);
3508
+ }
3366
3509
  createEl(html) {
3367
3510
  const el = document.createElement('div');
3368
3511
  el.innerHTML = html;
3369
3512
  return el;
3370
3513
  }
3371
3514
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
3372
- 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>&lt;dd-card-accent [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"exampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-accent&gt;</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\n <dd-card-section>\n <h2>{{ 'cardDoc.minimal.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.minimal.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.minimal.usage' | transloco }}</h3>\n <pre><code>&lt;dd-card-minimal [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"minimalExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-minimal&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.minimal.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-minimal [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-minimal>\n </li>\n <li>\n <dd-card-minimal [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-minimal>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.minimal.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-minimal [color]=\"colorWhite\">\n <div [innerHTML]=\"minimalExampleDefault.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-minimal [color]=\"colorViolet\">\n <div [innerHTML]=\"minimalExampleViolet.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-minimal [color]=\"colorOrange\">\n <div [innerHTML]=\"minimalExampleOrange.innerHTML\"></div>\n </dd-card-minimal>\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-minimal [color]=\"colorGray\">\n <div [innerHTML]=\"minimalExampleGray.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-minimal [color]=\"colorDark\">\n <div [innerHTML]=\"minimalExampleDark.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'cardDoc.outline.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.outline.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.outline.usage' | transloco }}</h3>\n <pre><code>&lt;dd-card-outline [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"outlineExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-outline&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.outline.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-outline [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-outline>\n </li>\n <li>\n <dd-card-outline [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-outline>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.outline.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-outline [color]=\"colorWhite\">\n <div [innerHTML]=\"outlineExampleDefault.innerHTML\"></div>\n </dd-card-outline>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-outline [color]=\"colorViolet\">\n <div [innerHTML]=\"outlineExampleViolet.innerHTML\"></div>\n </dd-card-outline>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-outline [color]=\"colorOrange\">\n <div [innerHTML]=\"outlineExampleOrange.innerHTML\"></div>\n </dd-card-outline>\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-outline [color]=\"colorGray\">\n <div [innerHTML]=\"outlineExampleGray.innerHTML\"></div>\n </dd-card-outline>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-outline [color]=\"colorDark\">\n <div [innerHTML]=\"outlineExampleDark.innerHTML\"></div>\n </dd-card-outline>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'cardDoc.signal.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.signal.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.signal.usage' | transloco }}</h3>\n <pre><code>&lt;dd-card-signal [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"signalExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-signal&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.signal.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-signal [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-signal>\n </li>\n <li>\n <dd-card-signal [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-signal>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.signal.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-signal [color]=\"colorWhite\">\n <div [innerHTML]=\"signalExampleDefault.innerHTML\"></div>\n </dd-card-signal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-signal [color]=\"colorViolet\">\n <div [innerHTML]=\"signalExampleViolet.innerHTML\"></div>\n </dd-card-signal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-signal [color]=\"colorOrange\">\n <div [innerHTML]=\"signalExampleOrange.innerHTML\"></div>\n </dd-card-signal>\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-signal [color]=\"colorGray\">\n <div [innerHTML]=\"signalExampleGray.innerHTML\"></div>\n </dd-card-signal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-signal [color]=\"colorDark\">\n <div [innerHTML]=\"signalExampleDark.innerHTML\"></div>\n </dd-card-signal>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>Neobrutalism Cards</h2>\n <p class=\"description\">\n Bold card variants with hard borders, loud shadows and poster-like composition. They keep the\n same simple API: pass `[color]` and project any content through `ng-content`.\n </p>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;dd-card-neobrutal-slab [color]=\"colorOrange\"&gt;\n &lt;h4&gt;Launch queue&lt;/h4&gt;\n &lt;p&gt;Three releases are waiting for approval.&lt;/p&gt;\n&lt;/dd-card-neobrutal-slab&gt;</code></pre>\n </div>\n\n <div class=\"examples-block\">\n <h3>Neobrutalism examples</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Slab / Orange</p>\n <dd-card-neobrutal-slab [color]=\"colorOrange\">\n <h4>Launch queue</h4>\n <p>Three releases are waiting for approval and one build is blocked by QA.</p>\n </dd-card-neobrutal-slab>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Stamp / Violet</p>\n <dd-card-neobrutal-stamp [color]=\"colorViolet\">\n <h4>Design drop</h4>\n <p>Fresh visual assets landed in the library and need review before sync.</p>\n </dd-card-neobrutal-stamp>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Poster / Dark</p>\n <dd-card-neobrutal-poster [color]=\"colorDark\">\n <h4>System pulse</h4>\n <p>Telemetry is clean, rate limits are stable and the service window is open.</p>\n </dd-card-neobrutal-poster>\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-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align: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: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevCardNeobrutalPoster, selector: "dd-card-neobrutal-poster", inputs: ["color"] }, { kind: "component", type: DuckDevCardNeobrutalSlab, selector: "dd-card-neobrutal-slab", inputs: ["color"] }, { kind: "component", type: DuckDevCardNeobrutalStamp, selector: "dd-card-neobrutal-stamp", inputs: ["color"] }, { kind: "component", type: DuckDevCardOutline, selector: "dd-card-outline", inputs: ["color"] }, { kind: "component", type: DuckDevCardSignal, selector: "dd-card-signal", inputs: ["color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
3515
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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 <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\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>&lt;dd-card-accent [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"exampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-accent&gt;</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\n <dd-card-section>\n <h2>{{ 'cardDoc.minimal.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.minimal.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.minimal.usage' | transloco }}</h3>\n <pre><code>&lt;dd-card-minimal [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"minimalExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-minimal&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.minimal.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-minimal [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-minimal>\n </li>\n <li>\n <dd-card-minimal [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-minimal>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.minimal.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-minimal [color]=\"colorWhite\">\n <div [innerHTML]=\"minimalExampleDefault.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-minimal [color]=\"colorViolet\">\n <div [innerHTML]=\"minimalExampleViolet.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-minimal [color]=\"colorOrange\">\n <div [innerHTML]=\"minimalExampleOrange.innerHTML\"></div>\n </dd-card-minimal>\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-minimal [color]=\"colorGray\">\n <div [innerHTML]=\"minimalExampleGray.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-minimal [color]=\"colorDark\">\n <div [innerHTML]=\"minimalExampleDark.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'cardDoc.outline.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.outline.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.outline.usage' | transloco }}</h3>\n <pre><code>&lt;dd-card-outline [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"outlineExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-outline&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.outline.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-outline [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-outline>\n </li>\n <li>\n <dd-card-outline [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-outline>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.outline.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-outline [color]=\"colorWhite\">\n <div [innerHTML]=\"outlineExampleDefault.innerHTML\"></div>\n </dd-card-outline>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-outline [color]=\"colorViolet\">\n <div [innerHTML]=\"outlineExampleViolet.innerHTML\"></div>\n </dd-card-outline>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-outline [color]=\"colorOrange\">\n <div [innerHTML]=\"outlineExampleOrange.innerHTML\"></div>\n </dd-card-outline>\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-outline [color]=\"colorGray\">\n <div [innerHTML]=\"outlineExampleGray.innerHTML\"></div>\n </dd-card-outline>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-outline [color]=\"colorDark\">\n <div [innerHTML]=\"outlineExampleDark.innerHTML\"></div>\n </dd-card-outline>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'cardDoc.signal.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.signal.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.signal.usage' | transloco }}</h3>\n <pre><code>&lt;dd-card-signal [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"signalExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-signal&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.signal.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-signal [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-signal>\n </li>\n <li>\n <dd-card-signal [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-signal>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.signal.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-signal [color]=\"colorWhite\">\n <div [innerHTML]=\"signalExampleDefault.innerHTML\"></div>\n </dd-card-signal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-signal [color]=\"colorViolet\">\n <div [innerHTML]=\"signalExampleViolet.innerHTML\"></div>\n </dd-card-signal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-signal [color]=\"colorOrange\">\n <div [innerHTML]=\"signalExampleOrange.innerHTML\"></div>\n </dd-card-signal>\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-signal [color]=\"colorGray\">\n <div [innerHTML]=\"signalExampleGray.innerHTML\"></div>\n </dd-card-signal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-signal [color]=\"colorDark\">\n <div [innerHTML]=\"signalExampleDark.innerHTML\"></div>\n </dd-card-signal>\n </div>\n </div>\n </div>\n </dd-card-section>\n } @else {\n <dd-card-section>\n <h2>Neobrutalism Cards</h2>\n <p class=\"description\">\n Bold card variants with hard borders, loud shadows and poster-like composition. They keep the\n same simple API: pass `[color]` and project any content through `ng-content`.\n </p>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;dd-card-neobrutal-slab [color]=\"colorOrange\" strapLabel=\"Duck Dev\"&gt;\n &lt;h4&gt;Launch queue&lt;/h4&gt;\n &lt;p&gt;Three releases are waiting for approval.&lt;/p&gt;\n&lt;/dd-card-neobrutal-slab&gt;</code></pre>\n </div>\n\n <div class=\"examples-block\">\n <h3>Neobrutalism examples</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Slab / Orange</p>\n <dd-card-neobrutal-slab [color]=\"colorOrange\" strapLabel=\"Duck Dev\">\n <h4>Launch queue</h4>\n <p>Three releases are waiting for approval and one build is blocked by QA.</p>\n </dd-card-neobrutal-slab>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Stamp / Violet</p>\n <dd-card-neobrutal-stamp\n [color]=\"colorViolet\"\n chromeStart=\"Fresh UI\"\n chromeEnd=\"Duck Dev\"\n sealLabel=\"Seal\"\n >\n <h4>Design drop</h4>\n <p>Fresh visual assets landed in the library and need review before sync.</p>\n </dd-card-neobrutal-stamp>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Poster / Dark</p>\n <dd-card-neobrutal-poster\n [color]=\"colorDark\"\n railTop=\"Neo\"\n railMiddle=\"Brut\"\n railBottom=\"Alert\"\n eyebrow=\"Ops bulletin\"\n badge=\"Live\"\n title=\"System pulse\"\n description=\"Telemetry is clean, rate limits are stable and the service window is open.\"\n metricLabel=\"Signal\"\n metric=\"99%\"\n />\n </div>\n <app-neobrutal-ticket-card-block />\n </div>\n </div>\n </dd-card-section>\n }\n </duck-dev-tab>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom: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-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align: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: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevCardNeobrutalPoster, selector: "dd-card-neobrutal-poster", inputs: ["color", "railTop", "railMiddle", "railBottom", "eyebrow", "title", "description", "badge", "metricLabel", "metric"] }, { kind: "component", type: DuckDevCardNeobrutalSlab, selector: "dd-card-neobrutal-slab", inputs: ["color", "strapLabel"] }, { kind: "component", type: DuckDevCardNeobrutalStamp, selector: "dd-card-neobrutal-stamp", inputs: ["color", "chromeStart", "chromeEnd", "sealLabel"] }, { kind: "component", type: DuckDevCardOutline, selector: "dd-card-outline", inputs: ["color"] }, { kind: "component", type: DuckDevCardSignal, selector: "dd-card-signal", inputs: ["color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: NeobrutalTicketCardBlock, selector: "app-neobrutal-ticket-card-block" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
3373
3516
  }
3374
3517
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, decorators: [{
3375
3518
  type: Component,
@@ -3383,7 +3526,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
3383
3526
  DuckDevCardSignal,
3384
3527
  TranslocoPipe,
3385
3528
  DuckDevCardSection,
3386
- ], 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>&lt;dd-card-accent [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"exampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-accent&gt;</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\n <dd-card-section>\n <h2>{{ 'cardDoc.minimal.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.minimal.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.minimal.usage' | transloco }}</h3>\n <pre><code>&lt;dd-card-minimal [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"minimalExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-minimal&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.minimal.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-minimal [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-minimal>\n </li>\n <li>\n <dd-card-minimal [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-minimal>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.minimal.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-minimal [color]=\"colorWhite\">\n <div [innerHTML]=\"minimalExampleDefault.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-minimal [color]=\"colorViolet\">\n <div [innerHTML]=\"minimalExampleViolet.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-minimal [color]=\"colorOrange\">\n <div [innerHTML]=\"minimalExampleOrange.innerHTML\"></div>\n </dd-card-minimal>\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-minimal [color]=\"colorGray\">\n <div [innerHTML]=\"minimalExampleGray.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-minimal [color]=\"colorDark\">\n <div [innerHTML]=\"minimalExampleDark.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'cardDoc.outline.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.outline.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.outline.usage' | transloco }}</h3>\n <pre><code>&lt;dd-card-outline [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"outlineExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-outline&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.outline.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-outline [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-outline>\n </li>\n <li>\n <dd-card-outline [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-outline>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.outline.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-outline [color]=\"colorWhite\">\n <div [innerHTML]=\"outlineExampleDefault.innerHTML\"></div>\n </dd-card-outline>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-outline [color]=\"colorViolet\">\n <div [innerHTML]=\"outlineExampleViolet.innerHTML\"></div>\n </dd-card-outline>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-outline [color]=\"colorOrange\">\n <div [innerHTML]=\"outlineExampleOrange.innerHTML\"></div>\n </dd-card-outline>\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-outline [color]=\"colorGray\">\n <div [innerHTML]=\"outlineExampleGray.innerHTML\"></div>\n </dd-card-outline>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-outline [color]=\"colorDark\">\n <div [innerHTML]=\"outlineExampleDark.innerHTML\"></div>\n </dd-card-outline>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'cardDoc.signal.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.signal.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.signal.usage' | transloco }}</h3>\n <pre><code>&lt;dd-card-signal [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"signalExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-signal&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.signal.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-signal [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-signal>\n </li>\n <li>\n <dd-card-signal [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-signal>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.signal.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-signal [color]=\"colorWhite\">\n <div [innerHTML]=\"signalExampleDefault.innerHTML\"></div>\n </dd-card-signal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-signal [color]=\"colorViolet\">\n <div [innerHTML]=\"signalExampleViolet.innerHTML\"></div>\n </dd-card-signal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-signal [color]=\"colorOrange\">\n <div [innerHTML]=\"signalExampleOrange.innerHTML\"></div>\n </dd-card-signal>\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-signal [color]=\"colorGray\">\n <div [innerHTML]=\"signalExampleGray.innerHTML\"></div>\n </dd-card-signal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-signal [color]=\"colorDark\">\n <div [innerHTML]=\"signalExampleDark.innerHTML\"></div>\n </dd-card-signal>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>Neobrutalism Cards</h2>\n <p class=\"description\">\n Bold card variants with hard borders, loud shadows and poster-like composition. They keep the\n same simple API: pass `[color]` and project any content through `ng-content`.\n </p>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;dd-card-neobrutal-slab [color]=\"colorOrange\"&gt;\n &lt;h4&gt;Launch queue&lt;/h4&gt;\n &lt;p&gt;Three releases are waiting for approval.&lt;/p&gt;\n&lt;/dd-card-neobrutal-slab&gt;</code></pre>\n </div>\n\n <div class=\"examples-block\">\n <h3>Neobrutalism examples</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Slab / Orange</p>\n <dd-card-neobrutal-slab [color]=\"colorOrange\">\n <h4>Launch queue</h4>\n <p>Three releases are waiting for approval and one build is blocked by QA.</p>\n </dd-card-neobrutal-slab>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Stamp / Violet</p>\n <dd-card-neobrutal-stamp [color]=\"colorViolet\">\n <h4>Design drop</h4>\n <p>Fresh visual assets landed in the library and need review before sync.</p>\n </dd-card-neobrutal-stamp>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Poster / Dark</p>\n <dd-card-neobrutal-poster [color]=\"colorDark\">\n <h4>System pulse</h4>\n <p>Telemetry is clean, rate limits are stable and the service window is open.</p>\n </dd-card-neobrutal-poster>\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-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align: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"] }]
3529
+ NeobrutalTicketCardBlock,
3530
+ DuckDevTab,
3531
+ ], template: "<div class=\"demo-container\">\n <h1>{{ 'cardDoc.title' | transloco }}</h1>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\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>&lt;dd-card-accent [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"exampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-accent&gt;</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\n <dd-card-section>\n <h2>{{ 'cardDoc.minimal.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.minimal.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.minimal.usage' | transloco }}</h3>\n <pre><code>&lt;dd-card-minimal [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"minimalExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-minimal&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.minimal.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-minimal [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-minimal>\n </li>\n <li>\n <dd-card-minimal [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-minimal>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.minimal.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-minimal [color]=\"colorWhite\">\n <div [innerHTML]=\"minimalExampleDefault.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-minimal [color]=\"colorViolet\">\n <div [innerHTML]=\"minimalExampleViolet.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-minimal [color]=\"colorOrange\">\n <div [innerHTML]=\"minimalExampleOrange.innerHTML\"></div>\n </dd-card-minimal>\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-minimal [color]=\"colorGray\">\n <div [innerHTML]=\"minimalExampleGray.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-minimal [color]=\"colorDark\">\n <div [innerHTML]=\"minimalExampleDark.innerHTML\"></div>\n </dd-card-minimal>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'cardDoc.outline.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.outline.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.outline.usage' | transloco }}</h3>\n <pre><code>&lt;dd-card-outline [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"outlineExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-outline&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.outline.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-outline [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-outline>\n </li>\n <li>\n <dd-card-outline [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-outline>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.outline.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-outline [color]=\"colorWhite\">\n <div [innerHTML]=\"outlineExampleDefault.innerHTML\"></div>\n </dd-card-outline>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-outline [color]=\"colorViolet\">\n <div [innerHTML]=\"outlineExampleViolet.innerHTML\"></div>\n </dd-card-outline>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-outline [color]=\"colorOrange\">\n <div [innerHTML]=\"outlineExampleOrange.innerHTML\"></div>\n </dd-card-outline>\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-outline [color]=\"colorGray\">\n <div [innerHTML]=\"outlineExampleGray.innerHTML\"></div>\n </dd-card-outline>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-outline [color]=\"colorDark\">\n <div [innerHTML]=\"outlineExampleDark.innerHTML\"></div>\n </dd-card-outline>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'cardDoc.signal.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.signal.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.signal.usage' | transloco }}</h3>\n <pre><code>&lt;dd-card-signal [color]=\"colorWhite\"&gt;\n &lt;div [innerHTML]=\"signalExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n &lt;/dd-card-signal&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.signal.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-signal [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-signal>\n </li>\n <li>\n <dd-card-signal [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-signal>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.signal.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-signal [color]=\"colorWhite\">\n <div [innerHTML]=\"signalExampleDefault.innerHTML\"></div>\n </dd-card-signal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-signal [color]=\"colorViolet\">\n <div [innerHTML]=\"signalExampleViolet.innerHTML\"></div>\n </dd-card-signal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-signal [color]=\"colorOrange\">\n <div [innerHTML]=\"signalExampleOrange.innerHTML\"></div>\n </dd-card-signal>\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-signal [color]=\"colorGray\">\n <div [innerHTML]=\"signalExampleGray.innerHTML\"></div>\n </dd-card-signal>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-signal [color]=\"colorDark\">\n <div [innerHTML]=\"signalExampleDark.innerHTML\"></div>\n </dd-card-signal>\n </div>\n </div>\n </div>\n </dd-card-section>\n } @else {\n <dd-card-section>\n <h2>Neobrutalism Cards</h2>\n <p class=\"description\">\n Bold card variants with hard borders, loud shadows and poster-like composition. They keep the\n same simple API: pass `[color]` and project any content through `ng-content`.\n </p>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;dd-card-neobrutal-slab [color]=\"colorOrange\" strapLabel=\"Duck Dev\"&gt;\n &lt;h4&gt;Launch queue&lt;/h4&gt;\n &lt;p&gt;Three releases are waiting for approval.&lt;/p&gt;\n&lt;/dd-card-neobrutal-slab&gt;</code></pre>\n </div>\n\n <div class=\"examples-block\">\n <h3>Neobrutalism examples</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Slab / Orange</p>\n <dd-card-neobrutal-slab [color]=\"colorOrange\" strapLabel=\"Duck Dev\">\n <h4>Launch queue</h4>\n <p>Three releases are waiting for approval and one build is blocked by QA.</p>\n </dd-card-neobrutal-slab>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Stamp / Violet</p>\n <dd-card-neobrutal-stamp\n [color]=\"colorViolet\"\n chromeStart=\"Fresh UI\"\n chromeEnd=\"Duck Dev\"\n sealLabel=\"Seal\"\n >\n <h4>Design drop</h4>\n <p>Fresh visual assets landed in the library and need review before sync.</p>\n </dd-card-neobrutal-stamp>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Poster / Dark</p>\n <dd-card-neobrutal-poster\n [color]=\"colorDark\"\n railTop=\"Neo\"\n railMiddle=\"Brut\"\n railBottom=\"Alert\"\n eyebrow=\"Ops bulletin\"\n badge=\"Live\"\n title=\"System pulse\"\n description=\"Telemetry is clean, rate limits are stable and the service window is open.\"\n metricLabel=\"Signal\"\n metric=\"99%\"\n />\n </div>\n <app-neobrutal-ticket-card-block />\n </div>\n </div>\n </dd-card-section>\n }\n </duck-dev-tab>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom: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-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align: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"] }]
3387
3532
  }], ctorParameters: () => [] });
3388
3533
 
3389
3534
  class DuckDevTooltip {
@@ -3445,13 +3590,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
3445
3590
  }], 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 }] }] } });
3446
3591
 
3447
3592
  class TooltipBlock {
3593
+ t = inject(TranslocoService);
3448
3594
  colorViolet = AccentEnumColor.Violet;
3449
3595
  colorOrange = AccentEnumColor.Orange;
3450
3596
  colorWhite = AccentEnumColor.White;
3451
3597
  colorGray = AccentEnumColor.Gray;
3452
3598
  colorDark = AccentEnumColor.Dark;
3599
+ styleTabs = [
3600
+ { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
3601
+ { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
3602
+ ];
3603
+ activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
3604
+ onStyleTabChange(tab) {
3605
+ this.activeStyleTab.set(tab);
3606
+ }
3453
3607
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
3454
- 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 <dd-card-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>&lt;dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n&gt;\n &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/dd-tooltip&gt;</code></pre>\n </div>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;duck-dev-tooltip-neobrutal\n [text]=\"'Hot take inside brutal shell'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n&gt;\n &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/duck-dev-tooltip-neobrutal&gt;</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>\n <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange, Gray,\n White.\n </li>\n <li>\n <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start |\n top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n leave (default: 120).\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n [color]=\"colorGray\"\n [placement]=\"'left-start'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n [color]=\"colorWhite\"\n [placement]=\"'bottom-end'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Loud UI hint with brutal edge'\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Quick signal for actions and shortcuts'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n </div>\n </div>\n </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-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);border-radius:0}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-btn:active{transform:translateY(1px)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal{padding:12px 18px;border:3px solid var(--dd-base-600);border-radius:0;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);box-shadow:4px 4px 0 var(--dd-base-600);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:hover{background:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevTooltip, selector: "dd-tooltip", inputs: ["text", "color", "placement", "delayCloseMs"] }, { kind: "component", type: DuckDevTooltipNeobrutalComponent, selector: "duck-dev-tooltip-neobrutal", inputs: ["text", "color", "placement", "delayCloseMs"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
3608
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TooltipBlock, isStandalone: true, selector: "app-tooltip-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n <pre><code>&lt;dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n&gt;\n &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/dd-tooltip&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n\n <ul>\n <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n <li>\n <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange, Gray,\n White.\n </li>\n <li>\n <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start |\n top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n leave (default: 120).\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n [color]=\"colorGray\"\n [placement]=\"'left-start'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n [color]=\"colorWhite\"\n [placement]=\"'bottom-end'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Tooltip</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;duck-dev-tooltip-neobrutal\n [text]=\"'Hot take inside brutal shell'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n&gt;\n &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/duck-dev-tooltip-neobrutal&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Loud UI hint with brutal edge'\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Quick signal for actions and shortcuts'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);border-radius:0}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-btn:active{transform:translateY(1px)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal{padding:12px 18px;border:3px solid var(--dd-base-600);border-radius:0;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);box-shadow:4px 4px 0 var(--dd-base-600);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:hover{background:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevTooltip, selector: "dd-tooltip", inputs: ["text", "color", "placement", "delayCloseMs"] }, { kind: "component", type: DuckDevTooltipNeobrutalComponent, selector: "duck-dev-tooltip-neobrutal", inputs: ["text", "color", "placement", "delayCloseMs"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
3455
3609
  }
3456
3610
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipBlock, decorators: [{
3457
3611
  type: Component,
@@ -3462,7 +3616,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
3462
3616
  DuckDevTooltipNeobrutalComponent,
3463
3617
  DdFlexDirectionDirective,
3464
3618
  DuckDevCardSection,
3465
- ], template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <dd-card-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>&lt;dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n&gt;\n &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/dd-tooltip&gt;</code></pre>\n </div>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;duck-dev-tooltip-neobrutal\n [text]=\"'Hot take inside brutal shell'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n&gt;\n &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/duck-dev-tooltip-neobrutal&gt;</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>\n <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange, Gray,\n White.\n </li>\n <li>\n <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start |\n top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n leave (default: 120).\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n [color]=\"colorGray\"\n [placement]=\"'left-start'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n [color]=\"colorWhite\"\n [placement]=\"'bottom-end'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Loud UI hint with brutal edge'\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Quick signal for actions and shortcuts'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n </div>\n </div>\n </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-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);border-radius:0}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-btn:active{transform:translateY(1px)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal{padding:12px 18px;border:3px solid var(--dd-base-600);border-radius:0;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);box-shadow:4px 4px 0 var(--dd-base-600);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:hover{background:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
3619
+ DuckDevTab,
3620
+ ], template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n <pre><code>&lt;dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n&gt;\n &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/dd-tooltip&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n\n <ul>\n <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n <li>\n <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange, Gray,\n White.\n </li>\n <li>\n <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start |\n top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n leave (default: 120).\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n [color]=\"colorGray\"\n [placement]=\"'left-start'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n [color]=\"colorWhite\"\n [placement]=\"'bottom-end'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Tooltip</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code>&lt;duck-dev-tooltip-neobrutal\n [text]=\"'Hot take inside brutal shell'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n&gt;\n &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/duck-dev-tooltip-neobrutal&gt;</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Loud UI hint with brutal edge'\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Quick signal for actions and shortcuts'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);border-radius:0}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-btn:active{transform:translateY(1px)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal{padding:12px 18px;border:3px solid var(--dd-base-600);border-radius:0;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);box-shadow:4px 4px 0 var(--dd-base-600);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:hover{background:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
3466
3621
  }] });
3467
3622
 
3468
3623
  class QuickStartBlock {
@@ -3664,8 +3819,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
3664
3819
  }] });
3665
3820
 
3666
3821
  const DuckDevLibTranslations = {
3667
- en: import('./duck-dev-lib-en-Cr4fDFwj.mjs'),
3668
- ru: import('./duck-dev-lib-ru-eYhKbOtN.mjs'),
3822
+ en: import('./duck-dev-lib-en-Co6vywqB.mjs'),
3823
+ ru: import('./duck-dev-lib-ru-39r_p4Cd.mjs'),
3669
3824
  };
3670
3825
 
3671
3826
  /*
@@ -3676,5 +3831,5 @@ const DuckDevLibTranslations = {
3676
3831
  * Generated bundle index. Do not edit.
3677
3832
  */
3678
3833
 
3679
- export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalTag, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic };
3834
+ export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalTag, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic };
3680
3835
  //# sourceMappingURL=duck-dev-lib.mjs.map