duck-dev-lib 0.0.71 → 0.0.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/duck-dev-lib.mjs +212 -94
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/duck-dev-lib.d.ts +26 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect,
|
|
2
|
+
import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, inject, TemplateRef, contentChildren, ChangeDetectionStrategy, ElementRef, DestroyRef, PLATFORM_ID, afterNextRender, afterRenderEffect, Injectable, ChangeDetectorRef, viewChild, ContentChildren, booleanAttribute } from '@angular/core';
|
|
3
3
|
import * as i1$2 from '@angular/common';
|
|
4
4
|
import { NgStyle, CommonModule, NgTemplateOutlet, DOCUMENT, isPlatformBrowser, JsonPipe } from '@angular/common';
|
|
5
5
|
import * as i1$3 from '@jsverse/transloco';
|
|
@@ -570,6 +570,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
570
570
|
args: [{ selector: 'duck-dev-tab-vertical', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab-vertical\">\n <div class=\"tab-sidebar\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n #tabButton\n class=\"tab-button\"\n [class.active]=\"isActive(i)\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n @if (tab.icon) {\n <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n }\n <span class=\"tab-label\">{{ tab.label }}</span>\n </button>\n }\n <div\n class=\"tab-indicator\"\n [style.top.px]=\"indicatorTop()\"\n [style.height.px]=\"indicatorHeight()\"\n ></div>\n </div>\n\n <div class=\"tab-content-wrapper\">\n <div\n class=\"tab-content\"\n [class.slide-up]=\"animationDirection() === 'up'\"\n [class.slide-down]=\"animationDirection() === 'down'\"\n [attr.data-active-index]=\"activeTabIndex()\"\n [attr.data-animation-key]=\"animationKey()\"\n >\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0;overflow-y:auto}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;min-height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"] }]
|
|
571
571
|
}], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] } });
|
|
572
572
|
|
|
573
|
+
class DdTabPanel {
|
|
574
|
+
templateRef = inject(TemplateRef);
|
|
575
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DdTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
576
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: DdTabPanel, isStandalone: true, selector: "[ddTabPanel]", ngImport: i0 });
|
|
577
|
+
}
|
|
578
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DdTabPanel, decorators: [{
|
|
579
|
+
type: Directive,
|
|
580
|
+
args: [{
|
|
581
|
+
selector: '[ddTabPanel]',
|
|
582
|
+
standalone: true,
|
|
583
|
+
}]
|
|
584
|
+
}] });
|
|
585
|
+
|
|
586
|
+
class DuckDevTabNeobrutal {
|
|
587
|
+
tabs = input([], { ...(ngDevMode ? { debugName: "tabs" } : {}) });
|
|
588
|
+
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
589
|
+
tabChange = output();
|
|
590
|
+
panels = contentChildren(DdTabPanel, { ...(ngDevMode ? { debugName: "panels" } : {}) });
|
|
591
|
+
activeIndex = signal(0, { ...(ngDevMode ? { debugName: "activeIndex" } : {}) });
|
|
592
|
+
activeTab = computed(() => this.tabs()[this.activeIndex()], { ...(ngDevMode ? { debugName: "activeTab" } : {}) });
|
|
593
|
+
previousIndex = signal(null, { ...(ngDevMode ? { debugName: "previousIndex" } : {}) });
|
|
594
|
+
direction = signal('right', { ...(ngDevMode ? { debugName: "direction" } : {}) });
|
|
595
|
+
isAnimating = signal(false, { ...(ngDevMode ? { debugName: "isAnimating" } : {}) });
|
|
596
|
+
animationTimer;
|
|
597
|
+
selectTab(index) {
|
|
598
|
+
if (index === this.activeIndex()) {
|
|
599
|
+
return;
|
|
600
|
+
}
|
|
601
|
+
clearTimeout(this.animationTimer);
|
|
602
|
+
this.direction.set(index > this.activeIndex() ? 'right' : 'left');
|
|
603
|
+
this.previousIndex.set(this.activeIndex());
|
|
604
|
+
this.activeIndex.set(index);
|
|
605
|
+
this.isAnimating.set(true);
|
|
606
|
+
this.tabChange.emit(this.tabs()[index]);
|
|
607
|
+
this.animationTimer = setTimeout(() => {
|
|
608
|
+
this.isAnimating.set(false);
|
|
609
|
+
this.previousIndex.set(null);
|
|
610
|
+
}, 400);
|
|
611
|
+
}
|
|
612
|
+
isVisible(index) {
|
|
613
|
+
return index === this.activeIndex() || (this.isAnimating() && index === this.previousIndex());
|
|
614
|
+
}
|
|
615
|
+
panelClass(index) {
|
|
616
|
+
if (this.isAnimating()) {
|
|
617
|
+
if (index === this.activeIndex()) {
|
|
618
|
+
return this.direction() === 'right' ? 'enter-right' : 'enter-left';
|
|
619
|
+
}
|
|
620
|
+
if (index === this.previousIndex()) {
|
|
621
|
+
return this.direction() === 'right' ? 'leave-left' : 'leave-right';
|
|
622
|
+
}
|
|
623
|
+
}
|
|
624
|
+
if (index === this.activeIndex()) {
|
|
625
|
+
return 'active';
|
|
626
|
+
}
|
|
627
|
+
return 'hidden';
|
|
628
|
+
}
|
|
629
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
630
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabNeobrutal, isStandalone: true, selector: "duck-dev-tab-neobrutal", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, queries: [{ propertyName: "panels", predicate: DdTabPanel, isSignal: true }], ngImport: i0, template: "<div class=\"dd-tab-neo\" [attr.data-color]=\"color()\">\n <div class=\"dd-tab-neo__header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"dd-tab-neo__button\"\n [class.dd-tab-neo__button--active]=\"activeIndex() === i\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n <span class=\"dd-tab-neo__number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span class=\"dd-tab-neo__label\">{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"dd-tab-neo__viewport\">\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-base-0);--dd-tab-neo-accent: var(--dd-base-accent-orange);--dd-tab-neo-btn-shadow: var(--dd-base-accent-blue);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-secondary);--dd-tab-neo-number-bg: var(--dd-base-accent-orange);--dd-tab-neo-text: var(--dd-base-600);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: color-mix(in srgb, var(--dd-base-secondary) 10%, var(--dd-base-0));--dd-tab-neo-btn-shadow: var(--dd-base-secondary);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-secondary);--dd-tab-neo-number-bg: var(--dd-base-secondary)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: color-mix(in srgb, var(--dd-base-accent-orange) 12%, var(--dd-base-0));--dd-tab-neo-accent: var(--dd-base-accent-pink);--dd-tab-neo-btn-shadow: var(--dd-base-accent-blue);--dd-tab-neo-active-bg: var(--dd-base-accent-orange);--dd-tab-neo-active-shadow: var(--dd-base-secondary);--dd-tab-neo-content-shadow: var(--dd-base-accent-blue);--dd-tab-neo-number-bg: var(--dd-base-accent-pink)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-base-100);--dd-tab-neo-accent: var(--dd-base-accent-orange);--dd-tab-neo-btn-shadow: var(--dd-base-400);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-orange);--dd-tab-neo-content-shadow: var(--dd-base-accent-blue)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-base-600);--dd-tab-neo-accent: var(--dd-base-accent-yellow);--dd-tab-neo-btn-shadow: var(--dd-base-accent-orange);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-accent-orange);--dd-tab-neo-number-bg: var(--dd-base-accent-yellow);--dd-tab-neo-text: var(--dd-base-0)}.dd-tab-neo__header{display:flex;flex-wrap:wrap;gap:.85rem}.dd-tab-neo__button{display:inline-flex;align-items:center;gap:.75rem;min-width:140px;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-tab-neo-surface);color:var(--dd-tab-neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:6px 6px 0 var(--dd-tab-neo-btn-shadow);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;-webkit-tap-highlight-color:transparent}.dd-tab-neo__button:hover,.dd-tab-neo__button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button:focus-visible{outline:3px solid var(--dd-tab-neo-accent);outline-offset:2px}.dd-tab-neo__button--active{background:var(--dd-tab-neo-active-bg);box-shadow:8px 8px 0 var(--dd-tab-neo-active-shadow);transform:translate(-3px,-3px) rotate(-1deg)}.dd-tab-neo__button--active:hover{transform:translate(-4px,-4px) rotate(-1.5deg);box-shadow:10px 10px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:3px solid currentColor;border-radius:12px;background:var(--dd-tab-neo-number-bg);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.dd-tab-neo__label{font-size:.82rem}.dd-tab-neo__viewport{position:relative;overflow:hidden;perspective:1200px;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tab-neo-accent) 40%,transparent) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-tab-neo-surface);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow);min-height:100px}.dd-tab-neo__panel{padding:1.25rem}.dd-tab-neo__panel--active{position:relative}.dd-tab-neo__panel--hidden{display:none}.dd-tab-neo__panel--leave-left,.dd-tab-neo__panel--leave-right{position:absolute;top:0;left:0;right:0;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--leave-left{animation-name:neoFlipLeaveLeft}.dd-tab-neo__panel--leave-right{animation-name:neoFlipLeaveRight}.dd-tab-neo__panel--enter-right,.dd-tab-neo__panel--enter-left{position:relative;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--enter-right{animation-name:neoFlipEnterRight}.dd-tab-neo__panel--enter-left{animation-name:neoFlipEnterLeft}@keyframes neoFlipEnterRight{0%{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveLeft{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}}@keyframes neoFlipEnterLeft{0%{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveRight{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}}@media(max-width:640px){.dd-tab-neo__header{gap:.6rem}.dd-tab-neo__button{min-width:110px;padding:.7rem .85rem;box-shadow:4px 4px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button--active{box-shadow:6px 6px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{width:32px;height:32px}.dd-tab-neo__viewport{border-radius:22px;box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}.dd-tab-neo__panel{padding:1rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
631
|
+
}
|
|
632
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabNeobrutal, decorators: [{
|
|
633
|
+
type: Component,
|
|
634
|
+
args: [{ selector: 'duck-dev-tab-neobrutal', standalone: true, imports: [NgTemplateOutlet], template: "<div class=\"dd-tab-neo\" [attr.data-color]=\"color()\">\n <div class=\"dd-tab-neo__header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"dd-tab-neo__button\"\n [class.dd-tab-neo__button--active]=\"activeIndex() === i\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n <span class=\"dd-tab-neo__number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span class=\"dd-tab-neo__label\">{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"dd-tab-neo__viewport\">\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-base-0);--dd-tab-neo-accent: var(--dd-base-accent-orange);--dd-tab-neo-btn-shadow: var(--dd-base-accent-blue);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-secondary);--dd-tab-neo-number-bg: var(--dd-base-accent-orange);--dd-tab-neo-text: var(--dd-base-600);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: color-mix(in srgb, var(--dd-base-secondary) 10%, var(--dd-base-0));--dd-tab-neo-btn-shadow: var(--dd-base-secondary);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-secondary);--dd-tab-neo-number-bg: var(--dd-base-secondary)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: color-mix(in srgb, var(--dd-base-accent-orange) 12%, var(--dd-base-0));--dd-tab-neo-accent: var(--dd-base-accent-pink);--dd-tab-neo-btn-shadow: var(--dd-base-accent-blue);--dd-tab-neo-active-bg: var(--dd-base-accent-orange);--dd-tab-neo-active-shadow: var(--dd-base-secondary);--dd-tab-neo-content-shadow: var(--dd-base-accent-blue);--dd-tab-neo-number-bg: var(--dd-base-accent-pink)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-base-100);--dd-tab-neo-accent: var(--dd-base-accent-orange);--dd-tab-neo-btn-shadow: var(--dd-base-400);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-orange);--dd-tab-neo-content-shadow: var(--dd-base-accent-blue)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-base-600);--dd-tab-neo-accent: var(--dd-base-accent-yellow);--dd-tab-neo-btn-shadow: var(--dd-base-accent-orange);--dd-tab-neo-active-bg: var(--dd-base-accent-yellow);--dd-tab-neo-active-shadow: var(--dd-base-accent-pink);--dd-tab-neo-content-shadow: var(--dd-base-accent-orange);--dd-tab-neo-number-bg: var(--dd-base-accent-yellow);--dd-tab-neo-text: var(--dd-base-0)}.dd-tab-neo__header{display:flex;flex-wrap:wrap;gap:.85rem}.dd-tab-neo__button{display:inline-flex;align-items:center;gap:.75rem;min-width:140px;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-tab-neo-surface);color:var(--dd-tab-neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:6px 6px 0 var(--dd-tab-neo-btn-shadow);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;-webkit-tap-highlight-color:transparent}.dd-tab-neo__button:hover,.dd-tab-neo__button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button:focus-visible{outline:3px solid var(--dd-tab-neo-accent);outline-offset:2px}.dd-tab-neo__button--active{background:var(--dd-tab-neo-active-bg);box-shadow:8px 8px 0 var(--dd-tab-neo-active-shadow);transform:translate(-3px,-3px) rotate(-1deg)}.dd-tab-neo__button--active:hover{transform:translate(-4px,-4px) rotate(-1.5deg);box-shadow:10px 10px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:3px solid currentColor;border-radius:12px;background:var(--dd-tab-neo-number-bg);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.dd-tab-neo__label{font-size:.82rem}.dd-tab-neo__viewport{position:relative;overflow:hidden;perspective:1200px;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tab-neo-accent) 40%,transparent) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-tab-neo-surface);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow);min-height:100px}.dd-tab-neo__panel{padding:1.25rem}.dd-tab-neo__panel--active{position:relative}.dd-tab-neo__panel--hidden{display:none}.dd-tab-neo__panel--leave-left,.dd-tab-neo__panel--leave-right{position:absolute;top:0;left:0;right:0;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--leave-left{animation-name:neoFlipLeaveLeft}.dd-tab-neo__panel--leave-right{animation-name:neoFlipLeaveRight}.dd-tab-neo__panel--enter-right,.dd-tab-neo__panel--enter-left{position:relative;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--enter-right{animation-name:neoFlipEnterRight}.dd-tab-neo__panel--enter-left{animation-name:neoFlipEnterLeft}@keyframes neoFlipEnterRight{0%{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveLeft{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}}@keyframes neoFlipEnterLeft{0%{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveRight{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}}@media(max-width:640px){.dd-tab-neo__header{gap:.6rem}.dd-tab-neo__button{min-width:110px;padding:.7rem .85rem;box-shadow:4px 4px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button--active{box-shadow:6px 6px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{width:32px;height:32px}.dd-tab-neo__viewport{border-radius:22px;box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}.dd-tab-neo__panel{padding:1rem}}\n"] }]
|
|
635
|
+
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DdTabPanel), { isSignal: true }] }] } });
|
|
636
|
+
|
|
573
637
|
class DuckDevCardSection {
|
|
574
638
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
575
639
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: DuckDevCardSection, isStandalone: true, selector: "dd-card-section", ngImport: i0, template: "<section class=\"component-section\">\n <ng-content />\n</section>\n", styles: [".component-section{background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}\n"] });
|
|
@@ -2354,7 +2418,9 @@ function toPath(points, close = true) {
|
|
|
2354
2418
|
return path.join(' ');
|
|
2355
2419
|
}
|
|
2356
2420
|
function getBubbleElement$4(hostElement) {
|
|
2357
|
-
return hostElement.firstElementChild instanceof HTMLElement
|
|
2421
|
+
return hostElement.firstElementChild instanceof HTMLElement
|
|
2422
|
+
? hostElement.firstElementChild
|
|
2423
|
+
: null;
|
|
2358
2424
|
}
|
|
2359
2425
|
function closestPointOnRect$4(rect, point) {
|
|
2360
2426
|
return {
|
|
@@ -2409,10 +2475,22 @@ function buildClassicTail(baseStart, baseEnd, anchor, tip, side) {
|
|
|
2409
2475
|
const outer = side === 'left' ? baseStart : baseEnd;
|
|
2410
2476
|
const inner = side === 'left' ? baseEnd : baseStart;
|
|
2411
2477
|
const c1 = { x: outer.x + dir * 8, y: outer.y + 7 };
|
|
2412
|
-
const c2 = {
|
|
2413
|
-
|
|
2414
|
-
|
|
2415
|
-
|
|
2478
|
+
const c2 = {
|
|
2479
|
+
x: anchor.x + (tip.x - anchor.x) * 0.34 + dir * 7,
|
|
2480
|
+
y: anchor.y + (tip.y - anchor.y) * 0.2,
|
|
2481
|
+
};
|
|
2482
|
+
const c3 = {
|
|
2483
|
+
x: tip.x - (tip.x - anchor.x) * 0.08 + dir * 6,
|
|
2484
|
+
y: tip.y - (tip.y - anchor.y) * 0.08,
|
|
2485
|
+
};
|
|
2486
|
+
const c4 = {
|
|
2487
|
+
x: tip.x - (tip.x - anchor.x) * 0.16 - dir * 4,
|
|
2488
|
+
y: tip.y - (tip.y - anchor.y) * 0.02,
|
|
2489
|
+
};
|
|
2490
|
+
const c5 = {
|
|
2491
|
+
x: anchor.x + (tip.x - anchor.x) * 0.72 - dir * 8,
|
|
2492
|
+
y: anchor.y + (tip.y - anchor.y) * 0.76,
|
|
2493
|
+
};
|
|
2416
2494
|
const c6 = { x: inner.x - dir * 2, y: inner.y + 10 };
|
|
2417
2495
|
const seam = { x: anchor.x + dir * 2, y: anchor.y + 2 };
|
|
2418
2496
|
return {
|
|
@@ -2432,10 +2510,22 @@ function buildSoftTail(baseStart, baseEnd, anchor, tip, side) {
|
|
|
2432
2510
|
const outer = side === 'left' ? baseStart : baseEnd;
|
|
2433
2511
|
const inner = side === 'left' ? baseEnd : baseStart;
|
|
2434
2512
|
const c1 = { x: outer.x + dir * 10, y: outer.y + 10 };
|
|
2435
|
-
const c2 = {
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2513
|
+
const c2 = {
|
|
2514
|
+
x: anchor.x + (tip.x - anchor.x) * 0.3 + dir * 8,
|
|
2515
|
+
y: anchor.y + (tip.y - anchor.y) * 0.18,
|
|
2516
|
+
};
|
|
2517
|
+
const c3 = {
|
|
2518
|
+
x: tip.x - (tip.x - anchor.x) * 0.05 + dir * 6,
|
|
2519
|
+
y: tip.y - (tip.y - anchor.y) * 0.08,
|
|
2520
|
+
};
|
|
2521
|
+
const c4 = {
|
|
2522
|
+
x: tip.x - (tip.x - anchor.x) * 0.18 - dir * 7,
|
|
2523
|
+
y: tip.y + (anchor.y - tip.y) * 0.06,
|
|
2524
|
+
};
|
|
2525
|
+
const c5 = {
|
|
2526
|
+
x: anchor.x + (tip.x - anchor.x) * 0.68 - dir * 10,
|
|
2527
|
+
y: anchor.y + (tip.y - anchor.y) * 0.74,
|
|
2528
|
+
};
|
|
2439
2529
|
const c6 = { x: inner.x - dir * 3, y: inner.y + 12 };
|
|
2440
2530
|
const seam = { x: anchor.x + dir * 1.5, y: anchor.y + 3 };
|
|
2441
2531
|
const shineStart = lerpPoint(outer, tip, 0.16);
|
|
@@ -2730,7 +2820,8 @@ function useSpeakerBubbleTail(variant, tail, target, tailPosition = signal('bott
|
|
|
2730
2820
|
if (!bubbleElement) {
|
|
2731
2821
|
return;
|
|
2732
2822
|
}
|
|
2733
|
-
resizeObserver =
|
|
2823
|
+
resizeObserver =
|
|
2824
|
+
typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleRefresh);
|
|
2734
2825
|
resizeObserver?.observe(bubbleElement);
|
|
2735
2826
|
const targetElement = resolveTargetElement$4(target(), hostRef.nativeElement, documentRef);
|
|
2736
2827
|
if (targetElement) {
|
|
@@ -2812,7 +2903,9 @@ function resolveTargetElement$3(source, hostElement, documentRef) {
|
|
|
2812
2903
|
}
|
|
2813
2904
|
}
|
|
2814
2905
|
function getBubbleElement$3(hostElement) {
|
|
2815
|
-
return hostElement.firstElementChild instanceof HTMLElement
|
|
2906
|
+
return hostElement.firstElementChild instanceof HTMLElement
|
|
2907
|
+
? hostElement.firstElementChild
|
|
2908
|
+
: null;
|
|
2816
2909
|
}
|
|
2817
2910
|
function createUnifiedBubblePath$2(width, height, radius, baseStartX, baseEndX, tipX, tipY, offsetX, offsetY) {
|
|
2818
2911
|
const left = offsetX;
|
|
@@ -2986,11 +3079,11 @@ class DuckDevSpeakerBubbleClassic {
|
|
|
2986
3079
|
return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
|
|
2987
3080
|
}
|
|
2988
3081
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2989
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleClassic, isStandalone: true, selector: "dd-speaker-bubble-classic", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div
|
|
3082
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleClassic, isStandalone: true, selector: "dd-speaker-bubble-classic", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-speaker-bubble-classic\" [attr.data-tail]=\"resolvedTail()\" [ngStyle]=\"bubbleStyle()\">\n <svg\n class=\"dd-speaker-bubble-classic__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path class=\"dd-speaker-bubble-classic__shape-path\" [attr.d]=\"shapePath()\" />\n </svg>\n <div class=\"dd-speaker-bubble-classic__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-classic{position:relative;isolation:isolate;overflow:visible;padding:18px 20px 17px;color:var(--dd-speaker-text)}.dd-speaker-bubble-classic__shape{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(6px 6px 0 color-mix(in srgb,var(--dd-speaker-shadow) 36%,transparent))}.dd-speaker-bubble-classic__shape-path{fill:var(--dd-speaker-surface);stroke:color-mix(in srgb,var(--dd-speaker-border) 90%,var(--dd-speaker-text));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-classic__content{display:block;position:relative;z-index:1}.dd-speaker-bubble-classic__content :first-child{margin-top:0}.dd-speaker-bubble-classic__content :last-child{margin-bottom:0}.dd-speaker-bubble-classic__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-classic__content small{display:block;margin-bottom:6px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
2990
3083
|
}
|
|
2991
3084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleClassic, decorators: [{
|
|
2992
3085
|
type: Component,
|
|
2993
|
-
args: [{ selector: 'dd-speaker-bubble-classic', standalone: true, imports: [NgStyle], template: "<div
|
|
3086
|
+
args: [{ selector: 'dd-speaker-bubble-classic', standalone: true, imports: [NgStyle], template: "<div class=\"dd-speaker-bubble-classic\" [attr.data-tail]=\"resolvedTail()\" [ngStyle]=\"bubbleStyle()\">\n <svg\n class=\"dd-speaker-bubble-classic__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path class=\"dd-speaker-bubble-classic__shape-path\" [attr.d]=\"shapePath()\" />\n </svg>\n <div class=\"dd-speaker-bubble-classic__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-classic{position:relative;isolation:isolate;overflow:visible;padding:18px 20px 17px;color:var(--dd-speaker-text)}.dd-speaker-bubble-classic__shape{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(6px 6px 0 color-mix(in srgb,var(--dd-speaker-shadow) 36%,transparent))}.dd-speaker-bubble-classic__shape-path{fill:var(--dd-speaker-surface);stroke:color-mix(in srgb,var(--dd-speaker-border) 90%,var(--dd-speaker-text));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-classic__content{display:block;position:relative;z-index:1}.dd-speaker-bubble-classic__content :first-child{margin-top:0}.dd-speaker-bubble-classic__content :last-child{margin-bottom:0}.dd-speaker-bubble-classic__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-classic__content small{display:block;margin-bottom:6px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}\n"] }]
|
|
2994
3087
|
}], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
|
|
2995
3088
|
|
|
2996
3089
|
const DEFAULT_BUBBLE_GEOMETRY$2 = {
|
|
@@ -3017,15 +3110,17 @@ function resolveTargetElement$2(source, hostElement, documentRef) {
|
|
|
3017
3110
|
if (source instanceof Element)
|
|
3018
3111
|
return source;
|
|
3019
3112
|
try {
|
|
3020
|
-
return hostElement.parentElement?.querySelector(source)
|
|
3021
|
-
|
|
3113
|
+
return (hostElement.parentElement?.querySelector(source) ??
|
|
3114
|
+
documentRef.querySelector(source));
|
|
3022
3115
|
}
|
|
3023
3116
|
catch {
|
|
3024
3117
|
return null;
|
|
3025
3118
|
}
|
|
3026
3119
|
}
|
|
3027
3120
|
function getBubbleElement$2(hostElement) {
|
|
3028
|
-
return hostElement.firstElementChild instanceof HTMLElement
|
|
3121
|
+
return hostElement.firstElementChild instanceof HTMLElement
|
|
3122
|
+
? hostElement.firstElementChild
|
|
3123
|
+
: null;
|
|
3029
3124
|
}
|
|
3030
3125
|
function createSoftBubblePath(width, height, radius, baseStartX, baseEndX, tipX, tipY, offsetX, offsetY, tailPosition) {
|
|
3031
3126
|
const left = offsetX;
|
|
@@ -3177,14 +3272,20 @@ class DuckDevSpeakerBubbleSoft {
|
|
|
3177
3272
|
if (pos === 'top') {
|
|
3178
3273
|
const targetPoint = targetRect
|
|
3179
3274
|
? closestPointOnRect$2(targetRect, anchor)
|
|
3180
|
-
: {
|
|
3275
|
+
: {
|
|
3276
|
+
x: bubbleRect.left + (side === 'left' ? baseStartX : baseEndX),
|
|
3277
|
+
y: anchorY - fallbackDy,
|
|
3278
|
+
};
|
|
3181
3279
|
tipX = clamp$2(targetPoint.x - bubbleRect.left, -48, bubbleRect.width + 48);
|
|
3182
3280
|
tipY = Math.min(targetPoint.y - bubbleRect.top, -fallbackDy);
|
|
3183
3281
|
}
|
|
3184
3282
|
else {
|
|
3185
3283
|
const targetPoint = targetRect
|
|
3186
3284
|
? closestPointOnRect$2(targetRect, anchor)
|
|
3187
|
-
: {
|
|
3285
|
+
: {
|
|
3286
|
+
x: bubbleRect.left + (side === 'left' ? baseStartX : baseEndX),
|
|
3287
|
+
y: anchorY + fallbackDy,
|
|
3288
|
+
};
|
|
3188
3289
|
tipX = clamp$2(targetPoint.x - bubbleRect.left, -48, bubbleRect.width + 48);
|
|
3189
3290
|
tipY = Math.max(targetPoint.y - bubbleRect.top, bubbleRect.height + fallbackDy);
|
|
3190
3291
|
}
|
|
@@ -3219,11 +3320,11 @@ class DuckDevSpeakerBubbleSoft {
|
|
|
3219
3320
|
return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
|
|
3220
3321
|
}
|
|
3221
3322
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleSoft, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3222
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleSoft, isStandalone: true, selector: "dd-speaker-bubble-soft", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, tailPosition: { classPropertyName: "tailPosition", publicName: "tailPosition", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-speaker-bubble-soft\"\n [attr.data-tail]=\"resolvedTail()\"\n [attr.data-tail-position]=\"tailPosition()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-soft__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path
|
|
3323
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleSoft, isStandalone: true, selector: "dd-speaker-bubble-soft", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, tailPosition: { classPropertyName: "tailPosition", publicName: "tailPosition", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-speaker-bubble-soft\"\n [attr.data-tail]=\"resolvedTail()\"\n [attr.data-tail-position]=\"tailPosition()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-soft__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path class=\"dd-speaker-bubble-soft__shape-path\" [attr.d]=\"shapePath()\" />\n </svg>\n <div class=\"dd-speaker-bubble-soft__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-soft{position:relative;isolation:isolate;overflow:visible;padding:19px 21px 18px;color:var(--dd-speaker-text)}.dd-speaker-bubble-soft__shape{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(0 16px 30px color-mix(in srgb,var(--dd-speaker-shadow) 16%,transparent)) drop-shadow(0 4px 14px color-mix(in srgb,var(--dd-speaker-accent) 10%,transparent))}.dd-speaker-bubble-soft__shape-path{fill:var(--dd-speaker-surface);stroke:color-mix(in srgb,var(--dd-speaker-border) 78%,var(--dd-speaker-accent));stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-soft__content{display:block;position:relative;z-index:1}.dd-speaker-bubble-soft__content :first-child{margin-top:0}.dd-speaker-bubble-soft__content :last-child{margin-bottom:0}.dd-speaker-bubble-soft__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-soft__content small{display:block;margin-bottom:8px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;letter-spacing:.05em;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3223
3324
|
}
|
|
3224
3325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleSoft, decorators: [{
|
|
3225
3326
|
type: Component,
|
|
3226
|
-
args: [{ selector: 'dd-speaker-bubble-soft', standalone: true, imports: [NgStyle], template: "<div\n class=\"dd-speaker-bubble-soft\"\n [attr.data-tail]=\"resolvedTail()\"\n [attr.data-tail-position]=\"tailPosition()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-soft__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path
|
|
3327
|
+
args: [{ selector: 'dd-speaker-bubble-soft', standalone: true, imports: [NgStyle], template: "<div\n class=\"dd-speaker-bubble-soft\"\n [attr.data-tail]=\"resolvedTail()\"\n [attr.data-tail-position]=\"tailPosition()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-soft__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path class=\"dd-speaker-bubble-soft__shape-path\" [attr.d]=\"shapePath()\" />\n </svg>\n <div class=\"dd-speaker-bubble-soft__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-soft{position:relative;isolation:isolate;overflow:visible;padding:19px 21px 18px;color:var(--dd-speaker-text)}.dd-speaker-bubble-soft__shape{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(0 16px 30px color-mix(in srgb,var(--dd-speaker-shadow) 16%,transparent)) drop-shadow(0 4px 14px color-mix(in srgb,var(--dd-speaker-accent) 10%,transparent))}.dd-speaker-bubble-soft__shape-path{fill:var(--dd-speaker-surface);stroke:color-mix(in srgb,var(--dd-speaker-border) 78%,var(--dd-speaker-accent));stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-soft__content{display:block;position:relative;z-index:1}.dd-speaker-bubble-soft__content :first-child{margin-top:0}.dd-speaker-bubble-soft__content :last-child{margin-bottom:0}.dd-speaker-bubble-soft__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-soft__content small{display:block;margin-bottom:8px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;letter-spacing:.05em;text-transform:uppercase}\n"] }]
|
|
3227
3328
|
}], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], tailPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tailPosition", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
|
|
3228
3329
|
|
|
3229
3330
|
class DuckDevSpeakerBubbleOutline {
|
|
@@ -3238,11 +3339,11 @@ class DuckDevSpeakerBubbleOutline {
|
|
|
3238
3339
|
tailViewBox = this.tailController.tailViewBox;
|
|
3239
3340
|
tailPath = this.tailController.tailPath;
|
|
3240
3341
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleOutline, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3241
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleOutline, isStandalone: true, selector: "dd-speaker-bubble-outline", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, tailPosition: { classPropertyName: "tailPosition", publicName: "tailPosition", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div
|
|
3342
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleOutline, isStandalone: true, selector: "dd-speaker-bubble-outline", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, tailPosition: { classPropertyName: "tailPosition", publicName: "tailPosition", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-speaker-bubble-outline\" [attr.data-tail]=\"resolvedTail()\" [ngStyle]=\"bubbleStyle()\">\n <span class=\"dd-speaker-bubble-outline__tail\" aria-hidden=\"true\" [ngStyle]=\"tailStyle()\">\n <svg\n [attr.viewBox]=\"tailViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path class=\"dd-speaker-bubble-outline__tail-path\" [attr.d]=\"tailPath()\" />\n </svg>\n </span>\n <div class=\"dd-speaker-bubble-outline__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-outline{position:relative;isolation:isolate;overflow:visible;padding:17px 19px 16px;border:2px solid var(--dd-speaker-border);border-radius:22px 22px 22px 10px;outline:1px dashed color-mix(in srgb,var(--dd-speaker-accent) 45%,transparent);outline-offset:-8px;background:linear-gradient(90deg,var(--dd-speaker-accent),var(--dd-speaker-accent)) 14px calc(100% - 12px) /28px 3px no-repeat,linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-accent) 8%,transparent) 0,transparent 52%),var(--dd-speaker-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dd-speaker-surface) 50%,white),6px 6px color-mix(in srgb,var(--dd-speaker-accent) 18%,transparent);color:var(--dd-speaker-text)}.dd-speaker-bubble-outline[data-tail=right]{border-radius:22px 22px 10px;background-position:calc(100% - 14px) calc(100% - 12px),0 0,0 0}.dd-speaker-bubble-outline__tail{position:absolute;z-index:-1;filter:drop-shadow(3px 4px 0 color-mix(in srgb,var(--dd-speaker-accent) 14%,transparent));pointer-events:none}.dd-speaker-bubble-outline__tail svg{display:block;width:100%;height:100%;overflow:visible}.dd-speaker-bubble-outline__tail-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}.dd-speaker-bubble-outline__content :first-child{margin-top:0}.dd-speaker-bubble-outline__content :last-child{margin-bottom:0}.dd-speaker-bubble-outline__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-outline__content small{display:block;margin-bottom:8px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;letter-spacing:.08em;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3242
3343
|
}
|
|
3243
3344
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleOutline, decorators: [{
|
|
3244
3345
|
type: Component,
|
|
3245
|
-
args: [{ selector: 'dd-speaker-bubble-outline', standalone: true, imports: [NgStyle], template: "<div
|
|
3346
|
+
args: [{ selector: 'dd-speaker-bubble-outline', standalone: true, imports: [NgStyle], template: "<div class=\"dd-speaker-bubble-outline\" [attr.data-tail]=\"resolvedTail()\" [ngStyle]=\"bubbleStyle()\">\n <span class=\"dd-speaker-bubble-outline__tail\" aria-hidden=\"true\" [ngStyle]=\"tailStyle()\">\n <svg\n [attr.viewBox]=\"tailViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n aria-hidden=\"true\"\n >\n <path class=\"dd-speaker-bubble-outline__tail-path\" [attr.d]=\"tailPath()\" />\n </svg>\n </span>\n <div class=\"dd-speaker-bubble-outline__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-outline{position:relative;isolation:isolate;overflow:visible;padding:17px 19px 16px;border:2px solid var(--dd-speaker-border);border-radius:22px 22px 22px 10px;outline:1px dashed color-mix(in srgb,var(--dd-speaker-accent) 45%,transparent);outline-offset:-8px;background:linear-gradient(90deg,var(--dd-speaker-accent),var(--dd-speaker-accent)) 14px calc(100% - 12px) /28px 3px no-repeat,linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-accent) 8%,transparent) 0,transparent 52%),var(--dd-speaker-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dd-speaker-surface) 50%,white),6px 6px color-mix(in srgb,var(--dd-speaker-accent) 18%,transparent);color:var(--dd-speaker-text)}.dd-speaker-bubble-outline[data-tail=right]{border-radius:22px 22px 10px;background-position:calc(100% - 14px) calc(100% - 12px),0 0,0 0}.dd-speaker-bubble-outline__tail{position:absolute;z-index:-1;filter:drop-shadow(3px 4px 0 color-mix(in srgb,var(--dd-speaker-accent) 14%,transparent));pointer-events:none}.dd-speaker-bubble-outline__tail svg{display:block;width:100%;height:100%;overflow:visible}.dd-speaker-bubble-outline__tail-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}.dd-speaker-bubble-outline__content :first-child{margin-top:0}.dd-speaker-bubble-outline__content :last-child{margin-bottom:0}.dd-speaker-bubble-outline__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-outline__content small{display:block;margin-bottom:8px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;letter-spacing:.08em;text-transform:uppercase}\n"] }]
|
|
3246
3347
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], tailPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tailPosition", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
|
|
3247
3348
|
|
|
3248
3349
|
const DEFAULT_BUBBLE_GEOMETRY$1 = {
|
|
@@ -3287,7 +3388,9 @@ function resolveTargetElement$1(source, hostElement, documentRef) {
|
|
|
3287
3388
|
}
|
|
3288
3389
|
}
|
|
3289
3390
|
function getBubbleElement$1(hostElement) {
|
|
3290
|
-
return hostElement.firstElementChild instanceof HTMLElement
|
|
3391
|
+
return hostElement.firstElementChild instanceof HTMLElement
|
|
3392
|
+
? hostElement.firstElementChild
|
|
3393
|
+
: null;
|
|
3291
3394
|
}
|
|
3292
3395
|
function createUnifiedBubblePath$1(width, height, radius, baseStartX, baseEndX, tipX, tipY, offsetX, offsetY) {
|
|
3293
3396
|
const left = offsetX;
|
|
@@ -3461,11 +3564,11 @@ class DuckDevSpeakerBubbleNeobrutalSlab {
|
|
|
3461
3564
|
return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
|
|
3462
3565
|
}
|
|
3463
3566
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3464
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleNeobrutalSlab, isStandalone: true, selector: "dd-speaker-bubble-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div
|
|
3567
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleNeobrutalSlab, isStandalone: true, selector: "dd-speaker-bubble-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-speaker-bubble-neo-slab\" [attr.data-tail]=\"resolvedTail()\" [ngStyle]=\"bubbleStyle()\">\n <svg\n class=\"dd-speaker-bubble-neo-slab__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path class=\"dd-speaker-bubble-neo-slab__shape-path\" [attr.d]=\"shapePath()\" />\n </svg>\n <span class=\"dd-speaker-bubble-neo-slab__pin\" aria-hidden=\"true\"></span>\n <span class=\"dd-speaker-bubble-neo-slab__corner\" aria-hidden=\"true\"></span>\n <div class=\"dd-speaker-bubble-neo-slab__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,38rem)}.dd-speaker-bubble-neo-slab{position:relative;isolation:isolate;overflow:visible;padding:28px 22px 18px;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-slab__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-slab__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-slab__pin{position:absolute;top:-16px;left:18px;width:46px;height:18px;border:4px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-border);transform:rotate(-4deg)}.dd-speaker-bubble-neo-slab__corner{position:absolute;top:0;right:0;width:24px;height:24px;border-left:4px solid var(--dd-speaker-border);border-bottom:4px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 74%,var(--dd-base-0))}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__pin{right:18px;left:auto;transform:rotate(4deg)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__corner{right:auto;left:0;border-right:4px solid var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-slab__content{position:relative;z-index:1;font-size:15px;font-weight:800;line-height:1.55;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}.dd-speaker-bubble-neo-slab__content :first-child{margin-top:0}.dd-speaker-bubble-neo-slab__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-slab__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab__content small{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:6px 10px 5px;border:3px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 20%,var(--dd-speaker-surface));box-shadow:3px 3px 0 var(--dd-speaker-shadow);color:var(--dd-speaker-text);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-slab__content small:before{content:\"\";width:10px;height:10px;flex:0 0 auto;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__content{background:linear-gradient(225deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3465
3568
|
}
|
|
3466
3569
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalSlab, decorators: [{
|
|
3467
3570
|
type: Component,
|
|
3468
|
-
args: [{ selector: 'dd-speaker-bubble-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<div
|
|
3571
|
+
args: [{ selector: 'dd-speaker-bubble-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<div class=\"dd-speaker-bubble-neo-slab\" [attr.data-tail]=\"resolvedTail()\" [ngStyle]=\"bubbleStyle()\">\n <svg\n class=\"dd-speaker-bubble-neo-slab__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path class=\"dd-speaker-bubble-neo-slab__shape-path\" [attr.d]=\"shapePath()\" />\n </svg>\n <span class=\"dd-speaker-bubble-neo-slab__pin\" aria-hidden=\"true\"></span>\n <span class=\"dd-speaker-bubble-neo-slab__corner\" aria-hidden=\"true\"></span>\n <div class=\"dd-speaker-bubble-neo-slab__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,38rem)}.dd-speaker-bubble-neo-slab{position:relative;isolation:isolate;overflow:visible;padding:28px 22px 18px;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-slab__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-slab__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-slab__pin{position:absolute;top:-16px;left:18px;width:46px;height:18px;border:4px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-border);transform:rotate(-4deg)}.dd-speaker-bubble-neo-slab__corner{position:absolute;top:0;right:0;width:24px;height:24px;border-left:4px solid var(--dd-speaker-border);border-bottom:4px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 74%,var(--dd-base-0))}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__pin{right:18px;left:auto;transform:rotate(4deg)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__corner{right:auto;left:0;border-right:4px solid var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-slab__content{position:relative;z-index:1;font-size:15px;font-weight:800;line-height:1.55;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}.dd-speaker-bubble-neo-slab__content :first-child{margin-top:0}.dd-speaker-bubble-neo-slab__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-slab__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab__content small{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:6px 10px 5px;border:3px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 20%,var(--dd-speaker-surface));box-shadow:3px 3px 0 var(--dd-speaker-shadow);color:var(--dd-speaker-text);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-slab__content small:before{content:\"\";width:10px;height:10px;flex:0 0 auto;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__content{background:linear-gradient(225deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}\n"] }]
|
|
3469
3572
|
}], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
|
|
3470
3573
|
|
|
3471
3574
|
const DEFAULT_BUBBLE_GEOMETRY = {
|
|
@@ -3510,7 +3613,9 @@ function resolveTargetElement(source, hostElement, documentRef) {
|
|
|
3510
3613
|
}
|
|
3511
3614
|
}
|
|
3512
3615
|
function getBubbleElement(hostElement) {
|
|
3513
|
-
return hostElement.firstElementChild instanceof HTMLElement
|
|
3616
|
+
return hostElement.firstElementChild instanceof HTMLElement
|
|
3617
|
+
? hostElement.firstElementChild
|
|
3618
|
+
: null;
|
|
3514
3619
|
}
|
|
3515
3620
|
function createUnifiedBubblePath(width, height, radius, baseStartX, baseEndX, tipX, tipY, offsetX, offsetY) {
|
|
3516
3621
|
const left = offsetX;
|
|
@@ -3684,11 +3789,11 @@ class DuckDevSpeakerBubbleNeobrutalTicket {
|
|
|
3684
3789
|
return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
|
|
3685
3790
|
}
|
|
3686
3791
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3687
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleNeobrutalTicket, isStandalone: true, selector: "dd-speaker-bubble-neobrutal-ticket", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-speaker-bubble-neo-ticket\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-ticket__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path
|
|
3792
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleNeobrutalTicket, isStandalone: true, selector: "dd-speaker-bubble-neobrutal-ticket", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-speaker-bubble-neo-ticket\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-ticket__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path class=\"dd-speaker-bubble-neo-ticket__shape-path\" [attr.d]=\"shapePath()\" />\n </svg>\n\n <div class=\"dd-speaker-bubble-neo-ticket__shell\">\n <div class=\"dd-speaker-bubble-neo-ticket__body\">\n <span class=\"dd-speaker-bubble-neo-ticket__flash\" aria-hidden=\"true\"></span>\n\n <div class=\"dd-speaker-bubble-neo-ticket__content\">\n <ng-content />\n </div>\n </div>\n\n <span class=\"dd-speaker-bubble-neo-ticket__stub\" aria-hidden=\"true\">\n <span></span>\n <span></span>\n <span></span>\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,40rem)}.dd-speaker-bubble-neo-ticket{position:relative;isolation:isolate;overflow:visible;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-ticket__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-ticket__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(10px 10px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-areas:\"body stub\";padding:4px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:58px minmax(0,1fr);grid-template-areas:\"stub body\"}.dd-speaker-bubble-neo-ticket__body{grid-area:body;position:relative;padding:22px 22px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 20%,transparent) 0 16px,transparent 16px 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-speaker-border) 8%,transparent) 14px 16px),color-mix(in srgb,var(--dd-speaker-surface-muted) 78%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after{content:\"\";position:absolute;top:18px;right:-18px;width:28px;height:28px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:var(--dd-speaker-surface)}.dd-speaker-bubble-neo-ticket__body:after{top:auto;bottom:18px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{right:auto;left:-18px}.dd-speaker-bubble-neo-ticket__flash{position:absolute;top:14px;left:18px;width:30px;height:12px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-shadow);transform:rotate(-7deg)}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__flash{left:auto;right:18px;transform:rotate(7deg)}.dd-speaker-bubble-neo-ticket__content{position:relative;z-index:1;padding-top:18px;font-size:15px;font-weight:800;line-height:1.55}.dd-speaker-bubble-neo-ticket__content :first-child{margin-top:0}.dd-speaker-bubble-neo-ticket__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-ticket__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-ticket__content small{display:inline-flex;margin-bottom:10px;padding:5px 8px 4px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);color:var(--dd-speaker-border);font-size:11px;font-weight:1000;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-ticket__stub{grid-area:stub;display:grid;align-content:center;justify-items:center;gap:10px;padding:16px 8px;border-left:4px dashed var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 70%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{border-right:4px dashed var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-ticket__stub span{width:18px;height:18px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:color-mix(in srgb,var(--dd-speaker-surface) 80%,var(--dd-base-0))}@media(max-width:640px){.dd-speaker-bubble-neo-ticket__shape-path{filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:1fr;grid-template-areas:\"body\" \"stub\"}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{inset:auto auto -18px 22px;width:24px;height:24px}.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{left:auto;right:22px}.dd-speaker-bubble-neo-ticket__stub,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px 14px;border-top:4px dashed var(--dd-speaker-border);border-right:0;border-left:0}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3688
3793
|
}
|
|
3689
3794
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalTicket, decorators: [{
|
|
3690
3795
|
type: Component,
|
|
3691
|
-
args: [{ selector: 'dd-speaker-bubble-neobrutal-ticket', standalone: true, imports: [NgStyle], template: "<div\n class=\"dd-speaker-bubble-neo-ticket\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-ticket__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path
|
|
3796
|
+
args: [{ selector: 'dd-speaker-bubble-neobrutal-ticket', standalone: true, imports: [NgStyle], template: "<div\n class=\"dd-speaker-bubble-neo-ticket\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-ticket__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path class=\"dd-speaker-bubble-neo-ticket__shape-path\" [attr.d]=\"shapePath()\" />\n </svg>\n\n <div class=\"dd-speaker-bubble-neo-ticket__shell\">\n <div class=\"dd-speaker-bubble-neo-ticket__body\">\n <span class=\"dd-speaker-bubble-neo-ticket__flash\" aria-hidden=\"true\"></span>\n\n <div class=\"dd-speaker-bubble-neo-ticket__content\">\n <ng-content />\n </div>\n </div>\n\n <span class=\"dd-speaker-bubble-neo-ticket__stub\" aria-hidden=\"true\">\n <span></span>\n <span></span>\n <span></span>\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,40rem)}.dd-speaker-bubble-neo-ticket{position:relative;isolation:isolate;overflow:visible;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-ticket__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-ticket__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(10px 10px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-areas:\"body stub\";padding:4px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:58px minmax(0,1fr);grid-template-areas:\"stub body\"}.dd-speaker-bubble-neo-ticket__body{grid-area:body;position:relative;padding:22px 22px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 20%,transparent) 0 16px,transparent 16px 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-speaker-border) 8%,transparent) 14px 16px),color-mix(in srgb,var(--dd-speaker-surface-muted) 78%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after{content:\"\";position:absolute;top:18px;right:-18px;width:28px;height:28px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:var(--dd-speaker-surface)}.dd-speaker-bubble-neo-ticket__body:after{top:auto;bottom:18px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{right:auto;left:-18px}.dd-speaker-bubble-neo-ticket__flash{position:absolute;top:14px;left:18px;width:30px;height:12px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-shadow);transform:rotate(-7deg)}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__flash{left:auto;right:18px;transform:rotate(7deg)}.dd-speaker-bubble-neo-ticket__content{position:relative;z-index:1;padding-top:18px;font-size:15px;font-weight:800;line-height:1.55}.dd-speaker-bubble-neo-ticket__content :first-child{margin-top:0}.dd-speaker-bubble-neo-ticket__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-ticket__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-ticket__content small{display:inline-flex;margin-bottom:10px;padding:5px 8px 4px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);color:var(--dd-speaker-border);font-size:11px;font-weight:1000;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-ticket__stub{grid-area:stub;display:grid;align-content:center;justify-items:center;gap:10px;padding:16px 8px;border-left:4px dashed var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 70%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{border-right:4px dashed var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-ticket__stub span{width:18px;height:18px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:color-mix(in srgb,var(--dd-speaker-surface) 80%,var(--dd-base-0))}@media(max-width:640px){.dd-speaker-bubble-neo-ticket__shape-path{filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:1fr;grid-template-areas:\"body\" \"stub\"}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{inset:auto auto -18px 22px;width:24px;height:24px}.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{left:auto;right:22px}.dd-speaker-bubble-neo-ticket__stub,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px 14px;border-top:4px dashed var(--dd-speaker-border);border-right:0;border-left:0}}\n"] }]
|
|
3692
3797
|
}], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
|
|
3693
3798
|
|
|
3694
3799
|
class ButtonNeobrutalBlock {
|
|
@@ -3698,7 +3803,7 @@ class ButtonNeobrutalBlock {
|
|
|
3698
3803
|
colorGray = AccentEnumColor.Gray;
|
|
3699
3804
|
colorDark = AccentEnumColor.Dark;
|
|
3700
3805
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3701
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ButtonNeobrutalBlock, isStandalone: true, selector: "app-button-neobrutal-block", ngImport: i0, template: "<dd-card-section>\n <h2>{{ 'buttons.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-neobrutal-burst\n [text]=\"'Launch'\"\n [subtext]=\"'HOT DROP'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-slab\n [text]=\"'Drop Zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tape\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n [colorButton]=\"buttonColor\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.neobrutal.inputText' | transloco }}</li>\n <li><strong>subtext</strong> - {{ 'buttons.neobrutal.inputSubtext' | transloco }}</li>\n <li>\n <strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}\n </li>\n <li><strong>tag</strong> - {{ 'buttons.neobrutal.inputTag' | transloco }}</li>\n <li><strong>label</strong> - {{ 'buttons.neobrutal.inputLabel' | transloco }}</li>\n <li><strong>icon</strong> - {{ 'buttons.neobrutal.inputIcon' | transloco }}</li>\n <li>\n <strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}\n </li>\n <li><strong>isDisabled</strong> - {{ 'buttons.neobrutal.inputIsDisabled' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.neobrutal.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-burst [text]=\"'Launch'\" [subtext]=\"'Hot drop'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Open beta'\"\n [subtext]=\"'Beta'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstDark' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Night mode'\"\n [subtext]=\"'Sharp'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabGray' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Drop zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Fast lane'\"\n [helperText]=\"'priority queue'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabDisabled' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Read only'\"\n [helperText]=\"'disabled'\"\n [isDisabled]=\"true\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Join crew'\"\n [tag]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Pay later'\"\n [tag]=\"'02'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Sticker -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Grab this'\"\n [subtext]=\"'sale'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerDark' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Dark peel'\"\n [subtext]=\"'pro'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Zigzag -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Claim it'\"\n [label]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Rip here'\"\n [label]=\"'GO'\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <!-- Tape -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Attach'\"\n [icon]=\"'+'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Pin down'\"\n [icon]=\"'>>'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n</dd-card-section>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--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)}.description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-200));border:3px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}h2{font-size:28px;font-weight:700;color:var(--dd-base-600);margin-bottom:15px;text-transform:uppercase}h3{font-size:20px;font-weight:700;color:var(--dd-base-600);margin:25px 0 15px;text-transform:uppercase}.usage-block{margin-bottom:25px}.usage-block pre{margin:0;padding:20px;overflow-x:auto;border:3px solid var(--dd-neo-ink);border-radius:12px;background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);color:var(--dd-base-0)}.usage-block code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}.inputs-block{margin-bottom:25px}.inputs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.inputs-block li{padding:14px 16px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-300);color:var(--dd-base-500);font-size:15px;line-height:1.5}.inputs-block strong{color:var(--dd-base-600)}.examples-block .example-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.examples-block .example-item{flex:1;min-width:250px;padding:22px 18px 20px;border:3px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,var(--dd-base-accent-yellow) 0 22px,transparent 23px),var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-neo-shadow);display:flex;flex-direction:column;align-items:center;gap:18px}.examples-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}.examples-block duck-dev-button-neobrutal-burst,.examples-block duck-dev-button-neobrutal-slab,.examples-block duck-dev-button-neobrutal-tag,.examples-block duck-dev-button-neobrutal-sticker,.examples-block duck-dev-button-neobrutal-zigzag,.examples-block duck-dev-button-neobrutal-tape{width:100%;max-width:320px}@media(max-width:768px){.examples-block .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonNeobrutalBurst, selector: "duck-dev-button-neobrutal-burst", inputs: ["text", "subtext", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTag, selector: "duck-dev-button-neobrutal-tag", inputs: ["text", "tag", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSticker, selector: "duck-dev-button-neobrutal-sticker", inputs: ["text", "subtext", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalZigzag, selector: "duck-dev-button-neobrutal-zigzag", inputs: ["text", "label", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTape, selector: "duck-dev-button-neobrutal-tape", inputs: ["text", "icon", "isDisabled", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
3806
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ButtonNeobrutalBlock, isStandalone: true, selector: "app-button-neobrutal-block", ngImport: i0, template: "<dd-card-section>\n <h2>{{ 'buttons.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-neobrutal-burst\n [text]=\"'Launch'\"\n [subtext]=\"'HOT DROP'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-slab\n [text]=\"'Drop Zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tape\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n [colorButton]=\"buttonColor\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.neobrutal.inputText' | transloco }}</li>\n <li><strong>subtext</strong> - {{ 'buttons.neobrutal.inputSubtext' | transloco }}</li>\n <li><strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}</li>\n <li><strong>tag</strong> - {{ 'buttons.neobrutal.inputTag' | transloco }}</li>\n <li><strong>label</strong> - {{ 'buttons.neobrutal.inputLabel' | transloco }}</li>\n <li><strong>icon</strong> - {{ 'buttons.neobrutal.inputIcon' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}</li>\n <li><strong>isDisabled</strong> - {{ 'buttons.neobrutal.inputIsDisabled' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.neobrutal.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-burst [text]=\"'Launch'\" [subtext]=\"'Hot drop'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Open beta'\"\n [subtext]=\"'Beta'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstDark' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Night mode'\"\n [subtext]=\"'Sharp'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabGray' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Drop zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Fast lane'\"\n [helperText]=\"'priority queue'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabDisabled' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Read only'\"\n [helperText]=\"'disabled'\"\n [isDisabled]=\"true\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Join crew'\"\n [tag]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Pay later'\"\n [tag]=\"'02'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Sticker -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Grab this'\"\n [subtext]=\"'sale'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerDark' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Dark peel'\"\n [subtext]=\"'pro'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Zigzag -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Claim it'\"\n [label]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Rip here'\"\n [label]=\"'GO'\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <!-- Tape -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-tape [text]=\"'Stick it'\" [icon]=\"'>>'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Attach'\"\n [icon]=\"'+'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Pin down'\"\n [icon]=\"'>>'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n</dd-card-section>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-200));border:3px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}h2{font-size:28px;font-weight:700;color:var(--dd-base-600);margin-bottom:15px;text-transform:uppercase}h3{font-size:20px;font-weight:700;color:var(--dd-base-600);margin:25px 0 15px;text-transform:uppercase}.usage-block{margin-bottom:25px}.usage-block pre{margin:0;padding:20px;overflow-x:auto;border:3px solid var(--dd-neo-ink);border-radius:12px;background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);color:var(--dd-base-0)}.usage-block code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}.inputs-block{margin-bottom:25px}.inputs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.inputs-block li{padding:14px 16px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-300);color:var(--dd-base-500);font-size:15px;line-height:1.5}.inputs-block strong{color:var(--dd-base-600)}.examples-block .example-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.examples-block .example-item{flex:1;min-width:250px;padding:22px 18px 20px;border:3px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,var(--dd-base-accent-yellow) 0 22px,transparent 23px),var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-neo-shadow);display:flex;flex-direction:column;align-items:center;gap:18px}.examples-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}.examples-block duck-dev-button-neobrutal-burst,.examples-block duck-dev-button-neobrutal-slab,.examples-block duck-dev-button-neobrutal-tag,.examples-block duck-dev-button-neobrutal-sticker,.examples-block duck-dev-button-neobrutal-zigzag,.examples-block duck-dev-button-neobrutal-tape{width:100%;max-width:320px}@media(max-width:768px){.examples-block .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonNeobrutalBurst, selector: "duck-dev-button-neobrutal-burst", inputs: ["text", "subtext", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTag, selector: "duck-dev-button-neobrutal-tag", inputs: ["text", "tag", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSticker, selector: "duck-dev-button-neobrutal-sticker", inputs: ["text", "subtext", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalZigzag, selector: "duck-dev-button-neobrutal-zigzag", inputs: ["text", "label", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTape, selector: "duck-dev-button-neobrutal-tape", inputs: ["text", "icon", "isDisabled", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
3702
3807
|
}
|
|
3703
3808
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBlock, decorators: [{
|
|
3704
3809
|
type: Component,
|
|
@@ -3711,7 +3816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3711
3816
|
ButtonNeobrutalTape,
|
|
3712
3817
|
DuckDevCardSection,
|
|
3713
3818
|
TranslocoPipe,
|
|
3714
|
-
], template: "<dd-card-section>\n <h2>{{ 'buttons.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-neobrutal-burst\n [text]=\"'Launch'\"\n [subtext]=\"'HOT DROP'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-slab\n [text]=\"'Drop Zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tape\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n [colorButton]=\"buttonColor\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.neobrutal.inputText' | transloco }}</li>\n <li><strong>subtext</strong> - {{ 'buttons.neobrutal.inputSubtext' | transloco }}</li>\n <li>\n <strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}\n </li>\n <li><strong>tag</strong> - {{ 'buttons.neobrutal.inputTag' | transloco }}</li>\n <li><strong>label</strong> - {{ 'buttons.neobrutal.inputLabel' | transloco }}</li>\n <li><strong>icon</strong> - {{ 'buttons.neobrutal.inputIcon' | transloco }}</li>\n <li>\n <strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}\n </li>\n <li><strong>isDisabled</strong> - {{ 'buttons.neobrutal.inputIsDisabled' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.neobrutal.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-burst [text]=\"'Launch'\" [subtext]=\"'Hot drop'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Open beta'\"\n [subtext]=\"'Beta'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstDark' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Night mode'\"\n [subtext]=\"'Sharp'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabGray' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Drop zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Fast lane'\"\n [helperText]=\"'priority queue'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabDisabled' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Read only'\"\n [helperText]=\"'disabled'\"\n [isDisabled]=\"true\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Join crew'\"\n [tag]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Pay later'\"\n [tag]=\"'02'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Sticker -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Grab this'\"\n [subtext]=\"'sale'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerDark' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Dark peel'\"\n [subtext]=\"'pro'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Zigzag -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Claim it'\"\n [label]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Rip here'\"\n [label]=\"'GO'\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <!-- Tape -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Attach'\"\n [icon]=\"'+'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Pin down'\"\n [icon]=\"'>>'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n</dd-card-section>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--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)}.description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-200));border:3px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}h2{font-size:28px;font-weight:700;color:var(--dd-base-600);margin-bottom:15px;text-transform:uppercase}h3{font-size:20px;font-weight:700;color:var(--dd-base-600);margin:25px 0 15px;text-transform:uppercase}.usage-block{margin-bottom:25px}.usage-block pre{margin:0;padding:20px;overflow-x:auto;border:3px solid var(--dd-neo-ink);border-radius:12px;background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);color:var(--dd-base-0)}.usage-block code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}.inputs-block{margin-bottom:25px}.inputs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.inputs-block li{padding:14px 16px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-300);color:var(--dd-base-500);font-size:15px;line-height:1.5}.inputs-block strong{color:var(--dd-base-600)}.examples-block .example-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.examples-block .example-item{flex:1;min-width:250px;padding:22px 18px 20px;border:3px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,var(--dd-base-accent-yellow) 0 22px,transparent 23px),var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-neo-shadow);display:flex;flex-direction:column;align-items:center;gap:18px}.examples-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}.examples-block duck-dev-button-neobrutal-burst,.examples-block duck-dev-button-neobrutal-slab,.examples-block duck-dev-button-neobrutal-tag,.examples-block duck-dev-button-neobrutal-sticker,.examples-block duck-dev-button-neobrutal-zigzag,.examples-block duck-dev-button-neobrutal-tape{width:100%;max-width:320px}@media(max-width:768px){.examples-block .example-item{min-width:100%}}\n"] }]
|
|
3819
|
+
], template: "<dd-card-section>\n <h2>{{ 'buttons.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'buttons.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'buttons.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-button-neobrutal-burst\n [text]=\"'Launch'\"\n [subtext]=\"'HOT DROP'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-slab\n [text]=\"'Drop Zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"buttonColor\"\n/>\n\n<duck-dev-button-neobrutal-tape\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n [colorButton]=\"buttonColor\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'buttons.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li><strong>text</strong> - {{ 'buttons.neobrutal.inputText' | transloco }}</li>\n <li><strong>subtext</strong> - {{ 'buttons.neobrutal.inputSubtext' | transloco }}</li>\n <li><strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}</li>\n <li><strong>tag</strong> - {{ 'buttons.neobrutal.inputTag' | transloco }}</li>\n <li><strong>label</strong> - {{ 'buttons.neobrutal.inputLabel' | transloco }}</li>\n <li><strong>icon</strong> - {{ 'buttons.neobrutal.inputIcon' | transloco }}</li>\n <li><strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}</li>\n <li><strong>isDisabled</strong> - {{ 'buttons.neobrutal.inputIsDisabled' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'buttons.neobrutal.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-burst [text]=\"'Launch'\" [subtext]=\"'Hot drop'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Open beta'\"\n [subtext]=\"'Beta'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstDark' | transloco }}</p>\n <duck-dev-button-neobrutal-burst\n [text]=\"'Night mode'\"\n [subtext]=\"'Sharp'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabGray' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Drop zone'\"\n [helperText]=\"'ready to ship'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Fast lane'\"\n [helperText]=\"'priority queue'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabDisabled' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Read only'\"\n [helperText]=\"'disabled'\"\n [isDisabled]=\"true\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Buy now'\"\n [tag]=\"'01'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Join crew'\"\n [tag]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'Pay later'\"\n [tag]=\"'02'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Sticker -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Peel me'\"\n [subtext]=\"'new'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Grab this'\"\n [subtext]=\"'sale'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerDark' | transloco }}</p>\n <duck-dev-button-neobrutal-sticker\n [text]=\"'Dark peel'\"\n [subtext]=\"'pro'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n\n <!-- Zigzag -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagOrange' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Tear off'\"\n [label]=\"'FREE'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Claim it'\"\n [label]=\"'VIP'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-zigzag\n [text]=\"'Rip here'\"\n [label]=\"'GO'\"\n [colorButton]=\"colorWhite\"\n />\n </div>\n </div>\n\n <!-- Tape -->\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeWhite' | transloco }}</p>\n <duck-dev-button-neobrutal-tape [text]=\"'Stick it'\" [icon]=\"'>>'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeViolet' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Attach'\"\n [icon]=\"'+'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeDark' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Pin down'\"\n [icon]=\"'>>'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </div>\n</dd-card-section>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-200));border:3px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}h2{font-size:28px;font-weight:700;color:var(--dd-base-600);margin-bottom:15px;text-transform:uppercase}h3{font-size:20px;font-weight:700;color:var(--dd-base-600);margin:25px 0 15px;text-transform:uppercase}.usage-block{margin-bottom:25px}.usage-block pre{margin:0;padding:20px;overflow-x:auto;border:3px solid var(--dd-neo-ink);border-radius:12px;background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);color:var(--dd-base-0)}.usage-block code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}.inputs-block{margin-bottom:25px}.inputs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.inputs-block li{padding:14px 16px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-300);color:var(--dd-base-500);font-size:15px;line-height:1.5}.inputs-block strong{color:var(--dd-base-600)}.examples-block .example-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.examples-block .example-item{flex:1;min-width:250px;padding:22px 18px 20px;border:3px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,var(--dd-base-accent-yellow) 0 22px,transparent 23px),var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-neo-shadow);display:flex;flex-direction:column;align-items:center;gap:18px}.examples-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}.examples-block duck-dev-button-neobrutal-burst,.examples-block duck-dev-button-neobrutal-slab,.examples-block duck-dev-button-neobrutal-tag,.examples-block duck-dev-button-neobrutal-sticker,.examples-block duck-dev-button-neobrutal-zigzag,.examples-block duck-dev-button-neobrutal-tape{width:100%;max-width:320px}@media(max-width:768px){.examples-block .example-item{min-width:100%}}\n"] }]
|
|
3715
3820
|
}] });
|
|
3716
3821
|
|
|
3717
3822
|
class ButtonBlock {
|
|
@@ -3730,7 +3835,7 @@ class ButtonBlock {
|
|
|
3730
3835
|
this.activeStyleTab.set(tab);
|
|
3731
3836
|
}
|
|
3732
3837
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3733
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ButtonBlock, isStandalone: true, selector: "app-button-block", ngImport: i0, template: "<div class=\"buttons-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'5 colors'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'buttons.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 GLIDE OVER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.glideOver.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #glideOverCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-glide-over\n textButton=\"Click me\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.glideOver.usage' | transloco\"\n [content]=\"glideOverCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'buttons.glideOver.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.glideOver.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.glideOver.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Click me\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Violet\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Orange\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Gray\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Dark\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 BLUR LIFT \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.blurLift.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #blurLiftCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-blur-lift\n textButton=\"Hover me\"\n [hoverText]=\"'Hello!'\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.blurLift.usage' | transloco\"\n [content]=\"blurLiftCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'buttons.blurLift.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>hoverText</strong>\n <span>{{ 'buttons.blurLift.inputHoverText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.blurLift.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.blurLift.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Hover me\" [hoverText]=\"'Hello!'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Click\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Gray\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Dark\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.flip.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-flip\n [text]=\"'Next'\"\n [colorButton]=\"colorViolet\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.flip.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.flip.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.flip.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>direction</strong>\n <span>{{ 'buttons.flip.inputDirection' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>disabled</strong>\n <span>{{ 'buttons.flip.inputDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleWhite' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleViolet' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleOrange' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Orange'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.examplePrev' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Prev'\" [direction]=\"'previous'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleNext' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleDark' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Dark'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CASPER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.casper.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #casperCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-casper\n [text]=\"'Casper'\"\n [colorButton]=\"colorViolet\"\n [isDisabled]=\"false\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.casper.usage' | transloco\"\n [content]=\"casperCode\"\n [color]=\"colorDark\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.casper.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.casper.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>isDisabled</strong>\n <span>{{ 'buttons.casper.inputIsDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleWhite' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleViolet' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleOrange' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleGray' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleDark' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 COLOR PALETTE TIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p><strong>{{ 'buttons.classicTip.title' | transloco }}</strong> {{ 'buttons.classicTip.text' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n\n } @else {\n <app-button-neobrutal-block />\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--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)}.buttons-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.btn-section{margin-bottom:16px}.btn-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.btn-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.btn-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:200px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:14px;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em}.example-card duck-dev-button-glide-over,.example-card duck-dev-button-blur-lift{width:100%;max-width:280px}@media(max-width:768px){.buttons-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.btn-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonBlurLift, selector: "duck-dev-button-blur-lift", inputs: ["textButton", "colorButton", "padding", "hoverText"] }, { kind: "component", type: ButtonGlideOver, selector: "duck-dev-button-glide-over", inputs: ["textButton", "colorButton", "padding"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: ButtonNeobrutalBlock, selector: "app-button-neobrutal-block" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
3838
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ButtonBlock, isStandalone: true, selector: "app-button-block", ngImport: i0, template: "<div class=\"buttons-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'5 colors'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'buttons.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 GLIDE OVER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.glideOver.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #glideOverCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-glide-over\n textButton=\"Click me\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.glideOver.usage' | transloco\"\n [content]=\"glideOverCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'buttons.glideOver.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.glideOver.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.glideOver.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleWhite' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Click me\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Violet\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Orange\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleGray' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Gray\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleDark' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Dark\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 BLUR LIFT \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.blurLift.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #blurLiftCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-blur-lift\n textButton=\"Hover me\"\n [hoverText]=\"'Hello!'\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.blurLift.usage' | transloco\"\n [content]=\"blurLiftCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'buttons.blurLift.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>hoverText</strong>\n <span>{{ 'buttons.blurLift.inputHoverText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.blurLift.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.blurLift.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleWhiteHover' | transloco\n }}</span>\n <duck-dev-button-blur-lift textButton=\"Hover me\" [hoverText]=\"'Hello!'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Click\"\n [hoverText]=\"'Action!'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Hover\"\n [hoverText]=\"'Orange!'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleGray' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Gray\"\n [hoverText]=\"'Hover'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleDark' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Dark\"\n [hoverText]=\"'Magic!'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.flip.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-flip\n [text]=\"'Next'\"\n [colorButton]=\"colorViolet\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.flip.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.flip.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.flip.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>direction</strong>\n <span>{{ 'buttons.flip.inputDirection' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>disabled</strong>\n <span>{{ 'buttons.flip.inputDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleWhite' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.flip.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-flip [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.flip.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-flip [text]=\"'Orange'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.examplePrev' | transloco }}</span>\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n [direction]=\"'previous'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleNext' | transloco }}</span>\n <duck-dev-button-flip\n [text]=\"'Next'\"\n [direction]=\"'next'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleDark' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Dark'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CASPER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.casper.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #casperCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-casper\n [text]=\"'Casper'\"\n [colorButton]=\"colorViolet\"\n [isDisabled]=\"false\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.casper.usage' | transloco\"\n [content]=\"casperCode\"\n [color]=\"colorDark\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.casper.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.casper.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>isDisabled</strong>\n <span>{{ 'buttons.casper.inputIsDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleWhite' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleGray' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleDark' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 COLOR PALETTE TIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'buttons.classicTip.title' | transloco }}</strong>\n {{ 'buttons.classicTip.text' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </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);--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)}.buttons-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.btn-section{margin-bottom:16px}.btn-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.btn-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.btn-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:200px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:14px;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em}.example-card duck-dev-button-glide-over,.example-card duck-dev-button-blur-lift{width:100%;max-width:280px}@media(max-width:768px){.buttons-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.btn-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonBlurLift, selector: "duck-dev-button-blur-lift", inputs: ["textButton", "colorButton", "padding", "hoverText"] }, { kind: "component", type: ButtonGlideOver, selector: "duck-dev-button-glide-over", inputs: ["textButton", "colorButton", "padding"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: ButtonNeobrutalBlock, selector: "app-button-neobrutal-block" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
3734
3839
|
}
|
|
3735
3840
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, decorators: [{
|
|
3736
3841
|
type: Component,
|
|
@@ -3746,7 +3851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3746
3851
|
DuckDevSpeakerBubbleSoft,
|
|
3747
3852
|
ButtonNeobrutalBlock,
|
|
3748
3853
|
DuckDevTab,
|
|
3749
|
-
], template: "<div class=\"buttons-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'5 colors'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'buttons.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 GLIDE OVER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.glideOver.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #glideOverCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-glide-over\n textButton=\"Click me\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.glideOver.usage' | transloco\"\n [content]=\"glideOverCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'buttons.glideOver.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.glideOver.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.glideOver.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Click me\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Violet\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Orange\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Gray\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</span>\n <duck-dev-button-glide-over textButton=\"Dark\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 BLUR LIFT \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.blurLift.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #blurLiftCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-blur-lift\n textButton=\"Hover me\"\n [hoverText]=\"'Hello!'\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.blurLift.usage' | transloco\"\n [content]=\"blurLiftCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'buttons.blurLift.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>hoverText</strong>\n <span>{{ 'buttons.blurLift.inputHoverText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.blurLift.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.blurLift.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Hover me\" [hoverText]=\"'Hello!'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Click\" [hoverText]=\"'Action!'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Hover\" [hoverText]=\"'Orange!'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Gray\" [hoverText]=\"'Hover'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</span>\n <duck-dev-button-blur-lift textButton=\"Dark\" [hoverText]=\"'Magic!'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.flip.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-flip\n [text]=\"'Next'\"\n [colorButton]=\"colorViolet\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.flip.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.flip.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.flip.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>direction</strong>\n <span>{{ 'buttons.flip.inputDirection' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>disabled</strong>\n <span>{{ 'buttons.flip.inputDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleWhite' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleViolet' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleOrange' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Orange'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.examplePrev' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Prev'\" [direction]=\"'previous'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleNext' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleDark' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Dark'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CASPER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.casper.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #casperCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-casper\n [text]=\"'Casper'\"\n [colorButton]=\"colorViolet\"\n [isDisabled]=\"false\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.casper.usage' | transloco\"\n [content]=\"casperCode\"\n [color]=\"colorDark\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.casper.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.casper.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>isDisabled</strong>\n <span>{{ 'buttons.casper.inputIsDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleWhite' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleViolet' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleOrange' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleGray' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.casper.exampleDark' | transloco }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 COLOR PALETTE TIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p><strong>{{ 'buttons.classicTip.title' | transloco }}</strong> {{ 'buttons.classicTip.text' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n\n } @else {\n <app-button-neobrutal-block />\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--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)}.buttons-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.btn-section{margin-bottom:16px}.btn-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.btn-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.btn-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:200px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:14px;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em}.example-card duck-dev-button-glide-over,.example-card duck-dev-button-blur-lift{width:100%;max-width:280px}@media(max-width:768px){.buttons-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.btn-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"] }]
|
|
3854
|
+
], template: "<div class=\"buttons-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'5 colors'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'buttons.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 GLIDE OVER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.glideOver.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #glideOverCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-glide-over\n textButton=\"Click me\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.glideOver.usage' | transloco\"\n [content]=\"glideOverCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'buttons.glideOver.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.glideOver.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.glideOver.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.glideOver.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleWhite' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Click me\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Violet\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Orange\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleGray' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Gray\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.glideOver.exampleDark' | transloco\n }}</span>\n <duck-dev-button-glide-over textButton=\"Dark\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 BLUR LIFT \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.blurLift.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #blurLiftCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-blur-lift\n textButton=\"Hover me\"\n [hoverText]=\"'Hello!'\"\n [colorButton]=\"colorViolet\"\n [padding]=\"'10px 24px'\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.blurLift.usage' | transloco\"\n [content]=\"blurLiftCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>textButton</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'buttons.blurLift.inputTextButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>hoverText</strong>\n <span>{{ 'buttons.blurLift.inputHoverText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.blurLift.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>padding</strong>\n <span>{{ 'buttons.blurLift.inputPadding' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.blurLift.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleWhiteHover' | transloco\n }}</span>\n <duck-dev-button-blur-lift textButton=\"Hover me\" [hoverText]=\"'Hello!'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Click\"\n [hoverText]=\"'Action!'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Hover\"\n [hoverText]=\"'Orange!'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleGray' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Gray\"\n [hoverText]=\"'Hover'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.blurLift.exampleDark' | transloco\n }}</span>\n <duck-dev-button-blur-lift\n textButton=\"Dark\"\n [hoverText]=\"'Magic!'\"\n [colorButton]=\"colorDark\"\n />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.flip.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-flip\n [text]=\"'Next'\"\n [colorButton]=\"colorViolet\"\n [direction]=\"'next'\"\n [arrowIndex]=\"0\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.flip.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.flip.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.flip.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>direction</strong>\n <span>{{ 'buttons.flip.inputDirection' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>disabled</strong>\n <span>{{ 'buttons.flip.inputDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.flip.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleWhite' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Click me'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.flip.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-flip [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.flip.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-flip [text]=\"'Orange'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.examplePrev' | transloco }}</span>\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n [direction]=\"'previous'\"\n [colorButton]=\"colorGray\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleNext' | transloco }}</span>\n <duck-dev-button-flip\n [text]=\"'Next'\"\n [direction]=\"'next'\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{ 'buttons.flip.exampleDark' | transloco }}</span>\n <duck-dev-button-flip [text]=\"'Dark'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CASPER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-card-section>\n <div class=\"btn-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n <p class=\"btn-section__desc\">{{ 'buttons.casper.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #casperCode>\n <pre class=\"accordion-code\"><code><duck-dev-button-casper\n [text]=\"'Casper'\"\n [colorButton]=\"colorViolet\"\n [isDisabled]=\"false\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'buttons.casper.usage' | transloco\"\n [content]=\"casperCode\"\n [color]=\"colorDark\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>text</strong>\n <span>{{ 'buttons.casper.inputText' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>colorButton</strong>\n <span>{{ 'buttons.casper.inputColorButton' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>isDisabled</strong>\n <span>{{ 'buttons.casper.inputIsDisabled' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'buttons.casper.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleWhite' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleViolet' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleOrange' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n </div>\n </div>\n <div class=\"examples-row\">\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleGray' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n </div>\n <div class=\"example-card\">\n <span class=\"example-card__label\">{{\n 'buttons.casper.exampleDark' | transloco\n }}</span>\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 COLOR PALETTE TIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"btn-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'buttons.classicTip.title' | transloco }}</strong>\n {{ 'buttons.classicTip.text' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </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);--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)}.buttons-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.btn-section{margin-bottom:16px}.btn-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.btn-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.btn-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:200px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:14px;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em}.example-card duck-dev-button-glide-over,.example-card duck-dev-button-blur-lift{width:100%;max-width:280px}@media(max-width:768px){.buttons-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.btn-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"] }]
|
|
3750
3855
|
}] });
|
|
3751
3856
|
|
|
3752
3857
|
class LoaderBlock {
|
|
@@ -3760,7 +3865,7 @@ class LoaderBlock {
|
|
|
3760
3865
|
this.activeStyleTab.set(tab);
|
|
3761
3866
|
}
|
|
3762
3867
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3763
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: LoaderBlock, isStandalone: true, selector: "app-loader-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-classic /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-loading-bubble /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code><lib-loader-three-dots /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-neobrutal-stamp />\n<duck-dev-loader-neobrutal-bars />\n<duck-dev-loader-neobrutal-marquee /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--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 .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-neo-ink);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" }] });
|
|
3868
|
+
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 <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-classic /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-loading-bubble /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code><lib-loader-three-dots /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-neobrutal-stamp />\n<duck-dev-loader-neobrutal-bars />\n<duck-dev-loader-neobrutal-marquee /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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 .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-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: LoaderClassic, selector: "duck-dev-loader-classic" }, { kind: "component", type: LoaderLoadingBubble, selector: "duck-dev-loader-loading-bubble" }, { kind: "component", type: LoaderThreeDots, selector: "duck-dev-loader-three-dots" }, { kind: "component", type: LoaderNeobrutalStamp, selector: "duck-dev-loader-neobrutal-stamp" }, { kind: "component", type: LoaderNeobrutalBars, selector: "duck-dev-loader-neobrutal-bars" }, { kind: "component", type: LoaderNeobrutalMarquee, selector: "duck-dev-loader-neobrutal-marquee" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
3764
3869
|
}
|
|
3765
3870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, decorators: [{
|
|
3766
3871
|
type: Component,
|
|
@@ -3773,7 +3878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3773
3878
|
LoaderNeobrutalMarquee,
|
|
3774
3879
|
TranslocoPipe,
|
|
3775
3880
|
DuckDevTab,
|
|
3776
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'loaders.title' | transloco }}</h1>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n\n <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-classic /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-loading-bubble /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code><lib-loader-three-dots /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-neobrutal-stamp />\n<duck-dev-loader-neobrutal-bars />\n<duck-dev-loader-neobrutal-marquee /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--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 .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-neo-ink);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"] }]
|
|
3881
|
+
], 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 <!-- Loader Classic -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.classic.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-classic /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n <duck-dev-loader-classic />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Text Bubble -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.textBubble.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-loading-bubble /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n <duck-dev-loader-loading-bubble />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Loader Three Dots -->\n <section class=\"component-section\">\n <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.threeDots.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n <pre><code><lib-loader-three-dots /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <duck-dev-loader-three-dots />\n </div>\n </div>\n </div>\n </section>\n } @else {\n <section class=\"component-section component-section-neobrutal\">\n <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'loaders.neobrutal.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n <pre><code><duck-dev-loader-neobrutal-stamp />\n<duck-dev-loader-neobrutal-bars />\n<duck-dev-loader-neobrutal-marquee /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n <ul>\n <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n <duck-dev-loader-neobrutal-stamp />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n <duck-dev-loader-neobrutal-bars />\n </div>\n <div class=\"example-item example-item-neobrutal\">\n <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n <duck-dev-loader-neobrutal-marquee />\n </div>\n </div>\n </div>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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 .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-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
3777
3882
|
}] });
|
|
3778
3883
|
|
|
3779
3884
|
class DuckDevCardMinimal {
|
|
@@ -3893,7 +3998,7 @@ class TabsBlock {
|
|
|
3893
3998
|
this.activeVerticalTab.set(tab);
|
|
3894
3999
|
}
|
|
3895
4000
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3896
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"tabs-page\">\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeStyleTab().id === 'classic') {\n\n <!-- Description -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"feature-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorGray\">\n <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n\n <!-- API -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>tabs</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>tabChange</strong>\n <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"sub-title\">DuckDevTabItem</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>id</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>label</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>content</strong>\n <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Code -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n </div>\n\n <ng-template #tabsUsageTemplate>\n <pre class=\"accordion-code\"><code><duck-dev-tab\n [tabs]=\"tabs\"\n (tabChange)=\"onTabChange($event)\"\n>\n @if (activeTab().id === 'first') {{ '{' }}\n <p>First tab content</p>\n {{ '}' }}\n @if (activeTab().id === 'second') {{ '{' }}\n <p>Second tab content</p>\n {{ '}' }}\n</duck-dev-tab></code></pre>\n </ng-template>\n\n <ng-template #tabsUsageComponent>\n <pre class=\"accordion-code\"><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '@angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '@jsverse/transloco';\n\n@Component({{ '{' }}\n imports: [DuckDevTab],\n // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n private readonly t = inject(TranslocoService);\n\n tabs: DuckDevTabItem[] = [\n {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n ];\n\n activeTab = signal<DuckDevTabItem>(this.tabs[0]);\n\n onTabChange(tab: DuckDevTabItem) {{ '{' }}\n this.activeTab.set(tab);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n [content]=\"tabsUsageTemplate\"\n [color]=\"colorOrange\"\n />\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n [content]=\"tabsUsageComponent\"\n [color]=\"colorViolet\"\n />\n </div>\n </dd-card-section>\n </section>\n\n <!-- Live demo -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n </div>\n\n <div class=\"live-demo\">\n <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n @if (activeDemoTab().id === 'overview') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'features') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'api') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n </div>\n }\n </duck-dev-tab>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Tip -->\n <section class=\"tab-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p><strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong> {{ 'tabsComponent.classicTip.text' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n\n } @else {\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <div class=\"neo-demo-tabs\">\n <div class=\"neo-demo-tabs__header\">\n @for (tab of neoHorizontalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-tab-button\"\n [class.active]=\"activeHorizontalTab().id === tab.id\"\n (click)=\"onHorizontalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-tabs__content\">\n @if (activeHorizontalTab().id === 'rush') {\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerRush' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n }\n @if (activeHorizontalTab().id === 'drop') {\n <article class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerDrop' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n }\n @if (activeHorizontalTab().id === 'review') {\n <article class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerReview' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <div class=\"neo-demo-vertical\">\n <div class=\"neo-demo-vertical__sidebar\">\n @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-vertical-button\"\n [class.active]=\"activeVerticalTab().id === tab.id\"\n (click)=\"onVerticalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-vertical__content\">\n @if (activeVerticalTab().id === 'pulse') {\n <article class=\"neo-story\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyPulseChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'stack') {\n <article class=\"neo-story neo-story-alt\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyStackChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'blast') {\n <article class=\"neo-story neo-story-dark\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyBlastChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\n </div>\n </dd-card-section>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--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)}.tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);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-neo-ink);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-neo-ink);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-neo-ink);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-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
4001
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"tabs-page\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeStyleTab().id === 'classic') {\n <!-- Description -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"feature-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorGray\">\n <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n\n <!-- API -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>tabs</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>tabChange</strong>\n <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"sub-title\">DuckDevTabItem</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>id</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>label</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>content</strong>\n <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Code -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n </div>\n\n <ng-template #tabsUsageTemplate>\n <pre class=\"accordion-code\"><code><duck-dev-tab\n [tabs]=\"tabs\"\n (tabChange)=\"onTabChange($event)\"\n>\n @if (activeTab().id === 'first') {{ '{' }}\n <p>First tab content</p>\n {{ '}' }}\n @if (activeTab().id === 'second') {{ '{' }}\n <p>Second tab content</p>\n {{ '}' }}\n</duck-dev-tab></code></pre>\n </ng-template>\n\n <ng-template #tabsUsageComponent>\n <pre\n class=\"accordion-code\"\n ><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '@angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '@jsverse/transloco';\n\n@Component({{ '{' }}\n imports: [DuckDevTab],\n // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n private readonly t = inject(TranslocoService);\n\n tabs: DuckDevTabItem[] = [\n {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n ];\n\n activeTab = signal<DuckDevTabItem>(this.tabs[0]);\n\n onTabChange(tab: DuckDevTabItem) {{ '{' }}\n this.activeTab.set(tab);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n [content]=\"tabsUsageTemplate\"\n [color]=\"colorOrange\"\n />\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n [content]=\"tabsUsageComponent\"\n [color]=\"colorViolet\"\n />\n </div>\n </dd-card-section>\n </section>\n\n <!-- Live demo -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n </div>\n\n <div class=\"live-demo\">\n <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n @if (activeDemoTab().id === 'overview') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'features') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'api') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n </div>\n }\n </duck-dev-tab>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Tip -->\n <section class=\"tab-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong>\n {{ 'tabsComponent.classicTip.text' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n } @else {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <duck-dev-tab-neobrutal\n [tabs]=\"neoHorizontalTabs\"\n (tabChange)=\"onHorizontalTabChange($event)\"\n >\n <ng-template ddTabPanel>\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerRush' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerDrop' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerReview' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n </ng-template>\n </duck-dev-tab-neobrutal>\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <div class=\"neo-demo-vertical\">\n <div class=\"neo-demo-vertical__sidebar\">\n @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-vertical-button\"\n [class.active]=\"activeVerticalTab().id === tab.id\"\n (click)=\"onVerticalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{\n i + 1 < 10 ? '0' + (i + 1) : i + 1\n }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-vertical__content\">\n @if (activeVerticalTab().id === 'pulse') {\n <article class=\"neo-story\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyPulseChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'stack') {\n <article class=\"neo-story neo-story-alt\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyStackChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'blast') {\n <article class=\"neo-story neo-story-dark\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyBlastChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\n </div>\n </dd-card-section>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);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-neo-ink);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-neo-ink);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-neo-ink);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-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevTabNeobrutal, selector: "duck-dev-tab-neobrutal", inputs: ["tabs", "color"], outputs: ["tabChange"] }, { kind: "directive", type: DdTabPanel, selector: "[ddTabPanel]" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
3897
4002
|
}
|
|
3898
4003
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, decorators: [{
|
|
3899
4004
|
type: Component,
|
|
@@ -3902,10 +4007,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3902
4007
|
DuckDevCardSection,
|
|
3903
4008
|
DuckDevCardMinimal,
|
|
3904
4009
|
DuckDevTab,
|
|
4010
|
+
DuckDevTabNeobrutal,
|
|
4011
|
+
DdTabPanel,
|
|
3905
4012
|
Badge,
|
|
3906
4013
|
DuckDevAccordionComponent,
|
|
3907
4014
|
DuckDevSpeakerBubbleSoft,
|
|
3908
|
-
], template: "<div class=\"tabs-page\">\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeStyleTab().id === 'classic') {\n\n <!-- Description -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"feature-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorGray\">\n <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n\n <!-- API -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>tabs</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>tabChange</strong>\n <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"sub-title\">DuckDevTabItem</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>id</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>label</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>content</strong>\n <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Code -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n </div>\n\n <ng-template #tabsUsageTemplate>\n <pre class=\"accordion-code\"><code><duck-dev-tab\n [tabs]=\"tabs\"\n (tabChange)=\"onTabChange($event)\"\n>\n @if (activeTab().id === 'first') {{ '{' }}\n <p>First tab content</p>\n {{ '}' }}\n @if (activeTab().id === 'second') {{ '{' }}\n <p>Second tab content</p>\n {{ '}' }}\n</duck-dev-tab></code></pre>\n </ng-template>\n\n <ng-template #tabsUsageComponent>\n <pre class=\"accordion-code\"><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '@angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '@jsverse/transloco';\n\n@Component({{ '{' }}\n imports: [DuckDevTab],\n // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n private readonly t = inject(TranslocoService);\n\n tabs: DuckDevTabItem[] = [\n {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n ];\n\n activeTab = signal<DuckDevTabItem>(this.tabs[0]);\n\n onTabChange(tab: DuckDevTabItem) {{ '{' }}\n this.activeTab.set(tab);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n [content]=\"tabsUsageTemplate\"\n [color]=\"colorOrange\"\n />\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n [content]=\"tabsUsageComponent\"\n [color]=\"colorViolet\"\n />\n </div>\n </dd-card-section>\n </section>\n\n <!-- Live demo -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n </div>\n\n <div class=\"live-demo\">\n <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n @if (activeDemoTab().id === 'overview') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'features') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'api') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n </div>\n }\n </duck-dev-tab>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Tip -->\n <section class=\"tab-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p><strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong> {{ 'tabsComponent.classicTip.text' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n\n } @else {\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <div class=\"neo-demo-tabs\">\n <div class=\"neo-demo-tabs__header\">\n @for (tab of neoHorizontalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-tab-button\"\n [class.active]=\"activeHorizontalTab().id === tab.id\"\n (click)=\"onHorizontalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-tabs__content\">\n @if (activeHorizontalTab().id === 'rush') {\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerRush' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n }\n @if (activeHorizontalTab().id === 'drop') {\n <article class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerDrop' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n }\n @if (activeHorizontalTab().id === 'review') {\n <article class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerReview' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <div class=\"neo-demo-vertical\">\n <div class=\"neo-demo-vertical__sidebar\">\n @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-vertical-button\"\n [class.active]=\"activeVerticalTab().id === tab.id\"\n (click)=\"onVerticalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-vertical__content\">\n @if (activeVerticalTab().id === 'pulse') {\n <article class=\"neo-story\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyPulseChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'stack') {\n <article class=\"neo-story neo-story-alt\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyStackChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'blast') {\n <article class=\"neo-story neo-story-dark\">\n <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyBlastChip' | transloco }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\n </div>\n </dd-card-section>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--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)}.tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);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-neo-ink);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-neo-ink);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-neo-ink);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-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"] }]
|
|
4015
|
+
], template: "<div class=\"tabs-page\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeStyleTab().id === 'classic') {\n <!-- Description -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"feature-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorGray\">\n <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n\n <!-- API -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>tabs</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>tabChange</strong>\n <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"sub-title\">DuckDevTabItem</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>id</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>label</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>content</strong>\n <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Code -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n </div>\n\n <ng-template #tabsUsageTemplate>\n <pre class=\"accordion-code\"><code><duck-dev-tab\n [tabs]=\"tabs\"\n (tabChange)=\"onTabChange($event)\"\n>\n @if (activeTab().id === 'first') {{ '{' }}\n <p>First tab content</p>\n {{ '}' }}\n @if (activeTab().id === 'second') {{ '{' }}\n <p>Second tab content</p>\n {{ '}' }}\n</duck-dev-tab></code></pre>\n </ng-template>\n\n <ng-template #tabsUsageComponent>\n <pre\n class=\"accordion-code\"\n ><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '@angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '@jsverse/transloco';\n\n@Component({{ '{' }}\n imports: [DuckDevTab],\n // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n private readonly t = inject(TranslocoService);\n\n tabs: DuckDevTabItem[] = [\n {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n ];\n\n activeTab = signal<DuckDevTabItem>(this.tabs[0]);\n\n onTabChange(tab: DuckDevTabItem) {{ '{' }}\n this.activeTab.set(tab);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n [content]=\"tabsUsageTemplate\"\n [color]=\"colorOrange\"\n />\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n [content]=\"tabsUsageComponent\"\n [color]=\"colorViolet\"\n />\n </div>\n </dd-card-section>\n </section>\n\n <!-- Live demo -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n </div>\n\n <div class=\"live-demo\">\n <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n @if (activeDemoTab().id === 'overview') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'features') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'api') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n </div>\n }\n </duck-dev-tab>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Tip -->\n <section class=\"tab-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong>\n {{ 'tabsComponent.classicTip.text' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n } @else {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <duck-dev-tab-neobrutal\n [tabs]=\"neoHorizontalTabs\"\n (tabChange)=\"onHorizontalTabChange($event)\"\n >\n <ng-template ddTabPanel>\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerRush' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerDrop' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerReview' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n </ng-template>\n </duck-dev-tab-neobrutal>\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <div class=\"neo-demo-vertical\">\n <div class=\"neo-demo-vertical__sidebar\">\n @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-vertical-button\"\n [class.active]=\"activeVerticalTab().id === tab.id\"\n (click)=\"onVerticalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{\n i + 1 < 10 ? '0' + (i + 1) : i + 1\n }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-vertical__content\">\n @if (activeVerticalTab().id === 'pulse') {\n <article class=\"neo-story\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyPulseChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'stack') {\n <article class=\"neo-story neo-story-alt\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyStackChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'blast') {\n <article class=\"neo-story neo-story-dark\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyBlastChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\n </div>\n </dd-card-section>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);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-neo-ink);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-neo-ink);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-neo-ink);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-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"] }]
|
|
3909
4016
|
}] });
|
|
3910
4017
|
|
|
3911
4018
|
class DuckDevInput {
|
|
@@ -3918,11 +4025,11 @@ class DuckDevInput {
|
|
|
3918
4025
|
options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
3919
4026
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
3920
4027
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3921
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInput, isStandalone: true, selector: "duck-dev-input", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"form-label\">\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input
|
|
4028
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInput, isStandalone: true, selector: "duck-dev-input", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"form-label\">\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input class=\"inp-cbx\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"cbx\" [for]=\"control\">\n <span>\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"select-wrapper\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_select\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"form-input\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"error-message\">\n {{ erMessage }}\n </div>\n }\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;min-height:132px;resize:none;border-radius:24px}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.select-wrapper{position:relative}.select-wrapper:after{content:\"\";position:absolute;top:50%;right:20px;width:10px;height:10px;border-right:2px solid var(--dd-base-400);border-bottom:2px solid var(--dd-base-400);transform:translateY(-65%) rotate(45deg);pointer-events:none}.form-input_select{appearance:none;padding-right:52px;cursor:pointer}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-inout-field{padding-bottom:24px}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:6px;align-items:flex-start;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px;color:var(--dd-base-500);line-height:1.45}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}@media(max-width:768px){.form-input,.form-input_textarea{border-radius:18px}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
3922
4029
|
}
|
|
3923
4030
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, decorators: [{
|
|
3924
4031
|
type: Component,
|
|
3925
|
-
args: [{ selector: 'duck-dev-input', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"form-label\">\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input
|
|
4032
|
+
args: [{ selector: 'duck-dev-input', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"form-label\">\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input class=\"inp-cbx\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n <label class=\"cbx\" [for]=\"control\">\n <span>\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n ></textarea>\n }\n @case ('select') {\n <div class=\"select-wrapper\">\n <select\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_select\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"form-input\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"error-message\">\n {{ erMessage }}\n </div>\n }\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;min-height:132px;resize:none;border-radius:24px}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.select-wrapper{position:relative}.select-wrapper:after{content:\"\";position:absolute;top:50%;right:20px;width:10px;height:10px;border-right:2px solid var(--dd-base-400);border-bottom:2px solid var(--dd-base-400);transform:translateY(-65%) rotate(45deg);pointer-events:none}.form-input_select{appearance:none;padding-right:52px;cursor:pointer}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-inout-field{padding-bottom:24px}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:6px;align-items:flex-start;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px;color:var(--dd-base-500);line-height:1.45}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}@media(max-width:768px){.form-input,.form-input_textarea{border-radius:18px}}\n"] }]
|
|
3926
4033
|
}], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
|
|
3927
4034
|
|
|
3928
4035
|
class DuckDevInputNeobrutalPoster {
|
|
@@ -3935,11 +4042,11 @@ class DuckDevInputNeobrutalPoster {
|
|
|
3935
4042
|
options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
3936
4043
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
3937
4044
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalPoster, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3938
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalPoster, isStandalone: true, selector: "duck-dev-input-neobrutal-poster", 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<div class=\"neo-poster\">\n <label [for]=\"control\" class=\"neo-poster__label\">{{ label() }}</label>\n\n <div
|
|
4045
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalPoster, isStandalone: true, selector: "duck-dev-input-neobrutal-poster", 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<div class=\"neo-poster\">\n <label [for]=\"control\" class=\"neo-poster__label\">{{ label() }}</label>\n\n <div\n class=\"neo-poster__field\"\n [class.neo-poster__field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n >\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-poster-check\">\n <input\n class=\"neo-poster-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\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]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\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]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\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-poster__input\"\n [class.neo-poster__input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\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-neo-ink);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-neo-ink);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-neo-ink);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-neo-ink);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-neo-ink);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-neo-ink)}}\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"] }] });
|
|
3939
4046
|
}
|
|
3940
4047
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalPoster, decorators: [{
|
|
3941
4048
|
type: Component,
|
|
3942
|
-
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
|
|
4049
|
+
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\n class=\"neo-poster__field\"\n [class.neo-poster__field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n >\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-poster-check\">\n <input\n class=\"neo-poster-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\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]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\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]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\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-poster__input\"\n [class.neo-poster__input_error]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\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-neo-ink);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-neo-ink);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-neo-ink);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-neo-ink);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-neo-ink);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-neo-ink)}}\n"] }]
|
|
3943
4050
|
}], 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 }] }] } });
|
|
3944
4051
|
|
|
3945
4052
|
class DuckDevInputNeobrutalRadio {
|
|
@@ -3950,11 +4057,11 @@ class DuckDevInputNeobrutalRadio {
|
|
|
3950
4057
|
options = input.required({ ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
3951
4058
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
3952
4059
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3953
|
-
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' :
|
|
4060
|
+
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-neo-ink);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-neo-ink);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%,var(--dd-base-0));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"] }] });
|
|
3954
4061
|
}
|
|
3955
4062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalRadio, decorators: [{
|
|
3956
4063
|
type: Component,
|
|
3957
|
-
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' :
|
|
4064
|
+
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-neo-ink);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-neo-ink);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%,var(--dd-base-0));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"] }]
|
|
3958
4065
|
}], 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 }] }] } });
|
|
3959
4066
|
|
|
3960
4067
|
class DuckDevInputNeobrutalSlab {
|
|
@@ -3967,11 +4074,11 @@ class DuckDevInputNeobrutalSlab {
|
|
|
3967
4074
|
options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
3968
4075
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
3969
4076
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3970
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalSlab, isStandalone: true, selector: "duck-dev-input-neobrutal-slab", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n <span>{{ label() }}</span>\n</label>\n\n<div
|
|
4077
|
+
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\n class=\"neo-field neo-field_slab\"\n [class.neo-field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-check\">\n <input\n class=\"neo-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\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]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-input\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-neo-shadow);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-neo-ink);border-bottom:4px solid var(--dd-neo-ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px color-mix(in srgb,var(--dd-base-accent-orange) 70%,var(--dd-neo-shadow))}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
3971
4078
|
}
|
|
3972
4079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, decorators: [{
|
|
3973
4080
|
type: Component,
|
|
3974
|
-
args: [{ selector: 'duck-dev-input-neobrutal-slab', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n <span>{{ label() }}</span>\n</label>\n\n<div
|
|
4081
|
+
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\n class=\"neo-field neo-field_slab\"\n [class.neo-field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-check\">\n <input\n class=\"neo-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\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]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\n >\n @if (placeholder()) {\n <option value=\"\" disabled>{{ placeholder() }}</option>\n }\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n {{ option.label }}\n </option>\n }\n </select>\n </div>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"neo-input\"\n [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-neo-shadow);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-neo-ink);border-bottom:4px solid var(--dd-neo-ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px color-mix(in srgb,var(--dd-base-accent-orange) 70%,var(--dd-neo-shadow))}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"] }]
|
|
3975
4082
|
}], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
|
|
3976
4083
|
|
|
3977
4084
|
class DuckDevInputNeobrutalStrip {
|
|
@@ -3984,11 +4091,11 @@ class DuckDevInputNeobrutalStrip {
|
|
|
3984
4091
|
options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
3985
4092
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
3986
4093
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalStrip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3987
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalStrip, isStandalone: true, selector: "duck-dev-input-neobrutal-strip", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n <span>{{ label() }}</span>\n <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div
|
|
4094
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalStrip, isStandalone: true, selector: "duck-dev-input-neobrutal-strip", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n <span>{{ label() }}</span>\n <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div\n class=\"neo-strip-field\"\n [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-strip-check\">\n <input\n class=\"neo-strip-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\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]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\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]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\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]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-strip-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-neo-shadow)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-neo-ink);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-neo-shadow)}.neo-strip-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-strip-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box{background:var(--dd-base-accent-orange)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box svg{stroke-dashoffset:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
3988
4095
|
}
|
|
3989
4096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalStrip, decorators: [{
|
|
3990
4097
|
type: Component,
|
|
3991
|
-
args: [{ selector: 'duck-dev-input-neobrutal-strip', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n <span>{{ label() }}</span>\n <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div
|
|
4098
|
+
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\n class=\"neo-strip-field\"\n [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"neo-strip-check\">\n <input\n class=\"neo-strip-check__input\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\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]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\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]=\"\n form().get(controlName())?.invalid && form().get(controlName())?.touched\n \"\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]=\"\n formName.get(control)?.invalid && formName.get(control)?.touched\n \"\n [placeholder]=\"inputPlaceholder\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"neo-strip-error\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-neo-shadow)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-neo-ink);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-neo-shadow)}.neo-strip-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-strip-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box{background:var(--dd-base-accent-orange)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box svg{stroke-dashoffset:0}\n"] }]
|
|
3992
4099
|
}], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
|
|
3993
4100
|
|
|
3994
4101
|
class DuckDevInputNeobrutalToggle {
|
|
@@ -4000,11 +4107,11 @@ class DuckDevInputNeobrutalToggle {
|
|
|
4000
4107
|
onLabel = input.required({ ...(ngDevMode ? { debugName: "onLabel" } : {}) });
|
|
4001
4108
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
4002
4109
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4003
|
-
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' :
|
|
4110
|
+
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-neo-ink);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-neo-ink);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-neo-ink);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"] }] });
|
|
4004
4111
|
}
|
|
4005
4112
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalToggle, decorators: [{
|
|
4006
4113
|
type: Component,
|
|
4007
|
-
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' :
|
|
4114
|
+
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-neo-ink);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-neo-ink);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-neo-ink);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"] }]
|
|
4008
4115
|
}], 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 }] }] } });
|
|
4009
4116
|
|
|
4010
4117
|
class DuckDevNotificationService {
|
|
@@ -4821,7 +4928,7 @@ getError(controlName: string): string {
|
|
|
4821
4928
|
return this.t.translate('inputComponent.demo.errors.invalid');
|
|
4822
4929
|
}
|
|
4823
4930
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4824
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: InputBlock, isStandalone: true, selector: "app-input-block", ngImport: i0, template: "<div class=\"demo-container\">\n <section class=\"hero\">\n <span class=\"eyebrow\">{{ 'inputComponent.eyebrow' | transloco }}</span>\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n <p class=\"hero-description\">\n {{ 'inputComponent.description' | transloco }}\n </p>\n\n <div class=\"hero-points\">\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointType' | transloco }}</span>\n <span class=\"hero-point-value\">{{ 'inputComponent.heroPointTypeValue' | transloco }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{\n 'inputComponent.heroPointIntegration' | transloco\n }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointIntegrationValue' | transloco\n }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointUseCase' | transloco }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointUseCaseValue' | transloco\n }}</span>\n </div>\n </div>\n </section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <div class=\"overview-grid\">\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.overviewTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.overviewDescription' | transloco }}\n </p>\n </dd-card-section>\n\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.featuresTitle' | transloco }}</h2>\n <ul class=\"feature-list\">\n <li>{{ 'inputComponent.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.feature5' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <div class=\"examples-grid\">\n <dd-card-section class=\"example-card\">\n <h2>{{ 'inputComponent.examplesTitle' | transloco }}</h2>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleText' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textExampleForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName', textExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleSelect' | transloco }}</h3>\n <duck-dev-input\n [form]=\"selectExampleForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role', selectExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleSelectCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleTextarea' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textareaExampleForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextareaCaption' | transloco }}</p>\n </div>\n </dd-card-section>\n\n <dd-card-section class=\"api-card\">\n <h2>{{ 'inputComponent.apiTitle' | transloco }}</h2>\n <ul class=\"api-list\">\n <li><strong>form</strong> - {{ 'inputComponent.apiForm' | transloco }}</li>\n <li><strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}</li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li><strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}</li>\n <li><strong>type</strong> - {{ 'inputComponent.apiType' | transloco }}</li>\n <li>\n <strong>formInputType</strong> - {{ 'inputComponent.apiFormInputType' | transloco }}\n </li>\n <li><strong>options</strong> - {{ 'inputComponent.apiOptions' | transloco }}</li>\n <li><strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <dd-card-section class=\"showcase-card\">\n <div class=\"showcase-head\">\n <div>\n <h2>{{ 'inputComponent.showcaseTitle' | transloco }}</h2>\n <p class=\"showcase-caption\">\n {{ 'inputComponent.showcaseDescription' | transloco }}\n </p>\n </div>\n <div class=\"showcase-value\">\n {{ 'inputComponent.showcaseValue' | transloco }}:\n {{ demoForm.value | json }}\n </div>\n </div>\n\n <form class=\"demo-form\" [formGroup]=\"demoForm\">\n <div class=\"showcase-grid\">\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseSelect' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item_wide\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseTextarea' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseCheckbox' | transloco }}</p>\n <div class=\"showcase-inline\">\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input>\n </div>\n </div>\n </div>\n </form>\n </dd-card-section>\n } @else {\n <dd-card-section class=\"showcase-card showcase-card--neobrutal\">\n <div class=\"showcase-head\">\n <div>\n <h2>Neobrutalism Inputs</h2>\n <p class=\"showcase-caption\">\n Extra brutal variants for promo forms, loud dashboards and expressive settings screens.\n </p>\n </div>\n </div>\n\n <div class=\"showcase-grid showcase-grid--neobrutal\">\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Text</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Select</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Poster / Textarea</p>\n <duck-dev-input-neobrutal-poster\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Email</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Checkbox</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input-neobrutal-slab>\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Toggle / Boolean</p>\n <duck-dev-input-neobrutal-toggle\n [form]=\"demoForm\"\n controlName=\"instantSync\"\n label=\"Instant sync\"\n description=\"Push UI changes to the preview canvas the moment a control changes.\"\n offLabel=\"Paused\"\n onLabel=\"Live\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Radio / Mode</p>\n <duck-dev-input-neobrutal-radio\n [form]=\"demoForm\"\n controlName=\"launchMode\"\n label=\"Workspace mode\"\n description=\"Pick the brutal layout state the team sees first.\"\n [options]=\"workspaceModeOptions\"\n [errorMessage]=\"getError('launchMode')\"\n />\n </div>\n </div>\n </dd-card-section>\n }\n\n <div class=\"code-grid\">\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeTemplate' | transloco }}</h3>\n <pre><code>{{ exampleMarkup }}</code></pre>\n </dd-card-section>\n\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeLogic' | transloco }}</h3>\n <pre><code>{{ exampleLogic }}</code></pre>\n </dd-card-section>\n </div>\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--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 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-neo-ink);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-neo-ink);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" }] });
|
|
4931
|
+
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>\n <strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}\n </li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li>\n <strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}\n </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>\n <strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}\n </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\n screens.\n </p>\n </div>\n </div>\n\n <div class=\"showcase-grid showcase-grid--neobrutal\">\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Text</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Select</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Poster / Textarea</p>\n <duck-dev-input-neobrutal-poster\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Email</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Checkbox</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input-neobrutal-slab>\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Toggle / Boolean</p>\n <duck-dev-input-neobrutal-toggle\n [form]=\"demoForm\"\n controlName=\"instantSync\"\n label=\"Instant sync\"\n description=\"Push UI changes to the preview canvas the moment a control changes.\"\n offLabel=\"Paused\"\n onLabel=\"Live\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Radio / Mode</p>\n <duck-dev-input-neobrutal-radio\n [form]=\"demoForm\"\n controlName=\"launchMode\"\n label=\"Workspace mode\"\n description=\"Pick the brutal layout state the team sees first.\"\n [options]=\"workspaceModeOptions\"\n [errorMessage]=\"getError('launchMode')\"\n />\n </div>\n </div>\n </dd-card-section>\n }\n\n <div class=\"code-grid\">\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeTemplate' | transloco }}</h3>\n <pre><code>{{ exampleMarkup }}</code></pre>\n </dd-card-section>\n\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeLogic' | transloco }}</h3>\n <pre><code>{{ exampleLogic }}</code></pre>\n </dd-card-section>\n </div>\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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 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-neo-ink);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-neo-ink);border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 16%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-yellow)}.showcase-item_wide{grid-column:1/-1}.showcase-label{margin-bottom:14px;font-size:14px;font-weight:600;color:var(--dd-base-400)}.showcase-inline{display:flex;align-items:center;gap:14px}.showcase-value{margin-top:12px;font-size:14px;color:var(--dd-base-accent-blue)}.code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-grid--neobrutal{align-items:start}.code-card pre{margin:0;padding:20px;overflow-x:auto;border-radius:22px;background:#141821}.code-card code{color:#f6f7fb;font-size:13px;line-height:1.7}@media(max-width:900px){.hero-points,.overview-grid,.examples-grid,.showcase-grid,.code-grid{grid-template-columns:1fr}}@media(max-width:768px){.demo-container{padding:24px 14px 56px}.demo-container h1{font-size:30px}.hero,.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:20px;border-radius:22px}.showcase-head,.showcase-inline{flex-direction:column;align-items:stretch}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalPoster, selector: "duck-dev-input-neobrutal-poster", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalRadio, selector: "duck-dev-input-neobrutal-radio", inputs: ["form", "controlName", "label", "description", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalSlab, selector: "duck-dev-input-neobrutal-slab", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalStrip, selector: "duck-dev-input-neobrutal-strip", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalToggle, selector: "duck-dev-input-neobrutal-toggle", inputs: ["form", "controlName", "label", "description", "offLabel", "onLabel", "errorMessage"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: JsonPipe, name: "json" }] });
|
|
4825
4932
|
}
|
|
4826
4933
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, decorators: [{
|
|
4827
4934
|
type: Component,
|
|
@@ -4837,7 +4944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
4837
4944
|
ReactiveFormsModule,
|
|
4838
4945
|
JsonPipe,
|
|
4839
4946
|
DuckDevTab,
|
|
4840
|
-
], template: "<div class=\"demo-container\">\n <section class=\"hero\">\n <span class=\"eyebrow\">{{ 'inputComponent.eyebrow' | transloco }}</span>\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n <p class=\"hero-description\">\n {{ 'inputComponent.description' | transloco }}\n </p>\n\n <div class=\"hero-points\">\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointType' | transloco }}</span>\n <span class=\"hero-point-value\">{{ 'inputComponent.heroPointTypeValue' | transloco }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{\n 'inputComponent.heroPointIntegration' | transloco\n }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointIntegrationValue' | transloco\n }}</span>\n </div>\n <div class=\"hero-point\">\n <span class=\"hero-point-label\">{{ 'inputComponent.heroPointUseCase' | transloco }}</span>\n <span class=\"hero-point-value\">{{\n 'inputComponent.heroPointUseCaseValue' | transloco\n }}</span>\n </div>\n </div>\n </section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <div class=\"overview-grid\">\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.overviewTitle' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.overviewDescription' | transloco }}\n </p>\n </dd-card-section>\n\n <dd-card-section class=\"content-card\">\n <h2>{{ 'inputComponent.featuresTitle' | transloco }}</h2>\n <ul class=\"feature-list\">\n <li>{{ 'inputComponent.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.feature5' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <div class=\"examples-grid\">\n <dd-card-section class=\"example-card\">\n <h2>{{ 'inputComponent.examplesTitle' | transloco }}</h2>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleText' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textExampleForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName', textExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleSelect' | transloco }}</h3>\n <duck-dev-input\n [form]=\"selectExampleForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role', selectExampleForm)\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleSelectCaption' | transloco }}</p>\n </div>\n\n <div class=\"example-preview\">\n <h3>{{ 'inputComponent.exampleTextarea' | transloco }}</h3>\n <duck-dev-input\n [form]=\"textareaExampleForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextareaCaption' | transloco }}</p>\n </div>\n </dd-card-section>\n\n <dd-card-section class=\"api-card\">\n <h2>{{ 'inputComponent.apiTitle' | transloco }}</h2>\n <ul class=\"api-list\">\n <li><strong>form</strong> - {{ 'inputComponent.apiForm' | transloco }}</li>\n <li><strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}</li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li><strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}</li>\n <li><strong>type</strong> - {{ 'inputComponent.apiType' | transloco }}</li>\n <li>\n <strong>formInputType</strong> - {{ 'inputComponent.apiFormInputType' | transloco }}\n </li>\n <li><strong>options</strong> - {{ 'inputComponent.apiOptions' | transloco }}</li>\n <li><strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}</li>\n </ul>\n </dd-card-section>\n </div>\n\n <dd-card-section class=\"showcase-card\">\n <div class=\"showcase-head\">\n <div>\n <h2>{{ 'inputComponent.showcaseTitle' | transloco }}</h2>\n <p class=\"showcase-caption\">\n {{ 'inputComponent.showcaseDescription' | transloco }}\n </p>\n </div>\n <div class=\"showcase-value\">\n {{ 'inputComponent.showcaseValue' | transloco }}:\n {{ demoForm.value | json }}\n </div>\n </div>\n\n <form class=\"demo-form\" [formGroup]=\"demoForm\">\n <div class=\"showcase-grid\">\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseSelect' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item_wide\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseTextarea' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item\">\n <p class=\"showcase-label\">{{ 'inputComponent.showcaseCheckbox' | transloco }}</p>\n <div class=\"showcase-inline\">\n <duck-dev-input\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input>\n </div>\n </div>\n </div>\n </form>\n </dd-card-section>\n } @else {\n <dd-card-section class=\"showcase-card showcase-card--neobrutal\">\n <div class=\"showcase-head\">\n <div>\n <h2>Neobrutalism Inputs</h2>\n <p class=\"showcase-caption\">\n Extra brutal variants for promo forms, loud dashboards and expressive settings screens.\n </p>\n </div>\n </div>\n\n <div class=\"showcase-grid showcase-grid--neobrutal\">\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Text</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Select</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Poster / Textarea</p>\n <duck-dev-input-neobrutal-poster\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Email</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Checkbox</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input-neobrutal-slab>\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Toggle / Boolean</p>\n <duck-dev-input-neobrutal-toggle\n [form]=\"demoForm\"\n controlName=\"instantSync\"\n label=\"Instant sync\"\n description=\"Push UI changes to the preview canvas the moment a control changes.\"\n offLabel=\"Paused\"\n onLabel=\"Live\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Radio / Mode</p>\n <duck-dev-input-neobrutal-radio\n [form]=\"demoForm\"\n controlName=\"launchMode\"\n label=\"Workspace mode\"\n description=\"Pick the brutal layout state the team sees first.\"\n [options]=\"workspaceModeOptions\"\n [errorMessage]=\"getError('launchMode')\"\n />\n </div>\n </div>\n </dd-card-section>\n }\n\n <div class=\"code-grid\">\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeTemplate' | transloco }}</h3>\n <pre><code>{{ exampleMarkup }}</code></pre>\n </dd-card-section>\n\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeLogic' | transloco }}</h3>\n <pre><code>{{ exampleLogic }}</code></pre>\n </dd-card-section>\n </div>\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--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 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-neo-ink);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-neo-ink);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"] }]
|
|
4947
|
+
], 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>\n <strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}\n </li>\n <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n <li>\n <strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}\n </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>\n <strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}\n </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\n screens.\n </p>\n </div>\n </div>\n\n <div class=\"showcase-grid showcase-grid--neobrutal\">\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Text</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"fullName\"\n [label]=\"'inputComponent.demo.fullName' | transloco\"\n [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n [errorMessage]=\"getError('fullName')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Select</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"role\"\n [label]=\"'inputComponent.demo.role' | transloco\"\n formInputType=\"select\"\n [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n [options]=\"accountTypeOptions\"\n [errorMessage]=\"getError('role')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Poster / Textarea</p>\n <duck-dev-input-neobrutal-poster\n [form]=\"demoForm\"\n controlName=\"bio\"\n [label]=\"'inputComponent.demo.bio' | transloco\"\n formInputType=\"textarea\"\n [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Strip / Email</p>\n <duck-dev-input-neobrutal-strip\n [form]=\"demoForm\"\n controlName=\"email\"\n [label]=\"'inputComponent.demo.email' | transloco\"\n [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n type=\"email\"\n [errorMessage]=\"getError('email')\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Checkbox</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"demoForm\"\n controlName=\"agreement\"\n formInputType=\"checkbox\"\n [errorMessage]=\"getError('agreement')\"\n >\n {{ 'inputComponent.demo.agreement' | transloco }}\n </duck-dev-input-neobrutal-slab>\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Toggle / Boolean</p>\n <duck-dev-input-neobrutal-toggle\n [form]=\"demoForm\"\n controlName=\"instantSync\"\n label=\"Instant sync\"\n description=\"Push UI changes to the preview canvas the moment a control changes.\"\n offLabel=\"Paused\"\n onLabel=\"Live\"\n />\n </div>\n\n <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n <p class=\"showcase-label\">Radio / Mode</p>\n <duck-dev-input-neobrutal-radio\n [form]=\"demoForm\"\n controlName=\"launchMode\"\n label=\"Workspace mode\"\n description=\"Pick the brutal layout state the team sees first.\"\n [options]=\"workspaceModeOptions\"\n [errorMessage]=\"getError('launchMode')\"\n />\n </div>\n </div>\n </dd-card-section>\n }\n\n <div class=\"code-grid\">\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeTemplate' | transloco }}</h3>\n <pre><code>{{ exampleMarkup }}</code></pre>\n </dd-card-section>\n\n <dd-card-section class=\"code-card\">\n <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n <h3>{{ 'inputComponent.codeLogic' | transloco }}</h3>\n <pre><code>{{ exampleLogic }}</code></pre>\n </dd-card-section>\n </div>\n </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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 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-neo-ink);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-neo-ink);border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 16%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-yellow)}.showcase-item_wide{grid-column:1/-1}.showcase-label{margin-bottom:14px;font-size:14px;font-weight:600;color:var(--dd-base-400)}.showcase-inline{display:flex;align-items:center;gap:14px}.showcase-value{margin-top:12px;font-size:14px;color:var(--dd-base-accent-blue)}.code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-grid--neobrutal{align-items:start}.code-card pre{margin:0;padding:20px;overflow-x:auto;border-radius:22px;background:#141821}.code-card code{color:#f6f7fb;font-size:13px;line-height:1.7}@media(max-width:900px){.hero-points,.overview-grid,.examples-grid,.showcase-grid,.code-grid{grid-template-columns:1fr}}@media(max-width:768px){.demo-container{padding:24px 14px 56px}.demo-container h1{font-size:30px}.hero,.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:20px;border-radius:22px}.showcase-head,.showcase-inline{flex-direction:column;align-items:stretch}}\n"] }]
|
|
4841
4948
|
}] });
|
|
4842
4949
|
|
|
4843
4950
|
class DuckDevNotification {
|
|
@@ -4888,11 +4995,11 @@ class DuckDevNotification {
|
|
|
4888
4995
|
this.timer = undefined;
|
|
4889
4996
|
}
|
|
4890
4997
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4891
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevNotification, isStandalone: true, selector: "duck-dev-notification", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isVisible()) {\n <div\n [class]=\"'notification notification--' + type() + ' notification--pos-' + position()\"\n animate.enter=\"notification-enter\"\n animate.leave=\"notification-leave\"\n (animationend)=\"handleAnimationEnd($event)\"\n (click)=\"close()\"\n >\n <div class=\"notification__inner\">\n <div class=\"notification__icon\">\n <span>\n @switch (type()) {\n @case ('success') {\n <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n }\n @case ('warning') {\n <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n }\n @case ('error') {\n <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n }\n }\n </span>\n </div>\n <div class=\"notification__content\">\n <h4 class=\"notification__title\">{{ title() }}</h4>\n <p class=\"notification__message\">{{ message() }}</p>\n </div>\n <button\n class=\"notification__close\"\n (click)=\"$event.stopPropagation(); close()\"\n type=\"button\"\n aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\"\n >\n <duck-dev-icon name=\"duck-dev-x-medium\"></duck-dev-icon>\n </button>\n </div>\n </div>\n}\n", styles: [".notification{--dd-notification-shadow-x: 10px;--dd-notification-shadow-y: 10px;--dd-notification-bg: var(--dd-base-0);--dd-notification-accent: var(--dd-base-accent-blue);--dd-notification-text: var(--dd-base-600);--dd-notification-border: var(--dd-neo-ink);--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg);position:fixed;right:20px;min-width:min(360px,100vw - 32px);max-width:min(420px,100vw - 32px);padding:0;display:block;cursor:pointer;z-index:3;color:var(--dd-notification-text);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-0) 72%,transparent) 0 14%,transparent 14% 100%),var(--dd-notification-bg);border:4px solid var(--dd-notification-border);border-radius:0;box-shadow:var(--dd-notification-shadow-x) var(--dd-notification-shadow-y) 0 var(--dd-notification-border);transform:var(--dd-notification-rest-transform);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform-origin:top right;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)}.notification:hover{transform:var(--dd-notification-hover-transform);box-shadow:14px 14px 0 var(--dd-notification-border)}.notification__inner{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;padding:18px 20px 18px 18px;overflow:hidden;will-change:transform,opacity}.notification__inner:before{content:\"\";position:absolute;inset:10px 10px auto auto;width:72px;height:10px;background:var(--dd-notification-border)}.notification__icon{display:grid;place-items:center;width:54px;height:54px;margin-top:2px;background:var(--dd-notification-accent);border:4px solid var(--dd-notification-border);box-shadow:4px 4px 0 var(--dd-notification-border);font-size:26px;font-weight:900;line-height:1;flex-shrink:0;transform:rotate(-6deg)}.notification__content{display:grid;gap:8px;min-width:0;padding-top:2px}.notification__title{margin:0;padding:4px 10px;display:inline-flex;width:fit-content;max-width:100%;background:var(--dd-notification-border);color:var(--dd-base-0);font-size:15px;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;word-break:break-word}.notification__message{margin:0;max-width:32ch;font-size:15px;line-height:1.35;font-weight:700}.notification__close{display:grid;place-items:center;width:34px;height:34px;margin-top:-4px;padding:0;color:var(--dd-notification-border);background:var(--dd-base-0);border:3px solid var(--dd-notification-border);border-radius:0;box-shadow:3px 3px 0 var(--dd-notification-border);line-height:1;cursor:pointer;flex-shrink:0;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}.notification__close duck-dev-icon{display:inline-flex}.notification__close:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--dd-notification-border)}.notification__close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--dd-notification-border)}@keyframes dd-notification-content-enter{0%{opacity:0;transform:translate3d(0,10px,0) scale(.965)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes dd-notification-content-leave{0%{opacity:1;transform:translateZ(0) scale(1)}to{opacity:0;transform:translate3d(0,-6px,0) scale(.985)}}@keyframes dd-notification-enter-top{0%{opacity:0;transform:translate3d(0,-18px,0) scale(.94) rotate(-2.2deg)}60%{opacity:1;transform:translate3d(0,2px,0) scale(1.01) rotate(-.8deg)}to{opacity:1;transform:rotate(-1.2deg)}}@keyframes dd-notification-leave-top{0%{opacity:1;transform:rotate(-1.2deg)}to{opacity:0;transform:translate3d(0,-14px,0) scale(.96) rotate(-2.4deg)}}@keyframes dd-notification-enter-bottom{0%{opacity:0;transform:translate3d(0,18px,0) scale(.94) rotate(2deg)}60%{opacity:1;transform:translate3d(0,-2px,0) scale(1.01) rotate(.8deg)}to{opacity:1;transform:rotate(1deg)}}@keyframes dd-notification-leave-bottom{0%{opacity:1;transform:rotate(1deg)}to{opacity:0;transform:translate3d(0,14px,0) scale(.96) rotate(2.2deg)}}@keyframes dd-notification-enter-center{0%{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.94) rotate(-1.6deg)}65%{opacity:1;transform:translate(-50%,calc(-50% + 2px)) scale(1.01) rotate(-.6deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}}@keyframes dd-notification-leave-center{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}to{opacity:0;transform:translate(-50%,calc(-50% - 10px)) scale(.965) rotate(1deg)}}.notification-enter .notification__inner{animation:dd-notification-content-enter .36s cubic-bezier(.16,1,.3,1) both}.notification-leave .notification__inner{animation:dd-notification-content-leave .22s cubic-bezier(.4,0,1,1) both}.notification--pos-top{top:20px;--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg)}.notification--pos-center{left:50%;top:50%;right:auto;--dd-notification-rest-transform: translate(-50%, -50%) rotate(-1deg);--dd-notification-hover-transform: translate( calc(-50% - 4px) , calc(-50% - 4px) ) rotate(-1deg)}.notification--pos-bottom{bottom:20px;--dd-notification-rest-transform: rotate(1deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(1deg);transform-origin:bottom right}.notification-enter.notification--pos-top{animation:dd-notification-enter-top .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-top{animation:dd-notification-leave-top .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-bottom{animation:dd-notification-enter-bottom .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-bottom{animation:dd-notification-leave-bottom .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-center{animation:dd-notification-enter-center .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-center{animation:dd-notification-leave-center .24s cubic-bezier(.4,0,1,1) both}:host-context([ddTheme=dark]) .notification{--dd-notification-bg: var(--dd-base-100)}:host-context([ddTheme=dark]) .notification .notification__title{background:var(--dd-notification-accent);color:var(--dd-base-0)}:host-context([ddTheme=dark]) .notification .notification__close{background:color-mix(in srgb,var(--dd-base-600) 16%,var(--dd-notification-bg));color:var(--dd-base-600)}:host-context([ddTheme=dark]) .notification .notification__icon{background:var(--dd-notification-accent);color:var(--dd-base-600)}:host-context([ddTheme=dark]) .notification.notification--success{--dd-notification-bg: color-mix(in srgb, var(--dd-base-success) 30%, var(--dd-base-100));--dd-notification-accent: var(--dd-base-success)}:host-context([ddTheme=dark]) .notification.notification--warning{--dd-notification-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 30%, var(--dd-base-100))}:host-context([ddTheme=dark]) .notification.notification--error{--dd-notification-bg: color-mix(in srgb, var(--dd-base-accent-orange) 30%, var(--dd-base-100));--dd-notification-accent: var(--dd-base-accent-orange)}.notification--success{--dd-notification-bg: color-mix(in srgb, var(--dd-base-success) 86%, var(--dd-base-0));--dd-notification-accent: var(--dd-base-0)}.notification--warning{--dd-notification-bg: color-mix( in srgb, var(--dd-base-accent-yellow) 82%, var(--dd-base-0) );--dd-notification-accent: var(--dd-base-accent-orange)}.notification--error{--dd-notification-bg: color-mix( in srgb, var(--dd-base-accent-orange) 78%, var(--dd-base-0) );--dd-notification-accent: var(--dd-base-0)}@media(max-width:640px){.notification{left:16px;right:16px;min-width:0;max-width:none;box-shadow:7px 7px 0 var(--dd-notification-border)}.notification:hover{transform:var(--dd-notification-rest-transform);box-shadow:7px 7px 0 var(--dd-notification-border)}.notification__inner{grid-template-columns:auto 1fr;padding:16px}.notification__close{position:absolute;top:12px;right:12px;margin-top:0}.notification__message{max-width:none;padding-right:44px}.notification--pos-center{width:calc(100vw - 32px)}}\n"], dependencies: [{ kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }] });
|
|
4998
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevNotification, isStandalone: true, selector: "duck-dev-notification", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isVisible()) {\n <div\n [class]=\"'notification notification--' + type() + ' notification--pos-' + position()\"\n animate.enter=\"notification-enter\"\n animate.leave=\"notification-leave\"\n (animationend)=\"handleAnimationEnd($event)\"\n (click)=\"close()\"\n >\n <div class=\"notification__inner\">\n <div class=\"notification__icon\">\n <span>\n @switch (type()) {\n @case ('success') {\n <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n }\n @case ('warning') {\n <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n }\n @case ('error') {\n <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n }\n }\n </span>\n </div>\n <div class=\"notification__content\">\n <h4 class=\"notification__title\">{{ title() }}</h4>\n <p class=\"notification__message\">{{ message() }}</p>\n </div>\n <button\n class=\"notification__close\"\n (click)=\"$event.stopPropagation(); close()\"\n type=\"button\"\n aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\"\n >\n <duck-dev-icon name=\"duck-dev-x-medium\"></duck-dev-icon>\n </button>\n </div>\n </div>\n}\n", styles: [".notification{--dd-notification-shadow-x: 10px;--dd-notification-shadow-y: 10px;--dd-notification-bg: var(--dd-base-0);--dd-notification-accent: var(--dd-base-accent-blue);--dd-notification-text: var(--dd-base-600);--dd-notification-border: var(--dd-neo-ink);--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg);position:fixed;right:20px;min-width:min(360px,100vw - 32px);max-width:min(420px,100vw - 32px);padding:0;display:block;cursor:pointer;z-index:3;color:var(--dd-notification-text);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-0) 72%,transparent) 0 14%,transparent 14% 100%),var(--dd-notification-bg);border:4px solid var(--dd-notification-border);border-radius:0;box-shadow:var(--dd-notification-shadow-x) var(--dd-notification-shadow-y) 0 var(--dd-notification-border);transform:var(--dd-notification-rest-transform);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform-origin:top right;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)}.notification:hover{transform:var(--dd-notification-hover-transform);box-shadow:14px 14px 0 var(--dd-notification-border)}.notification__inner{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;padding:18px 20px 18px 18px;overflow:hidden;will-change:transform,opacity}.notification__inner:before{content:\"\";position:absolute;inset:10px 10px auto auto;width:72px;height:10px;background:var(--dd-notification-border)}.notification__icon{display:grid;place-items:center;width:54px;height:54px;margin-top:2px;background:var(--dd-notification-accent);border:4px solid var(--dd-notification-border);box-shadow:4px 4px 0 var(--dd-notification-border);font-size:26px;font-weight:900;line-height:1;flex-shrink:0;transform:rotate(-6deg)}.notification__content{display:grid;gap:8px;min-width:0;padding-top:2px}.notification__title{margin:0;padding:4px 10px;display:inline-flex;width:fit-content;max-width:100%;background:var(--dd-notification-border);color:var(--dd-base-0);font-size:15px;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;word-break:break-word}.notification__message{margin:0;max-width:32ch;font-size:15px;line-height:1.35;font-weight:700}.notification__close{display:grid;place-items:center;width:34px;height:34px;margin-top:-4px;padding:0;color:var(--dd-notification-border);background:var(--dd-base-0);border:3px solid var(--dd-notification-border);border-radius:0;box-shadow:3px 3px 0 var(--dd-notification-border);line-height:1;cursor:pointer;flex-shrink:0;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}.notification__close duck-dev-icon{display:inline-flex}.notification__close:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--dd-notification-border)}.notification__close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--dd-notification-border)}@keyframes dd-notification-content-enter{0%{opacity:0;transform:translate3d(0,10px,0) scale(.965)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes dd-notification-content-leave{0%{opacity:1;transform:translateZ(0) scale(1)}to{opacity:0;transform:translate3d(0,-6px,0) scale(.985)}}@keyframes dd-notification-enter-top{0%{opacity:0;transform:translate3d(0,-18px,0) scale(.94) rotate(-2.2deg)}60%{opacity:1;transform:translate3d(0,2px,0) scale(1.01) rotate(-.8deg)}to{opacity:1;transform:rotate(-1.2deg)}}@keyframes dd-notification-leave-top{0%{opacity:1;transform:rotate(-1.2deg)}to{opacity:0;transform:translate3d(0,-14px,0) scale(.96) rotate(-2.4deg)}}@keyframes dd-notification-enter-bottom{0%{opacity:0;transform:translate3d(0,18px,0) scale(.94) rotate(2deg)}60%{opacity:1;transform:translate3d(0,-2px,0) scale(1.01) rotate(.8deg)}to{opacity:1;transform:rotate(1deg)}}@keyframes dd-notification-leave-bottom{0%{opacity:1;transform:rotate(1deg)}to{opacity:0;transform:translate3d(0,14px,0) scale(.96) rotate(2.2deg)}}@keyframes dd-notification-enter-center{0%{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.94) rotate(-1.6deg)}65%{opacity:1;transform:translate(-50%,calc(-50% + 2px)) scale(1.01) rotate(-.6deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}}@keyframes dd-notification-leave-center{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}to{opacity:0;transform:translate(-50%,calc(-50% - 10px)) scale(.965) rotate(1deg)}}.notification-enter .notification__inner{animation:dd-notification-content-enter .36s cubic-bezier(.16,1,.3,1) both}.notification-leave .notification__inner{animation:dd-notification-content-leave .22s cubic-bezier(.4,0,1,1) both}.notification--pos-top{top:20px;--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg)}.notification--pos-center{left:50%;top:50%;right:auto;--dd-notification-rest-transform: translate(-50%, -50%) rotate(-1deg);--dd-notification-hover-transform: translate( calc(-50% - 4px) , calc(-50% - 4px) ) rotate(-1deg)}.notification--pos-bottom{bottom:20px;--dd-notification-rest-transform: rotate(1deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(1deg);transform-origin:bottom right}.notification-enter.notification--pos-top{animation:dd-notification-enter-top .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-top{animation:dd-notification-leave-top .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-bottom{animation:dd-notification-enter-bottom .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-bottom{animation:dd-notification-leave-bottom .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-center{animation:dd-notification-enter-center .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-center{animation:dd-notification-leave-center .24s cubic-bezier(.4,0,1,1) both}:host-context([ddTheme=dark]) .notification{--dd-notification-bg: var(--dd-base-100)}:host-context([ddTheme=dark]) .notification .notification__title{background:var(--dd-notification-accent);color:var(--dd-base-0)}:host-context([ddTheme=dark]) .notification .notification__close{background:color-mix(in srgb,var(--dd-base-600) 16%,var(--dd-notification-bg));color:var(--dd-base-600)}:host-context([ddTheme=dark]) .notification .notification__icon{background:var(--dd-notification-accent);color:var(--dd-base-600)}:host-context([ddTheme=dark]) .notification.notification--success{--dd-notification-bg: color-mix(in srgb, var(--dd-base-success) 30%, var(--dd-base-100));--dd-notification-accent: var(--dd-base-success)}:host-context([ddTheme=dark]) .notification.notification--warning{--dd-notification-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 30%, var(--dd-base-100))}:host-context([ddTheme=dark]) .notification.notification--error{--dd-notification-bg: color-mix(in srgb, var(--dd-base-accent-orange) 30%, var(--dd-base-100));--dd-notification-accent: var(--dd-base-accent-orange)}.notification--success{--dd-notification-bg: color-mix(in srgb, var(--dd-base-success) 86%, var(--dd-base-0));--dd-notification-accent: var(--dd-base-0)}.notification--warning{--dd-notification-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 82%, var(--dd-base-0));--dd-notification-accent: var(--dd-base-accent-orange)}.notification--error{--dd-notification-bg: color-mix(in srgb, var(--dd-base-accent-orange) 78%, var(--dd-base-0));--dd-notification-accent: var(--dd-base-0)}@media(max-width:640px){.notification{left:16px;right:16px;min-width:0;max-width:none;box-shadow:7px 7px 0 var(--dd-notification-border)}.notification:hover{transform:var(--dd-notification-rest-transform);box-shadow:7px 7px 0 var(--dd-notification-border)}.notification__inner{grid-template-columns:auto 1fr;padding:16px}.notification__close{position:absolute;top:12px;right:12px;margin-top:0}.notification__message{max-width:none;padding-right:44px}.notification--pos-center{width:calc(100vw - 32px)}}\n"], dependencies: [{ kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }] });
|
|
4892
4999
|
}
|
|
4893
5000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, decorators: [{
|
|
4894
5001
|
type: Component,
|
|
4895
|
-
args: [{ selector: 'duck-dev-notification', imports: [DuckDevIcon], template: "@if (isVisible()) {\n <div\n [class]=\"'notification notification--' + type() + ' notification--pos-' + position()\"\n animate.enter=\"notification-enter\"\n animate.leave=\"notification-leave\"\n (animationend)=\"handleAnimationEnd($event)\"\n (click)=\"close()\"\n >\n <div class=\"notification__inner\">\n <div class=\"notification__icon\">\n <span>\n @switch (type()) {\n @case ('success') {\n <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n }\n @case ('warning') {\n <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n }\n @case ('error') {\n <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n }\n }\n </span>\n </div>\n <div class=\"notification__content\">\n <h4 class=\"notification__title\">{{ title() }}</h4>\n <p class=\"notification__message\">{{ message() }}</p>\n </div>\n <button\n class=\"notification__close\"\n (click)=\"$event.stopPropagation(); close()\"\n type=\"button\"\n aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\"\n >\n <duck-dev-icon name=\"duck-dev-x-medium\"></duck-dev-icon>\n </button>\n </div>\n </div>\n}\n", styles: [".notification{--dd-notification-shadow-x: 10px;--dd-notification-shadow-y: 10px;--dd-notification-bg: var(--dd-base-0);--dd-notification-accent: var(--dd-base-accent-blue);--dd-notification-text: var(--dd-base-600);--dd-notification-border: var(--dd-neo-ink);--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg);position:fixed;right:20px;min-width:min(360px,100vw - 32px);max-width:min(420px,100vw - 32px);padding:0;display:block;cursor:pointer;z-index:3;color:var(--dd-notification-text);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-0) 72%,transparent) 0 14%,transparent 14% 100%),var(--dd-notification-bg);border:4px solid var(--dd-notification-border);border-radius:0;box-shadow:var(--dd-notification-shadow-x) var(--dd-notification-shadow-y) 0 var(--dd-notification-border);transform:var(--dd-notification-rest-transform);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform-origin:top right;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)}.notification:hover{transform:var(--dd-notification-hover-transform);box-shadow:14px 14px 0 var(--dd-notification-border)}.notification__inner{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;padding:18px 20px 18px 18px;overflow:hidden;will-change:transform,opacity}.notification__inner:before{content:\"\";position:absolute;inset:10px 10px auto auto;width:72px;height:10px;background:var(--dd-notification-border)}.notification__icon{display:grid;place-items:center;width:54px;height:54px;margin-top:2px;background:var(--dd-notification-accent);border:4px solid var(--dd-notification-border);box-shadow:4px 4px 0 var(--dd-notification-border);font-size:26px;font-weight:900;line-height:1;flex-shrink:0;transform:rotate(-6deg)}.notification__content{display:grid;gap:8px;min-width:0;padding-top:2px}.notification__title{margin:0;padding:4px 10px;display:inline-flex;width:fit-content;max-width:100%;background:var(--dd-notification-border);color:var(--dd-base-0);font-size:15px;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;word-break:break-word}.notification__message{margin:0;max-width:32ch;font-size:15px;line-height:1.35;font-weight:700}.notification__close{display:grid;place-items:center;width:34px;height:34px;margin-top:-4px;padding:0;color:var(--dd-notification-border);background:var(--dd-base-0);border:3px solid var(--dd-notification-border);border-radius:0;box-shadow:3px 3px 0 var(--dd-notification-border);line-height:1;cursor:pointer;flex-shrink:0;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}.notification__close duck-dev-icon{display:inline-flex}.notification__close:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--dd-notification-border)}.notification__close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--dd-notification-border)}@keyframes dd-notification-content-enter{0%{opacity:0;transform:translate3d(0,10px,0) scale(.965)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes dd-notification-content-leave{0%{opacity:1;transform:translateZ(0) scale(1)}to{opacity:0;transform:translate3d(0,-6px,0) scale(.985)}}@keyframes dd-notification-enter-top{0%{opacity:0;transform:translate3d(0,-18px,0) scale(.94) rotate(-2.2deg)}60%{opacity:1;transform:translate3d(0,2px,0) scale(1.01) rotate(-.8deg)}to{opacity:1;transform:rotate(-1.2deg)}}@keyframes dd-notification-leave-top{0%{opacity:1;transform:rotate(-1.2deg)}to{opacity:0;transform:translate3d(0,-14px,0) scale(.96) rotate(-2.4deg)}}@keyframes dd-notification-enter-bottom{0%{opacity:0;transform:translate3d(0,18px,0) scale(.94) rotate(2deg)}60%{opacity:1;transform:translate3d(0,-2px,0) scale(1.01) rotate(.8deg)}to{opacity:1;transform:rotate(1deg)}}@keyframes dd-notification-leave-bottom{0%{opacity:1;transform:rotate(1deg)}to{opacity:0;transform:translate3d(0,14px,0) scale(.96) rotate(2.2deg)}}@keyframes dd-notification-enter-center{0%{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.94) rotate(-1.6deg)}65%{opacity:1;transform:translate(-50%,calc(-50% + 2px)) scale(1.01) rotate(-.6deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}}@keyframes dd-notification-leave-center{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}to{opacity:0;transform:translate(-50%,calc(-50% - 10px)) scale(.965) rotate(1deg)}}.notification-enter .notification__inner{animation:dd-notification-content-enter .36s cubic-bezier(.16,1,.3,1) both}.notification-leave .notification__inner{animation:dd-notification-content-leave .22s cubic-bezier(.4,0,1,1) both}.notification--pos-top{top:20px;--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg)}.notification--pos-center{left:50%;top:50%;right:auto;--dd-notification-rest-transform: translate(-50%, -50%) rotate(-1deg);--dd-notification-hover-transform: translate( calc(-50% - 4px) , calc(-50% - 4px) ) rotate(-1deg)}.notification--pos-bottom{bottom:20px;--dd-notification-rest-transform: rotate(1deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(1deg);transform-origin:bottom right}.notification-enter.notification--pos-top{animation:dd-notification-enter-top .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-top{animation:dd-notification-leave-top .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-bottom{animation:dd-notification-enter-bottom .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-bottom{animation:dd-notification-leave-bottom .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-center{animation:dd-notification-enter-center .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-center{animation:dd-notification-leave-center .24s cubic-bezier(.4,0,1,1) both}:host-context([ddTheme=dark]) .notification{--dd-notification-bg: var(--dd-base-100)}:host-context([ddTheme=dark]) .notification .notification__title{background:var(--dd-notification-accent);color:var(--dd-base-0)}:host-context([ddTheme=dark]) .notification .notification__close{background:color-mix(in srgb,var(--dd-base-600) 16%,var(--dd-notification-bg));color:var(--dd-base-600)}:host-context([ddTheme=dark]) .notification .notification__icon{background:var(--dd-notification-accent);color:var(--dd-base-600)}:host-context([ddTheme=dark]) .notification.notification--success{--dd-notification-bg: color-mix(in srgb, var(--dd-base-success) 30%, var(--dd-base-100));--dd-notification-accent: var(--dd-base-success)}:host-context([ddTheme=dark]) .notification.notification--warning{--dd-notification-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 30%, var(--dd-base-100))}:host-context([ddTheme=dark]) .notification.notification--error{--dd-notification-bg: color-mix(in srgb, var(--dd-base-accent-orange) 30%, var(--dd-base-100));--dd-notification-accent: var(--dd-base-accent-orange)}.notification--success{--dd-notification-bg: color-mix(in srgb, var(--dd-base-success) 86%, var(--dd-base-0));--dd-notification-accent: var(--dd-base-0)}.notification--warning{--dd-notification-bg: color-mix(
|
|
5002
|
+
args: [{ selector: 'duck-dev-notification', imports: [DuckDevIcon], template: "@if (isVisible()) {\n <div\n [class]=\"'notification notification--' + type() + ' notification--pos-' + position()\"\n animate.enter=\"notification-enter\"\n animate.leave=\"notification-leave\"\n (animationend)=\"handleAnimationEnd($event)\"\n (click)=\"close()\"\n >\n <div class=\"notification__inner\">\n <div class=\"notification__icon\">\n <span>\n @switch (type()) {\n @case ('success') {\n <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n }\n @case ('warning') {\n <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n }\n @case ('error') {\n <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n }\n }\n </span>\n </div>\n <div class=\"notification__content\">\n <h4 class=\"notification__title\">{{ title() }}</h4>\n <p class=\"notification__message\">{{ message() }}</p>\n </div>\n <button\n class=\"notification__close\"\n (click)=\"$event.stopPropagation(); close()\"\n type=\"button\"\n aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\"\n >\n <duck-dev-icon name=\"duck-dev-x-medium\"></duck-dev-icon>\n </button>\n </div>\n </div>\n}\n", styles: [".notification{--dd-notification-shadow-x: 10px;--dd-notification-shadow-y: 10px;--dd-notification-bg: var(--dd-base-0);--dd-notification-accent: var(--dd-base-accent-blue);--dd-notification-text: var(--dd-base-600);--dd-notification-border: var(--dd-neo-ink);--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg);position:fixed;right:20px;min-width:min(360px,100vw - 32px);max-width:min(420px,100vw - 32px);padding:0;display:block;cursor:pointer;z-index:3;color:var(--dd-notification-text);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-0) 72%,transparent) 0 14%,transparent 14% 100%),var(--dd-notification-bg);border:4px solid var(--dd-notification-border);border-radius:0;box-shadow:var(--dd-notification-shadow-x) var(--dd-notification-shadow-y) 0 var(--dd-notification-border);transform:var(--dd-notification-rest-transform);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform-origin:top right;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)}.notification:hover{transform:var(--dd-notification-hover-transform);box-shadow:14px 14px 0 var(--dd-notification-border)}.notification__inner{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;padding:18px 20px 18px 18px;overflow:hidden;will-change:transform,opacity}.notification__inner:before{content:\"\";position:absolute;inset:10px 10px auto auto;width:72px;height:10px;background:var(--dd-notification-border)}.notification__icon{display:grid;place-items:center;width:54px;height:54px;margin-top:2px;background:var(--dd-notification-accent);border:4px solid var(--dd-notification-border);box-shadow:4px 4px 0 var(--dd-notification-border);font-size:26px;font-weight:900;line-height:1;flex-shrink:0;transform:rotate(-6deg)}.notification__content{display:grid;gap:8px;min-width:0;padding-top:2px}.notification__title{margin:0;padding:4px 10px;display:inline-flex;width:fit-content;max-width:100%;background:var(--dd-notification-border);color:var(--dd-base-0);font-size:15px;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;word-break:break-word}.notification__message{margin:0;max-width:32ch;font-size:15px;line-height:1.35;font-weight:700}.notification__close{display:grid;place-items:center;width:34px;height:34px;margin-top:-4px;padding:0;color:var(--dd-notification-border);background:var(--dd-base-0);border:3px solid var(--dd-notification-border);border-radius:0;box-shadow:3px 3px 0 var(--dd-notification-border);line-height:1;cursor:pointer;flex-shrink:0;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}.notification__close duck-dev-icon{display:inline-flex}.notification__close:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--dd-notification-border)}.notification__close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--dd-notification-border)}@keyframes dd-notification-content-enter{0%{opacity:0;transform:translate3d(0,10px,0) scale(.965)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes dd-notification-content-leave{0%{opacity:1;transform:translateZ(0) scale(1)}to{opacity:0;transform:translate3d(0,-6px,0) scale(.985)}}@keyframes dd-notification-enter-top{0%{opacity:0;transform:translate3d(0,-18px,0) scale(.94) rotate(-2.2deg)}60%{opacity:1;transform:translate3d(0,2px,0) scale(1.01) rotate(-.8deg)}to{opacity:1;transform:rotate(-1.2deg)}}@keyframes dd-notification-leave-top{0%{opacity:1;transform:rotate(-1.2deg)}to{opacity:0;transform:translate3d(0,-14px,0) scale(.96) rotate(-2.4deg)}}@keyframes dd-notification-enter-bottom{0%{opacity:0;transform:translate3d(0,18px,0) scale(.94) rotate(2deg)}60%{opacity:1;transform:translate3d(0,-2px,0) scale(1.01) rotate(.8deg)}to{opacity:1;transform:rotate(1deg)}}@keyframes dd-notification-leave-bottom{0%{opacity:1;transform:rotate(1deg)}to{opacity:0;transform:translate3d(0,14px,0) scale(.96) rotate(2.2deg)}}@keyframes dd-notification-enter-center{0%{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.94) rotate(-1.6deg)}65%{opacity:1;transform:translate(-50%,calc(-50% + 2px)) scale(1.01) rotate(-.6deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}}@keyframes dd-notification-leave-center{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}to{opacity:0;transform:translate(-50%,calc(-50% - 10px)) scale(.965) rotate(1deg)}}.notification-enter .notification__inner{animation:dd-notification-content-enter .36s cubic-bezier(.16,1,.3,1) both}.notification-leave .notification__inner{animation:dd-notification-content-leave .22s cubic-bezier(.4,0,1,1) both}.notification--pos-top{top:20px;--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg)}.notification--pos-center{left:50%;top:50%;right:auto;--dd-notification-rest-transform: translate(-50%, -50%) rotate(-1deg);--dd-notification-hover-transform: translate( calc(-50% - 4px) , calc(-50% - 4px) ) rotate(-1deg)}.notification--pos-bottom{bottom:20px;--dd-notification-rest-transform: rotate(1deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(1deg);transform-origin:bottom right}.notification-enter.notification--pos-top{animation:dd-notification-enter-top .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-top{animation:dd-notification-leave-top .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-bottom{animation:dd-notification-enter-bottom .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-bottom{animation:dd-notification-leave-bottom .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-center{animation:dd-notification-enter-center .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-center{animation:dd-notification-leave-center .24s cubic-bezier(.4,0,1,1) both}:host-context([ddTheme=dark]) .notification{--dd-notification-bg: var(--dd-base-100)}:host-context([ddTheme=dark]) .notification .notification__title{background:var(--dd-notification-accent);color:var(--dd-base-0)}:host-context([ddTheme=dark]) .notification .notification__close{background:color-mix(in srgb,var(--dd-base-600) 16%,var(--dd-notification-bg));color:var(--dd-base-600)}:host-context([ddTheme=dark]) .notification .notification__icon{background:var(--dd-notification-accent);color:var(--dd-base-600)}:host-context([ddTheme=dark]) .notification.notification--success{--dd-notification-bg: color-mix(in srgb, var(--dd-base-success) 30%, var(--dd-base-100));--dd-notification-accent: var(--dd-base-success)}:host-context([ddTheme=dark]) .notification.notification--warning{--dd-notification-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 30%, var(--dd-base-100))}:host-context([ddTheme=dark]) .notification.notification--error{--dd-notification-bg: color-mix(in srgb, var(--dd-base-accent-orange) 30%, var(--dd-base-100));--dd-notification-accent: var(--dd-base-accent-orange)}.notification--success{--dd-notification-bg: color-mix(in srgb, var(--dd-base-success) 86%, var(--dd-base-0));--dd-notification-accent: var(--dd-base-0)}.notification--warning{--dd-notification-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 82%, var(--dd-base-0));--dd-notification-accent: var(--dd-base-accent-orange)}.notification--error{--dd-notification-bg: color-mix(in srgb, var(--dd-base-accent-orange) 78%, var(--dd-base-0));--dd-notification-accent: var(--dd-base-0)}@media(max-width:640px){.notification{left:16px;right:16px;min-width:0;max-width:none;box-shadow:7px 7px 0 var(--dd-notification-border)}.notification:hover{transform:var(--dd-notification-rest-transform);box-shadow:7px 7px 0 var(--dd-notification-border)}.notification__inner{grid-template-columns:auto 1fr;padding:16px}.notification__close{position:absolute;top:12px;right:12px;margin-top:0}.notification__message{max-width:none;padding-right:44px}.notification--pos-center{width:calc(100vw - 32px)}}\n"] }]
|
|
4896
5003
|
}], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
4897
5004
|
|
|
4898
5005
|
class DuckDevNotificationContainer {
|
|
@@ -5022,7 +5129,7 @@ class NotificationBlock {
|
|
|
5022
5129
|
this.notify.clear();
|
|
5023
5130
|
}
|
|
5024
5131
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5025
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: NotificationBlock, isStandalone: true, selector: "app-notification-block", ngImport: i0, template: "<div class=\"notifications-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Service'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'notifications.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 QUICK DEMO \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"quick-actions\">\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.quickDemo' | transloco\"\n [colorButton]=\"colorViolet\"\n (clickButton)=\"showSample()\"\n />\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.clearAll' | transloco\"\n [colorButton]=\"colorGray\"\n (clickButton)=\"clearAll()\"\n />\n </div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 01 \u2014 BASICS \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.basic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #usageCode>\n <pre class=\"accordion-code\"><code><duck-dev-notification-container />\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) {}\n\nonSave() {\n this.notify.success('Saved successfully', {\n title: 'Done',\n position: 'top',\n duration: 3000\n });\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.basic.usage' | transloco\"\n [content]=\"usageCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>type</strong>\n <span>{{ 'notifications.basic.inputType' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>title</strong>\n <span>{{ 'notifications.basic.inputTitle' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>message</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'notifications.basic.inputMessage' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>duration</strong>\n <span>{{ 'notifications.basic.inputDuration' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>position</strong>\n <span>{{ 'notifications.basic.inputPosition' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'notifications.basic.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"successTop()\">\n <dd-badge [text]=\"'success'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.examples.successTop' | transloco }}</span>\n </div>\n <div class=\"example-card\" (click)=\"warningCenter()\">\n <dd-badge [text]=\"'warning'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.examples.warningCenter' | transloco }}</span>\n </div>\n <div class=\"example-card\" (click)=\"errorBottom()\">\n <dd-badge [text]=\"'error'\" [color]=\"colorDark\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.examples.errorBottom' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 02 \u2014 SERVICE & CONTAINER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.service.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.service.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #serviceCode>\n <pre class=\"accordion-code\"><code>// 1) Place container once in app layout\n<duck-dev-notification-container />\n\n// 2) Inject and use the service\nconstructor(private notify: DuckDevNotificationService) {}\n\nthis.notify.show({\n type: 'success',\n title: 'Done',\n message: 'Operation completed',\n position: 'top',\n duration: 3000\n});</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.service.install' | transloco\"\n [content]=\"serviceCode\"\n [color]=\"colorOrange\"\n />\n\n <h3 class=\"examples-title\">{{ 'notifications.api.title' | transloco }}</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>show(options)</strong>\n <span>{{ 'notifications.api.show' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>success(msg, opts?)</strong>\n <span>{{ 'notifications.api.success' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>warning(msg, opts?)</strong>\n <span>{{ 'notifications.api.warning' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>error(msg, opts?)</strong>\n <span>{{ 'notifications.api.error' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>remove(id)</strong>\n <span>{{ 'notifications.api.remove' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>clear()</strong>\n <span>{{ 'notifications.api.clear' | transloco }}</span>\n </div>\n </div>\n\n <ng-template #optionsCode>\n <pre class=\"accordion-code\"><code>interface NotificationOptions {\n type?: 'success' | 'warning' | 'error';\n title?: string;\n message: string;\n position?: 'top' | 'center' | 'bottom';\n duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.api.optionsTitle' | transloco\"\n [content]=\"optionsCode\"\n [color]=\"colorGray\"\n />\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 03 \u2014 POSITIONS & DURATION \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.positions.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"showTop()\">\n <dd-badge [text]=\"'top'\" [color]=\"colorViolet\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.positions.top' | transloco }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showCenterNoAuto()\">\n <dd-badge [text]=\"'center'\" [color]=\"colorOrange\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.positions.centerNoAuto' | transloco }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showBottomLong()\">\n <dd-badge [text]=\"'bottom'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.positions.bottomLong' | transloco }}</span>\n </div>\n </div>\n\n <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 04 \u2014 ADVANCED \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n </div>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>CSS</strong>\n <span>{{ 'notifications.advanced.cssOnly' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Palette</strong>\n <span>{{ 'notifications.advanced.palette' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Stacking</strong>\n <span>{{ 'notifications.advanced.stacking' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>A11y</strong>\n <span>{{ 'notifications.advanced.accessibility' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.notifications-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.quick-actions{display:flex;justify-content:center;gap:14px;margin-bottom:32px;flex-wrap:wrap}.notif-section{margin-bottom:16px}.notif-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.notif-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.notif-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:160px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card:active{transform:translateY(0)}.example-card__label{font-size:13px;font-weight:600;color:var(--dd-base-400);text-align:center}.tip{margin-top:8px;font-size:13px;color:var(--dd-base-400);font-style:italic}@media(max-width:768px){.notifications-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.notif-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5132
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: NotificationBlock, isStandalone: true, selector: "app-notification-block", ngImport: i0, template: "<div class=\"notifications-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Service'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'notifications.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 QUICK DEMO \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"quick-actions\">\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.quickDemo' | transloco\"\n [colorButton]=\"colorViolet\"\n (clickButton)=\"showSample()\"\n />\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.clearAll' | transloco\"\n [colorButton]=\"colorGray\"\n (clickButton)=\"clearAll()\"\n />\n </div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 01 \u2014 BASICS \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.basic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #usageCode>\n <pre class=\"accordion-code\"><code><duck-dev-notification-container />\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) {}\n\nonSave() {\n this.notify.success('Saved successfully', {\n title: 'Done',\n position: 'top',\n duration: 3000\n });\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.basic.usage' | transloco\"\n [content]=\"usageCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>type</strong>\n <span>{{ 'notifications.basic.inputType' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>title</strong>\n <span>{{ 'notifications.basic.inputTitle' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>message</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'notifications.basic.inputMessage' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>duration</strong>\n <span>{{ 'notifications.basic.inputDuration' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>position</strong>\n <span>{{ 'notifications.basic.inputPosition' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'notifications.basic.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"successTop()\">\n <dd-badge [text]=\"'success'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.successTop' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"warningCenter()\">\n <dd-badge [text]=\"'warning'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.warningCenter' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"errorBottom()\">\n <dd-badge [text]=\"'error'\" [color]=\"colorDark\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.errorBottom' | transloco\n }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 02 \u2014 SERVICE & CONTAINER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.service.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.service.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #serviceCode>\n <pre class=\"accordion-code\"><code>// 1) Place container once in app layout\n<duck-dev-notification-container />\n\n// 2) Inject and use the service\nconstructor(private notify: DuckDevNotificationService) {}\n\nthis.notify.show({\n type: 'success',\n title: 'Done',\n message: 'Operation completed',\n position: 'top',\n duration: 3000\n});</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.service.install' | transloco\"\n [content]=\"serviceCode\"\n [color]=\"colorOrange\"\n />\n\n <h3 class=\"examples-title\">{{ 'notifications.api.title' | transloco }}</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>show(options)</strong>\n <span>{{ 'notifications.api.show' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>success(msg, opts?)</strong>\n <span>{{ 'notifications.api.success' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>warning(msg, opts?)</strong>\n <span>{{ 'notifications.api.warning' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>error(msg, opts?)</strong>\n <span>{{ 'notifications.api.error' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>remove(id)</strong>\n <span>{{ 'notifications.api.remove' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>clear()</strong>\n <span>{{ 'notifications.api.clear' | transloco }}</span>\n </div>\n </div>\n\n <ng-template #optionsCode>\n <pre class=\"accordion-code\"><code>interface NotificationOptions {\n type?: 'success' | 'warning' | 'error';\n title?: string;\n message: string;\n position?: 'top' | 'center' | 'bottom';\n duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.api.optionsTitle' | transloco\"\n [content]=\"optionsCode\"\n [color]=\"colorGray\"\n />\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 03 \u2014 POSITIONS & DURATION \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.positions.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"showTop()\">\n <dd-badge [text]=\"'top'\" [color]=\"colorViolet\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.positions.top' | transloco }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showCenterNoAuto()\">\n <dd-badge [text]=\"'center'\" [color]=\"colorOrange\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.positions.centerNoAuto' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showBottomLong()\">\n <dd-badge [text]=\"'bottom'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.positions.bottomLong' | transloco\n }}</span>\n </div>\n </div>\n\n <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 04 \u2014 ADVANCED \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n </div>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>CSS</strong>\n <span>{{ 'notifications.advanced.cssOnly' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Palette</strong>\n <span>{{ 'notifications.advanced.palette' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Stacking</strong>\n <span>{{ 'notifications.advanced.stacking' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>A11y</strong>\n <span>{{ 'notifications.advanced.accessibility' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.notifications-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.quick-actions{display:flex;justify-content:center;gap:14px;margin-bottom:32px;flex-wrap:wrap}.notif-section{margin-bottom:16px}.notif-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.notif-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.notif-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:160px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card:active{transform:translateY(0)}.example-card__label{font-size:13px;font-weight:600;color:var(--dd-base-400);text-align:center}.tip{margin-top:8px;font-size:13px;color:var(--dd-base-400);font-style:italic}@media(max-width:768px){.notifications-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.notif-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5026
5133
|
}
|
|
5027
5134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationBlock, decorators: [{
|
|
5028
5135
|
type: Component,
|
|
@@ -5032,7 +5139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5032
5139
|
Badge,
|
|
5033
5140
|
DuckDevAccordionComponent,
|
|
5034
5141
|
ButtonNeobrutalSlab,
|
|
5035
|
-
], template: "<div class=\"notifications-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Service'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'notifications.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 QUICK DEMO \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"quick-actions\">\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.quickDemo' | transloco\"\n [colorButton]=\"colorViolet\"\n (clickButton)=\"showSample()\"\n />\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.clearAll' | transloco\"\n [colorButton]=\"colorGray\"\n (clickButton)=\"clearAll()\"\n />\n </div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 01 \u2014 BASICS \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.basic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #usageCode>\n <pre class=\"accordion-code\"><code><duck-dev-notification-container />\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) {}\n\nonSave() {\n this.notify.success('Saved successfully', {\n title: 'Done',\n position: 'top',\n duration: 3000\n });\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.basic.usage' | transloco\"\n [content]=\"usageCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>type</strong>\n <span>{{ 'notifications.basic.inputType' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>title</strong>\n <span>{{ 'notifications.basic.inputTitle' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>message</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'notifications.basic.inputMessage' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>duration</strong>\n <span>{{ 'notifications.basic.inputDuration' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>position</strong>\n <span>{{ 'notifications.basic.inputPosition' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'notifications.basic.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"successTop()\">\n <dd-badge [text]=\"'success'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.examples.successTop' | transloco }}</span>\n </div>\n <div class=\"example-card\" (click)=\"warningCenter()\">\n <dd-badge [text]=\"'warning'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.examples.warningCenter' | transloco }}</span>\n </div>\n <div class=\"example-card\" (click)=\"errorBottom()\">\n <dd-badge [text]=\"'error'\" [color]=\"colorDark\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.examples.errorBottom' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 02 \u2014 SERVICE & CONTAINER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.service.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.service.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #serviceCode>\n <pre class=\"accordion-code\"><code>// 1) Place container once in app layout\n<duck-dev-notification-container />\n\n// 2) Inject and use the service\nconstructor(private notify: DuckDevNotificationService) {}\n\nthis.notify.show({\n type: 'success',\n title: 'Done',\n message: 'Operation completed',\n position: 'top',\n duration: 3000\n});</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.service.install' | transloco\"\n [content]=\"serviceCode\"\n [color]=\"colorOrange\"\n />\n\n <h3 class=\"examples-title\">{{ 'notifications.api.title' | transloco }}</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>show(options)</strong>\n <span>{{ 'notifications.api.show' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>success(msg, opts?)</strong>\n <span>{{ 'notifications.api.success' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>warning(msg, opts?)</strong>\n <span>{{ 'notifications.api.warning' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>error(msg, opts?)</strong>\n <span>{{ 'notifications.api.error' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>remove(id)</strong>\n <span>{{ 'notifications.api.remove' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>clear()</strong>\n <span>{{ 'notifications.api.clear' | transloco }}</span>\n </div>\n </div>\n\n <ng-template #optionsCode>\n <pre class=\"accordion-code\"><code>interface NotificationOptions {\n type?: 'success' | 'warning' | 'error';\n title?: string;\n message: string;\n position?: 'top' | 'center' | 'bottom';\n duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.api.optionsTitle' | transloco\"\n [content]=\"optionsCode\"\n [color]=\"colorGray\"\n />\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 03 \u2014 POSITIONS & DURATION \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.positions.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"showTop()\">\n <dd-badge [text]=\"'top'\" [color]=\"colorViolet\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.positions.top' | transloco }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showCenterNoAuto()\">\n <dd-badge [text]=\"'center'\" [color]=\"colorOrange\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.positions.centerNoAuto' | transloco }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showBottomLong()\">\n <dd-badge [text]=\"'bottom'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.positions.bottomLong' | transloco }}</span>\n </div>\n </div>\n\n <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 04 \u2014 ADVANCED \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n </div>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>CSS</strong>\n <span>{{ 'notifications.advanced.cssOnly' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Palette</strong>\n <span>{{ 'notifications.advanced.palette' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Stacking</strong>\n <span>{{ 'notifications.advanced.stacking' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>A11y</strong>\n <span>{{ 'notifications.advanced.accessibility' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.notifications-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.quick-actions{display:flex;justify-content:center;gap:14px;margin-bottom:32px;flex-wrap:wrap}.notif-section{margin-bottom:16px}.notif-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.notif-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.notif-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:160px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card:active{transform:translateY(0)}.example-card__label{font-size:13px;font-weight:600;color:var(--dd-base-400);text-align:center}.tip{margin-top:8px;font-size:13px;color:var(--dd-base-400);font-style:italic}@media(max-width:768px){.notifications-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.notif-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"] }]
|
|
5142
|
+
], template: "<div class=\"notifications-page\">\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Service'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'notifications.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 QUICK DEMO \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"quick-actions\">\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.quickDemo' | transloco\"\n [colorButton]=\"colorViolet\"\n (clickButton)=\"showSample()\"\n />\n <duck-dev-button-neobrutal-slab\n [text]=\"'notifications.clearAll' | transloco\"\n [colorButton]=\"colorGray\"\n (clickButton)=\"clearAll()\"\n />\n </div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 01 \u2014 BASICS \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.basic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #usageCode>\n <pre class=\"accordion-code\"><code><duck-dev-notification-container />\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) {}\n\nonSave() {\n this.notify.success('Saved successfully', {\n title: 'Done',\n position: 'top',\n duration: 3000\n });\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.basic.usage' | transloco\"\n [content]=\"usageCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>type</strong>\n <span>{{ 'notifications.basic.inputType' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>title</strong>\n <span>{{ 'notifications.basic.inputTitle' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>message</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'notifications.basic.inputMessage' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>duration</strong>\n <span>{{ 'notifications.basic.inputDuration' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>position</strong>\n <span>{{ 'notifications.basic.inputPosition' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'notifications.basic.examples' | transloco }}</h3>\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"successTop()\">\n <dd-badge [text]=\"'success'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.successTop' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"warningCenter()\">\n <dd-badge [text]=\"'warning'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.warningCenter' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"errorBottom()\">\n <dd-badge [text]=\"'error'\" [color]=\"colorDark\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.examples.errorBottom' | transloco\n }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 02 \u2014 SERVICE & CONTAINER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.service.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.service.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #serviceCode>\n <pre class=\"accordion-code\"><code>// 1) Place container once in app layout\n<duck-dev-notification-container />\n\n// 2) Inject and use the service\nconstructor(private notify: DuckDevNotificationService) {}\n\nthis.notify.show({\n type: 'success',\n title: 'Done',\n message: 'Operation completed',\n position: 'top',\n duration: 3000\n});</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.service.install' | transloco\"\n [content]=\"serviceCode\"\n [color]=\"colorOrange\"\n />\n\n <h3 class=\"examples-title\">{{ 'notifications.api.title' | transloco }}</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>show(options)</strong>\n <span>{{ 'notifications.api.show' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>success(msg, opts?)</strong>\n <span>{{ 'notifications.api.success' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>warning(msg, opts?)</strong>\n <span>{{ 'notifications.api.warning' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>error(msg, opts?)</strong>\n <span>{{ 'notifications.api.error' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>remove(id)</strong>\n <span>{{ 'notifications.api.remove' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>clear()</strong>\n <span>{{ 'notifications.api.clear' | transloco }}</span>\n </div>\n </div>\n\n <ng-template #optionsCode>\n <pre class=\"accordion-code\"><code>interface NotificationOptions {\n type?: 'success' | 'warning' | 'error';\n title?: string;\n message: string;\n position?: 'top' | 'center' | 'bottom';\n duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'notifications.api.optionsTitle' | transloco\"\n [content]=\"optionsCode\"\n [color]=\"colorGray\"\n />\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 03 \u2014 POSITIONS & DURATION \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n <p class=\"notif-section__desc\">{{ 'notifications.positions.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"examples-row\">\n <div class=\"example-card\" (click)=\"showTop()\">\n <dd-badge [text]=\"'top'\" [color]=\"colorViolet\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{ 'notifications.positions.top' | transloco }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showCenterNoAuto()\">\n <dd-badge [text]=\"'center'\" [color]=\"colorOrange\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.positions.centerNoAuto' | transloco\n }}</span>\n </div>\n <div class=\"example-card\" (click)=\"showBottomLong()\">\n <dd-badge [text]=\"'bottom'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span class=\"example-card__label\">{{\n 'notifications.positions.bottomLong' | transloco\n }}</span>\n </div>\n </div>\n\n <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 04 \u2014 ADVANCED \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"notif-section\">\n <dd-card-section>\n <div class=\"notif-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n </div>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>CSS</strong>\n <span>{{ 'notifications.advanced.cssOnly' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Palette</strong>\n <span>{{ 'notifications.advanced.palette' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>Stacking</strong>\n <span>{{ 'notifications.advanced.stacking' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>A11y</strong>\n <span>{{ 'notifications.advanced.accessibility' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.notifications-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.quick-actions{display:flex;justify-content:center;gap:14px;margin-bottom:32px;flex-wrap:wrap}.notif-section{margin-bottom:16px}.notif-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.notif-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.notif-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.examples-row{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.example-card{flex:1;min-width:160px;padding:20px 16px;border-radius:12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.example-card:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 18%,transparent);transform:translateY(-2px)}.example-card:active{transform:translateY(0)}.example-card__label{font-size:13px;font-weight:600;color:var(--dd-base-400);text-align:center}.tip{margin-top:8px;font-size:13px;color:var(--dd-base-400);font-style:italic}@media(max-width:768px){.notifications-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.notif-section__head h2{font-size:20px}.inputs-grid{grid-template-columns:1fr}.examples-row{flex-direction:column}.examples-row .example-card{min-width:100%}}\n"] }]
|
|
5036
5143
|
}] });
|
|
5037
5144
|
|
|
5038
5145
|
class BadgeBlock {
|
|
@@ -5118,11 +5225,11 @@ class DuckDevAccordionNeobrutalComponent {
|
|
|
5118
5225
|
this.isOpen.update((prev) => !prev);
|
|
5119
5226
|
}
|
|
5120
5227
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5121
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevAccordionNeobrutalComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, stampLabel: { classPropertyName: "stampLabel", publicName: "stampLabel", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-brutal__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"toggle()\"\n >\n @if (titleTemplate(); as headerTemplate) {\n <span class=\"dd-accordion-brutal__custom-header\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" />\n </span>\n } @else {\n <span class=\"dd-accordion-brutal__stamp\">{{ stampLabel() }}</span>\n\n <span class=\"dd-accordion-brutal__headline\">\n <span class=\"dd-accordion-brutal__title\">{{ title() }}</span>\n <span class=\"dd-accordion-brutal__state\">{{ stateLabel() }}</span>\n </span>\n }\n\n <span class=\"dd-accordion-brutal__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </button>\n\n <div
|
|
5228
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevAccordionNeobrutalComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, stampLabel: { classPropertyName: "stampLabel", publicName: "stampLabel", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-brutal__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"toggle()\"\n >\n @if (titleTemplate(); as headerTemplate) {\n <span class=\"dd-accordion-brutal__custom-header\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" />\n </span>\n } @else {\n <span class=\"dd-accordion-brutal__stamp\">{{ stampLabel() }}</span>\n\n <span class=\"dd-accordion-brutal__headline\">\n <span class=\"dd-accordion-brutal__title\">{{ title() }}</span>\n <span class=\"dd-accordion-brutal__state\">{{ stateLabel() }}</span>\n </span>\n }\n\n <span class=\"dd-accordion-brutal__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </button>\n\n <div\n class=\"dd-accordion-brutal__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\n <div class=\"dd-accordion-brutal__body-frame\">\n <div class=\"dd-accordion-brutal__body-content\">\n <ng-container [ngTemplateOutlet]=\"content()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [".dd-accordion-brutal{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-orange);--dd-accordion-brutal-border: var(--dd-neo-ink);--dd-accordion-brutal-text: var(--dd-base-600);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-orange);display:block;background:var(--dd-accordion-brutal-bg);border:4px solid var(--dd-accordion-brutal-border);box-shadow:var(--dd-accordion-brutal-shadow);overflow:clip;color:var(--dd-accordion-brutal-text)}.dd-accordion-brutal[data-color=violet]{--dd-accordion-brutal-bg: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-secondary) 7%, var(--dd-base-0));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=orange]{--dd-accordion-brutal-bg: color-mix( in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0) );--dd-accordion-brutal-panel: color-mix( in srgb, var(--dd-base-accent-orange) 8%, var(--dd-base-0) );--dd-accordion-brutal-accent: var(--dd-base-accent-pink);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=gray]{--dd-accordion-brutal-bg: var(--dd-base-100);--dd-accordion-brutal-panel: var(--dd-base-0);--dd-accordion-brutal-accent: var(--dd-base-accent-orange);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=dark]{--dd-accordion-brutal-bg: var(--dd-base-600);--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-border: var(--dd-neo-ink);--dd-accordion-brutal-text: var(--dd-base-0);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-secondary)}.dd-accordion-brutal[data-color=white]{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-blue);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-orange)}.dd-accordion-brutal__header{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-accordion-brutal-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-accordion-brutal-bg);color:inherit;border:0;cursor:pointer;text-align:left;transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:after{content:\"\";position:absolute;inset:auto 0 0;height:4px;background:var(--dd-accordion-brutal-border);transform-origin:left center;transform:scaleX(.92);transition:transform .32s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:hover{transform:translate(-2px,-2px)}.dd-accordion-brutal.is-open .dd-accordion-brutal__header:after{transform:scaleX(1)}.dd-accordion-brutal__stamp{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:7px 10px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-neo-shadow);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-accordion-brutal-border);transform:rotate(-4deg)}.dd-accordion-brutal[data-color=dark] .dd-accordion-brutal__stamp{background:var(--dd-base-accent-yellow)}:host-context([ddTheme=dark]) .dd-accordion-brutal__stamp{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.dd-accordion-brutal__headline{display:grid;gap:8px;min-width:0}.dd-accordion-brutal__custom-header{display:block;grid-column:1/-2;min-width:0}.dd-accordion-brutal__title{font-size:18px;line-height:1.15;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}.dd-accordion-brutal__state{display:inline-flex;width:fit-content;padding:3px 8px;border:2px solid var(--dd-accordion-brutal-border);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 14%,var(--dd-accordion-brutal-bg));font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.dd-accordion-brutal__action{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-neo-shadow);transform:rotate(-8deg);transition:transform .42s cubic-bezier(.22,1.2,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__action.is-open{transform:rotate(90deg) scale(1.05);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 20%,var(--dd-base-0));box-shadow:2px 2px 0 var(--dd-neo-shadow)}:host-context([ddTheme=dark]) .dd-accordion-brutal__action{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-accordion-brutal-panel);transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1),background-color .22s ease}.dd-accordion-brutal__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-brutal__body-frame{min-height:0;overflow:hidden;border-top:4px solid var(--dd-accordion-brutal-border)}.dd-accordion-brutal__body-content{position:relative;padding:0 20px 0 24px;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__body-content:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-accordion-brutal-accent)}.dd-accordion-brutal__body-shell.is-open .dd-accordion-brutal__body-content{padding-top:20px;padding-bottom:22px;opacity:1;transform:translateY(0) scale(1);transition-delay:40ms,0ms,0ms}.dd-accordion-brutal__body-content :first-child{margin-top:0}.dd-accordion-brutal__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-brutal{box-shadow:var(--dd-accordion-brutal-shadow)}.dd-accordion-brutal__header{grid-template-columns:1fr auto;padding:16px}.dd-accordion-brutal__stamp{grid-column:1/-1;width:fit-content;min-width:0}.dd-accordion-brutal__title{font-size:16px}.dd-accordion-brutal__action{width:44px;height:44px}.dd-accordion-brutal__body-content{padding-right:16px;padding-left:20px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5122
5229
|
}
|
|
5123
5230
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, decorators: [{
|
|
5124
5231
|
type: Component,
|
|
5125
|
-
args: [{ selector: 'duck-dev-accordion-neobrutal', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-brutal__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"toggle()\"\n >\n @if (titleTemplate(); as headerTemplate) {\n <span class=\"dd-accordion-brutal__custom-header\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" />\n </span>\n } @else {\n <span class=\"dd-accordion-brutal__stamp\">{{ stampLabel() }}</span>\n\n <span class=\"dd-accordion-brutal__headline\">\n <span class=\"dd-accordion-brutal__title\">{{ title() }}</span>\n <span class=\"dd-accordion-brutal__state\">{{ stateLabel() }}</span>\n </span>\n }\n\n <span class=\"dd-accordion-brutal__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </button>\n\n <div
|
|
5232
|
+
args: [{ selector: 'duck-dev-accordion-neobrutal', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-brutal__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"toggle()\"\n >\n @if (titleTemplate(); as headerTemplate) {\n <span class=\"dd-accordion-brutal__custom-header\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" />\n </span>\n } @else {\n <span class=\"dd-accordion-brutal__stamp\">{{ stampLabel() }}</span>\n\n <span class=\"dd-accordion-brutal__headline\">\n <span class=\"dd-accordion-brutal__title\">{{ title() }}</span>\n <span class=\"dd-accordion-brutal__state\">{{ stateLabel() }}</span>\n </span>\n }\n\n <span class=\"dd-accordion-brutal__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </button>\n\n <div\n class=\"dd-accordion-brutal__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\n <div class=\"dd-accordion-brutal__body-frame\">\n <div class=\"dd-accordion-brutal__body-content\">\n <ng-container [ngTemplateOutlet]=\"content()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [".dd-accordion-brutal{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-orange);--dd-accordion-brutal-border: var(--dd-neo-ink);--dd-accordion-brutal-text: var(--dd-base-600);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-orange);display:block;background:var(--dd-accordion-brutal-bg);border:4px solid var(--dd-accordion-brutal-border);box-shadow:var(--dd-accordion-brutal-shadow);overflow:clip;color:var(--dd-accordion-brutal-text)}.dd-accordion-brutal[data-color=violet]{--dd-accordion-brutal-bg: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-secondary) 7%, var(--dd-base-0));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=orange]{--dd-accordion-brutal-bg: color-mix( in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0) );--dd-accordion-brutal-panel: color-mix( in srgb, var(--dd-base-accent-orange) 8%, var(--dd-base-0) );--dd-accordion-brutal-accent: var(--dd-base-accent-pink);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=gray]{--dd-accordion-brutal-bg: var(--dd-base-100);--dd-accordion-brutal-panel: var(--dd-base-0);--dd-accordion-brutal-accent: var(--dd-base-accent-orange);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=dark]{--dd-accordion-brutal-bg: var(--dd-base-600);--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-border: var(--dd-neo-ink);--dd-accordion-brutal-text: var(--dd-base-0);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-secondary)}.dd-accordion-brutal[data-color=white]{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-blue);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-orange)}.dd-accordion-brutal__header{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-accordion-brutal-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-accordion-brutal-bg);color:inherit;border:0;cursor:pointer;text-align:left;transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:after{content:\"\";position:absolute;inset:auto 0 0;height:4px;background:var(--dd-accordion-brutal-border);transform-origin:left center;transform:scaleX(.92);transition:transform .32s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:hover{transform:translate(-2px,-2px)}.dd-accordion-brutal.is-open .dd-accordion-brutal__header:after{transform:scaleX(1)}.dd-accordion-brutal__stamp{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:7px 10px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-neo-shadow);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-accordion-brutal-border);transform:rotate(-4deg)}.dd-accordion-brutal[data-color=dark] .dd-accordion-brutal__stamp{background:var(--dd-base-accent-yellow)}:host-context([ddTheme=dark]) .dd-accordion-brutal__stamp{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.dd-accordion-brutal__headline{display:grid;gap:8px;min-width:0}.dd-accordion-brutal__custom-header{display:block;grid-column:1/-2;min-width:0}.dd-accordion-brutal__title{font-size:18px;line-height:1.15;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}.dd-accordion-brutal__state{display:inline-flex;width:fit-content;padding:3px 8px;border:2px solid var(--dd-accordion-brutal-border);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 14%,var(--dd-accordion-brutal-bg));font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.dd-accordion-brutal__action{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-neo-shadow);transform:rotate(-8deg);transition:transform .42s cubic-bezier(.22,1.2,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__action.is-open{transform:rotate(90deg) scale(1.05);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 20%,var(--dd-base-0));box-shadow:2px 2px 0 var(--dd-neo-shadow)}:host-context([ddTheme=dark]) .dd-accordion-brutal__action{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-accordion-brutal-panel);transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1),background-color .22s ease}.dd-accordion-brutal__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-brutal__body-frame{min-height:0;overflow:hidden;border-top:4px solid var(--dd-accordion-brutal-border)}.dd-accordion-brutal__body-content{position:relative;padding:0 20px 0 24px;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__body-content:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-accordion-brutal-accent)}.dd-accordion-brutal__body-shell.is-open .dd-accordion-brutal__body-content{padding-top:20px;padding-bottom:22px;opacity:1;transform:translateY(0) scale(1);transition-delay:40ms,0ms,0ms}.dd-accordion-brutal__body-content :first-child{margin-top:0}.dd-accordion-brutal__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-brutal{box-shadow:var(--dd-accordion-brutal-shadow)}.dd-accordion-brutal__header{grid-template-columns:1fr auto;padding:16px}.dd-accordion-brutal__stamp{grid-column:1/-1;width:fit-content;min-width:0}.dd-accordion-brutal__title{font-size:16px}.dd-accordion-brutal__action{width:44px;height:44px}.dd-accordion-brutal__body-content{padding-right:16px;padding-left:20px}}\n"] }]
|
|
5126
5233
|
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], stampLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stampLabel", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5127
5234
|
|
|
5128
5235
|
class DuckDevAccordionNeobrutalTapeComponent {
|
|
@@ -5135,11 +5242,11 @@ class DuckDevAccordionNeobrutalTapeComponent {
|
|
|
5135
5242
|
this.isOpen.update((prev) => !prev);
|
|
5136
5243
|
}
|
|
5137
5244
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5138
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevAccordionNeobrutalTapeComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal-tape", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-tape__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"title()\"\n (click)=\"toggle()\"\n >\n <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n <span class=\"dd-accordion-tape__title-area\">\n <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </span>\n\n <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n </button>\n\n <div
|
|
5245
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevAccordionNeobrutalTapeComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal-tape", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-tape__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"title()\"\n (click)=\"toggle()\"\n >\n <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n <span class=\"dd-accordion-tape__title-area\">\n <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </span>\n\n <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n </button>\n\n <div\n class=\"dd-accordion-tape__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\n <div class=\"dd-accordion-tape__body-frame\">\n <div class=\"dd-accordion-tape__body-content\">\n <ng-container [ngTemplateOutlet]=\"content()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [".dd-accordion-tape{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange);--dd-tape-border: var(--dd-neo-ink);--dd-tape-text: var(--dd-base-600);--dd-tape-shadow: 4px 4px 0 var(--dd-neo-shadow);--dd-tape-body-shadow: 4px 4px 0 var(--dd-neo-shadow);display:block;position:relative}.dd-accordion-tape[data-color=violet]{--dd-tape-accent: var(--dd-base-secondary);--dd-tape-bg: color-mix(in srgb, var(--dd-base-secondary) 20%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-secondary)}.dd-accordion-tape[data-color=orange]{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange)}.dd-accordion-tape[data-color=gray]{--dd-tape-accent: var(--dd-base-500);--dd-tape-bg: var(--dd-base-200);--dd-tape-stripe: var(--dd-base-400)}.dd-accordion-tape[data-color=dark]{--dd-tape-accent: var(--dd-base-accent-yellow);--dd-tape-bg: var(--dd-base-600);--dd-tape-stripe: var(--dd-base-500);--dd-tape-text: var(--dd-base-0);--dd-tape-border: var(--dd-neo-ink)}.dd-accordion-tape[data-color=white]{--dd-tape-accent: var(--dd-base-accent-blue);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-blue) 12%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-blue)}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-tape-bg);border:3px solid var(--dd-tape-border);cursor:pointer;color:var(--dd-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:var(--dd-tape-shadow);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__header:hover{transform:rotate(-.8deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--dd-neo-shadow)}.dd-accordion-tape.is-open .dd-accordion-tape__header{transform:rotate(-.4deg)}.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{display:block;width:28px;flex-shrink:0}.dd-accordion-tape__stripe-left{background:repeating-linear-gradient(-45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-tape-border)}.dd-accordion-tape__title-area{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;min-width:0}.dd-accordion-tape__title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-wrap:balance}.dd-accordion-tape__action{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;transition:transform .38s cubic-bezier(.22,1.2,.36,1)}.dd-accordion-tape__action.is-open{transform:rotate(90deg)}.dd-accordion-tape__body-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1)}.dd-accordion-tape__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-tape__body-frame{min-height:0;overflow:hidden}.dd-accordion-tape__body-content{border:3px solid var(--dd-tape-border);border-top:none;background:var(--dd-base-0);padding:0 20px;margin-top:-2px;position:relative;box-shadow:var(--dd-tape-body-shadow);opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__body-content:before{content:\"\";position:absolute;top:0;left:16px;right:16px;height:3px;background:repeating-linear-gradient(90deg,var(--dd-tape-stripe) 0 6px,transparent 6px 12px)}.dd-accordion-tape__body-shell.is-open .dd-accordion-tape__body-content{padding-top:18px;padding-bottom:18px;opacity:1;transform:translateY(0);transition-delay:40ms,0ms,0ms}.dd-accordion-tape__body-content :first-child{margin-top:0}.dd-accordion-tape__body-content :last-child{margin-bottom:0}:host-context([ddTheme=dark]) .dd-accordion-tape__body-content{background:var(--dd-base-100)}@media(max-width:640px){.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{width:20px}.dd-accordion-tape__title{font-size:14px}.dd-accordion-tape__title-area{padding:12px 10px}.dd-accordion-tape__body-content{padding-left:16px;padding-right:16px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5139
5246
|
}
|
|
5140
5247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, decorators: [{
|
|
5141
5248
|
type: Component,
|
|
5142
|
-
args: [{ selector: 'duck-dev-accordion-neobrutal-tape', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-tape__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"title()\"\n (click)=\"toggle()\"\n >\n <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n <span class=\"dd-accordion-tape__title-area\">\n <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </span>\n\n <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n </button>\n\n <div
|
|
5249
|
+
args: [{ selector: 'duck-dev-accordion-neobrutal-tape', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n <button\n type=\"button\"\n class=\"dd-accordion-tape__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"title()\"\n (click)=\"toggle()\"\n >\n <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n <span class=\"dd-accordion-tape__title-area\">\n <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </span>\n\n <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n </button>\n\n <div\n class=\"dd-accordion-tape__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\n <div class=\"dd-accordion-tape__body-frame\">\n <div class=\"dd-accordion-tape__body-content\">\n <ng-container [ngTemplateOutlet]=\"content()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [".dd-accordion-tape{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange);--dd-tape-border: var(--dd-neo-ink);--dd-tape-text: var(--dd-base-600);--dd-tape-shadow: 4px 4px 0 var(--dd-neo-shadow);--dd-tape-body-shadow: 4px 4px 0 var(--dd-neo-shadow);display:block;position:relative}.dd-accordion-tape[data-color=violet]{--dd-tape-accent: var(--dd-base-secondary);--dd-tape-bg: color-mix(in srgb, var(--dd-base-secondary) 20%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-secondary)}.dd-accordion-tape[data-color=orange]{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange)}.dd-accordion-tape[data-color=gray]{--dd-tape-accent: var(--dd-base-500);--dd-tape-bg: var(--dd-base-200);--dd-tape-stripe: var(--dd-base-400)}.dd-accordion-tape[data-color=dark]{--dd-tape-accent: var(--dd-base-accent-yellow);--dd-tape-bg: var(--dd-base-600);--dd-tape-stripe: var(--dd-base-500);--dd-tape-text: var(--dd-base-0);--dd-tape-border: var(--dd-neo-ink)}.dd-accordion-tape[data-color=white]{--dd-tape-accent: var(--dd-base-accent-blue);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-blue) 12%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-blue)}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-tape-bg);border:3px solid var(--dd-tape-border);cursor:pointer;color:var(--dd-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:var(--dd-tape-shadow);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__header:hover{transform:rotate(-.8deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--dd-neo-shadow)}.dd-accordion-tape.is-open .dd-accordion-tape__header{transform:rotate(-.4deg)}.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{display:block;width:28px;flex-shrink:0}.dd-accordion-tape__stripe-left{background:repeating-linear-gradient(-45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-tape-border)}.dd-accordion-tape__title-area{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;min-width:0}.dd-accordion-tape__title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-wrap:balance}.dd-accordion-tape__action{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;transition:transform .38s cubic-bezier(.22,1.2,.36,1)}.dd-accordion-tape__action.is-open{transform:rotate(90deg)}.dd-accordion-tape__body-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1)}.dd-accordion-tape__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-tape__body-frame{min-height:0;overflow:hidden}.dd-accordion-tape__body-content{border:3px solid var(--dd-tape-border);border-top:none;background:var(--dd-base-0);padding:0 20px;margin-top:-2px;position:relative;box-shadow:var(--dd-tape-body-shadow);opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__body-content:before{content:\"\";position:absolute;top:0;left:16px;right:16px;height:3px;background:repeating-linear-gradient(90deg,var(--dd-tape-stripe) 0 6px,transparent 6px 12px)}.dd-accordion-tape__body-shell.is-open .dd-accordion-tape__body-content{padding-top:18px;padding-bottom:18px;opacity:1;transform:translateY(0);transition-delay:40ms,0ms,0ms}.dd-accordion-tape__body-content :first-child{margin-top:0}.dd-accordion-tape__body-content :last-child{margin-bottom:0}:host-context([ddTheme=dark]) .dd-accordion-tape__body-content{background:var(--dd-base-100)}@media(max-width:640px){.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{width:20px}.dd-accordion-tape__title{font-size:14px}.dd-accordion-tape__title-area{padding:12px 10px}.dd-accordion-tape__body-content{padding-left:16px;padding-right:16px}}\n"] }]
|
|
5143
5250
|
}], 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 }] }] } });
|
|
5144
5251
|
|
|
5145
5252
|
class AccordionBlock {
|
|
@@ -5158,7 +5265,7 @@ class AccordionBlock {
|
|
|
5158
5265
|
this.activeStyleTab.set(tab);
|
|
5159
5266
|
}
|
|
5160
5267
|
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/>\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" }] });
|
|
5268
|
+
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\n reference with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray |\n Dark (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\n reference 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 |\n Dark (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\n reference 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
5269
|
}
|
|
5163
5270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, decorators: [{
|
|
5164
5271
|
type: Component,
|
|
@@ -5169,7 +5276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5169
5276
|
DuckDevAccordionNeobrutalTapeComponent,
|
|
5170
5277
|
DuckDevCardSection,
|
|
5171
5278
|
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/>\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"] }]
|
|
5279
|
+
], 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\n reference with content\n </li>\n <li>\n <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray |\n Dark (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\n reference 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 |\n Dark (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\n reference 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
5280
|
}] });
|
|
5174
5281
|
|
|
5175
5282
|
class SliderFlip {
|
|
@@ -5298,7 +5405,7 @@ class SliderBlock {
|
|
|
5298
5405
|
this.activeVariantTab.set(tab);
|
|
5299
5406
|
}
|
|
5300
5407
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5301
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SliderBlock, isStandalone: true, selector: "app-slider-block", viewQueries: [{ propertyName: "slideTemplates", predicate: ["slide"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"slider-page\">\n\n <!-- Shared slide templates (collected by viewChildren) -->\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--hero\">\n <h3 class=\"dd-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n <p class=\"dd-slide__subtitle\">{{ 'slider.demo.heroSubtitle' | transloco }}</p>\n <a class=\"dd-slide__cta\" href=\"#components\">{{ 'slider.demo.heroCta' | transloco }}</a>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--features\">\n <ul class=\"dd-feature-list\">\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n </li>\n </ul>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--code\">\n <h4 class=\"dd-slide__code-title\">{{ 'slider.demo.code.quickStartTitle' | transloco }}</h4>\n <pre class=\"dd-slide__pre\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n <p class=\"dd-slide__note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n </section>\n </ng-template>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Autoplay'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Templates'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'slider.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 VARIANT TABS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <duck-dev-tab [tabs]=\"variantTabs\" (tabChange)=\"onVariantTabChange($event)\">\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'flip') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.raindrops.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n [color]=\"colorWhite\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.raindrops.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'slider.raindrops.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.raindrops.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.raindrops.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.raindrops.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{ 'slider.raindrops.exampleBasic' | transloco }}</span>\n <dd-slider-flip [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p><strong>{{ 'slider.tip.title' | transloco }}</strong> {{ 'slider.tip.flipText' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'classic') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.classic.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.classic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #classicCode>\n <pre class=\"accordion-code\"><code><dd-slider-classic\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.classic.usage' | transloco\"\n [content]=\"classicCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'slider.classic.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.classic.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.classic.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.classic.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{ 'slider.classic.exampleBasic' | transloco }}</span>\n <dd-slider-classic [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'left'\">\n <p><strong>{{ 'slider.tip.title' | transloco }}</strong> {{ 'slider.tip.classicText' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n }\n </duck-dev-tab>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 INTEGRATION EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'TS'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.integration.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.integration.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #integrationCode>\n <pre class=\"accordion-code\"><code>import {{ '{' }} Component, signal, TemplateRef,\n viewChildren, AfterViewInit {{ '}' }} from '@angular/core';\nimport {{ '{' }} SliderFlip {{ '}' }} from 'duck-dev-lib';\n\n@Component({{ '{' }}\n selector: 'app-demo',\n standalone: true,\n imports: [SliderFlip],\n template: `\n <ng-template #slide>\n <div>Slide content</div>\n </ng-template>\n\n <dd-slider-flip [items]=\"slides()\" />\n `\n{{ '}' }})\nexport class DemoComponent implements AfterViewInit {{ '{' }}\n slideTemplates = viewChildren<TemplateRef<any>>('slide');\n slides = signal<TemplateRef<any>[]>([]);\n\n ngAfterViewInit() {{ '{' }}\n this.slides.set([...this.slideTemplates()]);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.integration.accordionTitle' | transloco\"\n [content]=\"integrationCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"highlight-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'slider.integration.templatesEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.templatesTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.templatesText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'slider.integration.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.signalsTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.signalsText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.slider-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.slider-section{margin-bottom:16px}.slider-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.slider-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.slider-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.slider-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;display:flex;flex-direction:column;gap:14px;transition:border-color .25s ease,box-shadow .25s ease}.slider-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.slider-demo__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em;text-align:center}.slider-demo dd-slider-flip,.slider-demo dd-slider-classic{display:block;width:100%;aspect-ratio:16/9;max-height:min(55vh,400px)}.highlight-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.dd-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-slide--hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-slide--features{background:var(--dd-base-0)}.dd-slide--code{align-items:stretch}.dd-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300);transition:background .2s ease}.dd-slide__cta:hover{background:var(--dd-base-500)}.dd-slide__code-title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-slide__pre{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left;margin:0}.dd-slide__pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.6}.dd-slide__note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}.dd-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}@media(max-width:768px){.slider-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.slider-section__head h2{font-size:20px}.inputs-grid,.highlight-cards,.dd-feature-list{grid-template-columns:1fr}.dd-slide__title{font-size:20px}.dd-slide__subtitle{font-size:14px}}\n"], dependencies: [{ kind: "component", type: SliderFlip, selector: "dd-slider-flip", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "component", type: SliderClassic, selector: "dd-slider-classic", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5408
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SliderBlock, isStandalone: true, selector: "app-slider-block", viewQueries: [{ propertyName: "slideTemplates", predicate: ["slide"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"slider-page\">\n <!-- Shared slide templates (collected by viewChildren) -->\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--hero\">\n <h3 class=\"dd-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n <p class=\"dd-slide__subtitle\">{{ 'slider.demo.heroSubtitle' | transloco }}</p>\n <a class=\"dd-slide__cta\" href=\"#components\">{{ 'slider.demo.heroCta' | transloco }}</a>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--features\">\n <ul class=\"dd-feature-list\">\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n </li>\n </ul>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--code\">\n <h4 class=\"dd-slide__code-title\">{{ 'slider.demo.code.quickStartTitle' | transloco }}</h4>\n <pre class=\"dd-slide__pre\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n <p class=\"dd-slide__note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n </section>\n </ng-template>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Autoplay'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Templates'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'slider.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 VARIANT TABS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <duck-dev-tab [tabs]=\"variantTabs\" (tabChange)=\"onVariantTabChange($event)\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'flip') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.raindrops.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n [color]=\"colorWhite\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.raindrops.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'slider.raindrops.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.raindrops.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.raindrops.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.raindrops.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{\n 'slider.raindrops.exampleBasic' | transloco\n }}</span>\n <dd-slider-flip [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'slider.tip.title' | transloco }}</strong>\n {{ 'slider.tip.flipText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'classic') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.classic.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.classic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #classicCode>\n <pre class=\"accordion-code\"><code><dd-slider-classic\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.classic.usage' | transloco\"\n [content]=\"classicCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'slider.classic.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.classic.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.classic.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.classic.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{ 'slider.classic.exampleBasic' | transloco }}</span>\n <dd-slider-classic [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'slider.tip.title' | transloco }}</strong>\n {{ 'slider.tip.classicText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n }\n </duck-dev-tab>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 INTEGRATION EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'TS'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.integration.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.integration.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #integrationCode>\n <pre class=\"accordion-code\"><code>import {{ '{' }} Component, signal, TemplateRef,\n viewChildren, AfterViewInit {{ '}' }} from '@angular/core';\nimport {{ '{' }} SliderFlip {{ '}' }} from 'duck-dev-lib';\n\n@Component({{ '{' }}\n selector: 'app-demo',\n standalone: true,\n imports: [SliderFlip],\n template: `\n <ng-template #slide>\n <div>Slide content</div>\n </ng-template>\n\n <dd-slider-flip [items]=\"slides()\" />\n `\n{{ '}' }})\nexport class DemoComponent implements AfterViewInit {{ '{' }}\n slideTemplates = viewChildren<TemplateRef<any>>('slide');\n slides = signal<TemplateRef<any>[]>([]);\n\n ngAfterViewInit() {{ '{' }}\n this.slides.set([...this.slideTemplates()]);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.integration.accordionTitle' | transloco\"\n [content]=\"integrationCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"highlight-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'slider.integration.templatesEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.templatesTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.templatesText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'slider.integration.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.signalsTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.signalsText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.slider-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.slider-section{margin-bottom:16px}.slider-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.slider-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.slider-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.slider-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;display:flex;flex-direction:column;gap:14px;transition:border-color .25s ease,box-shadow .25s ease}.slider-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.slider-demo__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em;text-align:center}.slider-demo dd-slider-flip,.slider-demo dd-slider-classic{display:block;width:100%;aspect-ratio:16/9;max-height:min(55vh,400px)}.highlight-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.dd-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-slide--hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-slide--features{background:var(--dd-base-0)}.dd-slide--code{align-items:stretch}.dd-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300);transition:background .2s ease}.dd-slide__cta:hover{background:var(--dd-base-500)}.dd-slide__code-title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-slide__pre{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left;margin:0}.dd-slide__pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.6}.dd-slide__note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}.dd-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}@media(max-width:768px){.slider-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.slider-section__head h2{font-size:20px}.inputs-grid,.highlight-cards,.dd-feature-list{grid-template-columns:1fr}.dd-slide__title{font-size:20px}.dd-slide__subtitle{font-size:14px}}\n"], dependencies: [{ kind: "component", type: SliderFlip, selector: "dd-slider-flip", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "component", type: SliderClassic, selector: "dd-slider-classic", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5302
5409
|
}
|
|
5303
5410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, decorators: [{
|
|
5304
5411
|
type: Component,
|
|
@@ -5312,7 +5419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5312
5419
|
DuckDevAccordionComponent,
|
|
5313
5420
|
DuckDevSpeakerBubbleSoft,
|
|
5314
5421
|
DuckDevTab,
|
|
5315
|
-
], template: "<div class=\"slider-page\">\n\n <!-- Shared slide templates (collected by viewChildren) -->\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--hero\">\n <h3 class=\"dd-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n <p class=\"dd-slide__subtitle\">{{ 'slider.demo.heroSubtitle' | transloco }}</p>\n <a class=\"dd-slide__cta\" href=\"#components\">{{ 'slider.demo.heroCta' | transloco }}</a>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--features\">\n <ul class=\"dd-feature-list\">\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n </li>\n </ul>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--code\">\n <h4 class=\"dd-slide__code-title\">{{ 'slider.demo.code.quickStartTitle' | transloco }}</h4>\n <pre class=\"dd-slide__pre\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n <p class=\"dd-slide__note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n </section>\n </ng-template>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Autoplay'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Templates'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'slider.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 VARIANT TABS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <duck-dev-tab [tabs]=\"variantTabs\" (tabChange)=\"onVariantTabChange($event)\">\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'flip') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.raindrops.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n [color]=\"colorWhite\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.raindrops.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'slider.raindrops.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.raindrops.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.raindrops.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.raindrops.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{ 'slider.raindrops.exampleBasic' | transloco }}</span>\n <dd-slider-flip [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p><strong>{{ 'slider.tip.title' | transloco }}</strong> {{ 'slider.tip.flipText' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'classic') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.classic.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.classic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #classicCode>\n <pre class=\"accordion-code\"><code><dd-slider-classic\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.classic.usage' | transloco\"\n [content]=\"classicCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'slider.classic.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.classic.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.classic.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.classic.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{ 'slider.classic.exampleBasic' | transloco }}</span>\n <dd-slider-classic [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'left'\">\n <p><strong>{{ 'slider.tip.title' | transloco }}</strong> {{ 'slider.tip.classicText' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </section>\n }\n </duck-dev-tab>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 INTEGRATION EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'TS'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.integration.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.integration.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #integrationCode>\n <pre class=\"accordion-code\"><code>import {{ '{' }} Component, signal, TemplateRef,\n viewChildren, AfterViewInit {{ '}' }} from '@angular/core';\nimport {{ '{' }} SliderFlip {{ '}' }} from 'duck-dev-lib';\n\n@Component({{ '{' }}\n selector: 'app-demo',\n standalone: true,\n imports: [SliderFlip],\n template: `\n <ng-template #slide>\n <div>Slide content</div>\n </ng-template>\n\n <dd-slider-flip [items]=\"slides()\" />\n `\n{{ '}' }})\nexport class DemoComponent implements AfterViewInit {{ '{' }}\n slideTemplates = viewChildren<TemplateRef<any>>('slide');\n slides = signal<TemplateRef<any>[]>([]);\n\n ngAfterViewInit() {{ '{' }}\n this.slides.set([...this.slideTemplates()]);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.integration.accordionTitle' | transloco\"\n [content]=\"integrationCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"highlight-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'slider.integration.templatesEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.templatesTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.templatesText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'slider.integration.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.signalsTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.signalsText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.slider-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.slider-section{margin-bottom:16px}.slider-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.slider-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.slider-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.slider-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;display:flex;flex-direction:column;gap:14px;transition:border-color .25s ease,box-shadow .25s ease}.slider-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.slider-demo__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em;text-align:center}.slider-demo dd-slider-flip,.slider-demo dd-slider-classic{display:block;width:100%;aspect-ratio:16/9;max-height:min(55vh,400px)}.highlight-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.dd-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-slide--hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-slide--features{background:var(--dd-base-0)}.dd-slide--code{align-items:stretch}.dd-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300);transition:background .2s ease}.dd-slide__cta:hover{background:var(--dd-base-500)}.dd-slide__code-title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-slide__pre{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left;margin:0}.dd-slide__pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.6}.dd-slide__note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}.dd-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}@media(max-width:768px){.slider-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.slider-section__head h2{font-size:20px}.inputs-grid,.highlight-cards,.dd-feature-list{grid-template-columns:1fr}.dd-slide__title{font-size:20px}.dd-slide__subtitle{font-size:14px}}\n"] }]
|
|
5422
|
+
], template: "<div class=\"slider-page\">\n <!-- Shared slide templates (collected by viewChildren) -->\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--hero\">\n <h3 class=\"dd-slide__title\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n <p class=\"dd-slide__subtitle\">{{ 'slider.demo.heroSubtitle' | transloco }}</p>\n <a class=\"dd-slide__cta\" href=\"#components\">{{ 'slider.demo.heroCta' | transloco }}</a>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--features\">\n <ul class=\"dd-feature-list\">\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n </li>\n <li class=\"dd-feature\">\n <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</p>\n </li>\n </ul>\n </section>\n </ng-template>\n\n <ng-template #slide>\n <section class=\"dd-slide dd-slide--code\">\n <h4 class=\"dd-slide__code-title\">{{ 'slider.demo.code.quickStartTitle' | transloco }}</h4>\n <pre class=\"dd-slide__pre\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n <p class=\"dd-slide__note\">{{ 'slider.demo.code.tip' | transloco }}</p>\n </section>\n </ng-template>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Autoplay'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Templates'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'slider.title' | transloco }}</h1>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 VARIANT TABS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <duck-dev-tab [tabs]=\"variantTabs\" (tabChange)=\"onVariantTabChange($event)\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FLIP SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'flip') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.raindrops.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #flipCode>\n <pre class=\"accordion-code\"><code><dd-slider-flip\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n [color]=\"colorWhite\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.raindrops.usage' | transloco\"\n [content]=\"flipCode\"\n [color]=\"colorViolet\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'slider.raindrops.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.raindrops.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.raindrops.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.raindrops.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{\n 'slider.raindrops.exampleBasic' | transloco\n }}</span>\n <dd-slider-flip [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'slider.tip.title' | transloco }}</strong>\n {{ 'slider.tip.flipText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n }\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC SLIDER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeVariantTab().id === 'classic') {\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.classic.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.classic.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #classicCode>\n <pre class=\"accordion-code\"><code><dd-slider-classic\n [items]=\"slides()\"\n [intervalMs]=\"3000\"\n [autoplay]=\"true\"\n/></code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.classic.usage' | transloco\"\n [content]=\"classicCode\"\n [color]=\"colorOrange\"\n />\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>items</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'slider.classic.inputItems' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>intervalMs</strong>\n <span>{{ 'slider.classic.inputInterval' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>autoplay</strong>\n <span>{{ 'slider.classic.inputAutoplay' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>color</strong>\n <span>{{ 'slider.colorDescription' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"examples-title\">{{ 'slider.classic.examples' | transloco }}</h3>\n <div class=\"slider-demo\">\n <span class=\"slider-demo__label\">{{ 'slider.classic.exampleBasic' | transloco }}</span>\n <dd-slider-classic [items]=\"slides()\" />\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"slider-section\">\n <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'slider.tip.title' | transloco }}</strong>\n {{ 'slider.tip.classicText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n }\n </duck-dev-tab>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 INTEGRATION EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"slider-section\">\n <dd-card-section>\n <div class=\"slider-section__head\">\n <dd-badge [text]=\"'TS'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'slider.integration.title' | transloco }}</h2>\n <p class=\"slider-section__desc\">{{ 'slider.integration.description' | transloco }}</p>\n </div>\n </div>\n\n <ng-template #integrationCode>\n <pre class=\"accordion-code\"><code>import {{ '{' }} Component, signal, TemplateRef,\n viewChildren, AfterViewInit {{ '}' }} from '@angular/core';\nimport {{ '{' }} SliderFlip {{ '}' }} from 'duck-dev-lib';\n\n@Component({{ '{' }}\n selector: 'app-demo',\n standalone: true,\n imports: [SliderFlip],\n template: `\n <ng-template #slide>\n <div>Slide content</div>\n </ng-template>\n\n <dd-slider-flip [items]=\"slides()\" />\n `\n{{ '}' }})\nexport class DemoComponent implements AfterViewInit {{ '{' }}\n slideTemplates = viewChildren<TemplateRef<any>>('slide');\n slides = signal<TemplateRef<any>[]>([]);\n\n ngAfterViewInit() {{ '{' }}\n this.slides.set([...this.slideTemplates()]);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <duck-dev-accordion\n [title]=\"'slider.integration.accordionTitle' | transloco\"\n [content]=\"integrationCode\"\n [color]=\"colorGray\"\n />\n\n <div class=\"highlight-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'slider.integration.templatesEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.templatesTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.templatesText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'slider.integration.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'slider.integration.signalsTitle' | transloco }}</h3>\n <p>{{ 'slider.integration.signalsText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.slider-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.slider-section{margin-bottom:16px}.slider-section__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.slider-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0 0 6px}.slider-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:20px 0}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.examples-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px}.slider-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;display:flex;flex-direction:column;gap:14px;transition:border-color .25s ease,box-shadow .25s ease}.slider-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.slider-demo__label{font-size:12px;font-weight:600;color:var(--dd-base-400);text-transform:uppercase;letter-spacing:.04em;text-align:center}.slider-demo dd-slider-flip,.slider-demo dd-slider-classic{display:block;width:100%;aspect-ratio:16/9;max-height:min(55vh,400px)}.highlight-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.dd-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-slide--hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-slide--features{background:var(--dd-base-0)}.dd-slide--code{align-items:stretch}.dd-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300);transition:background .2s ease}.dd-slide__cta:hover{background:var(--dd-base-500)}.dd-slide__code-title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-slide__pre{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left;margin:0}.dd-slide__pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.6}.dd-slide__note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}.dd-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}@media(max-width:768px){.slider-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.slider-section__head h2{font-size:20px}.inputs-grid,.highlight-cards,.dd-feature-list{grid-template-columns:1fr}.dd-slide__title{font-size:20px}.dd-slide__subtitle{font-size:14px}}\n"] }]
|
|
5316
5423
|
}], propDecorators: { slideTemplates: [{ type: i0.ViewChildren, args: ['slide', { isSignal: true }] }] } });
|
|
5317
5424
|
|
|
5318
5425
|
class NeobrutalTicketCardBlock {
|
|
@@ -5459,9 +5566,7 @@ class CardBlock {
|
|
|
5459
5566
|
});
|
|
5460
5567
|
}
|
|
5461
5568
|
onNeobrutalPosterSwipe(direction) {
|
|
5462
|
-
this.neobrutalPosterSwipeStatus.set(direction === 'right'
|
|
5463
|
-
? 'Poster emitted `swipedRight`.'
|
|
5464
|
-
: 'Poster emitted `swipedLeft`.');
|
|
5569
|
+
this.neobrutalPosterSwipeStatus.set(direction === 'right' ? 'Poster emitted `swipedRight`.' : 'Poster emitted `swipedLeft`.');
|
|
5465
5570
|
this.neobrutalPosterSwipeVisible.set(false);
|
|
5466
5571
|
window.setTimeout(() => {
|
|
5467
5572
|
this.neobrutalPosterSwipeIndex.update((index) => (index + 1) % this.neobrutalPosterSwipeDeck.length);
|
|
@@ -5474,7 +5579,7 @@ class CardBlock {
|
|
|
5474
5579
|
return el;
|
|
5475
5580
|
}
|
|
5476
5581
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5477
|
-
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><dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n </dd-card-accent></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"exampleViolet.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"exampleOrange.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"exampleGray.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-accent [color]=\"colorDark\">\n <div [innerHTML]=\"exampleDark.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n </div>\n </dd-card-section>\n\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><dd-card-minimal [color]=\"colorWhite\">\n <div [innerHTML]=\"minimalExampleDefault.innerHTML\"></div>\n </dd-card-minimal></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><dd-card-outline [color]=\"colorWhite\">\n <div [innerHTML]=\"outlineExampleDefault.innerHTML\"></div>\n </dd-card-outline></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><dd-card-signal [color]=\"colorWhite\">\n <div [innerHTML]=\"signalExampleDefault.innerHTML\"></div>\n </dd-card-signal></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><dd-card-neobrutal-slab\n [color]=\"colorOrange\"\n strapLabel=\"Swipe deck\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n>\n <h4>Launch queue</h4>\n <p>Swipe right to keep the card, swipe left to skip it.</p>\n</dd-card-neobrutal-slab></code></pre>\n <pre><code><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=\"Swipe right to keep this card in the active deck.\"\n metricLabel=\"Signal\"\n metric=\"99%\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n/></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 / Swipe</p>\n @if (neobrutalSwipeVisible()) {\n <dd-card-neobrutal-slab\n [color]=\"colorOrange\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n [strapLabel]=\"neobrutalSwipeCard().strapLabel\"\n (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n >\n <h4>{{ neobrutalSwipeCard().title }}</h4>\n <p>{{ neobrutalSwipeCard().description }}</p>\n </dd-card-neobrutal-slab>\n }\n <p class=\"example-note\">{{ neobrutalSwipeStatus() }}</p>\n </div>\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 / Swipe</p>\n @if (neobrutalPosterSwipeVisible()) {\n <dd-card-neobrutal-poster\n [color]=\"colorDark\"\n [railTop]=\"neobrutalPosterSwipeCard().railTop\"\n [railMiddle]=\"neobrutalPosterSwipeCard().railMiddle\"\n [railBottom]=\"neobrutalPosterSwipeCard().railBottom\"\n [eyebrow]=\"neobrutalPosterSwipeCard().eyebrow\"\n [badge]=\"neobrutalPosterSwipeCard().badge\"\n [title]=\"neobrutalPosterSwipeCard().title\"\n [description]=\"neobrutalPosterSwipeCard().description\"\n [metricLabel]=\"neobrutalPosterSwipeCard().metricLabel\"\n [metric]=\"neobrutalPosterSwipeCard().metric\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n />\n }\n <p class=\"example-note\">{{ neobrutalPosterSwipeStatus() }}</p>\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-neo-ink);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-neo-ink);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}.demo-container .examples-block .example-row .example-item .example-note{margin:0;padding:10px 12px;border:2px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-base-accent-yellow) 20%,var(--dd-base-0));font-size:13px;font-weight:700;line-height:1.4;color:var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"], 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", "swipeable", "swipeThreshold"], outputs: ["swipedLeft", "swipedRight"] }, { kind: "component", type: DuckDevCardNeobrutalSlab, selector: "dd-card-neobrutal-slab", inputs: ["color", "strapLabel", "swipeable", "swipeThreshold"], outputs: ["swipedLeft", "swipedRight"] }, { 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" }] });
|
|
5582
|
+
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 <dd-card-section>\n <h2>{{ 'cardDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n </dd-card-accent></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"exampleViolet.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"exampleOrange.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"exampleGray.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-accent [color]=\"colorDark\">\n <div [innerHTML]=\"exampleDark.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n </div>\n </dd-card-section>\n\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><dd-card-minimal [color]=\"colorWhite\">\n <div [innerHTML]=\"minimalExampleDefault.innerHTML\"></div>\n </dd-card-minimal></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><dd-card-outline [color]=\"colorWhite\">\n <div [innerHTML]=\"outlineExampleDefault.innerHTML\"></div>\n </dd-card-outline></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><dd-card-signal [color]=\"colorWhite\">\n <div [innerHTML]=\"signalExampleDefault.innerHTML\"></div>\n </dd-card-signal></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\n the 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><dd-card-neobrutal-slab\n [color]=\"colorOrange\"\n strapLabel=\"Swipe deck\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n>\n <h4>Launch queue</h4>\n <p>Swipe right to keep the card, swipe left to skip it.</p>\n</dd-card-neobrutal-slab></code></pre>\n <pre><code><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=\"Swipe right to keep this card in the active deck.\"\n metricLabel=\"Signal\"\n metric=\"99%\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n/></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 / Swipe</p>\n @if (neobrutalSwipeVisible()) {\n <dd-card-neobrutal-slab\n [color]=\"colorOrange\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n [strapLabel]=\"neobrutalSwipeCard().strapLabel\"\n (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n >\n <h4>{{ neobrutalSwipeCard().title }}</h4>\n <p>{{ neobrutalSwipeCard().description }}</p>\n </dd-card-neobrutal-slab>\n }\n <p class=\"example-note\">{{ neobrutalSwipeStatus() }}</p>\n </div>\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 / Swipe</p>\n @if (neobrutalPosterSwipeVisible()) {\n <dd-card-neobrutal-poster\n [color]=\"colorDark\"\n [railTop]=\"neobrutalPosterSwipeCard().railTop\"\n [railMiddle]=\"neobrutalPosterSwipeCard().railMiddle\"\n [railBottom]=\"neobrutalPosterSwipeCard().railBottom\"\n [eyebrow]=\"neobrutalPosterSwipeCard().eyebrow\"\n [badge]=\"neobrutalPosterSwipeCard().badge\"\n [title]=\"neobrutalPosterSwipeCard().title\"\n [description]=\"neobrutalPosterSwipeCard().description\"\n [metricLabel]=\"neobrutalPosterSwipeCard().metricLabel\"\n [metric]=\"neobrutalPosterSwipeCard().metric\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n />\n }\n <p class=\"example-note\">{{ neobrutalPosterSwipeStatus() }}</p>\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-neo-ink);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-neo-ink);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}.demo-container .examples-block .example-row .example-item .example-note{margin:0;padding:10px 12px;border:2px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-base-accent-yellow) 20%,var(--dd-base-0));font-size:13px;font-weight:700;line-height:1.4;color:var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"], 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", "swipeable", "swipeThreshold"], outputs: ["swipedLeft", "swipedRight"] }, { kind: "component", type: DuckDevCardNeobrutalSlab, selector: "dd-card-neobrutal-slab", inputs: ["color", "strapLabel", "swipeable", "swipeThreshold"], outputs: ["swipedLeft", "swipedRight"] }, { 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" }] });
|
|
5478
5583
|
}
|
|
5479
5584
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, decorators: [{
|
|
5480
5585
|
type: Component,
|
|
@@ -5490,7 +5595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5490
5595
|
DuckDevCardSection,
|
|
5491
5596
|
NeobrutalTicketCardBlock,
|
|
5492
5597
|
DuckDevTab,
|
|
5493
|
-
], 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><dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n </dd-card-accent></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"exampleViolet.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"exampleOrange.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"exampleGray.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-accent [color]=\"colorDark\">\n <div [innerHTML]=\"exampleDark.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n </div>\n </dd-card-section>\n\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><dd-card-minimal [color]=\"colorWhite\">\n <div [innerHTML]=\"minimalExampleDefault.innerHTML\"></div>\n </dd-card-minimal></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><dd-card-outline [color]=\"colorWhite\">\n <div [innerHTML]=\"outlineExampleDefault.innerHTML\"></div>\n </dd-card-outline></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><dd-card-signal [color]=\"colorWhite\">\n <div [innerHTML]=\"signalExampleDefault.innerHTML\"></div>\n </dd-card-signal></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><dd-card-neobrutal-slab\n [color]=\"colorOrange\"\n strapLabel=\"Swipe deck\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n>\n <h4>Launch queue</h4>\n <p>Swipe right to keep the card, swipe left to skip it.</p>\n</dd-card-neobrutal-slab></code></pre>\n <pre><code><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=\"Swipe right to keep this card in the active deck.\"\n metricLabel=\"Signal\"\n metric=\"99%\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n/></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 / Swipe</p>\n @if (neobrutalSwipeVisible()) {\n <dd-card-neobrutal-slab\n [color]=\"colorOrange\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n [strapLabel]=\"neobrutalSwipeCard().strapLabel\"\n (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n >\n <h4>{{ neobrutalSwipeCard().title }}</h4>\n <p>{{ neobrutalSwipeCard().description }}</p>\n </dd-card-neobrutal-slab>\n }\n <p class=\"example-note\">{{ neobrutalSwipeStatus() }}</p>\n </div>\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 / Swipe</p>\n @if (neobrutalPosterSwipeVisible()) {\n <dd-card-neobrutal-poster\n [color]=\"colorDark\"\n [railTop]=\"neobrutalPosterSwipeCard().railTop\"\n [railMiddle]=\"neobrutalPosterSwipeCard().railMiddle\"\n [railBottom]=\"neobrutalPosterSwipeCard().railBottom\"\n [eyebrow]=\"neobrutalPosterSwipeCard().eyebrow\"\n [badge]=\"neobrutalPosterSwipeCard().badge\"\n [title]=\"neobrutalPosterSwipeCard().title\"\n [description]=\"neobrutalPosterSwipeCard().description\"\n [metricLabel]=\"neobrutalPosterSwipeCard().metricLabel\"\n [metric]=\"neobrutalPosterSwipeCard().metric\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n />\n }\n <p class=\"example-note\">{{ neobrutalPosterSwipeStatus() }}</p>\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-neo-ink);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-neo-ink);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}.demo-container .examples-block .example-row .example-item .example-note{margin:0;padding:10px 12px;border:2px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-base-accent-yellow) 20%,var(--dd-base-0));font-size:13px;font-weight:700;line-height:1.4;color:var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"] }]
|
|
5598
|
+
], 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 <dd-card-section>\n <h2>{{ 'cardDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n </dd-card-accent></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"exampleViolet.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"exampleOrange.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"exampleGray.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-accent [color]=\"colorDark\">\n <div [innerHTML]=\"exampleDark.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n </div>\n </dd-card-section>\n\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><dd-card-minimal [color]=\"colorWhite\">\n <div [innerHTML]=\"minimalExampleDefault.innerHTML\"></div>\n </dd-card-minimal></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><dd-card-outline [color]=\"colorWhite\">\n <div [innerHTML]=\"outlineExampleDefault.innerHTML\"></div>\n </dd-card-outline></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><dd-card-signal [color]=\"colorWhite\">\n <div [innerHTML]=\"signalExampleDefault.innerHTML\"></div>\n </dd-card-signal></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\n the 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><dd-card-neobrutal-slab\n [color]=\"colorOrange\"\n strapLabel=\"Swipe deck\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n>\n <h4>Launch queue</h4>\n <p>Swipe right to keep the card, swipe left to skip it.</p>\n</dd-card-neobrutal-slab></code></pre>\n <pre><code><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=\"Swipe right to keep this card in the active deck.\"\n metricLabel=\"Signal\"\n metric=\"99%\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n/></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 / Swipe</p>\n @if (neobrutalSwipeVisible()) {\n <dd-card-neobrutal-slab\n [color]=\"colorOrange\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n [strapLabel]=\"neobrutalSwipeCard().strapLabel\"\n (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n >\n <h4>{{ neobrutalSwipeCard().title }}</h4>\n <p>{{ neobrutalSwipeCard().description }}</p>\n </dd-card-neobrutal-slab>\n }\n <p class=\"example-note\">{{ neobrutalSwipeStatus() }}</p>\n </div>\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 / Swipe</p>\n @if (neobrutalPosterSwipeVisible()) {\n <dd-card-neobrutal-poster\n [color]=\"colorDark\"\n [railTop]=\"neobrutalPosterSwipeCard().railTop\"\n [railMiddle]=\"neobrutalPosterSwipeCard().railMiddle\"\n [railBottom]=\"neobrutalPosterSwipeCard().railBottom\"\n [eyebrow]=\"neobrutalPosterSwipeCard().eyebrow\"\n [badge]=\"neobrutalPosterSwipeCard().badge\"\n [title]=\"neobrutalPosterSwipeCard().title\"\n [description]=\"neobrutalPosterSwipeCard().description\"\n [metricLabel]=\"neobrutalPosterSwipeCard().metricLabel\"\n [metric]=\"neobrutalPosterSwipeCard().metric\"\n [swipeable]=\"true\"\n [swipeThreshold]=\"112\"\n (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n />\n }\n <p class=\"example-note\">{{ neobrutalPosterSwipeStatus() }}</p>\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-neo-ink);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-neo-ink);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}.demo-container .examples-block .example-row .example-item .example-note{margin:0;padding:10px 12px;border:2px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-base-accent-yellow) 20%,var(--dd-base-0));font-size:13px;font-weight:700;line-height:1.4;color:var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"] }]
|
|
5494
5599
|
}], ctorParameters: () => [] });
|
|
5495
5600
|
|
|
5496
5601
|
class DuckDevTooltip {
|
|
@@ -5544,11 +5649,11 @@ class DuckDevTooltipNeobrutalComponent {
|
|
|
5544
5649
|
this.closeTimer = setTimeout(() => this.open.set(false), delay);
|
|
5545
5650
|
}
|
|
5546
5651
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTooltipNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5547
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTooltipNeobrutalComponent, isStandalone: true, selector: "duck-dev-tooltip-neobrutal", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delayCloseMs: { classPropertyName: "delayCloseMs", publicName: "delayCloseMs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-tooltip-brutal\"\n (mouseenter)=\"handleEnter()\"\n (mouseleave)=\"handleLeave()\"\n (focusin)=\"handleEnter()\"\n (focusout)=\"handleLeave()\"\n>\n <div class=\"dd-tooltip-brutal__trigger\">\n <ng-content />\n </div>\n\n @if (open()) {\n <div\n class=\"dd-tooltip-brutal__bubble\"\n animate.enter=\"enterAnimation\"\n animate.leave=\"leaveAnimation\"\n [style.--dd-tooltip-brutal-anim-ms.ms]=\"delayCloseMs()\"\n [attr.data-placement]=\"placement()\"\n [attr.data-color]=\"color()\"\n >\n <span class=\"dd-tooltip-brutal__stamp\">Duck Dev</span>\n <span class=\"dd-tooltip-brutal__text\">{{ text() }}</span>\n <span class=\"dd-tooltip-brutal__arrow\" aria-hidden=\"true\"></span>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip-brutal{position:relative;display:inline-block}.dd-tooltip-brutal__bubble{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-text: var(--dd-base-600);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange);position:absolute;z-index:6;display:grid;gap:10px;min-width:180px;max-width:280px;padding:14px;border:4px solid var(--dd-tooltip-brutal-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tooltip-brutal-accent) 26%,transparent) 0 18%,transparent 18% 100%),var(--dd-tooltip-brutal-surface);box-shadow:8px 8px 0 var(--dd-tooltip-brutal-shadow);color:var(--dd-tooltip-brutal-text);pointer-events:none;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-color=violet]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=orange]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-pink);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=gray]{--dd-tooltip-brutal-surface: var(--dd-base-200);--dd-tooltip-brutal-accent: var(--dd-base-accent-orange);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=dark]{--dd-tooltip-brutal-surface: var(--dd-base-600);--dd-tooltip-brutal-text: var(--dd-base-0);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-secondary)}.dd-tooltip-brutal__bubble[data-color=white]{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange)}.dd-tooltip-brutal__bubble[data-placement=top],.dd-tooltip-brutal__bubble[data-placement=top-start],.dd-tooltip-brutal__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=top-start]{left:0;transform:translateY(-14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom],.dd-tooltip-brutal__bubble[data-placement=bottom-start],.dd-tooltip-brutal__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]{left:0;transform:translateY(14px) rotate(1.25deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left],.dd-tooltip-brutal__bubble[data-placement=left-start],.dd-tooltip-brutal__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-14px,-50%) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left-start]{top:0;transform:translate(-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=left-end]{top:100%;transform:translate(-14px,-100%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right],.dd-tooltip-brutal__bubble[data-placement=right-start],.dd-tooltip-brutal__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(14px,-50%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right-start]{top:0;transform:translate(14px) rotate(1.5deg)}.dd-tooltip-brutal__bubble[data-placement=right-end]{top:100%;transform:translate(14px,-100%) rotate(-1deg)}.dd-tooltip-brutal__stamp{display:inline-flex;width:fit-content;align-items:center;justify-content:center;padding:4px 8px;border:3px solid var(--dd-tooltip-brutal-border);background:var(--dd-base-0);box-shadow:3px 3px 0 var(--dd-neo-shadow);color:var(--dd-tooltip-brutal-border);font-size:10px;font-weight:900;line-height:1;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-4deg)}.dd-tooltip-brutal__bubble[data-color=dark] .dd-tooltip-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-tooltip-brutal__text{display:block;font-size:13px;line-height:1.35;font-weight:800;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}.dd-tooltip-brutal__arrow{position:absolute;width:18px;height:18px;border-right:4px solid var(--dd-tooltip-brutal-border);border-bottom:4px solid var(--dd-tooltip-brutal-border);background:var(--dd-tooltip-brutal-surface)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{bottom:-13px;transform:rotate(45deg)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{top:-13px;transform:rotate(225deg)}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{right:-13px;transform:rotate(315deg)}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{bottom:20px}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{left:-13px;transform:rotate(135deg)}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{bottom:20px}.enterAnimation{animation:enter-animation var(--dd-tooltip-brutal-anim-ms, .3s) cubic-bezier(.22,1.1,.36,1)}@keyframes enter-animation{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-brutal-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}@media(max-width:640px){.dd-tooltip-brutal__bubble{min-width:160px;max-width:min(240px,100vw - 32px);box-shadow:6px 6px 0 var(--dd-tooltip-brutal-shadow)}}\n"] });
|
|
5652
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTooltipNeobrutalComponent, isStandalone: true, selector: "duck-dev-tooltip-neobrutal", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delayCloseMs: { classPropertyName: "delayCloseMs", publicName: "delayCloseMs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-tooltip-brutal\"\n (mouseenter)=\"handleEnter()\"\n (mouseleave)=\"handleLeave()\"\n (focusin)=\"handleEnter()\"\n (focusout)=\"handleLeave()\"\n>\n <div class=\"dd-tooltip-brutal__trigger\">\n <ng-content />\n </div>\n\n @if (open()) {\n <div\n class=\"dd-tooltip-brutal__bubble\"\n animate.enter=\"enterAnimation\"\n animate.leave=\"leaveAnimation\"\n [style.--dd-tooltip-brutal-anim-ms.ms]=\"delayCloseMs()\"\n [attr.data-placement]=\"placement()\"\n [attr.data-color]=\"color()\"\n >\n <span class=\"dd-tooltip-brutal__stamp\">Duck Dev</span>\n <span class=\"dd-tooltip-brutal__text\">{{ text() }}</span>\n <span class=\"dd-tooltip-brutal__arrow\" aria-hidden=\"true\"></span>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip-brutal{position:relative;display:inline-block}.dd-tooltip-brutal__bubble{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-text: var(--dd-base-600);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange);position:absolute;z-index:6;display:grid;gap:10px;min-width:180px;max-width:280px;padding:14px;border:4px solid var(--dd-tooltip-brutal-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tooltip-brutal-accent) 26%,transparent) 0 18%,transparent 18% 100%),var(--dd-tooltip-brutal-surface);box-shadow:8px 8px 0 var(--dd-tooltip-brutal-shadow);color:var(--dd-tooltip-brutal-text);pointer-events:none;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-color=violet]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=orange]{--dd-tooltip-brutal-surface: color-mix( in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0) );--dd-tooltip-brutal-accent: var(--dd-base-accent-pink);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=gray]{--dd-tooltip-brutal-surface: var(--dd-base-200);--dd-tooltip-brutal-accent: var(--dd-base-accent-orange);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=dark]{--dd-tooltip-brutal-surface: var(--dd-base-600);--dd-tooltip-brutal-text: var(--dd-base-0);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-secondary)}.dd-tooltip-brutal__bubble[data-color=white]{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange)}.dd-tooltip-brutal__bubble[data-placement=top],.dd-tooltip-brutal__bubble[data-placement=top-start],.dd-tooltip-brutal__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=top-start]{left:0;transform:translateY(-14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom],.dd-tooltip-brutal__bubble[data-placement=bottom-start],.dd-tooltip-brutal__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]{left:0;transform:translateY(14px) rotate(1.25deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left],.dd-tooltip-brutal__bubble[data-placement=left-start],.dd-tooltip-brutal__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-14px,-50%) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left-start]{top:0;transform:translate(-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=left-end]{top:100%;transform:translate(-14px,-100%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right],.dd-tooltip-brutal__bubble[data-placement=right-start],.dd-tooltip-brutal__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(14px,-50%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right-start]{top:0;transform:translate(14px) rotate(1.5deg)}.dd-tooltip-brutal__bubble[data-placement=right-end]{top:100%;transform:translate(14px,-100%) rotate(-1deg)}.dd-tooltip-brutal__stamp{display:inline-flex;width:fit-content;align-items:center;justify-content:center;padding:4px 8px;border:3px solid var(--dd-tooltip-brutal-border);background:var(--dd-base-0);box-shadow:3px 3px 0 var(--dd-neo-shadow);color:var(--dd-tooltip-brutal-border);font-size:10px;font-weight:900;line-height:1;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-4deg)}.dd-tooltip-brutal__bubble[data-color=dark] .dd-tooltip-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-tooltip-brutal__text{display:block;font-size:13px;line-height:1.35;font-weight:800;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}.dd-tooltip-brutal__arrow{position:absolute;width:18px;height:18px;border-right:4px solid var(--dd-tooltip-brutal-border);border-bottom:4px solid var(--dd-tooltip-brutal-border);background:var(--dd-tooltip-brutal-surface)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{bottom:-13px;transform:rotate(45deg)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{top:-13px;transform:rotate(225deg)}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{right:-13px;transform:rotate(315deg)}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{bottom:20px}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{left:-13px;transform:rotate(135deg)}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{bottom:20px}.enterAnimation{animation:enter-animation var(--dd-tooltip-brutal-anim-ms, .3s) cubic-bezier(.22,1.1,.36,1)}@keyframes enter-animation{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-brutal-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}@media(max-width:640px){.dd-tooltip-brutal__bubble{min-width:160px;max-width:min(240px,100vw - 32px);box-shadow:6px 6px 0 var(--dd-tooltip-brutal-shadow)}}\n"] });
|
|
5548
5653
|
}
|
|
5549
5654
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTooltipNeobrutalComponent, decorators: [{
|
|
5550
5655
|
type: Component,
|
|
5551
|
-
args: [{ selector: 'duck-dev-tooltip-neobrutal', standalone: true, imports: [], template: "<div\n class=\"dd-tooltip-brutal\"\n (mouseenter)=\"handleEnter()\"\n (mouseleave)=\"handleLeave()\"\n (focusin)=\"handleEnter()\"\n (focusout)=\"handleLeave()\"\n>\n <div class=\"dd-tooltip-brutal__trigger\">\n <ng-content />\n </div>\n\n @if (open()) {\n <div\n class=\"dd-tooltip-brutal__bubble\"\n animate.enter=\"enterAnimation\"\n animate.leave=\"leaveAnimation\"\n [style.--dd-tooltip-brutal-anim-ms.ms]=\"delayCloseMs()\"\n [attr.data-placement]=\"placement()\"\n [attr.data-color]=\"color()\"\n >\n <span class=\"dd-tooltip-brutal__stamp\">Duck Dev</span>\n <span class=\"dd-tooltip-brutal__text\">{{ text() }}</span>\n <span class=\"dd-tooltip-brutal__arrow\" aria-hidden=\"true\"></span>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip-brutal{position:relative;display:inline-block}.dd-tooltip-brutal__bubble{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-text: var(--dd-base-600);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange);position:absolute;z-index:6;display:grid;gap:10px;min-width:180px;max-width:280px;padding:14px;border:4px solid var(--dd-tooltip-brutal-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tooltip-brutal-accent) 26%,transparent) 0 18%,transparent 18% 100%),var(--dd-tooltip-brutal-surface);box-shadow:8px 8px 0 var(--dd-tooltip-brutal-shadow);color:var(--dd-tooltip-brutal-text);pointer-events:none;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-color=violet]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=orange]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-pink);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=gray]{--dd-tooltip-brutal-surface: var(--dd-base-200);--dd-tooltip-brutal-accent: var(--dd-base-accent-orange);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=dark]{--dd-tooltip-brutal-surface: var(--dd-base-600);--dd-tooltip-brutal-text: var(--dd-base-0);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-secondary)}.dd-tooltip-brutal__bubble[data-color=white]{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange)}.dd-tooltip-brutal__bubble[data-placement=top],.dd-tooltip-brutal__bubble[data-placement=top-start],.dd-tooltip-brutal__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=top-start]{left:0;transform:translateY(-14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom],.dd-tooltip-brutal__bubble[data-placement=bottom-start],.dd-tooltip-brutal__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]{left:0;transform:translateY(14px) rotate(1.25deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left],.dd-tooltip-brutal__bubble[data-placement=left-start],.dd-tooltip-brutal__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-14px,-50%) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left-start]{top:0;transform:translate(-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=left-end]{top:100%;transform:translate(-14px,-100%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right],.dd-tooltip-brutal__bubble[data-placement=right-start],.dd-tooltip-brutal__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(14px,-50%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right-start]{top:0;transform:translate(14px) rotate(1.5deg)}.dd-tooltip-brutal__bubble[data-placement=right-end]{top:100%;transform:translate(14px,-100%) rotate(-1deg)}.dd-tooltip-brutal__stamp{display:inline-flex;width:fit-content;align-items:center;justify-content:center;padding:4px 8px;border:3px solid var(--dd-tooltip-brutal-border);background:var(--dd-base-0);box-shadow:3px 3px 0 var(--dd-neo-shadow);color:var(--dd-tooltip-brutal-border);font-size:10px;font-weight:900;line-height:1;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-4deg)}.dd-tooltip-brutal__bubble[data-color=dark] .dd-tooltip-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-tooltip-brutal__text{display:block;font-size:13px;line-height:1.35;font-weight:800;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}.dd-tooltip-brutal__arrow{position:absolute;width:18px;height:18px;border-right:4px solid var(--dd-tooltip-brutal-border);border-bottom:4px solid var(--dd-tooltip-brutal-border);background:var(--dd-tooltip-brutal-surface)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{bottom:-13px;transform:rotate(45deg)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{top:-13px;transform:rotate(225deg)}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{right:-13px;transform:rotate(315deg)}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{bottom:20px}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{left:-13px;transform:rotate(135deg)}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{bottom:20px}.enterAnimation{animation:enter-animation var(--dd-tooltip-brutal-anim-ms, .3s) cubic-bezier(.22,1.1,.36,1)}@keyframes enter-animation{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-brutal-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}@media(max-width:640px){.dd-tooltip-brutal__bubble{min-width:160px;max-width:min(240px,100vw - 32px);box-shadow:6px 6px 0 var(--dd-tooltip-brutal-shadow)}}\n"] }]
|
|
5656
|
+
args: [{ selector: 'duck-dev-tooltip-neobrutal', standalone: true, imports: [], template: "<div\n class=\"dd-tooltip-brutal\"\n (mouseenter)=\"handleEnter()\"\n (mouseleave)=\"handleLeave()\"\n (focusin)=\"handleEnter()\"\n (focusout)=\"handleLeave()\"\n>\n <div class=\"dd-tooltip-brutal__trigger\">\n <ng-content />\n </div>\n\n @if (open()) {\n <div\n class=\"dd-tooltip-brutal__bubble\"\n animate.enter=\"enterAnimation\"\n animate.leave=\"leaveAnimation\"\n [style.--dd-tooltip-brutal-anim-ms.ms]=\"delayCloseMs()\"\n [attr.data-placement]=\"placement()\"\n [attr.data-color]=\"color()\"\n >\n <span class=\"dd-tooltip-brutal__stamp\">Duck Dev</span>\n <span class=\"dd-tooltip-brutal__text\">{{ text() }}</span>\n <span class=\"dd-tooltip-brutal__arrow\" aria-hidden=\"true\"></span>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip-brutal{position:relative;display:inline-block}.dd-tooltip-brutal__bubble{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-text: var(--dd-base-600);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange);position:absolute;z-index:6;display:grid;gap:10px;min-width:180px;max-width:280px;padding:14px;border:4px solid var(--dd-tooltip-brutal-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tooltip-brutal-accent) 26%,transparent) 0 18%,transparent 18% 100%),var(--dd-tooltip-brutal-surface);box-shadow:8px 8px 0 var(--dd-tooltip-brutal-shadow);color:var(--dd-tooltip-brutal-text);pointer-events:none;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-color=violet]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=orange]{--dd-tooltip-brutal-surface: color-mix( in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0) );--dd-tooltip-brutal-accent: var(--dd-base-accent-pink);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=gray]{--dd-tooltip-brutal-surface: var(--dd-base-200);--dd-tooltip-brutal-accent: var(--dd-base-accent-orange);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=dark]{--dd-tooltip-brutal-surface: var(--dd-base-600);--dd-tooltip-brutal-text: var(--dd-base-0);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-secondary)}.dd-tooltip-brutal__bubble[data-color=white]{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange)}.dd-tooltip-brutal__bubble[data-placement=top],.dd-tooltip-brutal__bubble[data-placement=top-start],.dd-tooltip-brutal__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=top-start]{left:0;transform:translateY(-14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom],.dd-tooltip-brutal__bubble[data-placement=bottom-start],.dd-tooltip-brutal__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]{left:0;transform:translateY(14px) rotate(1.25deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left],.dd-tooltip-brutal__bubble[data-placement=left-start],.dd-tooltip-brutal__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-14px,-50%) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left-start]{top:0;transform:translate(-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=left-end]{top:100%;transform:translate(-14px,-100%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right],.dd-tooltip-brutal__bubble[data-placement=right-start],.dd-tooltip-brutal__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(14px,-50%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right-start]{top:0;transform:translate(14px) rotate(1.5deg)}.dd-tooltip-brutal__bubble[data-placement=right-end]{top:100%;transform:translate(14px,-100%) rotate(-1deg)}.dd-tooltip-brutal__stamp{display:inline-flex;width:fit-content;align-items:center;justify-content:center;padding:4px 8px;border:3px solid var(--dd-tooltip-brutal-border);background:var(--dd-base-0);box-shadow:3px 3px 0 var(--dd-neo-shadow);color:var(--dd-tooltip-brutal-border);font-size:10px;font-weight:900;line-height:1;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-4deg)}.dd-tooltip-brutal__bubble[data-color=dark] .dd-tooltip-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-tooltip-brutal__text{display:block;font-size:13px;line-height:1.35;font-weight:800;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}.dd-tooltip-brutal__arrow{position:absolute;width:18px;height:18px;border-right:4px solid var(--dd-tooltip-brutal-border);border-bottom:4px solid var(--dd-tooltip-brutal-border);background:var(--dd-tooltip-brutal-surface)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{bottom:-13px;transform:rotate(45deg)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{top:-13px;transform:rotate(225deg)}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{right:-13px;transform:rotate(315deg)}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{bottom:20px}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{left:-13px;transform:rotate(135deg)}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{bottom:20px}.enterAnimation{animation:enter-animation var(--dd-tooltip-brutal-anim-ms, .3s) cubic-bezier(.22,1.1,.36,1)}@keyframes enter-animation{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-brutal-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}@media(max-width:640px){.dd-tooltip-brutal__bubble{min-width:160px;max-width:min(240px,100vw - 32px);box-shadow:6px 6px 0 var(--dd-tooltip-brutal-shadow)}}\n"] }]
|
|
5552
5657
|
}], 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 }] }] } });
|
|
5553
5658
|
|
|
5554
5659
|
class TooltipBlock {
|
|
@@ -5567,7 +5672,7 @@ class TooltipBlock {
|
|
|
5567
5672
|
this.activeStyleTab.set(tab);
|
|
5568
5673
|
}
|
|
5569
5674
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5570
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TooltipBlock, isStandalone: true, selector: "app-tooltip-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n>\n <button>Hover me</button>\n</dd-tooltip></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n\n <ul>\n <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n <li>\n <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange, Gray,\n White.\n </li>\n <li>\n <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start |\n top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n leave (default: 120).\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n [color]=\"colorGray\"\n [placement]=\"'left-start'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n [color]=\"colorWhite\"\n [placement]=\"'bottom-end'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Tooltip</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-tooltip-neobrutal\n [text]=\"'Hot take inside brutal shell'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n>\n <button>Hover me</button>\n</duck-dev-tooltip-neobrutal></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Loud UI hint with brutal edge'\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Quick signal for actions and shortcuts'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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-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-neo-ink);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-neo-ink);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-neo-ink);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" }] });
|
|
5675
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TooltipBlock, isStandalone: true, selector: "app-tooltip-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n>\n <button>Hover me</button>\n</dd-tooltip></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n\n <ul>\n <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n <li>\n <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange,\n Gray, 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 |\n right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after\n mouse leave (default: 120).\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n [color]=\"colorGray\"\n [placement]=\"'left-start'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n [color]=\"colorWhite\"\n [placement]=\"'bottom-end'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Tooltip</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-tooltip-neobrutal\n [text]=\"'Hot take inside brutal shell'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n>\n <button>Hover me</button>\n</duck-dev-tooltip-neobrutal></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Loud UI hint with brutal edge'\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Quick signal for actions and shortcuts'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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-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-neo-ink);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-neo-ink);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-neo-ink);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" }] });
|
|
5571
5676
|
}
|
|
5572
5677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipBlock, decorators: [{
|
|
5573
5678
|
type: Component,
|
|
@@ -5579,7 +5684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5579
5684
|
DdFlexDirectionDirective,
|
|
5580
5685
|
DuckDevCardSection,
|
|
5581
5686
|
DuckDevTab,
|
|
5582
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n>\n <button>Hover me</button>\n</dd-tooltip></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n\n <ul>\n <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n <li>\n <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange, Gray,\n White.\n </li>\n <li>\n <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start |\n top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n leave (default: 120).\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n [color]=\"colorGray\"\n [placement]=\"'left-start'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n [color]=\"colorWhite\"\n [placement]=\"'bottom-end'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Tooltip</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-tooltip-neobrutal\n [text]=\"'Hot take inside brutal shell'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n>\n <button>Hover me</button>\n</duck-dev-tooltip-neobrutal></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Loud UI hint with brutal edge'\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Quick signal for actions and shortcuts'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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-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-neo-ink);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-neo-ink);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-neo-ink);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"] }]
|
|
5687
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n>\n <button>Hover me</button>\n</dd-tooltip></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n\n <ul>\n <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n <li>\n <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange,\n Gray, 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 |\n right-end\n </li>\n <li>\n <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after\n mouse leave (default: 120).\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n [color]=\"colorGray\"\n [placement]=\"'left-start'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip\n [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n [color]=\"colorWhite\"\n [placement]=\"'bottom-end'\"\n >\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n </div>\n } @else {\n <h2>Neobrutalism Tooltip</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>Neobrutalism usage</h3>\n <pre><code><duck-dev-tooltip-neobrutal\n [text]=\"'Hot take inside brutal shell'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n>\n <button>Hover me</button>\n</duck-dev-tooltip-neobrutal></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Violet</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Loud UI hint with brutal edge'\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Neobrutalism / Orange</p>\n <duck-dev-tooltip-neobrutal\n [text]=\"'Quick signal for actions and shortcuts'\"\n [color]=\"colorOrange\"\n [placement]=\"'right'\"\n >\n <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n </duck-dev-tooltip-neobrutal>\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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-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-neo-ink);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-neo-ink);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-neo-ink);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"] }]
|
|
5583
5688
|
}] });
|
|
5584
5689
|
|
|
5585
5690
|
function clampProgress(value) {
|
|
@@ -5617,11 +5722,11 @@ class DuckDevProgressStack {
|
|
|
5617
5722
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5618
5723
|
segments = computed(() => buildProgressSegments(this.percent(), this.segmentCount()), { ...(ngDevMode ? { debugName: "segments" } : {}) });
|
|
5619
5724
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5620
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressStack, isStandalone: true, selector: "duck-dev-progress-stack", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, segmentCount: { classPropertyName: "segmentCount", publicName: "segmentCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-stack\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-stack__header\">\n <div class=\"dd-progress-stack__copy\">\n <span class=\"dd-progress-stack__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-stack__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-stack__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-stack__segments\">\n @for (segment of segments(); track $index) {\n <span
|
|
5725
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressStack, isStandalone: true, selector: "duck-dev-progress-stack", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, segmentCount: { classPropertyName: "segmentCount", publicName: "segmentCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-stack\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-stack__header\">\n <div class=\"dd-progress-stack__copy\">\n <span class=\"dd-progress-stack__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-stack__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-stack__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-stack__segments\">\n @for (segment of segments(); track $index) {\n <span\n class=\"dd-progress-stack__segment\"\n [class.dd-progress-stack__segment--active]=\"segment\"\n ></span>\n }\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-stack{display:flex;flex-direction:column;gap:12px;width:100%}.dd-progress-stack__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-stack__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-stack__label{color:var(--dd-base-600);font-size:15px;font-weight:700}.dd-progress-stack__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-stack__value{color:var(--dd-base-500);font-size:14px;font-weight:700;white-space:nowrap}.dd-progress-stack__segments{display:grid;grid-template-columns:repeat(auto-fit,minmax(18px,1fr));gap:8px;width:100%}.dd-progress-stack__segment{height:14px;border-radius:999px;background:var(--dd-base-200);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--dd-base-600) 12%,transparent);transition:background-color .22s ease,transform .22s ease,box-shadow .22s ease}.dd-progress-stack__segment--active{background:linear-gradient(90deg,var(--dd-progress-fill-start),var(--dd-progress-fill-end));box-shadow:0 6px 14px color-mix(in srgb,var(--dd-progress-fill-end) 24%,transparent);transform:translateY(-1px)}.dd-progress-stack[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-stack[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-stack[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-stack[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-stack[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-100)}\n"] });
|
|
5621
5726
|
}
|
|
5622
5727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressStack, decorators: [{
|
|
5623
5728
|
type: Component,
|
|
5624
|
-
args: [{ selector: 'duck-dev-progress-stack', standalone: true, template: "<section class=\"dd-progress-stack\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-stack__header\">\n <div class=\"dd-progress-stack__copy\">\n <span class=\"dd-progress-stack__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-stack__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-stack__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-stack__segments\">\n @for (segment of segments(); track $index) {\n <span
|
|
5729
|
+
args: [{ selector: 'duck-dev-progress-stack', standalone: true, template: "<section class=\"dd-progress-stack\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-stack__header\">\n <div class=\"dd-progress-stack__copy\">\n <span class=\"dd-progress-stack__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-stack__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-stack__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-stack__segments\">\n @for (segment of segments(); track $index) {\n <span\n class=\"dd-progress-stack__segment\"\n [class.dd-progress-stack__segment--active]=\"segment\"\n ></span>\n }\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-stack{display:flex;flex-direction:column;gap:12px;width:100%}.dd-progress-stack__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-stack__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-stack__label{color:var(--dd-base-600);font-size:15px;font-weight:700}.dd-progress-stack__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-stack__value{color:var(--dd-base-500);font-size:14px;font-weight:700;white-space:nowrap}.dd-progress-stack__segments{display:grid;grid-template-columns:repeat(auto-fit,minmax(18px,1fr));gap:8px;width:100%}.dd-progress-stack__segment{height:14px;border-radius:999px;background:var(--dd-base-200);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--dd-base-600) 12%,transparent);transition:background-color .22s ease,transform .22s ease,box-shadow .22s ease}.dd-progress-stack__segment--active{background:linear-gradient(90deg,var(--dd-progress-fill-start),var(--dd-progress-fill-end));box-shadow:0 6px 14px color-mix(in srgb,var(--dd-progress-fill-end) 24%,transparent);transform:translateY(-1px)}.dd-progress-stack[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-stack[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-stack[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-stack[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-stack[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-100)}\n"] }]
|
|
5625
5730
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], segmentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "segmentCount", required: false }] }] } });
|
|
5626
5731
|
|
|
5627
5732
|
class DuckDevProgressMeter {
|
|
@@ -5697,7 +5802,7 @@ class QuickStartBlock {
|
|
|
5697
5802
|
this.activePreviewTab.set(tab);
|
|
5698
5803
|
}
|
|
5699
5804
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QuickStartBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5700
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: QuickStartBlock, isStandalone: true, selector: "app-quick-start-block", ngImport: i0, template: "<div class=\"quick-start\">\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"hero\">\n <div class=\"hero__badges\">\n <dd-badge [text]=\"'Angular 21'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signals'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'quickStart.hero.title' | transloco }}</h1>\n <p class=\"hero__subtitle\">{{ 'quickStart.hero.subtitle' | transloco }}</p>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 1 \u2014 INSTALL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.install.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <dd-card-signal [color]=\"colorViolet\">\n <small>{{ 'quickStart.install.eyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.install.cardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.install.cardText' | transloco }}</p>\n </dd-card-signal>\n\n <div class=\"code-block\">\n <div class=\"code-block__label\">angular.json</div>\n <pre><code>\"styles\": [\n \"node_modules/duck-dev-lib/styles/variables.scss\",\n \"src/styles.scss\"\n]</code></pre>\n </div>\n\n <div class=\"code-block\">\n <div class=\"code-block__label\">app.config.ts</div>\n <pre><code>import {{ '{' }} provideTransloco {{ '}' }} from '@jsverse/transloco';\n\nexport const appConfig = {{ '{' }}\n providers: [\n provideTransloco({{ '{' }}\n config: {{ '{' }} availableLangs: ['en', 'ru'], defaultLang: 'en' {{ '}' }}\n {{ '}' }})\n ]\n{{ '}' }};</code></pre>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 2 \u2014 PALETTE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.palette.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <p class=\"section-description\">{{ 'quickStart.palette.description' | transloco }}</p>\n\n <div class=\"palette-grid\">\n <div class=\"palette-group\">\n <h3>{{ 'quickStart.palette.neutralsTitle' | transloco }}</h3>\n <div class=\"swatch-row\">\n <div class=\"swatch\" style=\"background: var(--dd-base-0)\">\n <span class=\"swatch__label\">0</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-100)\">\n <span class=\"swatch__label\">100</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-200)\">\n <span class=\"swatch__label\">200</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-300)\">\n <span class=\"swatch__label\">300</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-400)\">\n <span class=\"swatch__label swatch__label--light\">400</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-500)\">\n <span class=\"swatch__label swatch__label--light\">500</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-600)\">\n <span class=\"swatch__label swatch__label--light\">600</span>\n </div>\n </div>\n </div>\n\n <div class=\"palette-group\">\n <h3>{{ 'quickStart.palette.accentsTitle' | transloco }}</h3>\n <div class=\"swatch-row\">\n <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-secondary)\">\n <span class=\"swatch__label swatch__label--light\">secondary</span>\n </div>\n <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-orange)\">\n <span class=\"swatch__label swatch__label--light\">orange</span>\n </div>\n <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-blue)\">\n <span class=\"swatch__label swatch__label--light\">blue</span>\n </div>\n </div>\n </div>\n </div>\n\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p><strong>{{ 'quickStart.palette.tipTitle' | transloco }}</strong> {{ 'quickStart.palette.tipText' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 3 \u2014 THEMES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.themes.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <div class=\"theme-cards\">\n <dd-card-minimal [color]=\"colorWhite\">\n <small>{{ 'quickStart.themes.lightEyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.themes.lightTitle' | transloco }}</h3>\n <p>{{ 'quickStart.themes.lightText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorDark\">\n <small>{{ 'quickStart.themes.darkEyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.themes.darkTitle' | transloco }}</h3>\n <p>{{ 'quickStart.themes.darkText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n\n <ng-template #themeHtmlSnippet>\n <pre class=\"accordion-code\"><code><html ddTheme=\"dark\">\n <body>\n <app-root></app-root>\n </body>\n</html></code></pre>\n </ng-template>\n\n <ng-template #themeToggleSnippet>\n <pre class=\"accordion-code\"><code>setTheme(theme: 'dark' | 'light') {{ '{' }}\n document.documentElement\n .setAttribute('ddTheme', theme);\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'quickStart.themes.htmlAccordionTitle' | transloco\"\n [content]=\"themeHtmlSnippet\"\n />\n <duck-dev-accordion\n [title]=\"'quickStart.themes.toggleAccordionTitle' | transloco\"\n [content]=\"themeToggleSnippet\"\n [color]=\"colorViolet\"\n />\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 4 \u2014 CUSTOM THEME \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.custom.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <dd-card-outline [color]=\"colorOrange\">\n <small>{{ 'quickStart.custom.eyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.custom.cardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.custom.cardText' | transloco }}</p>\n </dd-card-outline>\n\n <div class=\"code-block\">\n <div class=\"code-block__label\">styles.scss</div>\n <pre><code>[ddTheme='brand'] {{ '{' }}\n --dd-base-0: #ffffff;\n --dd-base-100: #f4f6ff;\n --dd-base-300: #dbe0ff;\n --dd-base-600: #0e1028;\n --dd-base-secondary: #6829ff;\n --dd-base-accent-orange: #fe7b20;\n --dd-base-accent-blue: #3254f3;\n{{ '}' }}</code></pre>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 5 \u2014 COLORS IN COMPONENTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'05'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.colors.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <p class=\"section-description\">{{ 'quickStart.colors.description' | transloco }}</p>\n\n <div class=\"code-block code-block--compact\">\n <div class=\"code-block__label\">AccentEnumColor</div>\n <pre><code>import {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n// Violet \u00B7 Orange \u00B7 White \u00B7 Gray \u00B7 Dark</code></pre>\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.progressTitle' | transloco }}</h3>\n <div class=\"progress-showcase\">\n <duck-dev-progress-line [label]=\"'Violet'\" [value]=\"85\" [color]=\"colorViolet\" />\n <duck-dev-progress-line [label]=\"'Orange'\" [value]=\"60\" [color]=\"colorOrange\" />\n <duck-dev-progress-line [label]=\"'Gray'\" [value]=\"40\" [color]=\"colorGray\" />\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.buttonsTitle' | transloco }}</h3>\n <div class=\"buttons-showcase\">\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.badgesTitle' | transloco }}</h3>\n <div class=\"badges-showcase\">\n <dd-badge [text]=\"'Solid'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n <dd-badge [text]=\"'Soft'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n <dd-badge [text]=\"'Outline'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'solid'\" />\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.cardsTitle' | transloco }}</h3>\n <div class=\"cards-showcase\">\n <dd-card-accent [color]=\"colorViolet\">\n <div>{{ 'quickStart.colors.cardViolet' | transloco }}</div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div>{{ 'quickStart.colors.cardOrange' | transloco }}</div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorDark\">\n <div>{{ 'quickStart.colors.cardDark' | transloco }}</div>\n </dd-card-accent>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 6 \u2014 TWO STYLES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'06'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.styles.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <p class=\"section-description\">{{ 'quickStart.styles.description' | transloco }}</p>\n\n <duck-dev-tab [tabs]=\"previewTabs\" (tabChange)=\"onPreviewTabChange($event)\">\n @if (activePreviewTab().id === 'classic') {\n <div class=\"style-preview\">\n <div class=\"style-preview__row\">\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n </div>\n <div class=\"style-preview__row\">\n <dd-badge [text]=\"'Status'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n <dd-badge [text]=\"'Label'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n <dd-badge [text]=\"'Tag'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n </div>\n <duck-dev-progress-line [label]=\"'Progress'\" [value]=\"72\" [color]=\"colorViolet\" />\n <div class=\"style-preview__cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>Classic</small>\n <h3>{{ 'quickStart.styles.classicCardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.styles.classicCardText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-signal [color]=\"colorOrange\">\n <small>Signal</small>\n <h3>{{ 'quickStart.styles.signalCardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.styles.signalCardText' | transloco }}</p>\n </dd-card-signal>\n </div>\n </div>\n }\n @if (activePreviewTab().id === 'neobrutalism') {\n <div class=\"style-preview\">\n <div class=\"style-preview__row\">\n <duck-dev-button-neobrutal-slab\n [text]=\"'Slab'\"\n [helperText]=\"'click me'\"\n [colorButton]=\"colorViolet\"\n />\n <duck-dev-button-neobrutal-slab\n [text]=\"'Action'\"\n [helperText]=\"'do it'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\">\n <p><strong>Neobrutalism</strong> \u2014 {{ 'quickStart.styles.neobrutalBubbleText' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 7 \u2014 USAGE EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'07'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.usage.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <ng-template #usageTemplate>\n <pre class=\"accordion-code\"><code><duck-dev-button-casper\n [text]=\"'Click me'\"\n [colorButton]=\"colorViolet\"\n/>\n\n<dd-badge\n [text]=\"'New'\"\n [color]=\"colorOrange\"\n [variant]=\"'solid'\"\n/>\n\n<dd-card-minimal [color]=\"colorViolet\">\n <h3>Title</h3>\n <p>Content goes here</p>\n</dd-card-minimal></code></pre>\n </ng-template>\n\n <ng-template #usageComponent>\n <pre class=\"accordion-code\"><code>import {{ '{' }} Component {{ '}' }} from '@angular/core';\nimport {{ '{' }} ButtonCasper {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} Badge {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} DuckDevCardMinimal {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n@Component({{ '{' }}\n selector: 'app-example',\n standalone: true,\n imports: [ButtonCasper, Badge, DuckDevCardMinimal],\n templateUrl: './example.html',\n{{ '}' }})\nexport class ExampleComponent {{ '{' }}\n colorViolet = AccentEnumColor.Violet;\n colorOrange = AccentEnumColor.Orange;\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'quickStart.usage.templateTitle' | transloco\"\n [content]=\"usageTemplate\"\n [color]=\"colorOrange\"\n />\n <duck-dev-accordion\n [title]=\"'quickStart.usage.componentTitle' | transloco\"\n [content]=\"usageComponent\"\n [color]=\"colorViolet\"\n />\n </div>\n\n <dd-speaker-bubble-soft [color]=\"colorGray\" [tail]=\"'left'\">\n <p>{{ 'quickStart.usage.tip' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </dd-card-section>\n </section>\n\n</div>\n", styles: [".quick-start{max-width:960px;margin:0 auto;padding:48px 24px 80px;display:flex;flex-direction:column;gap:56px}.hero{text-align:center;padding:40px 0 16px}.hero__badges{display:flex;justify-content:center;gap:10px;margin-bottom:24px}.hero h1{font-size:42px;font-weight:800;color:var(--dd-base-600);line-height:1.15;margin:0 0 16px;letter-spacing:-.02em}.hero__subtitle{font-size:18px;color:var(--dd-base-400);line-height:1.6;max-width:600px;margin:0 auto}.step__header{display:flex;align-items:center;gap:14px;margin-bottom:20px}.step__header h2{font-size:26px;font-weight:700;color:var(--dd-base-600);margin:0}.section-description{font-size:16px;line-height:1.65;color:var(--dd-base-400);margin:0 0 28px}.code-block{margin:20px 0;border-radius:10px;overflow:hidden;border:1px solid var(--dd-base-300)}.code-block__label{padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dd-base-300);background:var(--dd-base-600);border-bottom:1px solid var(--dd-base-500)}.code-block pre{margin:0;padding:20px;background:var(--dd-base-600);overflow-x:auto}.code-block pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.code-block--compact{margin:0 0 28px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.palette-grid{display:flex;flex-direction:column;gap:28px;margin-bottom:32px}.palette-group h3{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}.swatch-row{display:flex;gap:6px;flex-wrap:wrap}.swatch{flex:1;min-width:60px;height:64px;border-radius:10px;border:1px solid var(--dd-base-300);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:transform .2s ease,box-shadow .2s ease}.swatch:hover{transform:translateY(-3px);box-shadow:0 6px 20px -8px var(--dd-base-300)}.swatch__label{font-size:11px;font-weight:600;color:var(--dd-base-500)}.swatch__label--light{color:var(--dd-base-0)}.swatch--accent{min-width:100px;height:72px}.theme-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}.accordion-row{display:flex;flex-direction:column;gap:12px;margin-top:20px}.showcase-title{font-size:15px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.04em;margin:32px 0 16px}.progress-showcase{display:flex;flex-direction:column;gap:16px}.buttons-showcase{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.badges-showcase{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.cards-showcase{display:flex;flex-direction:column;gap:12px}.style-preview{display:flex;flex-direction:column;gap:24px;padding:8px 0}.style-preview__row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.style-preview__cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:768px){.quick-start{padding:24px 16px 60px;gap:40px}.hero h1{font-size:30px}.hero__subtitle{font-size:16px}.step__header h2{font-size:22px}.theme-cards{grid-template-columns:1fr}.swatch{min-width:40px;height:52px}.swatch--accent{min-width:70px}.style-preview__cards{grid-template-columns:1fr}}@media(max-width:480px){.hero h1{font-size:26px}.buttons-showcase{flex-direction:column;align-items:flex-start}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevCardSignal, selector: "dd-card-signal", inputs: ["color"] }, { kind: "component", type: DuckDevCardOutline, selector: "dd-card-outline", inputs: ["color"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "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: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevProgressLine, selector: "duck-dev-progress-line", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5805
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: QuickStartBlock, isStandalone: true, selector: "app-quick-start-block", ngImport: i0, template: "<div class=\"quick-start\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"hero\">\n <div class=\"hero__badges\">\n <dd-badge [text]=\"'Angular 21'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signals'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'quickStart.hero.title' | transloco }}</h1>\n <p class=\"hero__subtitle\">{{ 'quickStart.hero.subtitle' | transloco }}</p>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 1 \u2014 INSTALL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.install.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <dd-card-signal [color]=\"colorViolet\">\n <small>{{ 'quickStart.install.eyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.install.cardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.install.cardText' | transloco }}</p>\n </dd-card-signal>\n\n <div class=\"code-block\">\n <div class=\"code-block__label\">angular.json</div>\n <pre><code>\"styles\": [\n \"node_modules/duck-dev-lib/styles/variables.scss\",\n \"src/styles.scss\"\n]</code></pre>\n </div>\n\n <div class=\"code-block\">\n <div class=\"code-block__label\">app.config.ts</div>\n <pre><code>import {{ '{' }} provideTransloco {{ '}' }} from '@jsverse/transloco';\n\nexport const appConfig = {{ '{' }}\n providers: [\n provideTransloco({{ '{' }}\n config: {{ '{' }} availableLangs: ['en', 'ru'], defaultLang: 'en' {{ '}' }}\n {{ '}' }})\n ]\n{{ '}' }};</code></pre>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 2 \u2014 PALETTE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.palette.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <p class=\"section-description\">{{ 'quickStart.palette.description' | transloco }}</p>\n\n <div class=\"palette-grid\">\n <div class=\"palette-group\">\n <h3>{{ 'quickStart.palette.neutralsTitle' | transloco }}</h3>\n <div class=\"swatch-row\">\n <div class=\"swatch\" style=\"background: var(--dd-base-0)\">\n <span class=\"swatch__label\">0</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-100)\">\n <span class=\"swatch__label\">100</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-200)\">\n <span class=\"swatch__label\">200</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-300)\">\n <span class=\"swatch__label\">300</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-400)\">\n <span class=\"swatch__label swatch__label--light\">400</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-500)\">\n <span class=\"swatch__label swatch__label--light\">500</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-600)\">\n <span class=\"swatch__label swatch__label--light\">600</span>\n </div>\n </div>\n </div>\n\n <div class=\"palette-group\">\n <h3>{{ 'quickStart.palette.accentsTitle' | transloco }}</h3>\n <div class=\"swatch-row\">\n <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-secondary)\">\n <span class=\"swatch__label swatch__label--light\">secondary</span>\n </div>\n <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-orange)\">\n <span class=\"swatch__label swatch__label--light\">orange</span>\n </div>\n <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-blue)\">\n <span class=\"swatch__label swatch__label--light\">blue</span>\n </div>\n </div>\n </div>\n </div>\n\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'quickStart.palette.tipTitle' | transloco }}</strong>\n {{ 'quickStart.palette.tipText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 3 \u2014 THEMES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.themes.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <div class=\"theme-cards\">\n <dd-card-minimal [color]=\"colorWhite\">\n <small>{{ 'quickStart.themes.lightEyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.themes.lightTitle' | transloco }}</h3>\n <p>{{ 'quickStart.themes.lightText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorDark\">\n <small>{{ 'quickStart.themes.darkEyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.themes.darkTitle' | transloco }}</h3>\n <p>{{ 'quickStart.themes.darkText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n\n <ng-template #themeHtmlSnippet>\n <pre class=\"accordion-code\"><code><html ddTheme=\"dark\">\n <body>\n <app-root></app-root>\n </body>\n</html></code></pre>\n </ng-template>\n\n <ng-template #themeToggleSnippet>\n <pre class=\"accordion-code\"><code>setTheme(theme: 'dark' | 'light') {{ '{' }}\n document.documentElement\n .setAttribute('ddTheme', theme);\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'quickStart.themes.htmlAccordionTitle' | transloco\"\n [content]=\"themeHtmlSnippet\"\n />\n <duck-dev-accordion\n [title]=\"'quickStart.themes.toggleAccordionTitle' | transloco\"\n [content]=\"themeToggleSnippet\"\n [color]=\"colorViolet\"\n />\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 4 \u2014 CUSTOM THEME \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.custom.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <dd-card-outline [color]=\"colorOrange\">\n <small>{{ 'quickStart.custom.eyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.custom.cardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.custom.cardText' | transloco }}</p>\n </dd-card-outline>\n\n <div class=\"code-block\">\n <div class=\"code-block__label\">styles.scss</div>\n <pre><code>[ddTheme='brand'] {{ '{' }}\n --dd-base-0: #ffffff;\n --dd-base-100: #f4f6ff;\n --dd-base-300: #dbe0ff;\n --dd-base-600: #0e1028;\n --dd-base-secondary: #6829ff;\n --dd-base-accent-orange: #fe7b20;\n --dd-base-accent-blue: #3254f3;\n{{ '}' }}</code></pre>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 5 \u2014 COLORS IN COMPONENTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'05'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.colors.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <p class=\"section-description\">{{ 'quickStart.colors.description' | transloco }}</p>\n\n <div class=\"code-block code-block--compact\">\n <div class=\"code-block__label\">AccentEnumColor</div>\n <pre><code>import {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n// Violet \u00B7 Orange \u00B7 White \u00B7 Gray \u00B7 Dark</code></pre>\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.progressTitle' | transloco }}</h3>\n <div class=\"progress-showcase\">\n <duck-dev-progress-line [label]=\"'Violet'\" [value]=\"85\" [color]=\"colorViolet\" />\n <duck-dev-progress-line [label]=\"'Orange'\" [value]=\"60\" [color]=\"colorOrange\" />\n <duck-dev-progress-line [label]=\"'Gray'\" [value]=\"40\" [color]=\"colorGray\" />\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.buttonsTitle' | transloco }}</h3>\n <div class=\"buttons-showcase\">\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.badgesTitle' | transloco }}</h3>\n <div class=\"badges-showcase\">\n <dd-badge [text]=\"'Solid'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n <dd-badge [text]=\"'Soft'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n <dd-badge [text]=\"'Outline'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'solid'\" />\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.cardsTitle' | transloco }}</h3>\n <div class=\"cards-showcase\">\n <dd-card-accent [color]=\"colorViolet\">\n <div>{{ 'quickStart.colors.cardViolet' | transloco }}</div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div>{{ 'quickStart.colors.cardOrange' | transloco }}</div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorDark\">\n <div>{{ 'quickStart.colors.cardDark' | transloco }}</div>\n </dd-card-accent>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 6 \u2014 TWO STYLES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'06'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.styles.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <p class=\"section-description\">{{ 'quickStart.styles.description' | transloco }}</p>\n\n <duck-dev-tab [tabs]=\"previewTabs\" (tabChange)=\"onPreviewTabChange($event)\">\n @if (activePreviewTab().id === 'classic') {\n <div class=\"style-preview\">\n <div class=\"style-preview__row\">\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n </div>\n <div class=\"style-preview__row\">\n <dd-badge [text]=\"'Status'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n <dd-badge [text]=\"'Label'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n <dd-badge [text]=\"'Tag'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n </div>\n <duck-dev-progress-line [label]=\"'Progress'\" [value]=\"72\" [color]=\"colorViolet\" />\n <div class=\"style-preview__cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>Classic</small>\n <h3>{{ 'quickStart.styles.classicCardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.styles.classicCardText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-signal [color]=\"colorOrange\">\n <small>Signal</small>\n <h3>{{ 'quickStart.styles.signalCardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.styles.signalCardText' | transloco }}</p>\n </dd-card-signal>\n </div>\n </div>\n }\n @if (activePreviewTab().id === 'neobrutalism') {\n <div class=\"style-preview\">\n <div class=\"style-preview__row\">\n <duck-dev-button-neobrutal-slab\n [text]=\"'Slab'\"\n [helperText]=\"'click me'\"\n [colorButton]=\"colorViolet\"\n />\n <duck-dev-button-neobrutal-slab\n [text]=\"'Action'\"\n [helperText]=\"'do it'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\">\n <p>\n <strong>Neobrutalism</strong> \u2014\n {{ 'quickStart.styles.neobrutalBubbleText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 7 \u2014 USAGE EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'07'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.usage.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <ng-template #usageTemplate>\n <pre class=\"accordion-code\"><code><duck-dev-button-casper\n [text]=\"'Click me'\"\n [colorButton]=\"colorViolet\"\n/>\n\n<dd-badge\n [text]=\"'New'\"\n [color]=\"colorOrange\"\n [variant]=\"'solid'\"\n/>\n\n<dd-card-minimal [color]=\"colorViolet\">\n <h3>Title</h3>\n <p>Content goes here</p>\n</dd-card-minimal></code></pre>\n </ng-template>\n\n <ng-template #usageComponent>\n <pre\n class=\"accordion-code\"\n ><code>import {{ '{' }} Component {{ '}' }} from '@angular/core';\nimport {{ '{' }} ButtonCasper {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} Badge {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} DuckDevCardMinimal {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n@Component({{ '{' }}\n selector: 'app-example',\n standalone: true,\n imports: [ButtonCasper, Badge, DuckDevCardMinimal],\n templateUrl: './example.html',\n{{ '}' }})\nexport class ExampleComponent {{ '{' }}\n colorViolet = AccentEnumColor.Violet;\n colorOrange = AccentEnumColor.Orange;\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'quickStart.usage.templateTitle' | transloco\"\n [content]=\"usageTemplate\"\n [color]=\"colorOrange\"\n />\n <duck-dev-accordion\n [title]=\"'quickStart.usage.componentTitle' | transloco\"\n [content]=\"usageComponent\"\n [color]=\"colorViolet\"\n />\n </div>\n\n <dd-speaker-bubble-soft [color]=\"colorGray\" [tail]=\"'left'\">\n <p>{{ 'quickStart.usage.tip' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </dd-card-section>\n </section>\n</div>\n", styles: [".quick-start{max-width:960px;margin:0 auto;padding:48px 24px 80px;display:flex;flex-direction:column;gap:56px}.hero{text-align:center;padding:40px 0 16px}.hero__badges{display:flex;justify-content:center;gap:10px;margin-bottom:24px}.hero h1{font-size:42px;font-weight:800;color:var(--dd-base-600);line-height:1.15;margin:0 0 16px;letter-spacing:-.02em}.hero__subtitle{font-size:18px;color:var(--dd-base-400);line-height:1.6;max-width:600px;margin:0 auto}.step__header{display:flex;align-items:center;gap:14px;margin-bottom:20px}.step__header h2{font-size:26px;font-weight:700;color:var(--dd-base-600);margin:0}.section-description{font-size:16px;line-height:1.65;color:var(--dd-base-400);margin:0 0 28px}.code-block{margin:20px 0;border-radius:10px;overflow:hidden;border:1px solid var(--dd-base-300)}.code-block__label{padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dd-base-300);background:var(--dd-base-600);border-bottom:1px solid var(--dd-base-500)}.code-block pre{margin:0;padding:20px;background:var(--dd-base-600);overflow-x:auto}.code-block pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.code-block--compact{margin:0 0 28px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.palette-grid{display:flex;flex-direction:column;gap:28px;margin-bottom:32px}.palette-group h3{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}.swatch-row{display:flex;gap:6px;flex-wrap:wrap}.swatch{flex:1;min-width:60px;height:64px;border-radius:10px;border:1px solid var(--dd-base-300);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:transform .2s ease,box-shadow .2s ease}.swatch:hover{transform:translateY(-3px);box-shadow:0 6px 20px -8px var(--dd-base-300)}.swatch__label{font-size:11px;font-weight:600;color:var(--dd-base-500)}.swatch__label--light{color:var(--dd-base-0)}.swatch--accent{min-width:100px;height:72px}.theme-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}.accordion-row{display:flex;flex-direction:column;gap:12px;margin-top:20px}.showcase-title{font-size:15px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.04em;margin:32px 0 16px}.progress-showcase{display:flex;flex-direction:column;gap:16px}.buttons-showcase{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.badges-showcase{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.cards-showcase{display:flex;flex-direction:column;gap:12px}.style-preview{display:flex;flex-direction:column;gap:24px;padding:8px 0}.style-preview__row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.style-preview__cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:768px){.quick-start{padding:24px 16px 60px;gap:40px}.hero h1{font-size:30px}.hero__subtitle{font-size:16px}.step__header h2{font-size:22px}.theme-cards{grid-template-columns:1fr}.swatch{min-width:40px;height:52px}.swatch--accent{min-width:70px}.style-preview__cards{grid-template-columns:1fr}}@media(max-width:480px){.hero h1{font-size:26px}.buttons-showcase{flex-direction:column;align-items:flex-start}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevCardSignal, selector: "dd-card-signal", inputs: ["color"] }, { kind: "component", type: DuckDevCardOutline, selector: "dd-card-outline", inputs: ["color"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "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: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevProgressLine, selector: "duck-dev-progress-line", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5701
5806
|
}
|
|
5702
5807
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QuickStartBlock, decorators: [{
|
|
5703
5808
|
type: Component,
|
|
@@ -5717,7 +5822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5717
5822
|
DuckDevProgressLine,
|
|
5718
5823
|
DuckDevSpeakerBubbleSoft,
|
|
5719
5824
|
DuckDevTab,
|
|
5720
|
-
], template: "<div class=\"quick-start\">\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"hero\">\n <div class=\"hero__badges\">\n <dd-badge [text]=\"'Angular 21'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signals'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'quickStart.hero.title' | transloco }}</h1>\n <p class=\"hero__subtitle\">{{ 'quickStart.hero.subtitle' | transloco }}</p>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 1 \u2014 INSTALL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.install.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <dd-card-signal [color]=\"colorViolet\">\n <small>{{ 'quickStart.install.eyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.install.cardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.install.cardText' | transloco }}</p>\n </dd-card-signal>\n\n <div class=\"code-block\">\n <div class=\"code-block__label\">angular.json</div>\n <pre><code>\"styles\": [\n \"node_modules/duck-dev-lib/styles/variables.scss\",\n \"src/styles.scss\"\n]</code></pre>\n </div>\n\n <div class=\"code-block\">\n <div class=\"code-block__label\">app.config.ts</div>\n <pre><code>import {{ '{' }} provideTransloco {{ '}' }} from '@jsverse/transloco';\n\nexport const appConfig = {{ '{' }}\n providers: [\n provideTransloco({{ '{' }}\n config: {{ '{' }} availableLangs: ['en', 'ru'], defaultLang: 'en' {{ '}' }}\n {{ '}' }})\n ]\n{{ '}' }};</code></pre>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 2 \u2014 PALETTE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.palette.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <p class=\"section-description\">{{ 'quickStart.palette.description' | transloco }}</p>\n\n <div class=\"palette-grid\">\n <div class=\"palette-group\">\n <h3>{{ 'quickStart.palette.neutralsTitle' | transloco }}</h3>\n <div class=\"swatch-row\">\n <div class=\"swatch\" style=\"background: var(--dd-base-0)\">\n <span class=\"swatch__label\">0</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-100)\">\n <span class=\"swatch__label\">100</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-200)\">\n <span class=\"swatch__label\">200</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-300)\">\n <span class=\"swatch__label\">300</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-400)\">\n <span class=\"swatch__label swatch__label--light\">400</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-500)\">\n <span class=\"swatch__label swatch__label--light\">500</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-600)\">\n <span class=\"swatch__label swatch__label--light\">600</span>\n </div>\n </div>\n </div>\n\n <div class=\"palette-group\">\n <h3>{{ 'quickStart.palette.accentsTitle' | transloco }}</h3>\n <div class=\"swatch-row\">\n <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-secondary)\">\n <span class=\"swatch__label swatch__label--light\">secondary</span>\n </div>\n <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-orange)\">\n <span class=\"swatch__label swatch__label--light\">orange</span>\n </div>\n <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-blue)\">\n <span class=\"swatch__label swatch__label--light\">blue</span>\n </div>\n </div>\n </div>\n </div>\n\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p><strong>{{ 'quickStart.palette.tipTitle' | transloco }}</strong> {{ 'quickStart.palette.tipText' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 3 \u2014 THEMES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.themes.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <div class=\"theme-cards\">\n <dd-card-minimal [color]=\"colorWhite\">\n <small>{{ 'quickStart.themes.lightEyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.themes.lightTitle' | transloco }}</h3>\n <p>{{ 'quickStart.themes.lightText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorDark\">\n <small>{{ 'quickStart.themes.darkEyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.themes.darkTitle' | transloco }}</h3>\n <p>{{ 'quickStart.themes.darkText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n\n <ng-template #themeHtmlSnippet>\n <pre class=\"accordion-code\"><code><html ddTheme=\"dark\">\n <body>\n <app-root></app-root>\n </body>\n</html></code></pre>\n </ng-template>\n\n <ng-template #themeToggleSnippet>\n <pre class=\"accordion-code\"><code>setTheme(theme: 'dark' | 'light') {{ '{' }}\n document.documentElement\n .setAttribute('ddTheme', theme);\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'quickStart.themes.htmlAccordionTitle' | transloco\"\n [content]=\"themeHtmlSnippet\"\n />\n <duck-dev-accordion\n [title]=\"'quickStart.themes.toggleAccordionTitle' | transloco\"\n [content]=\"themeToggleSnippet\"\n [color]=\"colorViolet\"\n />\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 4 \u2014 CUSTOM THEME \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.custom.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <dd-card-outline [color]=\"colorOrange\">\n <small>{{ 'quickStart.custom.eyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.custom.cardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.custom.cardText' | transloco }}</p>\n </dd-card-outline>\n\n <div class=\"code-block\">\n <div class=\"code-block__label\">styles.scss</div>\n <pre><code>[ddTheme='brand'] {{ '{' }}\n --dd-base-0: #ffffff;\n --dd-base-100: #f4f6ff;\n --dd-base-300: #dbe0ff;\n --dd-base-600: #0e1028;\n --dd-base-secondary: #6829ff;\n --dd-base-accent-orange: #fe7b20;\n --dd-base-accent-blue: #3254f3;\n{{ '}' }}</code></pre>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 5 \u2014 COLORS IN COMPONENTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'05'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.colors.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <p class=\"section-description\">{{ 'quickStart.colors.description' | transloco }}</p>\n\n <div class=\"code-block code-block--compact\">\n <div class=\"code-block__label\">AccentEnumColor</div>\n <pre><code>import {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n// Violet \u00B7 Orange \u00B7 White \u00B7 Gray \u00B7 Dark</code></pre>\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.progressTitle' | transloco }}</h3>\n <div class=\"progress-showcase\">\n <duck-dev-progress-line [label]=\"'Violet'\" [value]=\"85\" [color]=\"colorViolet\" />\n <duck-dev-progress-line [label]=\"'Orange'\" [value]=\"60\" [color]=\"colorOrange\" />\n <duck-dev-progress-line [label]=\"'Gray'\" [value]=\"40\" [color]=\"colorGray\" />\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.buttonsTitle' | transloco }}</h3>\n <div class=\"buttons-showcase\">\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.badgesTitle' | transloco }}</h3>\n <div class=\"badges-showcase\">\n <dd-badge [text]=\"'Solid'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n <dd-badge [text]=\"'Soft'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n <dd-badge [text]=\"'Outline'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'solid'\" />\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.cardsTitle' | transloco }}</h3>\n <div class=\"cards-showcase\">\n <dd-card-accent [color]=\"colorViolet\">\n <div>{{ 'quickStart.colors.cardViolet' | transloco }}</div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div>{{ 'quickStart.colors.cardOrange' | transloco }}</div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorDark\">\n <div>{{ 'quickStart.colors.cardDark' | transloco }}</div>\n </dd-card-accent>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 6 \u2014 TWO STYLES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'06'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.styles.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <p class=\"section-description\">{{ 'quickStart.styles.description' | transloco }}</p>\n\n <duck-dev-tab [tabs]=\"previewTabs\" (tabChange)=\"onPreviewTabChange($event)\">\n @if (activePreviewTab().id === 'classic') {\n <div class=\"style-preview\">\n <div class=\"style-preview__row\">\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n </div>\n <div class=\"style-preview__row\">\n <dd-badge [text]=\"'Status'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n <dd-badge [text]=\"'Label'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n <dd-badge [text]=\"'Tag'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n </div>\n <duck-dev-progress-line [label]=\"'Progress'\" [value]=\"72\" [color]=\"colorViolet\" />\n <div class=\"style-preview__cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>Classic</small>\n <h3>{{ 'quickStart.styles.classicCardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.styles.classicCardText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-signal [color]=\"colorOrange\">\n <small>Signal</small>\n <h3>{{ 'quickStart.styles.signalCardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.styles.signalCardText' | transloco }}</p>\n </dd-card-signal>\n </div>\n </div>\n }\n @if (activePreviewTab().id === 'neobrutalism') {\n <div class=\"style-preview\">\n <div class=\"style-preview__row\">\n <duck-dev-button-neobrutal-slab\n [text]=\"'Slab'\"\n [helperText]=\"'click me'\"\n [colorButton]=\"colorViolet\"\n />\n <duck-dev-button-neobrutal-slab\n [text]=\"'Action'\"\n [helperText]=\"'do it'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\">\n <p><strong>Neobrutalism</strong> \u2014 {{ 'quickStart.styles.neobrutalBubbleText' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 7 \u2014 USAGE EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'07'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.usage.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <ng-template #usageTemplate>\n <pre class=\"accordion-code\"><code><duck-dev-button-casper\n [text]=\"'Click me'\"\n [colorButton]=\"colorViolet\"\n/>\n\n<dd-badge\n [text]=\"'New'\"\n [color]=\"colorOrange\"\n [variant]=\"'solid'\"\n/>\n\n<dd-card-minimal [color]=\"colorViolet\">\n <h3>Title</h3>\n <p>Content goes here</p>\n</dd-card-minimal></code></pre>\n </ng-template>\n\n <ng-template #usageComponent>\n <pre class=\"accordion-code\"><code>import {{ '{' }} Component {{ '}' }} from '@angular/core';\nimport {{ '{' }} ButtonCasper {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} Badge {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} DuckDevCardMinimal {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n@Component({{ '{' }}\n selector: 'app-example',\n standalone: true,\n imports: [ButtonCasper, Badge, DuckDevCardMinimal],\n templateUrl: './example.html',\n{{ '}' }})\nexport class ExampleComponent {{ '{' }}\n colorViolet = AccentEnumColor.Violet;\n colorOrange = AccentEnumColor.Orange;\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'quickStart.usage.templateTitle' | transloco\"\n [content]=\"usageTemplate\"\n [color]=\"colorOrange\"\n />\n <duck-dev-accordion\n [title]=\"'quickStart.usage.componentTitle' | transloco\"\n [content]=\"usageComponent\"\n [color]=\"colorViolet\"\n />\n </div>\n\n <dd-speaker-bubble-soft [color]=\"colorGray\" [tail]=\"'left'\">\n <p>{{ 'quickStart.usage.tip' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </dd-card-section>\n </section>\n\n</div>\n", styles: [".quick-start{max-width:960px;margin:0 auto;padding:48px 24px 80px;display:flex;flex-direction:column;gap:56px}.hero{text-align:center;padding:40px 0 16px}.hero__badges{display:flex;justify-content:center;gap:10px;margin-bottom:24px}.hero h1{font-size:42px;font-weight:800;color:var(--dd-base-600);line-height:1.15;margin:0 0 16px;letter-spacing:-.02em}.hero__subtitle{font-size:18px;color:var(--dd-base-400);line-height:1.6;max-width:600px;margin:0 auto}.step__header{display:flex;align-items:center;gap:14px;margin-bottom:20px}.step__header h2{font-size:26px;font-weight:700;color:var(--dd-base-600);margin:0}.section-description{font-size:16px;line-height:1.65;color:var(--dd-base-400);margin:0 0 28px}.code-block{margin:20px 0;border-radius:10px;overflow:hidden;border:1px solid var(--dd-base-300)}.code-block__label{padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dd-base-300);background:var(--dd-base-600);border-bottom:1px solid var(--dd-base-500)}.code-block pre{margin:0;padding:20px;background:var(--dd-base-600);overflow-x:auto}.code-block pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.code-block--compact{margin:0 0 28px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.palette-grid{display:flex;flex-direction:column;gap:28px;margin-bottom:32px}.palette-group h3{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}.swatch-row{display:flex;gap:6px;flex-wrap:wrap}.swatch{flex:1;min-width:60px;height:64px;border-radius:10px;border:1px solid var(--dd-base-300);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:transform .2s ease,box-shadow .2s ease}.swatch:hover{transform:translateY(-3px);box-shadow:0 6px 20px -8px var(--dd-base-300)}.swatch__label{font-size:11px;font-weight:600;color:var(--dd-base-500)}.swatch__label--light{color:var(--dd-base-0)}.swatch--accent{min-width:100px;height:72px}.theme-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}.accordion-row{display:flex;flex-direction:column;gap:12px;margin-top:20px}.showcase-title{font-size:15px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.04em;margin:32px 0 16px}.progress-showcase{display:flex;flex-direction:column;gap:16px}.buttons-showcase{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.badges-showcase{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.cards-showcase{display:flex;flex-direction:column;gap:12px}.style-preview{display:flex;flex-direction:column;gap:24px;padding:8px 0}.style-preview__row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.style-preview__cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:768px){.quick-start{padding:24px 16px 60px;gap:40px}.hero h1{font-size:30px}.hero__subtitle{font-size:16px}.step__header h2{font-size:22px}.theme-cards{grid-template-columns:1fr}.swatch{min-width:40px;height:52px}.swatch--accent{min-width:70px}.style-preview__cards{grid-template-columns:1fr}}@media(max-width:480px){.hero h1{font-size:26px}.buttons-showcase{flex-direction:column;align-items:flex-start}}\n"] }]
|
|
5825
|
+
], template: "<div class=\"quick-start\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"hero\">\n <div class=\"hero__badges\">\n <dd-badge [text]=\"'Angular 21'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signals'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Standalone'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'quickStart.hero.title' | transloco }}</h1>\n <p class=\"hero__subtitle\">{{ 'quickStart.hero.subtitle' | transloco }}</p>\n </header>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 1 \u2014 INSTALL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.install.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <dd-card-signal [color]=\"colorViolet\">\n <small>{{ 'quickStart.install.eyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.install.cardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.install.cardText' | transloco }}</p>\n </dd-card-signal>\n\n <div class=\"code-block\">\n <div class=\"code-block__label\">angular.json</div>\n <pre><code>\"styles\": [\n \"node_modules/duck-dev-lib/styles/variables.scss\",\n \"src/styles.scss\"\n]</code></pre>\n </div>\n\n <div class=\"code-block\">\n <div class=\"code-block__label\">app.config.ts</div>\n <pre><code>import {{ '{' }} provideTransloco {{ '}' }} from '@jsverse/transloco';\n\nexport const appConfig = {{ '{' }}\n providers: [\n provideTransloco({{ '{' }}\n config: {{ '{' }} availableLangs: ['en', 'ru'], defaultLang: 'en' {{ '}' }}\n {{ '}' }})\n ]\n{{ '}' }};</code></pre>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 2 \u2014 PALETTE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.palette.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <p class=\"section-description\">{{ 'quickStart.palette.description' | transloco }}</p>\n\n <div class=\"palette-grid\">\n <div class=\"palette-group\">\n <h3>{{ 'quickStart.palette.neutralsTitle' | transloco }}</h3>\n <div class=\"swatch-row\">\n <div class=\"swatch\" style=\"background: var(--dd-base-0)\">\n <span class=\"swatch__label\">0</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-100)\">\n <span class=\"swatch__label\">100</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-200)\">\n <span class=\"swatch__label\">200</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-300)\">\n <span class=\"swatch__label\">300</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-400)\">\n <span class=\"swatch__label swatch__label--light\">400</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-500)\">\n <span class=\"swatch__label swatch__label--light\">500</span>\n </div>\n <div class=\"swatch\" style=\"background: var(--dd-base-600)\">\n <span class=\"swatch__label swatch__label--light\">600</span>\n </div>\n </div>\n </div>\n\n <div class=\"palette-group\">\n <h3>{{ 'quickStart.palette.accentsTitle' | transloco }}</h3>\n <div class=\"swatch-row\">\n <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-secondary)\">\n <span class=\"swatch__label swatch__label--light\">secondary</span>\n </div>\n <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-orange)\">\n <span class=\"swatch__label swatch__label--light\">orange</span>\n </div>\n <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-blue)\">\n <span class=\"swatch__label swatch__label--light\">blue</span>\n </div>\n </div>\n </div>\n </div>\n\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'quickStart.palette.tipTitle' | transloco }}</strong>\n {{ 'quickStart.palette.tipText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 3 \u2014 THEMES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.themes.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <div class=\"theme-cards\">\n <dd-card-minimal [color]=\"colorWhite\">\n <small>{{ 'quickStart.themes.lightEyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.themes.lightTitle' | transloco }}</h3>\n <p>{{ 'quickStart.themes.lightText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorDark\">\n <small>{{ 'quickStart.themes.darkEyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.themes.darkTitle' | transloco }}</h3>\n <p>{{ 'quickStart.themes.darkText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n\n <ng-template #themeHtmlSnippet>\n <pre class=\"accordion-code\"><code><html ddTheme=\"dark\">\n <body>\n <app-root></app-root>\n </body>\n</html></code></pre>\n </ng-template>\n\n <ng-template #themeToggleSnippet>\n <pre class=\"accordion-code\"><code>setTheme(theme: 'dark' | 'light') {{ '{' }}\n document.documentElement\n .setAttribute('ddTheme', theme);\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'quickStart.themes.htmlAccordionTitle' | transloco\"\n [content]=\"themeHtmlSnippet\"\n />\n <duck-dev-accordion\n [title]=\"'quickStart.themes.toggleAccordionTitle' | transloco\"\n [content]=\"themeToggleSnippet\"\n [color]=\"colorViolet\"\n />\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 4 \u2014 CUSTOM THEME \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.custom.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <dd-card-outline [color]=\"colorOrange\">\n <small>{{ 'quickStart.custom.eyebrow' | transloco }}</small>\n <h3>{{ 'quickStart.custom.cardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.custom.cardText' | transloco }}</p>\n </dd-card-outline>\n\n <div class=\"code-block\">\n <div class=\"code-block__label\">styles.scss</div>\n <pre><code>[ddTheme='brand'] {{ '{' }}\n --dd-base-0: #ffffff;\n --dd-base-100: #f4f6ff;\n --dd-base-300: #dbe0ff;\n --dd-base-600: #0e1028;\n --dd-base-secondary: #6829ff;\n --dd-base-accent-orange: #fe7b20;\n --dd-base-accent-blue: #3254f3;\n{{ '}' }}</code></pre>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 5 \u2014 COLORS IN COMPONENTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'05'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.colors.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <p class=\"section-description\">{{ 'quickStart.colors.description' | transloco }}</p>\n\n <div class=\"code-block code-block--compact\">\n <div class=\"code-block__label\">AccentEnumColor</div>\n <pre><code>import {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n// Violet \u00B7 Orange \u00B7 White \u00B7 Gray \u00B7 Dark</code></pre>\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.progressTitle' | transloco }}</h3>\n <div class=\"progress-showcase\">\n <duck-dev-progress-line [label]=\"'Violet'\" [value]=\"85\" [color]=\"colorViolet\" />\n <duck-dev-progress-line [label]=\"'Orange'\" [value]=\"60\" [color]=\"colorOrange\" />\n <duck-dev-progress-line [label]=\"'Gray'\" [value]=\"40\" [color]=\"colorGray\" />\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.buttonsTitle' | transloco }}</h3>\n <div class=\"buttons-showcase\">\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.badgesTitle' | transloco }}</h3>\n <div class=\"badges-showcase\">\n <dd-badge [text]=\"'Solid'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n <dd-badge [text]=\"'Soft'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n <dd-badge [text]=\"'Outline'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'solid'\" />\n </div>\n\n <h3 class=\"showcase-title\">{{ 'quickStart.colors.cardsTitle' | transloco }}</h3>\n <div class=\"cards-showcase\">\n <dd-card-accent [color]=\"colorViolet\">\n <div>{{ 'quickStart.colors.cardViolet' | transloco }}</div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div>{{ 'quickStart.colors.cardOrange' | transloco }}</div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorDark\">\n <div>{{ 'quickStart.colors.cardDark' | transloco }}</div>\n </dd-card-accent>\n </div>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 6 \u2014 TWO STYLES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'06'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.styles.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <p class=\"section-description\">{{ 'quickStart.styles.description' | transloco }}</p>\n\n <duck-dev-tab [tabs]=\"previewTabs\" (tabChange)=\"onPreviewTabChange($event)\">\n @if (activePreviewTab().id === 'classic') {\n <div class=\"style-preview\">\n <div class=\"style-preview__row\">\n <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n </div>\n <div class=\"style-preview__row\">\n <dd-badge [text]=\"'Status'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n <dd-badge [text]=\"'Label'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n <dd-badge [text]=\"'Tag'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n </div>\n <duck-dev-progress-line [label]=\"'Progress'\" [value]=\"72\" [color]=\"colorViolet\" />\n <div class=\"style-preview__cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>Classic</small>\n <h3>{{ 'quickStart.styles.classicCardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.styles.classicCardText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-signal [color]=\"colorOrange\">\n <small>Signal</small>\n <h3>{{ 'quickStart.styles.signalCardTitle' | transloco }}</h3>\n <p>{{ 'quickStart.styles.signalCardText' | transloco }}</p>\n </dd-card-signal>\n </div>\n </div>\n }\n @if (activePreviewTab().id === 'neobrutalism') {\n <div class=\"style-preview\">\n <div class=\"style-preview__row\">\n <duck-dev-button-neobrutal-slab\n [text]=\"'Slab'\"\n [helperText]=\"'click me'\"\n [colorButton]=\"colorViolet\"\n />\n <duck-dev-button-neobrutal-slab\n [text]=\"'Action'\"\n [helperText]=\"'do it'\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\">\n <p>\n <strong>Neobrutalism</strong> \u2014\n {{ 'quickStart.styles.neobrutalBubbleText' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n </section>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 7 \u2014 USAGE EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"step\">\n <div class=\"step__header\">\n <dd-badge [text]=\"'07'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.usage.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <ng-template #usageTemplate>\n <pre class=\"accordion-code\"><code><duck-dev-button-casper\n [text]=\"'Click me'\"\n [colorButton]=\"colorViolet\"\n/>\n\n<dd-badge\n [text]=\"'New'\"\n [color]=\"colorOrange\"\n [variant]=\"'solid'\"\n/>\n\n<dd-card-minimal [color]=\"colorViolet\">\n <h3>Title</h3>\n <p>Content goes here</p>\n</dd-card-minimal></code></pre>\n </ng-template>\n\n <ng-template #usageComponent>\n <pre\n class=\"accordion-code\"\n ><code>import {{ '{' }} Component {{ '}' }} from '@angular/core';\nimport {{ '{' }} ButtonCasper {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} Badge {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} DuckDevCardMinimal {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n@Component({{ '{' }}\n selector: 'app-example',\n standalone: true,\n imports: [ButtonCasper, Badge, DuckDevCardMinimal],\n templateUrl: './example.html',\n{{ '}' }})\nexport class ExampleComponent {{ '{' }}\n colorViolet = AccentEnumColor.Violet;\n colorOrange = AccentEnumColor.Orange;\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'quickStart.usage.templateTitle' | transloco\"\n [content]=\"usageTemplate\"\n [color]=\"colorOrange\"\n />\n <duck-dev-accordion\n [title]=\"'quickStart.usage.componentTitle' | transloco\"\n [content]=\"usageComponent\"\n [color]=\"colorViolet\"\n />\n </div>\n\n <dd-speaker-bubble-soft [color]=\"colorGray\" [tail]=\"'left'\">\n <p>{{ 'quickStart.usage.tip' | transloco }}</p>\n </dd-speaker-bubble-soft>\n </dd-card-section>\n </section>\n</div>\n", styles: [".quick-start{max-width:960px;margin:0 auto;padding:48px 24px 80px;display:flex;flex-direction:column;gap:56px}.hero{text-align:center;padding:40px 0 16px}.hero__badges{display:flex;justify-content:center;gap:10px;margin-bottom:24px}.hero h1{font-size:42px;font-weight:800;color:var(--dd-base-600);line-height:1.15;margin:0 0 16px;letter-spacing:-.02em}.hero__subtitle{font-size:18px;color:var(--dd-base-400);line-height:1.6;max-width:600px;margin:0 auto}.step__header{display:flex;align-items:center;gap:14px;margin-bottom:20px}.step__header h2{font-size:26px;font-weight:700;color:var(--dd-base-600);margin:0}.section-description{font-size:16px;line-height:1.65;color:var(--dd-base-400);margin:0 0 28px}.code-block{margin:20px 0;border-radius:10px;overflow:hidden;border:1px solid var(--dd-base-300)}.code-block__label{padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dd-base-300);background:var(--dd-base-600);border-bottom:1px solid var(--dd-base-500)}.code-block pre{margin:0;padding:20px;background:var(--dd-base-600);overflow-x:auto}.code-block pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.code-block--compact{margin:0 0 28px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.palette-grid{display:flex;flex-direction:column;gap:28px;margin-bottom:32px}.palette-group h3{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}.swatch-row{display:flex;gap:6px;flex-wrap:wrap}.swatch{flex:1;min-width:60px;height:64px;border-radius:10px;border:1px solid var(--dd-base-300);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:transform .2s ease,box-shadow .2s ease}.swatch:hover{transform:translateY(-3px);box-shadow:0 6px 20px -8px var(--dd-base-300)}.swatch__label{font-size:11px;font-weight:600;color:var(--dd-base-500)}.swatch__label--light{color:var(--dd-base-0)}.swatch--accent{min-width:100px;height:72px}.theme-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}.accordion-row{display:flex;flex-direction:column;gap:12px;margin-top:20px}.showcase-title{font-size:15px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.04em;margin:32px 0 16px}.progress-showcase{display:flex;flex-direction:column;gap:16px}.buttons-showcase{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.badges-showcase{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.cards-showcase{display:flex;flex-direction:column;gap:12px}.style-preview{display:flex;flex-direction:column;gap:24px;padding:8px 0}.style-preview__row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.style-preview__cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:768px){.quick-start{padding:24px 16px 60px;gap:40px}.hero h1{font-size:30px}.hero__subtitle{font-size:16px}.step__header h2{font-size:22px}.theme-cards{grid-template-columns:1fr}.swatch{min-width:40px;height:52px}.swatch--accent{min-width:70px}.style-preview__cards{grid-template-columns:1fr}}@media(max-width:480px){.hero h1{font-size:26px}.buttons-showcase{flex-direction:column;align-items:flex-start}}\n"] }]
|
|
5721
5826
|
}] });
|
|
5722
5827
|
|
|
5723
5828
|
class DuckDevModalClassic {
|
|
@@ -5746,11 +5851,11 @@ class ModalBlock {
|
|
|
5746
5851
|
this.isOpen.set(false);
|
|
5747
5852
|
}
|
|
5748
5853
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModalBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5749
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ModalBlock, isStandalone: true, selector: "app-modal-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n <div class=\"example-row quick-actions\">\n <button class=\"demo-btn\" (click)=\"open()\">\n {{ 'modalDoc.quickDemo' | transloco }}\n </button>\n </div>\n\n <dd-card-section>\n <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n <pre><code ngNonBindable><!-- Template -->\n<dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n <div class="modal-content">\n <h3>{{ 'modalDoc.snippets.sampleTitle' | transloco }}</h3>\n <p>{{ 'modalDoc.snippets.sampleText' | transloco }}</p>\n <div class="actions">\n <button class="demo-btn" (click)="close()">{{ 'modalDoc.actions.close' | transloco }}</button>\n </div>\n </div>\n</dd-duck-dev-modal-classic>\n\n<!-- Component -->\nisOpen = signal(false);\nopen() { this.isOpen.set(true); }\nclose() { this.isOpen.set(false); }\n</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"open()\">\n {{ 'modalDoc.examples.open' | transloco }}\n </button>\n </div>\n </div>\n </dd-card-section>\n\n <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n <div
|
|
5854
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ModalBlock, isStandalone: true, selector: "app-modal-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n <div class=\"example-row quick-actions\">\n <button class=\"demo-btn\" (click)=\"open()\">\n {{ 'modalDoc.quickDemo' | transloco }}\n </button>\n </div>\n\n <dd-card-section>\n <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n <pre><code ngNonBindable><!-- Template -->\n<dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n <div class="modal-content">\n <h3>{{ 'modalDoc.snippets.sampleTitle' | transloco }}</h3>\n <p>{{ 'modalDoc.snippets.sampleText' | transloco }}</p>\n <div class="actions">\n <button class="demo-btn" (click)="close()">{{ 'modalDoc.actions.close' | transloco }}</button>\n </div>\n </div>\n</dd-duck-dev-modal-classic>\n\n<!-- Component -->\nisOpen = signal(false);\nopen() { this.isOpen.set(true); }\nclose() { this.isOpen.set(false); }\n</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"open()\">\n {{ 'modalDoc.examples.open' | transloco }}\n </button>\n </div>\n </div>\n </dd-card-section>\n\n <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n <div\n class=\"modal-content\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"demo-modal-title\"\n aria-describedby=\"demo-modal-desc\"\n >\n <header class=\"modal-header\">\n <h3 id=\"demo-modal-title\" class=\"modal-title\">{{ 'modalDoc.demo.title' | transloco }}</h3>\n <duck-dev-icon\n class=\"close-icon\"\n name=\"duck-dev-clear-medium\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"'modalDoc.actions.close' | transloco\"\n [attr.title]=\"'modalDoc.actions.close' | transloco\"\n (click)=\"close()\"\n (keydown.enter)=\"close()\"\n ></duck-dev-icon>\n </header>\n <div id=\"demo-modal-desc\" class=\"modal-body\">\n <p class=\"modal-text\">{{ 'modalDoc.demo.text' | transloco }}</p>\n <ul class=\"modal-list\">\n <li>Keyboard friendly close</li>\n <li>Smooth animations</li>\n <li>Frosted glass backdrop</li>\n </ul>\n </div>\n <footer class=\"actions\">\n <button class=\"demo-btn\" (click)=\"close()\">\n {{ 'modalDoc.actions.close' | transloco }}\n </button>\n </footer>\n </div>\n </dd-duck-dev-modal-classic>\n</div>\n", styles: [".modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 4px 12px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.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,.demo-container dd-card-section{display:block;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,.demo-container dd-card-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,.demo-container dd-card-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,.demo-container dd-card-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 dd-card-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre,.demo-container dd-card-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,.demo-container dd-card-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block,.demo-container dd-card-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul,.demo-container dd-card-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li,.demo-container dd-card-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,.demo-container dd-card-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row,.demo-container dd-card-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions,.demo-container dd-card-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}.modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 8px 24px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.close-icon{cursor:pointer;color:var(--dd-base-400);transition:color .2s ease,transform .1s ease}.close-icon:hover,.close-icon:focus{color:var(--dd-base-600);outline:none}.close-icon:active{transform:scale(.95)}.modal-title{margin:0 0 8px;color:var(--dd-base-500)}.modal-body{padding-top:4px}.modal-text{margin:0 0 16px;color:var(--dd-base-400)}.modal-list{margin:8px 0 16px 20px;color:var(--dd-base-500)}.modal-list li{margin:4px 0}.actions{display:flex;justify-content:flex-end}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container dd-card-section{padding:20px}.demo-container dd-card-section h2{font-size:24px}.demo-container dd-card-section .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevModalClassic, selector: "dd-duck-dev-modal-classic", inputs: ["isOpen"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
|
|
5750
5855
|
}
|
|
5751
5856
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModalBlock, decorators: [{
|
|
5752
5857
|
type: Component,
|
|
5753
|
-
args: [{ selector: 'app-modal-block', imports: [TranslocoModule, DuckDevCardSection, DuckDevModalClassic, DuckDevIcon], template: "<div class=\"demo-container\">\n <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n <div class=\"example-row quick-actions\">\n <button class=\"demo-btn\" (click)=\"open()\">\n {{ 'modalDoc.quickDemo' | transloco }}\n </button>\n </div>\n\n <dd-card-section>\n <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n <pre><code ngNonBindable><!-- Template -->\n<dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n <div class="modal-content">\n <h3>{{ 'modalDoc.snippets.sampleTitle' | transloco }}</h3>\n <p>{{ 'modalDoc.snippets.sampleText' | transloco }}</p>\n <div class="actions">\n <button class="demo-btn" (click)="close()">{{ 'modalDoc.actions.close' | transloco }}</button>\n </div>\n </div>\n</dd-duck-dev-modal-classic>\n\n<!-- Component -->\nisOpen = signal(false);\nopen() { this.isOpen.set(true); }\nclose() { this.isOpen.set(false); }\n</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"open()\">\n {{ 'modalDoc.examples.open' | transloco }}\n </button>\n </div>\n </div>\n </dd-card-section>\n\n <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n <div
|
|
5858
|
+
args: [{ selector: 'app-modal-block', imports: [TranslocoModule, DuckDevCardSection, DuckDevModalClassic, DuckDevIcon], template: "<div class=\"demo-container\">\n <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n <div class=\"example-row quick-actions\">\n <button class=\"demo-btn\" (click)=\"open()\">\n {{ 'modalDoc.quickDemo' | transloco }}\n </button>\n </div>\n\n <dd-card-section>\n <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n <pre><code ngNonBindable><!-- Template -->\n<dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n <div class="modal-content">\n <h3>{{ 'modalDoc.snippets.sampleTitle' | transloco }}</h3>\n <p>{{ 'modalDoc.snippets.sampleText' | transloco }}</p>\n <div class="actions">\n <button class="demo-btn" (click)="close()">{{ 'modalDoc.actions.close' | transloco }}</button>\n </div>\n </div>\n</dd-duck-dev-modal-classic>\n\n<!-- Component -->\nisOpen = signal(false);\nopen() { this.isOpen.set(true); }\nclose() { this.isOpen.set(false); }\n</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"open()\">\n {{ 'modalDoc.examples.open' | transloco }}\n </button>\n </div>\n </div>\n </dd-card-section>\n\n <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n <div\n class=\"modal-content\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"demo-modal-title\"\n aria-describedby=\"demo-modal-desc\"\n >\n <header class=\"modal-header\">\n <h3 id=\"demo-modal-title\" class=\"modal-title\">{{ 'modalDoc.demo.title' | transloco }}</h3>\n <duck-dev-icon\n class=\"close-icon\"\n name=\"duck-dev-clear-medium\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"'modalDoc.actions.close' | transloco\"\n [attr.title]=\"'modalDoc.actions.close' | transloco\"\n (click)=\"close()\"\n (keydown.enter)=\"close()\"\n ></duck-dev-icon>\n </header>\n <div id=\"demo-modal-desc\" class=\"modal-body\">\n <p class=\"modal-text\">{{ 'modalDoc.demo.text' | transloco }}</p>\n <ul class=\"modal-list\">\n <li>Keyboard friendly close</li>\n <li>Smooth animations</li>\n <li>Frosted glass backdrop</li>\n </ul>\n </div>\n <footer class=\"actions\">\n <button class=\"demo-btn\" (click)=\"close()\">\n {{ 'modalDoc.actions.close' | transloco }}\n </button>\n </footer>\n </div>\n </dd-duck-dev-modal-classic>\n</div>\n", styles: [".modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 4px 12px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.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,.demo-container dd-card-section{display:block;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,.demo-container dd-card-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,.demo-container dd-card-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,.demo-container dd-card-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 dd-card-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre,.demo-container dd-card-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,.demo-container dd-card-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block,.demo-container dd-card-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul,.demo-container dd-card-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li,.demo-container dd-card-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,.demo-container dd-card-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row,.demo-container dd-card-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions,.demo-container dd-card-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}.modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 8px 24px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.close-icon{cursor:pointer;color:var(--dd-base-400);transition:color .2s ease,transform .1s ease}.close-icon:hover,.close-icon:focus{color:var(--dd-base-600);outline:none}.close-icon:active{transform:scale(.95)}.modal-title{margin:0 0 8px;color:var(--dd-base-500)}.modal-body{padding-top:4px}.modal-text{margin:0 0 16px;color:var(--dd-base-400)}.modal-list{margin:8px 0 16px 20px;color:var(--dd-base-500)}.modal-list li{margin:4px 0}.actions{display:flex;justify-content:flex-end}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container dd-card-section{padding:20px}.demo-container dd-card-section h2{font-size:24px}.demo-container dd-card-section .examples-block .example-row{flex-direction:column}}\n"] }]
|
|
5754
5859
|
}] });
|
|
5755
5860
|
|
|
5756
5861
|
class DuckDevSegmentButton {
|
|
@@ -5807,7 +5912,11 @@ class DuckDevSegmentClassic {
|
|
|
5807
5912
|
}
|
|
5808
5913
|
rebuildButtons() {
|
|
5809
5914
|
const btns = this.segmentButtons?.toArray() ?? [];
|
|
5810
|
-
this.buttons = btns.map((b) => ({
|
|
5915
|
+
this.buttons = btns.map((b) => ({
|
|
5916
|
+
value: b.value(),
|
|
5917
|
+
contentId: b.contentId(),
|
|
5918
|
+
template: b.templateRef(),
|
|
5919
|
+
}));
|
|
5811
5920
|
}
|
|
5812
5921
|
getSelectedIndex() {
|
|
5813
5922
|
return Math.max(0, this.buttons.findIndex((b) => b.value === this.selectedValue));
|
|
@@ -5822,13 +5931,11 @@ class DuckDevSegmentClassic {
|
|
|
5822
5931
|
}
|
|
5823
5932
|
}
|
|
5824
5933
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5825
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentClassic, isStandalone: true, selector: "dd-segment-classic", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "segmentButtons", predicate: DuckDevSegmentButton }], viewQueries: [{ propertyName: "buttonsContainer", first: true, predicate: ["buttonsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"segment-container\">\n <div class=\"segment-background\"></div>\n <div\n class=\"segment-indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n ></div>\n <div
|
|
5934
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentClassic, isStandalone: true, selector: "dd-segment-classic", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "segmentButtons", predicate: DuckDevSegmentButton }], viewQueries: [{ propertyName: "buttonsContainer", first: true, predicate: ["buttonsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"segment-container\">\n <div class=\"segment-background\"></div>\n <div\n class=\"segment-indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n ></div>\n <div class=\"segment-buttons\" #buttonsContainer>\n @for (button of buttons; track button; let i = $index) {\n <button\n class=\"segment-button\"\n [class.segment-button-checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </button>\n }\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
5826
5935
|
}
|
|
5827
5936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, decorators: [{
|
|
5828
5937
|
type: Component,
|
|
5829
|
-
args: [{ selector: 'dd-segment-classic', imports: [
|
|
5830
|
-
NgTemplateOutlet
|
|
5831
|
-
], template: "<div class=\"segment-container\">\n <div class=\"segment-background\"></div>\n <div\n class=\"segment-indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n ></div>\n <div\n class=\"segment-buttons\"\n #buttonsContainer\n >\n @for (button of buttons; track button; let i = $index) {\n <button\n class=\"segment-button\"\n [class.segment-button-checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </button>\n }\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
|
|
5938
|
+
args: [{ selector: 'dd-segment-classic', imports: [NgTemplateOutlet], template: "<div class=\"segment-container\">\n <div class=\"segment-background\"></div>\n <div\n class=\"segment-indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n ></div>\n <div class=\"segment-buttons\" #buttonsContainer>\n @for (button of buttons; track button; let i = $index) {\n <button\n class=\"segment-button\"\n [class.segment-button-checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </button>\n }\n </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
|
|
5832
5939
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ionChange: [{ type: i0.Output, args: ["ionChange"] }], segmentButtons: [{
|
|
5833
5940
|
type: ContentChildren,
|
|
5834
5941
|
args: [DuckDevSegmentButton]
|
|
@@ -5967,11 +6074,17 @@ class SegmentBlock {
|
|
|
5967
6074
|
this.lastEvent.set(e.detail.value);
|
|
5968
6075
|
}
|
|
5969
6076
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SegmentBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5970
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SegmentBlock, isStandalone: true, selector: "app-segment-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\">\n <dd-segment-button value=\"all\">All</dd-segment-button>\n <dd-segment-button value=\"articles\">Articles</dd-segment-button>\n <dd-segment-button value=\"videos\">Videos</dd-segment-button>\n</dd-segment-classic></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n <li><strong>color</strong> \u2014 {{ 'segmentDoc.inputsDesc.color' | transloco }}</li>\n <li><strong>dd-segment-button[value]</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}</li>\n <li><strong>dd-segment-button</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n <dd-segment-classic>\n <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n </dd-segment-classic>\n </div>\n\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n <dd-segment-classic [value]=\"selected()\" (valueChange)=\"selected.set($event)\" (ionChange)=\"onIonChange($event)\">\n <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n </dd-segment-classic>\n <div class=\"state-hint\">\n <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n <b>{{ selected() }}</b>\n <span class=\"divider\">|</span>\n <span>ionChange: <b>{{ lastEvent() }}</b></span>\n </div>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n <dd-segment-classic [value]=\"'all'\">\n <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"photos\">{{ 'segmentDoc.labels.photos' | transloco }}</dd-segment-button>\n </dd-segment-classic>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalViolet' | transloco }}</p>\n <duck-dev-segment-neobrutal\n [value]=\"neobrutalSelected()\"\n [color]=\"colorViolet\"\n (valueChange)=\"neobrutalSelected.set($event)\"\n >\n <dd-segment-button value=\"rush\">{{ 'segmentDoc.labels.rush' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"review\">{{ 'segmentDoc.labels.review' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"drop\">{{ 'segmentDoc.labels.drop' | transloco }}</dd-segment-button>\n </duck-dev-segment-neobrutal>\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n <b>{{ neobrutalSelected() }}</b>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalOrange' | transloco }}</p>\n <duck-dev-segment-neobrutal [value]=\"'launch'\" [color]=\"colorOrange\">\n <dd-segment-button value=\"draft\">{{ 'segmentDoc.labels.draft' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"launch\">{{ 'segmentDoc.labels.launch' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"archive\">{{ 'segmentDoc.labels.archive' | transloco }}</dd-segment-button>\n </duck-dev-segment-neobrutal>\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}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevSegmentClassic, selector: "dd-segment-classic", inputs: ["value"], outputs: ["valueChange", "ionChange"] }, { kind: "component", type: DuckDevSegmentButton, selector: "dd-segment-button", inputs: ["value", "contentId"] }, { kind: "component", type: DuckDevSegmentNeobrutal, selector: "duck-dev-segment-neobrutal", inputs: ["value", "color"], outputs: ["valueChange", "ionChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6077
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SegmentBlock, isStandalone: true, selector: "app-segment-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\">\n <dd-segment-button value=\"all\">All</dd-segment-button>\n <dd-segment-button value=\"articles\">Articles</dd-segment-button>\n <dd-segment-button value=\"videos\">Videos</dd-segment-button>\n</dd-segment-classic></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n <li>\n <strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}\n </li>\n <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n <li><strong>color</strong> \u2014 {{ 'segmentDoc.inputsDesc.color' | transloco }}</li>\n <li>\n <strong>dd-segment-button[value]</strong> \u2014\n {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}\n </li>\n <li>\n <strong>dd-segment-button</strong> \u2014\n {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n <dd-segment-classic>\n <dd-segment-button value=\"all\">{{\n 'segmentDoc.labels.all' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{\n 'segmentDoc.labels.articles' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{\n 'segmentDoc.labels.videos' | transloco\n }}</dd-segment-button>\n </dd-segment-classic>\n </div>\n\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n <dd-segment-classic\n [value]=\"selected()\"\n (valueChange)=\"selected.set($event)\"\n (ionChange)=\"onIonChange($event)\"\n >\n <dd-segment-button value=\"all\">{{\n 'segmentDoc.labels.all' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{\n 'segmentDoc.labels.articles' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{\n 'segmentDoc.labels.videos' | transloco\n }}</dd-segment-button>\n </dd-segment-classic>\n <div class=\"state-hint\">\n <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n <b>{{ selected() }}</b>\n <span class=\"divider\">|</span>\n <span\n >ionChange: <b>{{ lastEvent() }}</b></span\n >\n </div>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n <dd-segment-classic [value]=\"'all'\">\n <dd-segment-button value=\"all\">{{\n 'segmentDoc.labels.all' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{\n 'segmentDoc.labels.articles' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{\n 'segmentDoc.labels.videos' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"photos\">{{\n 'segmentDoc.labels.photos' | transloco\n }}</dd-segment-button>\n </dd-segment-classic>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalViolet' | transloco }}</p>\n <duck-dev-segment-neobrutal\n [value]=\"neobrutalSelected()\"\n [color]=\"colorViolet\"\n (valueChange)=\"neobrutalSelected.set($event)\"\n >\n <dd-segment-button value=\"rush\">{{\n 'segmentDoc.labels.rush' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"review\">{{\n 'segmentDoc.labels.review' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"drop\">{{\n 'segmentDoc.labels.drop' | transloco\n }}</dd-segment-button>\n </duck-dev-segment-neobrutal>\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n <b>{{ neobrutalSelected() }}</b>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalOrange' | transloco }}</p>\n <duck-dev-segment-neobrutal [value]=\"'launch'\" [color]=\"colorOrange\">\n <dd-segment-button value=\"draft\">{{\n 'segmentDoc.labels.draft' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"launch\">{{\n 'segmentDoc.labels.launch' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"archive\">{{\n 'segmentDoc.labels.archive' | transloco\n }}</dd-segment-button>\n </duck-dev-segment-neobrutal>\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}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevSegmentClassic, selector: "dd-segment-classic", inputs: ["value"], outputs: ["valueChange", "ionChange"] }, { kind: "component", type: DuckDevSegmentButton, selector: "dd-segment-button", inputs: ["value", "contentId"] }, { kind: "component", type: DuckDevSegmentNeobrutal, selector: "duck-dev-segment-neobrutal", inputs: ["value", "color"], outputs: ["valueChange", "ionChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
5971
6078
|
}
|
|
5972
6079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SegmentBlock, decorators: [{
|
|
5973
6080
|
type: Component,
|
|
5974
|
-
args: [{ selector: 'app-segment-block', imports: [
|
|
6081
|
+
args: [{ selector: 'app-segment-block', imports: [
|
|
6082
|
+
TranslocoPipe,
|
|
6083
|
+
DuckDevCardSection,
|
|
6084
|
+
DuckDevSegmentClassic,
|
|
6085
|
+
DuckDevSegmentButton,
|
|
6086
|
+
DuckDevSegmentNeobrutal,
|
|
6087
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\">\n <dd-segment-button value=\"all\">All</dd-segment-button>\n <dd-segment-button value=\"articles\">Articles</dd-segment-button>\n <dd-segment-button value=\"videos\">Videos</dd-segment-button>\n</dd-segment-classic></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n <li>\n <strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}\n </li>\n <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n <li><strong>color</strong> \u2014 {{ 'segmentDoc.inputsDesc.color' | transloco }}</li>\n <li>\n <strong>dd-segment-button[value]</strong> \u2014\n {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}\n </li>\n <li>\n <strong>dd-segment-button</strong> \u2014\n {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n <dd-segment-classic>\n <dd-segment-button value=\"all\">{{\n 'segmentDoc.labels.all' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{\n 'segmentDoc.labels.articles' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{\n 'segmentDoc.labels.videos' | transloco\n }}</dd-segment-button>\n </dd-segment-classic>\n </div>\n\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n <dd-segment-classic\n [value]=\"selected()\"\n (valueChange)=\"selected.set($event)\"\n (ionChange)=\"onIonChange($event)\"\n >\n <dd-segment-button value=\"all\">{{\n 'segmentDoc.labels.all' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{\n 'segmentDoc.labels.articles' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{\n 'segmentDoc.labels.videos' | transloco\n }}</dd-segment-button>\n </dd-segment-classic>\n <div class=\"state-hint\">\n <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n <b>{{ selected() }}</b>\n <span class=\"divider\">|</span>\n <span\n >ionChange: <b>{{ lastEvent() }}</b></span\n >\n </div>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n <dd-segment-classic [value]=\"'all'\">\n <dd-segment-button value=\"all\">{{\n 'segmentDoc.labels.all' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{\n 'segmentDoc.labels.articles' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{\n 'segmentDoc.labels.videos' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"photos\">{{\n 'segmentDoc.labels.photos' | transloco\n }}</dd-segment-button>\n </dd-segment-classic>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalViolet' | transloco }}</p>\n <duck-dev-segment-neobrutal\n [value]=\"neobrutalSelected()\"\n [color]=\"colorViolet\"\n (valueChange)=\"neobrutalSelected.set($event)\"\n >\n <dd-segment-button value=\"rush\">{{\n 'segmentDoc.labels.rush' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"review\">{{\n 'segmentDoc.labels.review' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"drop\">{{\n 'segmentDoc.labels.drop' | transloco\n }}</dd-segment-button>\n </duck-dev-segment-neobrutal>\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n <b>{{ neobrutalSelected() }}</b>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalOrange' | transloco }}</p>\n <duck-dev-segment-neobrutal [value]=\"'launch'\" [color]=\"colorOrange\">\n <dd-segment-button value=\"draft\">{{\n 'segmentDoc.labels.draft' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"launch\">{{\n 'segmentDoc.labels.launch' | transloco\n }}</dd-segment-button>\n <dd-segment-button value=\"archive\">{{\n 'segmentDoc.labels.archive' | transloco\n }}</dd-segment-button>\n </duck-dev-segment-neobrutal>\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}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
5975
6088
|
}] });
|
|
5976
6089
|
|
|
5977
6090
|
class ProgressBarBlock {
|
|
@@ -6043,7 +6156,7 @@ class SpeakerBubbleBlock {
|
|
|
6043
6156
|
return el;
|
|
6044
6157
|
}
|
|
6045
6158
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SpeakerBubbleBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6046
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SpeakerBubbleBlock, isStandalone: true, selector: "app-speaker-bubble-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'speakerBubbleDoc.title' | transloco }}</h1>\n\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"introEl.innerHTML\"></div>\n </dd-card-accent>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.bubbleTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.bubbleDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-classic [color]=\"colorWhite\" [tail]=\"'left'\">\n <small>Product team</small>\n <p>Can we move the onboarding review to Thursday?</p>\n</dd-speaker-bubble-classic></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.leftTail' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-classic\n [color]=\"colorWhite\"\n [tail]=\"'left'\"\n [target]=\"classicLeftTarget\"\n >\n <small>Design sync</small>\n <p>Can we keep the hero copy shorter on mobile?</p>\n </dd-speaker-bubble-classic>\n <span class=\"bubble-target\" #classicLeftTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.rightTail' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-classic\n [color]=\"colorViolet\"\n [tail]=\"'right'\"\n [target]=\"classicRightTarget\"\n >\n <small>Frontend</small>\n <p><strong>Yes</strong>, the block can keep a CTA and badge inside projected content.</p>\n </dd-speaker-bubble-classic>\n <span\n class=\"bubble-target bubble-target--violet\"\n #classicRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.softTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.softDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\">\n <small>Assistant</small>\n <p>Projected markup can include <strong>inline emphasis</strong> and metadata.</p>\n</dd-speaker-bubble-soft></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.richContent' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-soft\n [color]=\"colorOrange\"\n [tail]=\"'left'\"\n [target]=\"softLeftTarget\"\n >\n <small>Release note</small>\n <p>Bubble keeps a softer glassy surface for editorial comments and gentle callouts.</p>\n </dd-speaker-bubble-soft>\n <span\n class=\"bubble-target bubble-target--orange\"\n #softLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.darkMode' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-soft\n [color]=\"colorDark\"\n [tail]=\"'right'\"\n [target]=\"softRightTarget\"\n >\n <small>Night queue</small>\n <p>Rich content can stay readable even on dark palette variants.</p>\n </dd-speaker-bubble-soft>\n <span\n class=\"bubble-target bubble-target--dark\"\n #softRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.outlineTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.outlineDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-outline [color]=\"colorGray\" [tail]=\"'left'\">\n <small>System</small>\n <p>Outline variants work well for neutral hints and documentation notes.</p>\n</dd-speaker-bubble-outline></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.note' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-outline\n [color]=\"colorGray\"\n [tail]=\"'left'\"\n [target]=\"outlineLeftTarget\"\n >\n <small>Documentation</small>\n <p>Outlined speaker bubbles are useful for neutral side notes in dense layouts.</p>\n </dd-speaker-bubble-outline>\n <span class=\"bubble-target\" #outlineLeftTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.replyRight' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-outline\n [color]=\"colorWhite\"\n [tail]=\"'right'\"\n [target]=\"outlineRightTarget\"\n >\n <small>QA</small>\n <p>Tail position still flips while content remains projected markup.</p>\n </dd-speaker-bubble-outline>\n <span class=\"bubble-target\" #outlineRightTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n } @else {\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.neobrutal.slabTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.slabDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-neobrutal-slab [color]=\"colorOrange\" [tail]=\"'left'\">\n <small>Live drop</small>\n <p>Use ng-content for bold labels, paragraphs and inline status chips.</p>\n</dd-speaker-bubble-neobrutal-slab></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.livePanel' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-neobrutal-slab\n [color]=\"colorOrange\"\n [tail]=\"'left'\"\n [target]=\"slabLeftTarget\"\n >\n <small>Queue A</small>\n <p><strong>Live</strong> release banner for dashboards, status walls and loud interface narration.</p>\n </dd-speaker-bubble-neobrutal-slab>\n <span\n class=\"bubble-target bubble-target--orange\"\n #slabLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.hotReply' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-neobrutal-slab\n [color]=\"colorViolet\"\n [tail]=\"'right'\"\n [target]=\"slabRightTarget\"\n >\n <small>Ops</small>\n <p>The slab version keeps a heavy tail and rigid geometry for louder chat layouts.</p>\n </dd-speaker-bubble-neobrutal-slab>\n <span\n class=\"bubble-target bubble-target--violet\"\n #slabRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.neobrutal.ticketTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.ticketDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-neobrutal-ticket [color]=\"colorDark\" [tail]=\"'right'\">\n <small>Alert feed</small>\n <p>Projected content stays flexible while the component provides the ticket shell.</p>\n</dd-speaker-bubble-neobrutal-ticket></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.alertTicket' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-neobrutal-ticket\n [color]=\"colorDark\"\n [tail]=\"'left'\"\n [target]=\"ticketLeftTarget\"\n >\n <small>Alert feed</small>\n <p>Ticket framing works for warning streams, operations chatter and serialized event logs.</p>\n </dd-speaker-bubble-neobrutal-ticket>\n <span\n class=\"bubble-target bubble-target--dark\"\n #ticketLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.ticketReply' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-neobrutal-ticket\n [color]=\"colorWhite\"\n [tail]=\"'right'\"\n [target]=\"ticketRightTarget\"\n >\n <small>Review</small>\n <p><strong>Approved</strong> for launch preview, keep the counter-note visible in the timeline.</p>\n </dd-speaker-bubble-neobrutal-ticket>\n <span\n class=\"bubble-target bubble-target--orange\"\n #ticketRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n }\n </duck-dev-tab>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:30px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--right .example-label{text-align:right}.demo-container .examples-block .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .bubble-preview{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:16px;overflow:visible}.demo-container .bubble-preview--end{align-items:flex-end}.demo-container .example-item{overflow:visible}.demo-container .bubble-target{position:relative;width:54px;height:54px;border:2px solid var(--dd-base-300);border-radius:18px;background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-blue) 16%,transparent) 0,transparent 52%),var(--dd-base-100);box-shadow:0 10px 18px color-mix(in srgb,var(--dd-base-400) 24%,transparent);flex:0 0 auto}.demo-container .bubble-target:before{content:\"\";position:absolute;inset:11px 13px 17px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-accent-blue) 22%,var(--dd-base-0))}.demo-container .bubble-target:after{content:\"\";position:absolute;left:17px;right:17px;bottom:10px;height:10px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-300) 85%,var(--dd-base-0))}.demo-container .bubble-target--violet{border-color:color-mix(in srgb,var(--dd-base-secondary) 42%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-secondary) 18%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-secondary) 10%,var(--dd-base-0))}.demo-container .bubble-target--orange{border-color:color-mix(in srgb,var(--dd-base-accent-orange) 46%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-orange) 22%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark{border-color:var(--dd-base-500);background:radial-gradient(circle at 34% 34%,color-mix(in srgb,var(--dd-base-0) 88%,transparent) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-yellow) 16%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-600) 92%,var(--dd-base-500))}.demo-container .bubble-target--dark:before{background:color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark:after{background:color-mix(in srgb,var(--dd-base-400) 80%,var(--dd-base-600))}.demo-container .example-item--neobrutal .bubble-target{border-width:4px;border-color:var(--dd-neo-ink);border-radius:0;box-shadow:6px 6px 0 var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevSpeakerBubbleClassic, selector: "dd-speaker-bubble-classic", inputs: ["color", "tail", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleOutline, selector: "dd-speaker-bubble-outline", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleNeobrutalSlab, selector: "dd-speaker-bubble-neobrutal-slab", inputs: ["color", "tail", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleNeobrutalTicket, selector: "dd-speaker-bubble-neobrutal-ticket", inputs: ["color", "tail", "target"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6159
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SpeakerBubbleBlock, isStandalone: true, selector: "app-speaker-bubble-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'speakerBubbleDoc.title' | transloco }}</h1>\n\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"introEl.innerHTML\"></div>\n </dd-card-accent>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.bubbleTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.bubbleDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-classic [color]=\"colorWhite\" [tail]=\"'left'\">\n <small>Product team</small>\n <p>Can we move the onboarding review to Thursday?</p>\n</dd-speaker-bubble-classic></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.leftTail' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-classic\n [color]=\"colorWhite\"\n [tail]=\"'left'\"\n [target]=\"classicLeftTarget\"\n >\n <small>Design sync</small>\n <p>Can we keep the hero copy shorter on mobile?</p>\n </dd-speaker-bubble-classic>\n <span class=\"bubble-target\" #classicLeftTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.rightTail' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-classic\n [color]=\"colorViolet\"\n [tail]=\"'right'\"\n [target]=\"classicRightTarget\"\n >\n <small>Frontend</small>\n <p>\n <strong>Yes</strong>, the block can keep a CTA and badge inside projected\n content.\n </p>\n </dd-speaker-bubble-classic>\n <span\n class=\"bubble-target bubble-target--violet\"\n #classicRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.softTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.softDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\">\n <small>Assistant</small>\n <p>Projected markup can include <strong>inline emphasis</strong> and metadata.</p>\n</dd-speaker-bubble-soft></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.richContent' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-soft\n [color]=\"colorOrange\"\n [tail]=\"'left'\"\n [target]=\"softLeftTarget\"\n >\n <small>Release note</small>\n <p>\n Bubble keeps a softer glassy surface for editorial comments and gentle callouts.\n </p>\n </dd-speaker-bubble-soft>\n <span\n class=\"bubble-target bubble-target--orange\"\n #softLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.darkMode' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-soft\n [color]=\"colorDark\"\n [tail]=\"'right'\"\n [target]=\"softRightTarget\"\n >\n <small>Night queue</small>\n <p>Rich content can stay readable even on dark palette variants.</p>\n </dd-speaker-bubble-soft>\n <span\n class=\"bubble-target bubble-target--dark\"\n #softRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.outlineTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.outlineDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-outline [color]=\"colorGray\" [tail]=\"'left'\">\n <small>System</small>\n <p>Outline variants work well for neutral hints and documentation notes.</p>\n</dd-speaker-bubble-outline></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.note' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-outline\n [color]=\"colorGray\"\n [tail]=\"'left'\"\n [target]=\"outlineLeftTarget\"\n >\n <small>Documentation</small>\n <p>\n Outlined speaker bubbles are useful for neutral side notes in dense layouts.\n </p>\n </dd-speaker-bubble-outline>\n <span class=\"bubble-target\" #outlineLeftTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.replyRight' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-outline\n [color]=\"colorWhite\"\n [tail]=\"'right'\"\n [target]=\"outlineRightTarget\"\n >\n <small>QA</small>\n <p>Tail position still flips while content remains projected markup.</p>\n </dd-speaker-bubble-outline>\n <span class=\"bubble-target\" #outlineRightTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n } @else {\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.neobrutal.slabTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.slabDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-neobrutal-slab [color]=\"colorOrange\" [tail]=\"'left'\">\n <small>Live drop</small>\n <p>Use ng-content for bold labels, paragraphs and inline status chips.</p>\n</dd-speaker-bubble-neobrutal-slab></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.livePanel' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-neobrutal-slab\n [color]=\"colorOrange\"\n [tail]=\"'left'\"\n [target]=\"slabLeftTarget\"\n >\n <small>Queue A</small>\n <p>\n <strong>Live</strong> release banner for dashboards, status walls and loud\n interface narration.\n </p>\n </dd-speaker-bubble-neobrutal-slab>\n <span\n class=\"bubble-target bubble-target--orange\"\n #slabLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.hotReply' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-neobrutal-slab\n [color]=\"colorViolet\"\n [tail]=\"'right'\"\n [target]=\"slabRightTarget\"\n >\n <small>Ops</small>\n <p>\n The slab version keeps a heavy tail and rigid geometry for louder chat layouts.\n </p>\n </dd-speaker-bubble-neobrutal-slab>\n <span\n class=\"bubble-target bubble-target--violet\"\n #slabRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.neobrutal.ticketTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.ticketDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-neobrutal-ticket [color]=\"colorDark\" [tail]=\"'right'\">\n <small>Alert feed</small>\n <p>Projected content stays flexible while the component provides the ticket shell.</p>\n</dd-speaker-bubble-neobrutal-ticket></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.alertTicket' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-neobrutal-ticket\n [color]=\"colorDark\"\n [tail]=\"'left'\"\n [target]=\"ticketLeftTarget\"\n >\n <small>Alert feed</small>\n <p>\n Ticket framing works for warning streams, operations chatter and serialized\n event logs.\n </p>\n </dd-speaker-bubble-neobrutal-ticket>\n <span\n class=\"bubble-target bubble-target--dark\"\n #ticketLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.ticketReply' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-neobrutal-ticket\n [color]=\"colorWhite\"\n [tail]=\"'right'\"\n [target]=\"ticketRightTarget\"\n >\n <small>Review</small>\n <p>\n <strong>Approved</strong> for launch preview, keep the counter-note visible in\n the timeline.\n </p>\n </dd-speaker-bubble-neobrutal-ticket>\n <span\n class=\"bubble-target bubble-target--orange\"\n #ticketRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n }\n </duck-dev-tab>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:30px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--right .example-label{text-align:right}.demo-container .examples-block .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .bubble-preview{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:16px;overflow:visible}.demo-container .bubble-preview--end{align-items:flex-end}.demo-container .example-item{overflow:visible}.demo-container .bubble-target{position:relative;width:54px;height:54px;border:2px solid var(--dd-base-300);border-radius:18px;background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-blue) 16%,transparent) 0,transparent 52%),var(--dd-base-100);box-shadow:0 10px 18px color-mix(in srgb,var(--dd-base-400) 24%,transparent);flex:0 0 auto}.demo-container .bubble-target:before{content:\"\";position:absolute;inset:11px 13px 17px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-accent-blue) 22%,var(--dd-base-0))}.demo-container .bubble-target:after{content:\"\";position:absolute;left:17px;right:17px;bottom:10px;height:10px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-300) 85%,var(--dd-base-0))}.demo-container .bubble-target--violet{border-color:color-mix(in srgb,var(--dd-base-secondary) 42%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-secondary) 18%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-secondary) 10%,var(--dd-base-0))}.demo-container .bubble-target--orange{border-color:color-mix(in srgb,var(--dd-base-accent-orange) 46%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-orange) 22%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark{border-color:var(--dd-base-500);background:radial-gradient(circle at 34% 34%,color-mix(in srgb,var(--dd-base-0) 88%,transparent) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-yellow) 16%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-600) 92%,var(--dd-base-500))}.demo-container .bubble-target--dark:before{background:color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark:after{background:color-mix(in srgb,var(--dd-base-400) 80%,var(--dd-base-600))}.demo-container .example-item--neobrutal .bubble-target{border-width:4px;border-color:var(--dd-neo-ink);border-radius:0;box-shadow:6px 6px 0 var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevSpeakerBubbleClassic, selector: "dd-speaker-bubble-classic", inputs: ["color", "tail", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleOutline, selector: "dd-speaker-bubble-outline", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleNeobrutalSlab, selector: "dd-speaker-bubble-neobrutal-slab", inputs: ["color", "tail", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleNeobrutalTicket, selector: "dd-speaker-bubble-neobrutal-ticket", inputs: ["color", "tail", "target"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6047
6160
|
}
|
|
6048
6161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SpeakerBubbleBlock, decorators: [{
|
|
6049
6162
|
type: Component,
|
|
@@ -6057,7 +6170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6057
6170
|
DuckDevSpeakerBubbleNeobrutalSlab,
|
|
6058
6171
|
DuckDevSpeakerBubbleNeobrutalTicket,
|
|
6059
6172
|
DuckDevTab,
|
|
6060
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'speakerBubbleDoc.title' | transloco }}</h1>\n\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"introEl.innerHTML\"></div>\n </dd-card-accent>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.bubbleTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.bubbleDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-classic [color]=\"colorWhite\" [tail]=\"'left'\">\n <small>Product team</small>\n <p>Can we move the onboarding review to Thursday?</p>\n</dd-speaker-bubble-classic></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.leftTail' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-classic\n [color]=\"colorWhite\"\n [tail]=\"'left'\"\n [target]=\"classicLeftTarget\"\n >\n <small>Design sync</small>\n <p>Can we keep the hero copy shorter on mobile?</p>\n </dd-speaker-bubble-classic>\n <span class=\"bubble-target\" #classicLeftTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.rightTail' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-classic\n [color]=\"colorViolet\"\n [tail]=\"'right'\"\n [target]=\"classicRightTarget\"\n >\n <small>Frontend</small>\n <p><strong>Yes</strong>, the block can keep a CTA and badge inside projected content.</p>\n </dd-speaker-bubble-classic>\n <span\n class=\"bubble-target bubble-target--violet\"\n #classicRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.softTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.softDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\">\n <small>Assistant</small>\n <p>Projected markup can include <strong>inline emphasis</strong> and metadata.</p>\n</dd-speaker-bubble-soft></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.richContent' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-soft\n [color]=\"colorOrange\"\n [tail]=\"'left'\"\n [target]=\"softLeftTarget\"\n >\n <small>Release note</small>\n <p>Bubble keeps a softer glassy surface for editorial comments and gentle callouts.</p>\n </dd-speaker-bubble-soft>\n <span\n class=\"bubble-target bubble-target--orange\"\n #softLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.darkMode' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-soft\n [color]=\"colorDark\"\n [tail]=\"'right'\"\n [target]=\"softRightTarget\"\n >\n <small>Night queue</small>\n <p>Rich content can stay readable even on dark palette variants.</p>\n </dd-speaker-bubble-soft>\n <span\n class=\"bubble-target bubble-target--dark\"\n #softRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.outlineTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.outlineDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-outline [color]=\"colorGray\" [tail]=\"'left'\">\n <small>System</small>\n <p>Outline variants work well for neutral hints and documentation notes.</p>\n</dd-speaker-bubble-outline></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.note' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-outline\n [color]=\"colorGray\"\n [tail]=\"'left'\"\n [target]=\"outlineLeftTarget\"\n >\n <small>Documentation</small>\n <p>Outlined speaker bubbles are useful for neutral side notes in dense layouts.</p>\n </dd-speaker-bubble-outline>\n <span class=\"bubble-target\" #outlineLeftTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.replyRight' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-outline\n [color]=\"colorWhite\"\n [tail]=\"'right'\"\n [target]=\"outlineRightTarget\"\n >\n <small>QA</small>\n <p>Tail position still flips while content remains projected markup.</p>\n </dd-speaker-bubble-outline>\n <span class=\"bubble-target\" #outlineRightTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n } @else {\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.neobrutal.slabTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.slabDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-neobrutal-slab [color]=\"colorOrange\" [tail]=\"'left'\">\n <small>Live drop</small>\n <p>Use ng-content for bold labels, paragraphs and inline status chips.</p>\n</dd-speaker-bubble-neobrutal-slab></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.livePanel' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-neobrutal-slab\n [color]=\"colorOrange\"\n [tail]=\"'left'\"\n [target]=\"slabLeftTarget\"\n >\n <small>Queue A</small>\n <p><strong>Live</strong> release banner for dashboards, status walls and loud interface narration.</p>\n </dd-speaker-bubble-neobrutal-slab>\n <span\n class=\"bubble-target bubble-target--orange\"\n #slabLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.hotReply' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-neobrutal-slab\n [color]=\"colorViolet\"\n [tail]=\"'right'\"\n [target]=\"slabRightTarget\"\n >\n <small>Ops</small>\n <p>The slab version keeps a heavy tail and rigid geometry for louder chat layouts.</p>\n </dd-speaker-bubble-neobrutal-slab>\n <span\n class=\"bubble-target bubble-target--violet\"\n #slabRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.neobrutal.ticketTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.ticketDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-neobrutal-ticket [color]=\"colorDark\" [tail]=\"'right'\">\n <small>Alert feed</small>\n <p>Projected content stays flexible while the component provides the ticket shell.</p>\n</dd-speaker-bubble-neobrutal-ticket></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.alertTicket' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-neobrutal-ticket\n [color]=\"colorDark\"\n [tail]=\"'left'\"\n [target]=\"ticketLeftTarget\"\n >\n <small>Alert feed</small>\n <p>Ticket framing works for warning streams, operations chatter and serialized event logs.</p>\n </dd-speaker-bubble-neobrutal-ticket>\n <span\n class=\"bubble-target bubble-target--dark\"\n #ticketLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.ticketReply' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-neobrutal-ticket\n [color]=\"colorWhite\"\n [tail]=\"'right'\"\n [target]=\"ticketRightTarget\"\n >\n <small>Review</small>\n <p><strong>Approved</strong> for launch preview, keep the counter-note visible in the timeline.</p>\n </dd-speaker-bubble-neobrutal-ticket>\n <span\n class=\"bubble-target bubble-target--orange\"\n #ticketRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n }\n </duck-dev-tab>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:30px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--right .example-label{text-align:right}.demo-container .examples-block .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .bubble-preview{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:16px;overflow:visible}.demo-container .bubble-preview--end{align-items:flex-end}.demo-container .example-item{overflow:visible}.demo-container .bubble-target{position:relative;width:54px;height:54px;border:2px solid var(--dd-base-300);border-radius:18px;background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-blue) 16%,transparent) 0,transparent 52%),var(--dd-base-100);box-shadow:0 10px 18px color-mix(in srgb,var(--dd-base-400) 24%,transparent);flex:0 0 auto}.demo-container .bubble-target:before{content:\"\";position:absolute;inset:11px 13px 17px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-accent-blue) 22%,var(--dd-base-0))}.demo-container .bubble-target:after{content:\"\";position:absolute;left:17px;right:17px;bottom:10px;height:10px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-300) 85%,var(--dd-base-0))}.demo-container .bubble-target--violet{border-color:color-mix(in srgb,var(--dd-base-secondary) 42%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-secondary) 18%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-secondary) 10%,var(--dd-base-0))}.demo-container .bubble-target--orange{border-color:color-mix(in srgb,var(--dd-base-accent-orange) 46%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-orange) 22%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark{border-color:var(--dd-base-500);background:radial-gradient(circle at 34% 34%,color-mix(in srgb,var(--dd-base-0) 88%,transparent) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-yellow) 16%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-600) 92%,var(--dd-base-500))}.demo-container .bubble-target--dark:before{background:color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark:after{background:color-mix(in srgb,var(--dd-base-400) 80%,var(--dd-base-600))}.demo-container .example-item--neobrutal .bubble-target{border-width:4px;border-color:var(--dd-neo-ink);border-radius:0;box-shadow:6px 6px 0 var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"] }]
|
|
6173
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'speakerBubbleDoc.title' | transloco }}</h1>\n\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"introEl.innerHTML\"></div>\n </dd-card-accent>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.bubbleTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.bubbleDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-classic [color]=\"colorWhite\" [tail]=\"'left'\">\n <small>Product team</small>\n <p>Can we move the onboarding review to Thursday?</p>\n</dd-speaker-bubble-classic></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.leftTail' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-classic\n [color]=\"colorWhite\"\n [tail]=\"'left'\"\n [target]=\"classicLeftTarget\"\n >\n <small>Design sync</small>\n <p>Can we keep the hero copy shorter on mobile?</p>\n </dd-speaker-bubble-classic>\n <span class=\"bubble-target\" #classicLeftTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.rightTail' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-classic\n [color]=\"colorViolet\"\n [tail]=\"'right'\"\n [target]=\"classicRightTarget\"\n >\n <small>Frontend</small>\n <p>\n <strong>Yes</strong>, the block can keep a CTA and badge inside projected\n content.\n </p>\n </dd-speaker-bubble-classic>\n <span\n class=\"bubble-target bubble-target--violet\"\n #classicRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.softTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.softDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\">\n <small>Assistant</small>\n <p>Projected markup can include <strong>inline emphasis</strong> and metadata.</p>\n</dd-speaker-bubble-soft></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.richContent' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-soft\n [color]=\"colorOrange\"\n [tail]=\"'left'\"\n [target]=\"softLeftTarget\"\n >\n <small>Release note</small>\n <p>\n Bubble keeps a softer glassy surface for editorial comments and gentle callouts.\n </p>\n </dd-speaker-bubble-soft>\n <span\n class=\"bubble-target bubble-target--orange\"\n #softLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.darkMode' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-soft\n [color]=\"colorDark\"\n [tail]=\"'right'\"\n [target]=\"softRightTarget\"\n >\n <small>Night queue</small>\n <p>Rich content can stay readable even on dark palette variants.</p>\n </dd-speaker-bubble-soft>\n <span\n class=\"bubble-target bubble-target--dark\"\n #softRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.classic.outlineTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.classic.outlineDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-outline [color]=\"colorGray\" [tail]=\"'left'\">\n <small>System</small>\n <p>Outline variants work well for neutral hints and documentation notes.</p>\n</dd-speaker-bubble-outline></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.note' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-outline\n [color]=\"colorGray\"\n [tail]=\"'left'\"\n [target]=\"outlineLeftTarget\"\n >\n <small>Documentation</small>\n <p>\n Outlined speaker bubbles are useful for neutral side notes in dense layouts.\n </p>\n </dd-speaker-bubble-outline>\n <span class=\"bubble-target\" #outlineLeftTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.replyRight' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-outline\n [color]=\"colorWhite\"\n [tail]=\"'right'\"\n [target]=\"outlineRightTarget\"\n >\n <small>QA</small>\n <p>Tail position still flips while content remains projected markup.</p>\n </dd-speaker-bubble-outline>\n <span class=\"bubble-target\" #outlineRightTarget aria-hidden=\"true\"></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n } @else {\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.neobrutal.slabTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.slabDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-neobrutal-slab [color]=\"colorOrange\" [tail]=\"'left'\">\n <small>Live drop</small>\n <p>Use ng-content for bold labels, paragraphs and inline status chips.</p>\n</dd-speaker-bubble-neobrutal-slab></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.livePanel' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-neobrutal-slab\n [color]=\"colorOrange\"\n [tail]=\"'left'\"\n [target]=\"slabLeftTarget\"\n >\n <small>Queue A</small>\n <p>\n <strong>Live</strong> release banner for dashboards, status walls and loud\n interface narration.\n </p>\n </dd-speaker-bubble-neobrutal-slab>\n <span\n class=\"bubble-target bubble-target--orange\"\n #slabLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.hotReply' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-neobrutal-slab\n [color]=\"colorViolet\"\n [tail]=\"'right'\"\n [target]=\"slabRightTarget\"\n >\n <small>Ops</small>\n <p>\n The slab version keeps a heavy tail and rigid geometry for louder chat layouts.\n </p>\n </dd-speaker-bubble-neobrutal-slab>\n <span\n class=\"bubble-target bubble-target--violet\"\n #slabRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'speakerBubbleDoc.neobrutal.ticketTitle' | transloco }}</h2>\n <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.ticketDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n <pre><code><dd-speaker-bubble-neobrutal-ticket [color]=\"colorDark\" [tail]=\"'right'\">\n <small>Alert feed</small>\n <p>Projected content stays flexible while the component provides the ticket shell.</p>\n</dd-speaker-bubble-neobrutal-ticket></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'speakerBubbleDoc.common.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.alertTicket' | transloco }}</p>\n <div class=\"bubble-preview\">\n <dd-speaker-bubble-neobrutal-ticket\n [color]=\"colorDark\"\n [tail]=\"'left'\"\n [target]=\"ticketLeftTarget\"\n >\n <small>Alert feed</small>\n <p>\n Ticket framing works for warning streams, operations chatter and serialized\n event logs.\n </p>\n </dd-speaker-bubble-neobrutal-ticket>\n <span\n class=\"bubble-target bubble-target--dark\"\n #ticketLeftTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal example-item--right\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.ticketReply' | transloco }}</p>\n <div class=\"bubble-preview bubble-preview--end\">\n <dd-speaker-bubble-neobrutal-ticket\n [color]=\"colorWhite\"\n [tail]=\"'right'\"\n [target]=\"ticketRightTarget\"\n >\n <small>Review</small>\n <p>\n <strong>Approved</strong> for launch preview, keep the counter-note visible in\n the timeline.\n </p>\n </dd-speaker-bubble-neobrutal-ticket>\n <span\n class=\"bubble-target bubble-target--orange\"\n #ticketRightTarget\n aria-hidden=\"true\"\n ></span>\n </div>\n </div>\n </div>\n </div>\n </dd-card-section>\n }\n </duck-dev-tab>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:30px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--right .example-label{text-align:right}.demo-container .examples-block .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .bubble-preview{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:16px;overflow:visible}.demo-container .bubble-preview--end{align-items:flex-end}.demo-container .example-item{overflow:visible}.demo-container .bubble-target{position:relative;width:54px;height:54px;border:2px solid var(--dd-base-300);border-radius:18px;background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-blue) 16%,transparent) 0,transparent 52%),var(--dd-base-100);box-shadow:0 10px 18px color-mix(in srgb,var(--dd-base-400) 24%,transparent);flex:0 0 auto}.demo-container .bubble-target:before{content:\"\";position:absolute;inset:11px 13px 17px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-accent-blue) 22%,var(--dd-base-0))}.demo-container .bubble-target:after{content:\"\";position:absolute;left:17px;right:17px;bottom:10px;height:10px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-300) 85%,var(--dd-base-0))}.demo-container .bubble-target--violet{border-color:color-mix(in srgb,var(--dd-base-secondary) 42%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-secondary) 18%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-secondary) 10%,var(--dd-base-0))}.demo-container .bubble-target--orange{border-color:color-mix(in srgb,var(--dd-base-accent-orange) 46%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-orange) 22%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark{border-color:var(--dd-base-500);background:radial-gradient(circle at 34% 34%,color-mix(in srgb,var(--dd-base-0) 88%,transparent) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-yellow) 16%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-600) 92%,var(--dd-base-500))}.demo-container .bubble-target--dark:before{background:color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark:after{background:color-mix(in srgb,var(--dd-base-400) 80%,var(--dd-base-600))}.demo-container .example-item--neobrutal .bubble-target{border-width:4px;border-color:var(--dd-neo-ink);border-radius:0;box-shadow:6px 6px 0 var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"] }]
|
|
6061
6174
|
}], ctorParameters: () => [] });
|
|
6062
6175
|
|
|
6063
6176
|
class DuckDevBreadcrumbClassic {
|
|
@@ -6065,11 +6178,11 @@ class DuckDevBreadcrumbClassic {
|
|
|
6065
6178
|
separator = input('/', { ...(ngDevMode ? { debugName: "separator" } : {}) });
|
|
6066
6179
|
navigate = output();
|
|
6067
6180
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6068
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbClassic, isStandalone: true, selector: "dd-breadcrumb-classic", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__list\">\n @for (item of items(); track $index; let last = $last) {\n <li\n class=\"breadcrumb__item\"\n animate.enter=\"breadcrumb__item--enter\"\n animate.leave=\"breadcrumb__item--leave\"\n >\n @if (!last && item.url) {\n <button
|
|
6181
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbClassic, isStandalone: true, selector: "dd-breadcrumb-classic", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__list\">\n @for (item of items(); track $index; let last = $last) {\n <li\n class=\"breadcrumb__item\"\n animate.enter=\"breadcrumb__item--enter\"\n animate.leave=\"breadcrumb__item--leave\"\n >\n @if (!last && item.url) {\n <button class=\"breadcrumb__link\" type=\"button\" (click)=\"navigate.emit(item)\">\n {{ item.label }}\n </button>\n } @else {\n <span class=\"breadcrumb__current\" [attr.aria-current]=\"last ? 'page' : null\">{{\n item.label\n }}</span>\n }\n @if (!last) {\n <span class=\"breadcrumb__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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;height:40px;box-sizing:border-box}.breadcrumb__list{display:flex;flex-wrap:nowrap;align-items:center;margin:0;padding:0;list-style:none;height:100%;overflow-x:auto;scrollbar-width:none}.breadcrumb__list::-webkit-scrollbar{display:none}.breadcrumb__item{display:inline-flex;align-items:center;min-width:0}.breadcrumb__link{display:inline-block;max-width:200px;padding:6px 4px;border:none;background:transparent;color:var(--dd-base-accent-blue);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s ease,opacity .18s ease}.breadcrumb__link:hover{color:var(--dd-base-secondary);text-decoration:underline}.breadcrumb__link:focus-visible{outline:2px solid var(--dd-base-accent-blue);outline-offset:2px;border-radius:3px}.breadcrumb__current{display:inline-block;max-width:220px;padding:6px 4px;color:var(--dd-base-500);font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.breadcrumb__separator{flex-shrink:0;margin:0 8px;color:var(--dd-base-400);font-size:.8rem;-webkit-user-select:none;user-select:none}@keyframes breadcrumb-item-enter{0%{opacity:0;max-width:0;transform:translate(-8px)}50%{opacity:.4;max-width:250px}to{opacity:1;max-width:250px;transform:translate(0)}}@keyframes breadcrumb-item-leave{0%{opacity:1;max-width:250px;transform:translate(0)}50%{opacity:0;max-width:250px}to{opacity:0;max-width:0;transform:translate(-8px)}}.breadcrumb__item--enter{animation:breadcrumb-item-enter .3s cubic-bezier(.16,1,.3,1) both}.breadcrumb__item--leave{animation:breadcrumb-item-leave .22s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.breadcrumb__link{max-width:160px;font-size:.84rem}.breadcrumb__current{max-width:180px;font-size:.84rem}.breadcrumb__separator{margin:0 6px}}@media(max-width:480px){:host{height:36px}.breadcrumb__link{max-width:120px;padding:8px 2px;font-size:.8rem}.breadcrumb__current{max-width:140px;padding:8px 2px;font-size:.8rem}.breadcrumb__separator{margin:0 4px;font-size:.72rem}}@media(max-width:360px){.breadcrumb__link{max-width:90px;font-size:.75rem}.breadcrumb__current{max-width:110px;font-size:.75rem}.breadcrumb__separator{margin:0 3px}}\n"] });
|
|
6069
6182
|
}
|
|
6070
6183
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbClassic, decorators: [{
|
|
6071
6184
|
type: Component,
|
|
6072
|
-
args: [{ selector: 'dd-breadcrumb-classic', standalone: true, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__list\">\n @for (item of items(); track $index; let last = $last) {\n <li\n class=\"breadcrumb__item\"\n animate.enter=\"breadcrumb__item--enter\"\n animate.leave=\"breadcrumb__item--leave\"\n >\n @if (!last && item.url) {\n <button
|
|
6185
|
+
args: [{ selector: 'dd-breadcrumb-classic', standalone: true, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__list\">\n @for (item of items(); track $index; let last = $last) {\n <li\n class=\"breadcrumb__item\"\n animate.enter=\"breadcrumb__item--enter\"\n animate.leave=\"breadcrumb__item--leave\"\n >\n @if (!last && item.url) {\n <button class=\"breadcrumb__link\" type=\"button\" (click)=\"navigate.emit(item)\">\n {{ item.label }}\n </button>\n } @else {\n <span class=\"breadcrumb__current\" [attr.aria-current]=\"last ? 'page' : null\">{{\n item.label\n }}</span>\n }\n @if (!last) {\n <span class=\"breadcrumb__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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;height:40px;box-sizing:border-box}.breadcrumb__list{display:flex;flex-wrap:nowrap;align-items:center;margin:0;padding:0;list-style:none;height:100%;overflow-x:auto;scrollbar-width:none}.breadcrumb__list::-webkit-scrollbar{display:none}.breadcrumb__item{display:inline-flex;align-items:center;min-width:0}.breadcrumb__link{display:inline-block;max-width:200px;padding:6px 4px;border:none;background:transparent;color:var(--dd-base-accent-blue);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s ease,opacity .18s ease}.breadcrumb__link:hover{color:var(--dd-base-secondary);text-decoration:underline}.breadcrumb__link:focus-visible{outline:2px solid var(--dd-base-accent-blue);outline-offset:2px;border-radius:3px}.breadcrumb__current{display:inline-block;max-width:220px;padding:6px 4px;color:var(--dd-base-500);font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.breadcrumb__separator{flex-shrink:0;margin:0 8px;color:var(--dd-base-400);font-size:.8rem;-webkit-user-select:none;user-select:none}@keyframes breadcrumb-item-enter{0%{opacity:0;max-width:0;transform:translate(-8px)}50%{opacity:.4;max-width:250px}to{opacity:1;max-width:250px;transform:translate(0)}}@keyframes breadcrumb-item-leave{0%{opacity:1;max-width:250px;transform:translate(0)}50%{opacity:0;max-width:250px}to{opacity:0;max-width:0;transform:translate(-8px)}}.breadcrumb__item--enter{animation:breadcrumb-item-enter .3s cubic-bezier(.16,1,.3,1) both}.breadcrumb__item--leave{animation:breadcrumb-item-leave .22s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.breadcrumb__link{max-width:160px;font-size:.84rem}.breadcrumb__current{max-width:180px;font-size:.84rem}.breadcrumb__separator{margin:0 6px}}@media(max-width:480px){:host{height:36px}.breadcrumb__link{max-width:120px;padding:8px 2px;font-size:.8rem}.breadcrumb__current{max-width:140px;padding:8px 2px;font-size:.8rem}.breadcrumb__separator{margin:0 4px;font-size:.72rem}}@media(max-width:360px){.breadcrumb__link{max-width:90px;font-size:.75rem}.breadcrumb__current{max-width:110px;font-size:.75rem}.breadcrumb__separator{margin:0 3px}}\n"] }]
|
|
6073
6186
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }] } });
|
|
6074
6187
|
|
|
6075
6188
|
class DuckDevBreadcrumbNeobrutal {
|
|
@@ -6206,11 +6319,11 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
6206
6319
|
}
|
|
6207
6320
|
}
|
|
6208
6321
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6209
|
-
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 }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, viewQueries: [{ propertyName: "breadcrumbShell", first: true, predicate: ["breadcrumbShell"], descendants: true, isSignal: true }, { propertyName: "breadcrumbNav", first: true, predicate: ["breadcrumbNav"], descendants: true, isSignal: true }], ngImport: i0, template: "<
|
|
6322
|
+
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 }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, viewQueries: [{ propertyName: "breadcrumbShell", first: true, predicate: ["breadcrumbShell"], descendants: true, isSignal: true }, { propertyName: "breadcrumbNav", first: true, predicate: ["breadcrumbNav"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav class=\"neo-bc\" aria-label=\"Breadcrumb\" [ngStyle]=\"breadcrumbStyle()\">\n <ol class=\"neo-bc__list\">\n @for (item of items(); 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 class=\"neo-bc__link\" type=\"button\" (click)=\"navigate.emit(item)\">\n <span class=\"neo-bc__chip\">{{ item.label }}</span>\n </button>\n } @else {\n <span class=\"neo-bc__current\" [attr.aria-current]=\"last ? 'page' : null\">\n <span class=\"neo-bc__chip neo-bc__chip--active\">{{ item.label }}</span>\n </span>\n }\n @if (!last) {\n <span class=\"neo-bc__arrow\" aria-hidden=\"true\"></span>\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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;box-sizing:border-box}.neo-bc-shell{min-height:65px;overflow:visible;transition:height .2s ease}.neo-bc{--neo-bc-arrow-space: 18px;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);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px;align-items:center;row-gap:8px;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% - var(--neo-bc-arrow-space));padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:manipulation}.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% - var(--neo-bc-arrow-space));touch-action:manipulation}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{--neo-bc-arrow-margin: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-right: 0;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-left:var(--neo-bc-arrow-margin);border-width:var(--neo-bc-arrow-top) var(--neo-bc-arrow-right) var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.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-link);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:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:translateY(-4px) scale(.9)}50%{opacity:.5}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:0}to{opacity: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{--neo-bc-arrow-margin: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px}}@media(max-width:480px){.neo-bc-shell{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{--neo-bc-arrow-margin: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 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{--neo-bc-arrow-margin: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
6210
6323
|
}
|
|
6211
6324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, decorators: [{
|
|
6212
6325
|
type: Component,
|
|
6213
|
-
args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<
|
|
6326
|
+
args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<nav class=\"neo-bc\" aria-label=\"Breadcrumb\" [ngStyle]=\"breadcrumbStyle()\">\n <ol class=\"neo-bc__list\">\n @for (item of items(); track $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 class=\"neo-bc__link\" type=\"button\" (click)=\"navigate.emit(item)\">\n <span class=\"neo-bc__chip\">{{ item.label }}</span>\n </button>\n } @else {\n <span class=\"neo-bc__current\" [attr.aria-current]=\"last ? 'page' : null\">\n <span class=\"neo-bc__chip neo-bc__chip--active\">{{ item.label }}</span>\n </span>\n }\n @if (!last) {\n <span class=\"neo-bc__arrow\" aria-hidden=\"true\"></span>\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-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;box-sizing:border-box}.neo-bc-shell{min-height:65px;overflow:visible;transition:height .2s ease}.neo-bc{--neo-bc-arrow-space: 18px;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);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px;align-items:center;row-gap:8px;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% - var(--neo-bc-arrow-space));padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:manipulation}.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% - var(--neo-bc-arrow-space));touch-action:manipulation}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{--neo-bc-arrow-margin: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-right: 0;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-left:var(--neo-bc-arrow-margin);border-width:var(--neo-bc-arrow-top) var(--neo-bc-arrow-right) var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.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-link);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:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:translateY(-4px) scale(.9)}50%{opacity:.5}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:0}to{opacity: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{--neo-bc-arrow-margin: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px}}@media(max-width:480px){.neo-bc-shell{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{--neo-bc-arrow-margin: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 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{--neo-bc-arrow-margin: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px}}\n"] }]
|
|
6214
6327
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], breadcrumbShell: [{ type: i0.ViewChild, args: ['breadcrumbShell', { isSignal: true }] }], breadcrumbNav: [{ type: i0.ViewChild, args: ['breadcrumbNav', { isSignal: true }] }] } });
|
|
6215
6328
|
|
|
6216
6329
|
class BreadcrumbBlock {
|
|
@@ -6234,11 +6347,16 @@ class BreadcrumbBlock {
|
|
|
6234
6347
|
this.lastNavigated.set(item.label);
|
|
6235
6348
|
}
|
|
6236
6349
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BreadcrumbBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6237
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BreadcrumbBlock, isStandalone: true, selector: "app-breadcrumb-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-breadcrumb-classic\n [items]=\"breadcrumbs\"\n (navigate)=\"onNavigate($event)\"\n/>\n\n<dd-breadcrumb-neobrutal\n [items]=\"breadcrumbs\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n <dd-breadcrumb-classic
|
|
6350
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BreadcrumbBlock, isStandalone: true, selector: "app-breadcrumb-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-breadcrumb-classic\n [items]=\"breadcrumbs\"\n (navigate)=\"onNavigate($event)\"\n/>\n\n<dd-breadcrumb-neobrutal\n [items]=\"breadcrumbs\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n <dd-breadcrumb-classic [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n </div>\n\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n <dd-breadcrumb-classic\n [items]=\"longItems\"\n separator=\">\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n <dd-breadcrumb-neobrutal [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"longItems\"\n [color]=\"colorOrange\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorDark\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n @if (lastNavigated()) {\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n <b>{{ lastNavigated() }}</b>\n </div>\n }\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevBreadcrumbClassic, selector: "dd-breadcrumb-classic", inputs: ["items", "separator"], outputs: ["navigate"] }, { kind: "component", type: DuckDevBreadcrumbNeobrutal, selector: "dd-breadcrumb-neobrutal", inputs: ["items", "color", "isMobile"], outputs: ["navigate"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6238
6351
|
}
|
|
6239
6352
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BreadcrumbBlock, decorators: [{
|
|
6240
6353
|
type: Component,
|
|
6241
|
-
args: [{ selector: 'app-breadcrumb-block', standalone: true, imports: [
|
|
6354
|
+
args: [{ selector: 'app-breadcrumb-block', standalone: true, imports: [
|
|
6355
|
+
TranslocoPipe,
|
|
6356
|
+
DuckDevCardSection,
|
|
6357
|
+
DuckDevBreadcrumbClassic,
|
|
6358
|
+
DuckDevBreadcrumbNeobrutal,
|
|
6359
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-breadcrumb-classic\n [items]=\"breadcrumbs\"\n (navigate)=\"onNavigate($event)\"\n/>\n\n<dd-breadcrumb-neobrutal\n [items]=\"breadcrumbs\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n <dd-breadcrumb-classic [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n </div>\n\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n <dd-breadcrumb-classic\n [items]=\"longItems\"\n separator=\">\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n <dd-breadcrumb-neobrutal [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"longItems\"\n [color]=\"colorOrange\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorDark\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n @if (lastNavigated()) {\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n <b>{{ lastNavigated() }}</b>\n </div>\n }\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
6242
6360
|
}] });
|
|
6243
6361
|
|
|
6244
6362
|
class MainDocumentationPage {
|
|
@@ -6310,5 +6428,5 @@ const DuckDevLibTranslations = {
|
|
|
6310
6428
|
* Generated bundle index. Do not edit.
|
|
6311
6429
|
*/
|
|
6312
6430
|
|
|
6313
|
-
export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalSticker, ButtonNeobrutalTag, ButtonNeobrutalTape, ButtonNeobrutalZigzag, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevAccordionNeobrutalTapeComponent as DuckDevAccordionNeobrutalTape, DuckDevBreadcrumbClassic, DuckDevBreadcrumbNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevSegmentButton, DuckDevSegmentClassic, DuckDevSegmentNeobrutal, DuckDevSpeakerBubbleClassic, DuckDevSpeakerBubbleNeobrutalSlab, DuckDevSpeakerBubbleNeobrutalTicket, DuckDevSpeakerBubbleOutline, DuckDevSpeakerBubbleSoft, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic, getClassicSpeakerBubbleStyle, getNeobrutalSpeakerBubbleStyle, useSpeakerBubbleTail };
|
|
6431
|
+
export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalSticker, ButtonNeobrutalTag, ButtonNeobrutalTape, ButtonNeobrutalZigzag, DdFlexDirectionDirective, DdTabPanel, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevAccordionNeobrutalTapeComponent as DuckDevAccordionNeobrutalTape, DuckDevBreadcrumbClassic, DuckDevBreadcrumbNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevSegmentButton, DuckDevSegmentClassic, DuckDevSegmentNeobrutal, DuckDevSpeakerBubbleClassic, DuckDevSpeakerBubbleNeobrutalSlab, DuckDevSpeakerBubbleNeobrutalTicket, DuckDevSpeakerBubbleOutline, DuckDevSpeakerBubbleSoft, DuckDevTab, DuckDevTabNeobrutal, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic, getClassicSpeakerBubbleStyle, getNeobrutalSpeakerBubbleStyle, useSpeakerBubbleTail };
|
|
6314
6432
|
//# sourceMappingURL=duck-dev-lib.mjs.map
|