duck-dev-lib 0.0.63 → 0.0.64
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.
|
@@ -5158,7 +5158,7 @@ class AccordionBlock {
|
|
|
5158
5158
|
this.activeStyleTab.set(tab);
|
|
5159
5159
|
}
|
|
5160
5160
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5161
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: AccordionBlock, isStandalone: true, selector: "app-accordion-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <!-- Neobrutal (stamp) -->\n <h3>{{ 'accordionDoc.neobrutal.stampTitle' | transloco }}</h3>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'Release status'\"\n [content]=\"tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n text rendered in the header\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n\n <!-- Neobrutal Tape -->\n <h3>{{ 'accordionDoc.neobrutal.tapeTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'accordionDoc.neobrutal.tapeDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal-tape\n [title]=\"'Installation steps'\"\n [content]=\"tpl\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 color from palette: Violet | Orange | White | Gray | Dark\n (default: Orange)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Orange</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Violet</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Gray</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Dark</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-neo-ink);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevAccordionNeobrutalComponent, selector: "duck-dev-accordion-neobrutal", inputs: ["content", "title", "stampLabel", "color"] }, { kind: "component", type: DuckDevAccordionNeobrutalTapeComponent, selector: "duck-dev-accordion-neobrutal-tape", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5161
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: AccordionBlock, isStandalone: true, selector: "app-accordion-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <!-- Neobrutal (stamp) -->\n <h3>{{ 'accordionDoc.neobrutal.stampTitle' | transloco }}</h3>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'Release status'\"\n [content]=\"tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n/>\n\n<duck-dev-accordion-neobrutal\n [title]=\"customHeaderTpl\"\n [content]=\"tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n/>\n\n<ng-template #customHeaderTpl>\n <span class=\"custom-accordion-header\">\n <span>Release status</span>\n <span>3 pending tasks</span>\n </span>\n</ng-template></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text or\n TemplateRef for custom header content\n </li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n text rendered in the header\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Custom Header Template</p>\n <duck-dev-accordion-neobrutal\n [title]=\"customHeaderTpl\"\n [content]=\"q3Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n\n <!-- Neobrutal Tape -->\n <h3>{{ 'accordionDoc.neobrutal.tapeTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'accordionDoc.neobrutal.tapeDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal-tape\n [title]=\"'Installation steps'\"\n [content]=\"tpl\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 color from palette: Violet | Orange | White | Gray | Dark\n (default: Orange)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Orange</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Violet</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Gray</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Dark</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n <ng-template #customHeaderTpl>\n <span class=\"custom-accordion-header\">\n <span class=\"custom-accordion-header__main\">Release status</span>\n <span class=\"custom-accordion-header__meta\">3 pending tasks</span>\n </span>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item .custom-accordion-header{display:grid;gap:6px;min-width:0}.demo-container .examples-block .example-row .example-item .custom-accordion-header__main{font-size:18px;font-weight:900;line-height:1.1;text-transform:uppercase;color:var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .custom-accordion-header__meta{width:fit-content;padding:4px 8px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);font-size:11px;font-weight:800;line-height:1;text-transform:uppercase;color:var(--dd-base-600)}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-neo-ink);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevAccordionNeobrutalComponent, selector: "duck-dev-accordion-neobrutal", inputs: ["content", "title", "stampLabel", "color"] }, { kind: "component", type: DuckDevAccordionNeobrutalTapeComponent, selector: "duck-dev-accordion-neobrutal-tape", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5162
5162
|
}
|
|
5163
5163
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, decorators: [{
|
|
5164
5164
|
type: Component,
|
|
@@ -5169,7 +5169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5169
5169
|
DuckDevAccordionNeobrutalTapeComponent,
|
|
5170
5170
|
DuckDevCardSection,
|
|
5171
5171
|
DuckDevTab,
|
|
5172
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <!-- Neobrutal (stamp) -->\n <h3>{{ 'accordionDoc.neobrutal.stampTitle' | transloco }}</h3>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'Release status'\"\n [content]=\"tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n text rendered in the header\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n </div>\n\n <!-- Neobrutal Tape -->\n <h3>{{ 'accordionDoc.neobrutal.tapeTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'accordionDoc.neobrutal.tapeDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal-tape\n [title]=\"'Installation steps'\"\n [content]=\"tpl\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 color from palette: Violet | Orange | White | Gray | Dark\n (default: Orange)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Orange</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Violet</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Gray</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Dark</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-neo-ink);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
5172
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorViolet\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n <duck-dev-accordion\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Accordion</h2>\n <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n <!-- Neobrutal (stamp) -->\n <h3>{{ 'accordionDoc.neobrutal.stampTitle' | transloco }}</h3>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal\n [title]=\"'Release status'\"\n [content]=\"tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n/>\n\n<duck-dev-accordion-neobrutal\n [title]=\"customHeaderTpl\"\n [content]=\"tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n/>\n\n<ng-template #customHeaderTpl>\n <span class=\"custom-accordion-header\">\n <span>Release status</span>\n <span>3 pending tasks</span>\n </span>\n</ng-template></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text or\n TemplateRef for custom header content\n </li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n text rendered in the header\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n (default: White)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-accordion-neobrutal\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Custom Header Template</p>\n <duck-dev-accordion-neobrutal\n [title]=\"customHeaderTpl\"\n [content]=\"q3Tpl\"\n stampLabel=\"Duck Dev\"\n [color]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n\n <!-- Neobrutal Tape -->\n <h3>{{ 'accordionDoc.neobrutal.tapeTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'accordionDoc.neobrutal.tapeDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <pre><code><duck-dev-accordion-neobrutal-tape\n [title]=\"'Installation steps'\"\n [content]=\"tpl\"\n [color]=\"colorOrange\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n <li>\n <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n with content\n </li>\n <li>\n <strong>color</strong> \u2014 color from palette: Violet | Orange | White | Gray | Dark\n (default: Orange)\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Orange</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Violet</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n [content]=\"q2Tpl\"\n [color]=\"colorViolet\"\n />\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Gray</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n [content]=\"q3Tpl\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Tape / Dark</p>\n <duck-dev-accordion-neobrutal-tape\n [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n [content]=\"q1Tpl\"\n [color]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n\n <!-- Content templates -->\n <ng-template #q1Tpl>\n <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n </ng-template>\n <ng-template #q2Tpl>\n <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n </ng-template>\n <ng-template #q3Tpl>\n <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n </ng-template>\n <ng-template #customHeaderTpl>\n <span class=\"custom-accordion-header\">\n <span class=\"custom-accordion-header__main\">Release status</span>\n <span class=\"custom-accordion-header__meta\">3 pending tasks</span>\n </span>\n </ng-template>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item .custom-accordion-header{display:grid;gap:6px;min-width:0}.demo-container .examples-block .example-row .example-item .custom-accordion-header__main{font-size:18px;font-weight:900;line-height:1.1;text-transform:uppercase;color:var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .custom-accordion-header__meta{width:fit-content;padding:4px 8px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);font-size:11px;font-weight:800;line-height:1;text-transform:uppercase;color:var(--dd-base-600)}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-neo-ink);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
5173
5173
|
}] });
|
|
5174
5174
|
|
|
5175
5175
|
class SliderFlip {
|
|
@@ -6076,6 +6076,7 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
6076
6076
|
items = input.required({ ...(ngDevMode ? { debugName: "items" } : {}) });
|
|
6077
6077
|
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
6078
6078
|
navigate = output();
|
|
6079
|
+
visibleItems = computed(() => this.items().slice(-6), { ...(ngDevMode ? { debugName: "visibleItems" } : {}) });
|
|
6079
6080
|
breadcrumbStyle = computed(() => this.getPalette(this.color()), { ...(ngDevMode ? { debugName: "breadcrumbStyle" } : {}) });
|
|
6080
6081
|
getPalette(color) {
|
|
6081
6082
|
switch (color) {
|
|
@@ -6083,7 +6084,7 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
6083
6084
|
return {
|
|
6084
6085
|
'--neo-bc-surface': 'var(--dd-base-secondary)',
|
|
6085
6086
|
'--neo-bc-text': 'var(--dd-base-0)',
|
|
6086
|
-
'--neo-bc-link': 'var(--dd-base-accent-
|
|
6087
|
+
'--neo-bc-link': 'var(--dd-base-accent-pink)',
|
|
6087
6088
|
'--neo-bc-separator': 'var(--dd-base-accent-pink)',
|
|
6088
6089
|
'--neo-bc-shadow': 'var(--dd-base-accent-blue)',
|
|
6089
6090
|
'--neo-bc-active': 'var(--dd-base-0)',
|
|
@@ -6092,7 +6093,7 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
6092
6093
|
return {
|
|
6093
6094
|
'--neo-bc-surface': 'var(--dd-base-accent-orange)',
|
|
6094
6095
|
'--neo-bc-text': 'var(--dd-base-600)',
|
|
6095
|
-
'--neo-bc-link': 'var(--dd-base-
|
|
6096
|
+
'--neo-bc-link': 'var(--dd-base-accent-pink)',
|
|
6096
6097
|
'--neo-bc-separator': 'var(--dd-base-accent-yellow)',
|
|
6097
6098
|
'--neo-bc-shadow': 'var(--dd-base-accent-yellow)',
|
|
6098
6099
|
'--neo-bc-active': 'var(--dd-base-600)',
|
|
@@ -6101,7 +6102,7 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
6101
6102
|
return {
|
|
6102
6103
|
'--neo-bc-surface': 'var(--dd-base-200)',
|
|
6103
6104
|
'--neo-bc-text': 'var(--dd-base-600)',
|
|
6104
|
-
'--neo-bc-link': 'var(--dd-base-accent-
|
|
6105
|
+
'--neo-bc-link': 'var(--dd-base-accent-pink)',
|
|
6105
6106
|
'--neo-bc-separator': 'var(--dd-base-accent-orange)',
|
|
6106
6107
|
'--neo-bc-shadow': 'var(--dd-base-400)',
|
|
6107
6108
|
'--neo-bc-active': 'var(--dd-base-600)',
|
|
@@ -6110,7 +6111,7 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
6110
6111
|
return {
|
|
6111
6112
|
'--neo-bc-surface': 'var(--dd-base-600)',
|
|
6112
6113
|
'--neo-bc-text': 'var(--dd-base-0)',
|
|
6113
|
-
'--neo-bc-link': 'var(--dd-base-accent-
|
|
6114
|
+
'--neo-bc-link': 'var(--dd-base-accent-pink)',
|
|
6114
6115
|
'--neo-bc-separator': 'var(--dd-base-accent-orange)',
|
|
6115
6116
|
'--neo-bc-shadow': 'var(--dd-base-secondary)',
|
|
6116
6117
|
'--neo-bc-active': 'var(--dd-base-0)',
|
|
@@ -6120,7 +6121,7 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
6120
6121
|
return {
|
|
6121
6122
|
'--neo-bc-surface': 'var(--dd-base-0)',
|
|
6122
6123
|
'--neo-bc-text': 'var(--dd-base-600)',
|
|
6123
|
-
'--neo-bc-link': 'var(--dd-base-accent-
|
|
6124
|
+
'--neo-bc-link': 'var(--dd-base-accent-pink)',
|
|
6124
6125
|
'--neo-bc-separator': 'var(--dd-base-accent-orange)',
|
|
6125
6126
|
'--neo-bc-shadow': 'var(--dd-base-accent-blue)',
|
|
6126
6127
|
'--neo-bc-active': 'var(--dd-base-600)',
|
|
@@ -6128,11 +6129,11 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
6128
6129
|
}
|
|
6129
6130
|
}
|
|
6130
6131
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6131
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbNeobrutal, isStandalone: true, selector: "dd-breadcrumb-neobrutal", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<nav class=\"neo-bc\" aria-label=\"Breadcrumb\" [ngStyle]=\"breadcrumbStyle()\">\n <ol class=\"neo-bc__list\">\n @for (item of
|
|
6132
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbNeobrutal, isStandalone: true, selector: "dd-breadcrumb-neobrutal", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<nav class=\"neo-bc\" aria-label=\"Breadcrumb\" [ngStyle]=\"breadcrumbStyle()\">\n <ol class=\"neo-bc__list\">\n @for (item of visibleItems(); track $index; let last = $last) {\n <li\n class=\"neo-bc__item\"\n animate.enter=\"neo-bc__item--enter\"\n animate.leave=\"neo-bc__item--leave\"\n >\n @if (!last && item.url) {\n <button\n class=\"neo-bc__link\"\n type=\"button\"\n [attr.aria-label]=\"item.label\"\n (click)=\"navigate.emit(item)\"\n >\n <span class=\"neo-bc__chip\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </button>\n } @else {\n <span\n class=\"neo-bc__current\"\n tabindex=\"0\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.aria-label]=\"item.label\"\n >\n <span class=\"neo-bc__chip neo-bc__chip--active\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </span>\n }\n @if (!last) {\n <span class=\"neo-bc__arrow\" aria-hidden=\"true\"></span>\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;min-height:65px;box-sizing:border-box}.neo-bc{display:block;width:100%;box-sizing:border-box;padding:10px 14px;border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow)}.neo-bc__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;align-items:center;margin:0;padding:0;list-style:none}.neo-bc__item{position:relative;display:flex;align-items:center;width:100%;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0;max-width:calc(100% - 18px);padding:0;border:none;background:transparent;font:inherit;cursor:pointer}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--dd-neo-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0;max-width:calc(100% - 18px)}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__item:last-child .neo-bc__current,.neo-bc__item:last-child .neo-bc__link{max-width:100%}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:8px;border-style:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent var(--neo-bc-separator)}.neo-bc__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-text);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc__link:hover .neo-bc__popover,.neo-bc__link:focus .neo-bc__popover,.neo-bc__current:hover .neo-bc__popover,.neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;max-width:0;transform:translateY(-4px) scale(.9)}50%{opacity:.5;max-width:260px}to{opacity:1;max-width:260px;transform:translateY(0) scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;max-width:260px;transform:translateY(0) scale(1)}50%{opacity:0;max-width:260px}to{opacity:0;max-width:0;transform:translateY(4px) scale(.9)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{padding:8px 10px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}.neo-bc__arrow{margin-left:6px;border-width:5px 0 5px 7px}}@media(max-width:480px){:host{min-height:52px}.neo-bc{padding:8px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__arrow{margin-left:4px;border-width:4px 0 4px 6px}.neo-bc__popover{max-width:min(260px,100vw - 24px);font-size:.68rem}}@media(max-width:360px){.neo-bc{padding:6px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}.neo-bc__arrow{margin-left:3px;border-width:3px 0 3px 5px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
6132
6133
|
}
|
|
6133
6134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, decorators: [{
|
|
6134
6135
|
type: Component,
|
|
6135
|
-
args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<nav class=\"neo-bc\" aria-label=\"Breadcrumb\" [ngStyle]=\"breadcrumbStyle()\">\n <ol class=\"neo-bc__list\">\n @for (item of
|
|
6136
|
+
args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<nav class=\"neo-bc\" aria-label=\"Breadcrumb\" [ngStyle]=\"breadcrumbStyle()\">\n <ol class=\"neo-bc__list\">\n @for (item of visibleItems(); track $index; let last = $last) {\n <li\n class=\"neo-bc__item\"\n animate.enter=\"neo-bc__item--enter\"\n animate.leave=\"neo-bc__item--leave\"\n >\n @if (!last && item.url) {\n <button\n class=\"neo-bc__link\"\n type=\"button\"\n [attr.aria-label]=\"item.label\"\n (click)=\"navigate.emit(item)\"\n >\n <span class=\"neo-bc__chip\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </button>\n } @else {\n <span\n class=\"neo-bc__current\"\n tabindex=\"0\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.aria-label]=\"item.label\"\n >\n <span class=\"neo-bc__chip neo-bc__chip--active\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </span>\n }\n @if (!last) {\n <span class=\"neo-bc__arrow\" aria-hidden=\"true\"></span>\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;min-height:65px;box-sizing:border-box}.neo-bc{display:block;width:100%;box-sizing:border-box;padding:10px 14px;border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow)}.neo-bc__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;align-items:center;margin:0;padding:0;list-style:none}.neo-bc__item{position:relative;display:flex;align-items:center;width:100%;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0;max-width:calc(100% - 18px);padding:0;border:none;background:transparent;font:inherit;cursor:pointer}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--dd-neo-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0;max-width:calc(100% - 18px)}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__item:last-child .neo-bc__current,.neo-bc__item:last-child .neo-bc__link{max-width:100%}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:8px;border-style:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent var(--neo-bc-separator)}.neo-bc__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-text);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc__link:hover .neo-bc__popover,.neo-bc__link:focus .neo-bc__popover,.neo-bc__current:hover .neo-bc__popover,.neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;max-width:0;transform:translateY(-4px) scale(.9)}50%{opacity:.5;max-width:260px}to{opacity:1;max-width:260px;transform:translateY(0) scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;max-width:260px;transform:translateY(0) scale(1)}50%{opacity:0;max-width:260px}to{opacity:0;max-width:0;transform:translateY(4px) scale(.9)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{padding:8px 10px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}.neo-bc__arrow{margin-left:6px;border-width:5px 0 5px 7px}}@media(max-width:480px){:host{min-height:52px}.neo-bc{padding:8px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__arrow{margin-left:4px;border-width:4px 0 4px 6px}.neo-bc__popover{max-width:min(260px,100vw - 24px);font-size:.68rem}}@media(max-width:360px){.neo-bc{padding:6px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}.neo-bc__arrow{margin-left:3px;border-width:3px 0 3px 5px}}\n"] }]
|
|
6136
6137
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }] } });
|
|
6137
6138
|
|
|
6138
6139
|
class BreadcrumbBlock {
|