duck-dev-lib 0.1.1 → 0.1.3
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-documentation-en-B7HcW-fA.mjs → duck-dev-lib-documentation-en-CAkNMIl-.mjs} +68 -7
- package/fesm2022/{duck-dev-lib-documentation-ru-HvXNcT1n.mjs.map → duck-dev-lib-documentation-en-CAkNMIl-.mjs.map} +1 -1
- package/fesm2022/{duck-dev-lib-documentation-ru-HvXNcT1n.mjs → duck-dev-lib-documentation-ru-D_Za91c6.mjs} +68 -7
- package/fesm2022/{duck-dev-lib-documentation-en-B7HcW-fA.mjs.map → duck-dev-lib-documentation-ru-D_Za91c6.mjs.map} +1 -1
- package/fesm2022/duck-dev-lib-documentation.mjs +177 -72
- package/fesm2022/duck-dev-lib-documentation.mjs.map +1 -1
- package/fesm2022/duck-dev-lib.mjs +138 -50
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/duck-dev-lib.d.ts +50 -13
|
@@ -681,85 +681,131 @@ class ButtonNeobrutalBurst {
|
|
|
681
681
|
text = input('Launch', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
682
682
|
subtext = input('HOT DROP', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
|
|
683
683
|
isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
|
|
684
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}) });
|
|
685
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
686
|
+
wrapLabel = input(false, { ...(ngDevMode ? { debugName: "wrapLabel" } : {}) });
|
|
687
|
+
pillPosition = input('top-right', { ...(ngDevMode ? { debugName: "pillPosition" } : {}) });
|
|
688
|
+
pillWrap = input(false, { ...(ngDevMode ? { debugName: "pillWrap" } : {}) });
|
|
684
689
|
colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
685
690
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
686
691
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBurst, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
687
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalBurst, isStandalone: true, selector: "duck-dev-button-neobrutal-burst", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-burst\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"burst-pill\">{{ subtext() }}</span>\n <span class=\"burst-text\">\n <span class=\"burst-text__projected\"><ng-content></ng-content></span>\n <span class=\"burst-text__default\">{{ text() }}</span>\n </span>\n</button>\n", styles: [":host{display:inline-block}.neo-burst{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:190px;min-height:64px;padding
|
|
692
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalBurst, isStandalone: true, selector: "duck-dev-button-neobrutal-burst", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: true, isRequired: false, transformFunction: null }, pillPosition: { classPropertyName: "pillPosition", publicName: "pillPosition", isSignal: true, isRequired: false, transformFunction: null }, pillWrap: { classPropertyName: "pillWrap", publicName: "pillWrap", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dd-button--full-width": "fullWidth()", "class.dd-button--truncate": "truncate()", "class.dd-button--wrap": "wrapLabel()", "class.dd-button--pill-center": "pillPosition() === 'top-center'", "class.dd-button--pill-wrap": "pillWrap()" } }, ngImport: i0, template: "<button class=\"neo-burst\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"burst-pill\">{{ subtext() }}</span>\n <span class=\"burst-text\">\n <span class=\"burst-text__projected\"><ng-content></ng-content></span>\n <span class=\"burst-text__default\">{{ text() }}</span>\n </span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-burst{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 190px);min-height:var(--dd-button-burst-min-height, 64px);padding:var(--dd-button-burst-padding, .95rem 1.35rem);border:3px solid var(--dd-neo-ink);border-radius:20px 8px 18px 10px;background:var(--neo-surface);box-shadow:var(--dd-button-burst-shadow, 6px 6px 0 var(--neo-shadow));color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-burst:focus-visible{outline:3px solid var(--neo-accent);outline-offset:4px}@media(hover:hover)and (pointer:fine){.neo-burst:hover,.neo-burst:focus-visible{transform:var(--dd-button-burst-hover-transform, translate(3px, 3px) rotate(-1deg));box-shadow:var(--dd-button-burst-hover-shadow, 3px 3px 0 var(--neo-shadow))}}.neo-burst:active{transform:var(--dd-button-burst-active-transform, translate(6px, 6px));box-shadow:var(--dd-button-burst-active-shadow, 0 0 0 var(--neo-shadow))}@media(hover:none),(pointer:coarse){.neo-burst:hover,.neo-burst:focus,.neo-burst:focus-visible{transform:none;box-shadow:var(--dd-button-burst-shadow, 6px 6px 0 var(--neo-shadow))}.neo-burst:active{transform:var(--dd-button-burst-active-transform, translate(6px, 6px));box-shadow:var(--dd-button-burst-active-shadow, 0 0 0 var(--neo-shadow))}}.neo-burst:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:3px 3px 0 var(--dd-base-300)}.burst-pill{position:absolute;top:var(--dd-button-burst-pill-offset-top, -14px);right:var(--dd-button-burst-pill-offset-right, 12px);padding:var(--dd-button-burst-pill-padding, .2rem .55rem);border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-accent);color:var(--dd-base-600);font-size:var(--dd-button-burst-pill-font-size, .72rem);line-height:1;transform:var(--dd-button-burst-pill-transform, rotate(8deg))}.burst-text{display:inline-block;max-width:100%;text-align:center;font-size:var(--dd-button-burst-text-font-size, inherit);line-height:var(--dd-button-burst-text-line-height, normal)}.burst-text__projected,.burst-text__default{display:contents}.burst-text__projected:not(:empty)+.burst-text__default{display:none}:host(.dd-button--full-width) .neo-burst{box-sizing:border-box}:host(.dd-button--truncate) .burst-text{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .burst-text{display:block;white-space:normal;overflow-wrap:anywhere;text-align:center}:host(.dd-button--pill-center) .burst-pill{right:auto;left:50%;--dd-button-burst-pill-transform: translateX(-50%) rotate(-2deg)}:host(.dd-button--pill-wrap) .burst-pill{max-width:90%;white-space:normal;line-height:1.1;text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
688
693
|
}
|
|
689
694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBurst, decorators: [{
|
|
690
695
|
type: Component,
|
|
691
|
-
args: [{ selector: 'duck-dev-button-neobrutal-burst', standalone: true, imports: [NgStyle],
|
|
692
|
-
|
|
696
|
+
args: [{ selector: 'duck-dev-button-neobrutal-burst', standalone: true, imports: [NgStyle], host: {
|
|
697
|
+
'[class.dd-button--full-width]': 'fullWidth()',
|
|
698
|
+
'[class.dd-button--truncate]': 'truncate()',
|
|
699
|
+
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
700
|
+
'[class.dd-button--pill-center]': "pillPosition() === 'top-center'",
|
|
701
|
+
'[class.dd-button--pill-wrap]': 'pillWrap()',
|
|
702
|
+
}, template: "<button class=\"neo-burst\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"burst-pill\">{{ subtext() }}</span>\n <span class=\"burst-text\">\n <span class=\"burst-text__projected\"><ng-content></ng-content></span>\n <span class=\"burst-text__default\">{{ text() }}</span>\n </span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-burst{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 190px);min-height:var(--dd-button-burst-min-height, 64px);padding:var(--dd-button-burst-padding, .95rem 1.35rem);border:3px solid var(--dd-neo-ink);border-radius:20px 8px 18px 10px;background:var(--neo-surface);box-shadow:var(--dd-button-burst-shadow, 6px 6px 0 var(--neo-shadow));color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-burst:focus-visible{outline:3px solid var(--neo-accent);outline-offset:4px}@media(hover:hover)and (pointer:fine){.neo-burst:hover,.neo-burst:focus-visible{transform:var(--dd-button-burst-hover-transform, translate(3px, 3px) rotate(-1deg));box-shadow:var(--dd-button-burst-hover-shadow, 3px 3px 0 var(--neo-shadow))}}.neo-burst:active{transform:var(--dd-button-burst-active-transform, translate(6px, 6px));box-shadow:var(--dd-button-burst-active-shadow, 0 0 0 var(--neo-shadow))}@media(hover:none),(pointer:coarse){.neo-burst:hover,.neo-burst:focus,.neo-burst:focus-visible{transform:none;box-shadow:var(--dd-button-burst-shadow, 6px 6px 0 var(--neo-shadow))}.neo-burst:active{transform:var(--dd-button-burst-active-transform, translate(6px, 6px));box-shadow:var(--dd-button-burst-active-shadow, 0 0 0 var(--neo-shadow))}}.neo-burst:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:3px 3px 0 var(--dd-base-300)}.burst-pill{position:absolute;top:var(--dd-button-burst-pill-offset-top, -14px);right:var(--dd-button-burst-pill-offset-right, 12px);padding:var(--dd-button-burst-pill-padding, .2rem .55rem);border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-accent);color:var(--dd-base-600);font-size:var(--dd-button-burst-pill-font-size, .72rem);line-height:1;transform:var(--dd-button-burst-pill-transform, rotate(8deg))}.burst-text{display:inline-block;max-width:100%;text-align:center;font-size:var(--dd-button-burst-text-font-size, inherit);line-height:var(--dd-button-burst-text-line-height, normal)}.burst-text__projected,.burst-text__default{display:contents}.burst-text__projected:not(:empty)+.burst-text__default{display:none}:host(.dd-button--full-width) .neo-burst{box-sizing:border-box}:host(.dd-button--truncate) .burst-text{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .burst-text{display:block;white-space:normal;overflow-wrap:anywhere;text-align:center}:host(.dd-button--pill-center) .burst-pill{right:auto;left:50%;--dd-button-burst-pill-transform: translateX(-50%) rotate(-2deg)}:host(.dd-button--pill-wrap) .burst-pill{max-width:90%;white-space:normal;line-height:1.1;text-align:center}\n"] }]
|
|
703
|
+
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], wrapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapLabel", required: false }] }], pillPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "pillPosition", required: false }] }], pillWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "pillWrap", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
693
704
|
|
|
694
705
|
class ButtonNeobrutalSlab {
|
|
695
706
|
text = input('Drop Zone', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
696
707
|
helperText = input('ready to ship', { ...(ngDevMode ? { debugName: "helperText" } : {}) });
|
|
697
708
|
isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
|
|
709
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}) });
|
|
710
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
711
|
+
wrapLabel = input(false, { ...(ngDevMode ? { debugName: "wrapLabel" } : {}) });
|
|
698
712
|
colorButton = input(AccentEnumColor.Gray, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
699
713
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
700
714
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
701
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalSlab, isStandalone: true, selector: "duck-dev-button-neobrutal-slab", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"slab-stripe\" aria-hidden=\"true\"></span>\n <span class=\"slab-content\">\n <span class=\"slab-text\">\n <span class=\"slab-text__projected\"><ng-content></ng-content></span>\n <span class=\"slab-text__default\">{{ text() }}</span>\n </span>\n <span class=\"slab-helper\">{{ helperText() }}</span>\n </span>\n <span class=\"slab-dot\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":host{display:inline-block}.neo-slab{position:relative;display:flex;align-items:stretch;min-width:220px;padding:0;border:3px solid var(--dd-neo-ink);border-radius:0;background:var(--neo-surface);box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow);color:var(--neo-text);cursor:pointer;text-align:left;font:inherit;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.neo-slab:hover,.neo-slab:focus-visible{transform:translate(-3px,-3px) rotate(-.5deg);box-shadow:10px 10px 0 var(--neo-shadow),10px 10px 0 3px var(--dd-neo-shadow)}.neo-slab:hover .slab-stripe,.neo-slab:focus-visible .slab-stripe{width:14px}.neo-slab:hover .slab-dot,.neo-slab:focus-visible .slab-dot{transform:scale(1.3) rotate(45deg)}.neo-slab:hover .slab-helper,.neo-slab:focus-visible .slab-helper{letter-spacing:.2em}.neo-slab:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-slab:disabled{cursor:not-allowed;opacity:.6;transform:none}.slab-stripe{display:block;width:10px;flex-shrink:0;background:repeating-linear-gradient(-45deg,var(--neo-accent),var(--neo-accent) 3px,var(--neo-shadow) 3px,var(--neo-shadow) 6px);border-right:3px solid var(--dd-neo-ink);transition:width .2s ease}.slab-content{display:grid;gap:.2rem;flex:1;padding:.9rem 1.1rem}.slab-text{font-size:1rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.slab-text__projected,.slab-text__default{display:contents}.slab-text__projected:not(:empty)+.slab-text__default{display:none}.slab-helper{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.6;transition:letter-spacing .2s ease}.slab-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--neo-accent);border:2px solid var(--dd-neo-ink);transition:transform .2s ease}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
715
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalSlab, isStandalone: true, selector: "duck-dev-button-neobrutal-slab", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dd-button--full-width": "fullWidth()", "class.dd-button--truncate": "truncate()", "class.dd-button--wrap": "wrapLabel()" } }, ngImport: i0, template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"slab-stripe\" aria-hidden=\"true\"></span>\n <span class=\"slab-content\">\n <span class=\"slab-text\">\n <span class=\"slab-text__projected\"><ng-content></ng-content></span>\n <span class=\"slab-text__default\">{{ text() }}</span>\n </span>\n <span class=\"slab-helper\">{{ helperText() }}</span>\n </span>\n <span class=\"slab-dot\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-slab{position:relative;display:flex;align-items:stretch;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 220px);padding:0;border:3px solid var(--dd-neo-ink);border-radius:0;background:var(--neo-surface);box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow);color:var(--neo-text);cursor:pointer;text-align:left;font:inherit;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.neo-slab:hover,.neo-slab:focus-visible{transform:translate(-3px,-3px) rotate(-.5deg);box-shadow:10px 10px 0 var(--neo-shadow),10px 10px 0 3px var(--dd-neo-shadow)}.neo-slab:hover .slab-stripe,.neo-slab:focus-visible .slab-stripe{width:14px}.neo-slab:hover .slab-dot,.neo-slab:focus-visible .slab-dot{transform:scale(1.3) rotate(45deg)}.neo-slab:hover .slab-helper,.neo-slab:focus-visible .slab-helper{letter-spacing:.2em}.neo-slab:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-slab:disabled{cursor:not-allowed;opacity:.6;transform:none}.slab-stripe{display:block;width:10px;flex-shrink:0;background:repeating-linear-gradient(-45deg,var(--neo-accent),var(--neo-accent) 3px,var(--neo-shadow) 3px,var(--neo-shadow) 6px);border-right:3px solid var(--dd-neo-ink);transition:width .2s ease}.slab-content{display:grid;gap:.2rem;flex:1;padding:.9rem 1.1rem}.slab-text{font-size:1rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.slab-text__projected,.slab-text__default{display:contents}.slab-text__projected:not(:empty)+.slab-text__default{display:none}.slab-helper{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.6;transition:letter-spacing .2s ease}.slab-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--neo-accent);border:2px solid var(--dd-neo-ink);transition:transform .2s ease}:host(.dd-button--full-width) .neo-slab{box-sizing:border-box}:host(.dd-button--truncate) .slab-content{min-width:0}:host(.dd-button--truncate) .slab-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .slab-text{display:block;white-space:normal;overflow-wrap:anywhere}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
702
716
|
}
|
|
703
717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSlab, decorators: [{
|
|
704
718
|
type: Component,
|
|
705
|
-
args: [{ selector: 'duck-dev-button-neobrutal-slab', standalone: true, imports: [NgStyle],
|
|
706
|
-
|
|
719
|
+
args: [{ selector: 'duck-dev-button-neobrutal-slab', standalone: true, imports: [NgStyle], host: {
|
|
720
|
+
'[class.dd-button--full-width]': 'fullWidth()',
|
|
721
|
+
'[class.dd-button--truncate]': 'truncate()',
|
|
722
|
+
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
723
|
+
}, template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"slab-stripe\" aria-hidden=\"true\"></span>\n <span class=\"slab-content\">\n <span class=\"slab-text\">\n <span class=\"slab-text__projected\"><ng-content></ng-content></span>\n <span class=\"slab-text__default\">{{ text() }}</span>\n </span>\n <span class=\"slab-helper\">{{ helperText() }}</span>\n </span>\n <span class=\"slab-dot\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-slab{position:relative;display:flex;align-items:stretch;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 220px);padding:0;border:3px solid var(--dd-neo-ink);border-radius:0;background:var(--neo-surface);box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow);color:var(--neo-text);cursor:pointer;text-align:left;font:inherit;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.neo-slab:hover,.neo-slab:focus-visible{transform:translate(-3px,-3px) rotate(-.5deg);box-shadow:10px 10px 0 var(--neo-shadow),10px 10px 0 3px var(--dd-neo-shadow)}.neo-slab:hover .slab-stripe,.neo-slab:focus-visible .slab-stripe{width:14px}.neo-slab:hover .slab-dot,.neo-slab:focus-visible .slab-dot{transform:scale(1.3) rotate(45deg)}.neo-slab:hover .slab-helper,.neo-slab:focus-visible .slab-helper{letter-spacing:.2em}.neo-slab:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-slab:disabled{cursor:not-allowed;opacity:.6;transform:none}.slab-stripe{display:block;width:10px;flex-shrink:0;background:repeating-linear-gradient(-45deg,var(--neo-accent),var(--neo-accent) 3px,var(--neo-shadow) 3px,var(--neo-shadow) 6px);border-right:3px solid var(--dd-neo-ink);transition:width .2s ease}.slab-content{display:grid;gap:.2rem;flex:1;padding:.9rem 1.1rem}.slab-text{font-size:1rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.slab-text__projected,.slab-text__default{display:contents}.slab-text__projected:not(:empty)+.slab-text__default{display:none}.slab-helper{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.6;transition:letter-spacing .2s ease}.slab-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--neo-accent);border:2px solid var(--dd-neo-ink);transition:transform .2s ease}:host(.dd-button--full-width) .neo-slab{box-sizing:border-box}:host(.dd-button--truncate) .slab-content{min-width:0}:host(.dd-button--truncate) .slab-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .slab-text{display:block;white-space:normal;overflow-wrap:anywhere}\n"] }]
|
|
724
|
+
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], wrapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapLabel", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
707
725
|
|
|
708
726
|
class ButtonNeobrutalTag {
|
|
709
727
|
text = input('Buy now', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
710
728
|
tag = input('01', { ...(ngDevMode ? { debugName: "tag" } : {}) });
|
|
711
729
|
isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
|
|
730
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}) });
|
|
731
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
732
|
+
wrapLabel = input(false, { ...(ngDevMode ? { debugName: "wrapLabel" } : {}) });
|
|
712
733
|
colorButton = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
713
734
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
714
735
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
715
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalTag, isStandalone: true, selector: "duck-dev-button-neobrutal-tag", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-tag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tag-chip\">{{ tag() }}</span>\n <span class=\"tag-text\">\n <span class=\"tag-text__projected\"><ng-content></ng-content></span>\n <span class=\"tag-text__default\">{{ text() }}</span>\n </span>\n</button>\n", styles: [":host{display:inline-block}.neo-tag{position:relative;display:inline-flex;align-items:stretch;min-width:210px;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-surface);box-shadow:0 8px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;overflow:hidden;font:inherit;transition:transform .18s ease,box-shadow .18s ease}.neo-tag:hover,.neo-tag:focus-visible{transform:translateY(-3px);box-shadow:0 11px 0 var(--neo-shadow)}.neo-tag:active{transform:translateY(4px);box-shadow:0 4px 0 var(--neo-shadow)}.neo-tag:disabled{cursor:not-allowed;opacity:.6}.tag-chip{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:.9rem .75rem;border-right:3px solid var(--dd-neo-ink);background:var(--neo-accent);color:var(--dd-base-600);font-size:.88rem;font-weight:900;letter-spacing:.08em}.tag-text{display:inline-flex;align-items:center;justify-content:center;flex:1;padding:.9rem 1.15rem;font-size:.95rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.tag-text__projected,.tag-text__default{display:contents}.tag-text__projected:not(:empty)+.tag-text__default{display:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
736
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalTag, isStandalone: true, selector: "duck-dev-button-neobrutal-tag", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dd-button--full-width": "fullWidth()", "class.dd-button--truncate": "truncate()", "class.dd-button--wrap": "wrapLabel()" } }, ngImport: i0, template: "<button class=\"neo-tag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tag-chip\">{{ tag() }}</span>\n <span class=\"tag-text\">\n <span class=\"tag-text__projected\"><ng-content></ng-content></span>\n <span class=\"tag-text__default\">{{ text() }}</span>\n </span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-tag{position:relative;display:inline-flex;align-items:stretch;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 210px);border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-surface);box-shadow:0 8px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;overflow:hidden;font:inherit;transition:transform .18s ease,box-shadow .18s ease}.neo-tag:hover,.neo-tag:focus-visible{transform:translateY(-3px);box-shadow:0 11px 0 var(--neo-shadow)}.neo-tag:active{transform:translateY(4px);box-shadow:0 4px 0 var(--neo-shadow)}.neo-tag:disabled{cursor:not-allowed;opacity:.6}.tag-chip{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:.9rem .75rem;border-right:3px solid var(--dd-neo-ink);background:var(--dd-button-tag-chip-background, var(--neo-accent));color:var(--dd-button-tag-chip-color, var(--dd-base-600));font-size:.88rem;font-weight:900;letter-spacing:.08em}.tag-text{display:inline-flex;align-items:center;justify-content:center;flex:1;padding:.9rem 1.15rem;font-size:.95rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.tag-text__projected,.tag-text__default{display:contents}.tag-text__projected:not(:empty)+.tag-text__default{display:none}:host(.dd-button--full-width) .neo-tag{box-sizing:border-box}:host(.dd-button--truncate) .tag-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}:host(.dd-button--wrap) .tag-text{display:block;white-space:normal;overflow-wrap:anywhere;text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
716
737
|
}
|
|
717
738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTag, decorators: [{
|
|
718
739
|
type: Component,
|
|
719
|
-
args: [{ selector: 'duck-dev-button-neobrutal-tag', standalone: true, imports: [NgStyle],
|
|
720
|
-
|
|
740
|
+
args: [{ selector: 'duck-dev-button-neobrutal-tag', standalone: true, imports: [NgStyle], host: {
|
|
741
|
+
'[class.dd-button--full-width]': 'fullWidth()',
|
|
742
|
+
'[class.dd-button--truncate]': 'truncate()',
|
|
743
|
+
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
744
|
+
}, template: "<button class=\"neo-tag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tag-chip\">{{ tag() }}</span>\n <span class=\"tag-text\">\n <span class=\"tag-text__projected\"><ng-content></ng-content></span>\n <span class=\"tag-text__default\">{{ text() }}</span>\n </span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-tag{position:relative;display:inline-flex;align-items:stretch;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 210px);border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-surface);box-shadow:0 8px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;overflow:hidden;font:inherit;transition:transform .18s ease,box-shadow .18s ease}.neo-tag:hover,.neo-tag:focus-visible{transform:translateY(-3px);box-shadow:0 11px 0 var(--neo-shadow)}.neo-tag:active{transform:translateY(4px);box-shadow:0 4px 0 var(--neo-shadow)}.neo-tag:disabled{cursor:not-allowed;opacity:.6}.tag-chip{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:.9rem .75rem;border-right:3px solid var(--dd-neo-ink);background:var(--dd-button-tag-chip-background, var(--neo-accent));color:var(--dd-button-tag-chip-color, var(--dd-base-600));font-size:.88rem;font-weight:900;letter-spacing:.08em}.tag-text{display:inline-flex;align-items:center;justify-content:center;flex:1;padding:.9rem 1.15rem;font-size:.95rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.tag-text__projected,.tag-text__default{display:contents}.tag-text__projected:not(:empty)+.tag-text__default{display:none}:host(.dd-button--full-width) .neo-tag{box-sizing:border-box}:host(.dd-button--truncate) .tag-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}:host(.dd-button--wrap) .tag-text{display:block;white-space:normal;overflow-wrap:anywhere;text-align:center}\n"] }]
|
|
745
|
+
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], wrapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapLabel", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
721
746
|
|
|
722
747
|
class ButtonNeobrutalSticker {
|
|
723
748
|
text = input('Peel me', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
724
749
|
subtext = input('new', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
|
|
725
750
|
isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
|
|
751
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}) });
|
|
752
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
753
|
+
wrapLabel = input(false, { ...(ngDevMode ? { debugName: "wrapLabel" } : {}) });
|
|
726
754
|
colorButton = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
727
755
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
728
756
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSticker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
729
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalSticker, isStandalone: true, selector: "duck-dev-button-neobrutal-sticker", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-sticker\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"sticker-text\">\n <span class=\"sticker-text__projected\"><ng-content></ng-content></span>\n <span class=\"sticker-text__default\">{{ text() }}</span>\n </span>\n <span class=\"sticker-badge\">{{ subtext() }}</span>\n</button>\n", styles: [":host{display:inline-block}.neo-sticker{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-width:200px;min-height:60px;padding:.9rem 2.8rem .9rem 1.3rem;border:3px solid var(--dd-neo-ink);border-radius:6px;background:var(--neo-surface);box-shadow:5px 5px 0 var(--neo-shadow),5px 5px 0 3px var(--dd-neo-shadow);color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;transition:transform .22s ease,box-shadow .22s ease}.neo-sticker:hover,.neo-sticker:focus-visible{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:8px 8px 0 var(--neo-shadow),8px 8px 0 3px var(--dd-neo-shadow)}.neo-sticker:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-sticker:disabled{cursor:not-allowed;opacity:.6;transform:none}.sticker-text{position:relative;z-index:1;font-size:.95rem}.sticker-text__projected,.sticker-text__default{display:contents}.sticker-text__projected:not(:empty)+.sticker-text__default{display:none}.sticker-badge{position:absolute;top:-10px;left:-8px;padding:.15rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.65rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-6deg);z-index:2}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
757
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalSticker, isStandalone: true, selector: "duck-dev-button-neobrutal-sticker", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dd-button--full-width": "fullWidth()", "class.dd-button--truncate": "truncate()", "class.dd-button--wrap": "wrapLabel()" } }, ngImport: i0, template: "<button class=\"neo-sticker\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"sticker-text\">\n <span class=\"sticker-text__projected\"><ng-content></ng-content></span>\n <span class=\"sticker-text__default\">{{ text() }}</span>\n </span>\n <span class=\"sticker-badge\">{{ subtext() }}</span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-sticker{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 200px);min-height:60px;padding:.9rem 2.8rem .9rem 1.3rem;border:3px solid var(--dd-neo-ink);border-radius:6px;background:var(--neo-surface);box-shadow:5px 5px 0 var(--neo-shadow),5px 5px 0 3px var(--dd-neo-shadow);color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;transition:transform .22s ease,box-shadow .22s ease}.neo-sticker:hover,.neo-sticker:focus-visible{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:8px 8px 0 var(--neo-shadow),8px 8px 0 3px var(--dd-neo-shadow)}.neo-sticker:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-sticker:disabled{cursor:not-allowed;opacity:.6;transform:none}.sticker-text{position:relative;z-index:1;font-size:.95rem}.sticker-text__projected,.sticker-text__default{display:contents}.sticker-text__projected:not(:empty)+.sticker-text__default{display:none}.sticker-badge{position:absolute;top:-10px;left:-8px;padding:.15rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.65rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-6deg);z-index:2}:host(.dd-button--full-width) .neo-sticker{box-sizing:border-box}:host(.dd-button--truncate) .sticker-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .sticker-text{display:block;white-space:normal;overflow-wrap:anywhere;text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
730
758
|
}
|
|
731
759
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSticker, decorators: [{
|
|
732
760
|
type: Component,
|
|
733
|
-
args: [{ selector: 'duck-dev-button-neobrutal-sticker', standalone: true, imports: [NgStyle],
|
|
734
|
-
|
|
761
|
+
args: [{ selector: 'duck-dev-button-neobrutal-sticker', standalone: true, imports: [NgStyle], host: {
|
|
762
|
+
'[class.dd-button--full-width]': 'fullWidth()',
|
|
763
|
+
'[class.dd-button--truncate]': 'truncate()',
|
|
764
|
+
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
765
|
+
}, template: "<button class=\"neo-sticker\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"sticker-text\">\n <span class=\"sticker-text__projected\"><ng-content></ng-content></span>\n <span class=\"sticker-text__default\">{{ text() }}</span>\n </span>\n <span class=\"sticker-badge\">{{ subtext() }}</span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-sticker{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 200px);min-height:60px;padding:.9rem 2.8rem .9rem 1.3rem;border:3px solid var(--dd-neo-ink);border-radius:6px;background:var(--neo-surface);box-shadow:5px 5px 0 var(--neo-shadow),5px 5px 0 3px var(--dd-neo-shadow);color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;transition:transform .22s ease,box-shadow .22s ease}.neo-sticker:hover,.neo-sticker:focus-visible{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:8px 8px 0 var(--neo-shadow),8px 8px 0 3px var(--dd-neo-shadow)}.neo-sticker:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-sticker:disabled{cursor:not-allowed;opacity:.6;transform:none}.sticker-text{position:relative;z-index:1;font-size:.95rem}.sticker-text__projected,.sticker-text__default{display:contents}.sticker-text__projected:not(:empty)+.sticker-text__default{display:none}.sticker-badge{position:absolute;top:-10px;left:-8px;padding:.15rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.65rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-6deg);z-index:2}:host(.dd-button--full-width) .neo-sticker{box-sizing:border-box}:host(.dd-button--truncate) .sticker-text{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .sticker-text{display:block;white-space:normal;overflow-wrap:anywhere;text-align:center}\n"] }]
|
|
766
|
+
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], wrapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapLabel", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
735
767
|
|
|
736
768
|
class ButtonNeobrutalZigzag {
|
|
737
769
|
text = input('Tear off', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
738
770
|
label = input('FREE', { ...(ngDevMode ? { debugName: "label" } : {}) });
|
|
739
771
|
isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
|
|
772
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}) });
|
|
773
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
774
|
+
wrapLabel = input(false, { ...(ngDevMode ? { debugName: "wrapLabel" } : {}) });
|
|
740
775
|
colorButton = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
741
776
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
742
777
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalZigzag, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
743
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalZigzag, isStandalone: true, selector: "duck-dev-button-neobrutal-zigzag", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">\n <span class=\"zigzag-text__projected\"><ng-content></ng-content></span>\n <span class=\"zigzag-text__default\">{{ text() }}</span>\n </span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":host{display:inline-block}.neo-zigzag{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:200px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--neo-text);transition:transform .2s ease}.neo-zigzag:hover,.neo-zigzag:focus-visible{transform:translateY(-4px)}.neo-zigzag:hover .zigzag-body,.neo-zigzag:focus-visible .zigzag-body{box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow)}.neo-zigzag:hover .zigzag-edge,.neo-zigzag:focus-visible .zigzag-edge{transform:translateY(2px)}.neo-zigzag:active{transform:translateY(2px)}.neo-zigzag:active .zigzag-body{box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-zigzag:disabled{cursor:not-allowed;opacity:.6;transform:none}.zigzag-body{position:relative;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.3rem;border:3px solid var(--dd-neo-ink);border-bottom:none;border-radius:8px 8px 0 0;background:var(--neo-surface);box-shadow:4px 4px 0 var(--neo-shadow),4px 4px 0 3px var(--dd-neo-shadow);transition:box-shadow .2s ease}.zigzag-label{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.zigzag-text{font-size:.95rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.zigzag-text__projected,.zigzag-text__default{display:contents}.zigzag-text__projected:not(:empty)+.zigzag-text__default{display:none}.zigzag-edge{display:block;width:100%;height:14px;background:var(--neo-surface);border-left:3px solid var(--dd-neo-ink);border-right:3px solid var(--dd-neo-ink);clip-path:polygon(0% 0%,5% 100%,10% 0%,15% 100%,20% 0%,25% 100%,30% 0%,35% 100%,40% 0%,45% 100%,50% 0%,55% 100%,60% 0%,65% 100%,70% 0%,75% 100%,80% 0%,85% 100%,90% 0%,95% 100%,100% 0%);transition:transform .2s ease}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
778
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalZigzag, isStandalone: true, selector: "duck-dev-button-neobrutal-zigzag", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dd-button--full-width": "fullWidth()", "class.dd-button--truncate": "truncate()", "class.dd-button--wrap": "wrapLabel()" } }, ngImport: i0, template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">\n <span class=\"zigzag-text__projected\"><ng-content></ng-content></span>\n <span class=\"zigzag-text__default\">{{ text() }}</span>\n </span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-zigzag{position:relative;display:flex;flex-direction:column;align-items:stretch;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 200px);padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--neo-text);transition:transform .2s ease}.neo-zigzag:hover,.neo-zigzag:focus-visible{transform:translateY(-4px)}.neo-zigzag:hover .zigzag-body,.neo-zigzag:focus-visible .zigzag-body{box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow)}.neo-zigzag:hover .zigzag-edge,.neo-zigzag:focus-visible .zigzag-edge{transform:translateY(2px)}.neo-zigzag:active{transform:translateY(2px)}.neo-zigzag:active .zigzag-body{box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-zigzag:disabled{cursor:not-allowed;opacity:.6;transform:none}.zigzag-body{position:relative;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.3rem;border:3px solid var(--dd-neo-ink);border-bottom:none;border-radius:8px 8px 0 0;background:var(--neo-surface);box-shadow:4px 4px 0 var(--neo-shadow),4px 4px 0 3px var(--dd-neo-shadow);transition:box-shadow .2s ease}.zigzag-label{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.zigzag-text{font-size:.95rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.zigzag-text__projected,.zigzag-text__default{display:contents}.zigzag-text__projected:not(:empty)+.zigzag-text__default{display:none}:host(.dd-button--full-width) .zigzag-body{box-sizing:border-box}:host(.dd-button--truncate) .zigzag-body{min-width:0}:host(.dd-button--truncate) .zigzag-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .zigzag-text{display:block;white-space:normal;overflow-wrap:anywhere}.zigzag-edge{display:block;width:100%;height:14px;background:var(--neo-surface);border-left:3px solid var(--dd-neo-ink);border-right:3px solid var(--dd-neo-ink);clip-path:polygon(0% 0%,5% 100%,10% 0%,15% 100%,20% 0%,25% 100%,30% 0%,35% 100%,40% 0%,45% 100%,50% 0%,55% 100%,60% 0%,65% 100%,70% 0%,75% 100%,80% 0%,85% 100%,90% 0%,95% 100%,100% 0%);transition:transform .2s ease}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
744
779
|
}
|
|
745
780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalZigzag, decorators: [{
|
|
746
781
|
type: Component,
|
|
747
|
-
args: [{ selector: 'duck-dev-button-neobrutal-zigzag', standalone: true, imports: [NgStyle],
|
|
748
|
-
|
|
782
|
+
args: [{ selector: 'duck-dev-button-neobrutal-zigzag', standalone: true, imports: [NgStyle], host: {
|
|
783
|
+
'[class.dd-button--full-width]': 'fullWidth()',
|
|
784
|
+
'[class.dd-button--truncate]': 'truncate()',
|
|
785
|
+
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
786
|
+
}, template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">\n <span class=\"zigzag-text__projected\"><ng-content></ng-content></span>\n <span class=\"zigzag-text__default\">{{ text() }}</span>\n </span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-zigzag{position:relative;display:flex;flex-direction:column;align-items:stretch;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 200px);padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--neo-text);transition:transform .2s ease}.neo-zigzag:hover,.neo-zigzag:focus-visible{transform:translateY(-4px)}.neo-zigzag:hover .zigzag-body,.neo-zigzag:focus-visible .zigzag-body{box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow)}.neo-zigzag:hover .zigzag-edge,.neo-zigzag:focus-visible .zigzag-edge{transform:translateY(2px)}.neo-zigzag:active{transform:translateY(2px)}.neo-zigzag:active .zigzag-body{box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-zigzag:disabled{cursor:not-allowed;opacity:.6;transform:none}.zigzag-body{position:relative;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.3rem;border:3px solid var(--dd-neo-ink);border-bottom:none;border-radius:8px 8px 0 0;background:var(--neo-surface);box-shadow:4px 4px 0 var(--neo-shadow),4px 4px 0 3px var(--dd-neo-shadow);transition:box-shadow .2s ease}.zigzag-label{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.zigzag-text{font-size:.95rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.zigzag-text__projected,.zigzag-text__default{display:contents}.zigzag-text__projected:not(:empty)+.zigzag-text__default{display:none}:host(.dd-button--full-width) .zigzag-body{box-sizing:border-box}:host(.dd-button--truncate) .zigzag-body{min-width:0}:host(.dd-button--truncate) .zigzag-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .zigzag-text{display:block;white-space:normal;overflow-wrap:anywhere}.zigzag-edge{display:block;width:100%;height:14px;background:var(--neo-surface);border-left:3px solid var(--dd-neo-ink);border-right:3px solid var(--dd-neo-ink);clip-path:polygon(0% 0%,5% 100%,10% 0%,15% 100%,20% 0%,25% 100%,30% 0%,35% 100%,40% 0%,45% 100%,50% 0%,55% 100%,60% 0%,65% 100%,70% 0%,75% 100%,80% 0%,85% 100%,90% 0%,95% 100%,100% 0%);transition:transform .2s ease}\n"] }]
|
|
787
|
+
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], wrapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapLabel", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
749
788
|
|
|
750
789
|
class ButtonNeobrutalTape {
|
|
751
790
|
text = input('Stick it', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
752
791
|
icon = input('>>', { ...(ngDevMode ? { debugName: "icon" } : {}) });
|
|
753
792
|
isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
|
|
793
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}) });
|
|
794
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
795
|
+
wrapLabel = input(false, { ...(ngDevMode ? { debugName: "wrapLabel" } : {}) });
|
|
754
796
|
colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
755
797
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
756
798
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTape, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
757
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalTape, isStandalone: true, selector: "duck-dev-button-neobrutal-tape", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-tape\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tape-stripe tape-stripe--left\" aria-hidden=\"true\"></span>\n <span class=\"tape-body\">\n <span class=\"tape-text\">\n <span class=\"tape-text__projected\"><ng-content></ng-content></span>\n <span class=\"tape-text__default\">{{ text() }}</span>\n </span>\n <span class=\"tape-icon\">{{ icon() }}</span>\n </span>\n <span class=\"tape-stripe tape-stripe--right\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":host{display:inline-block}.neo-tape{position:relative;display:inline-flex;align-items:stretch;min-width:230px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;transform:rotate(-1.5deg);transition:transform .22s ease,filter .22s ease}.neo-tape:hover,.neo-tape:focus-visible{transform:rotate(0) scale(1.03)}.neo-tape:hover .tape-stripe--left,.neo-tape:focus-visible .tape-stripe--left{width:22px}.neo-tape:hover .tape-stripe--right,.neo-tape:focus-visible .tape-stripe--right{width:22px}.neo-tape:hover .tape-icon,.neo-tape:focus-visible .tape-icon{transform:translate(4px)}.neo-tape:active{transform:rotate(-.5deg) scale(.97)}.neo-tape:disabled{cursor:not-allowed;opacity:.6;transform:rotate(-1.5deg)}.tape-body{display:flex;align-items:center;justify-content:center;gap:.6rem;flex:1;padding:.85rem 1.2rem;border-top:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--neo-surface);color:var(--neo-text);box-shadow:0 5px 0 var(--neo-shadow),0 5px 0 3px var(--dd-neo-shadow);transition:box-shadow .22s ease}.tape-text{font-size:.95rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.tape-text__projected,.tape-text__default{display:contents}.tape-text__projected:not(:empty)+.tape-text__default{display:none}.tape-icon{font-size:.85rem;font-weight:900;opacity:.7;transition:transform .22s ease}.tape-stripe{display:block;width:16px;flex-shrink:0;border:3px solid var(--dd-neo-ink);background:var(--neo-accent);transition:width .22s ease}.tape-stripe--left{border-right:none;border-radius:4px 0 0 4px;background:repeating-linear-gradient(-45deg,var(--neo-accent),var(--neo-accent) 3px,transparent 3px,transparent 6px)}.tape-stripe--right{border-left:none;border-radius:0 4px 4px 0;background:repeating-linear-gradient(45deg,var(--neo-accent),var(--neo-accent) 3px,transparent 3px,transparent 6px)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
799
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalTape, isStandalone: true, selector: "duck-dev-button-neobrutal-tape", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dd-button--full-width": "fullWidth()", "class.dd-button--truncate": "truncate()", "class.dd-button--wrap": "wrapLabel()" } }, ngImport: i0, template: "<button class=\"neo-tape\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tape-stripe tape-stripe--left\" aria-hidden=\"true\"></span>\n <span class=\"tape-body\">\n <span class=\"tape-text\">\n <span class=\"tape-text__projected\"><ng-content></ng-content></span>\n <span class=\"tape-text__default\">{{ text() }}</span>\n </span>\n <span class=\"tape-icon\">{{ icon() }}</span>\n </span>\n <span class=\"tape-stripe tape-stripe--right\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-tape{position:relative;display:inline-flex;align-items:stretch;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 230px);padding:0;border:none;background:transparent;cursor:pointer;font:inherit;transform:rotate(-1.5deg);transition:transform .22s ease,filter .22s ease}.neo-tape:hover,.neo-tape:focus-visible{transform:rotate(0) scale(1.03)}.neo-tape:hover .tape-stripe--left,.neo-tape:focus-visible .tape-stripe--left{width:22px}.neo-tape:hover .tape-stripe--right,.neo-tape:focus-visible .tape-stripe--right{width:22px}.neo-tape:hover .tape-icon,.neo-tape:focus-visible .tape-icon{transform:translate(4px)}.neo-tape:active{transform:rotate(-.5deg) scale(.97)}.neo-tape:disabled{cursor:not-allowed;opacity:.6;transform:rotate(-1.5deg)}.tape-body{display:flex;align-items:center;justify-content:center;gap:.6rem;flex:1;padding:.85rem 1.2rem;border-top:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--neo-surface);color:var(--neo-text);box-shadow:0 5px 0 var(--neo-shadow),0 5px 0 3px var(--dd-neo-shadow);transition:box-shadow .22s ease}.tape-text{font-size:.95rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.tape-text__projected,.tape-text__default{display:contents}.tape-text__projected:not(:empty)+.tape-text__default{display:none}.tape-icon{font-size:.85rem;font-weight:900;opacity:.7;transition:transform .22s ease}.tape-stripe{display:block;width:16px;flex-shrink:0;border:3px solid var(--dd-neo-ink);background:var(--neo-accent);transition:width .22s ease}.tape-stripe--left{border-right:none;border-radius:4px 0 0 4px;background:repeating-linear-gradient(-45deg,var(--neo-accent),var(--neo-accent) 3px,transparent 3px,transparent 6px)}.tape-stripe--right{border-left:none;border-radius:0 4px 4px 0;background:repeating-linear-gradient(45deg,var(--neo-accent),var(--neo-accent) 3px,transparent 3px,transparent 6px)}:host(.dd-button--full-width) .neo-tape{box-sizing:border-box;width:calc(100% - var(--dd-button-tape-overhang, 0px))}:host(.dd-button--full-width) .tape-body{box-sizing:border-box}:host(.dd-button--truncate) .tape-body{min-width:0}:host(.dd-button--truncate) .tape-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .tape-text{white-space:normal;overflow-wrap:anywhere;text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
758
800
|
}
|
|
759
801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTape, decorators: [{
|
|
760
802
|
type: Component,
|
|
761
|
-
args: [{ selector: 'duck-dev-button-neobrutal-tape', standalone: true, imports: [NgStyle],
|
|
762
|
-
|
|
803
|
+
args: [{ selector: 'duck-dev-button-neobrutal-tape', standalone: true, imports: [NgStyle], host: {
|
|
804
|
+
'[class.dd-button--full-width]': 'fullWidth()',
|
|
805
|
+
'[class.dd-button--truncate]': 'truncate()',
|
|
806
|
+
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
807
|
+
}, template: "<button class=\"neo-tape\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tape-stripe tape-stripe--left\" aria-hidden=\"true\"></span>\n <span class=\"tape-body\">\n <span class=\"tape-text\">\n <span class=\"tape-text__projected\"><ng-content></ng-content></span>\n <span class=\"tape-text__default\">{{ text() }}</span>\n </span>\n <span class=\"tape-icon\">{{ icon() }}</span>\n </span>\n <span class=\"tape-stripe tape-stripe--right\" aria-hidden=\"true\"></span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-tape{position:relative;display:inline-flex;align-items:stretch;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 230px);padding:0;border:none;background:transparent;cursor:pointer;font:inherit;transform:rotate(-1.5deg);transition:transform .22s ease,filter .22s ease}.neo-tape:hover,.neo-tape:focus-visible{transform:rotate(0) scale(1.03)}.neo-tape:hover .tape-stripe--left,.neo-tape:focus-visible .tape-stripe--left{width:22px}.neo-tape:hover .tape-stripe--right,.neo-tape:focus-visible .tape-stripe--right{width:22px}.neo-tape:hover .tape-icon,.neo-tape:focus-visible .tape-icon{transform:translate(4px)}.neo-tape:active{transform:rotate(-.5deg) scale(.97)}.neo-tape:disabled{cursor:not-allowed;opacity:.6;transform:rotate(-1.5deg)}.tape-body{display:flex;align-items:center;justify-content:center;gap:.6rem;flex:1;padding:.85rem 1.2rem;border-top:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--neo-surface);color:var(--neo-text);box-shadow:0 5px 0 var(--neo-shadow),0 5px 0 3px var(--dd-neo-shadow);transition:box-shadow .22s ease}.tape-text{font-size:.95rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.tape-text__projected,.tape-text__default{display:contents}.tape-text__projected:not(:empty)+.tape-text__default{display:none}.tape-icon{font-size:.85rem;font-weight:900;opacity:.7;transition:transform .22s ease}.tape-stripe{display:block;width:16px;flex-shrink:0;border:3px solid var(--dd-neo-ink);background:var(--neo-accent);transition:width .22s ease}.tape-stripe--left{border-right:none;border-radius:4px 0 0 4px;background:repeating-linear-gradient(-45deg,var(--neo-accent),var(--neo-accent) 3px,transparent 3px,transparent 6px)}.tape-stripe--right{border-left:none;border-radius:0 4px 4px 0;background:repeating-linear-gradient(45deg,var(--neo-accent),var(--neo-accent) 3px,transparent 3px,transparent 6px)}:host(.dd-button--full-width) .neo-tape{box-sizing:border-box;width:calc(100% - var(--dd-button-tape-overhang, 0px))}:host(.dd-button--full-width) .tape-body{box-sizing:border-box}:host(.dd-button--truncate) .tape-body{min-width:0}:host(.dd-button--truncate) .tape-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .tape-text{white-space:normal;overflow-wrap:anywhere;text-align:center}\n"] }]
|
|
808
|
+
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], wrapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapLabel", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
763
809
|
|
|
764
810
|
class DuckDevCardSection {
|
|
765
811
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -838,14 +884,23 @@ class BadgeNeobrutalSlab {
|
|
|
838
884
|
text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
839
885
|
color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
840
886
|
size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
|
|
887
|
+
flush = input(false, { ...(ngDevMode ? { debugName: "flush" } : {}) });
|
|
888
|
+
stretch = input(false, { ...(ngDevMode ? { debugName: "stretch" } : {}) });
|
|
889
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
890
|
+
wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : {}) });
|
|
841
891
|
badgeStyle = computed(() => getNeobrutalBadgeStyle(this.color()), { ...(ngDevMode ? { debugName: "badgeStyle" } : {}) });
|
|
842
892
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
843
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: BadgeNeobrutalSlab, isStandalone: true, selector: "dd-badge-neobrutal-slab", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"dd-badge-neo-slab\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n <span class=\"dd-badge-neo-slab__dot\" aria-hidden=\"true\"></span>\n <span>\n <span class=\"badge-text__projected\"><ng-content></ng-content></span>\n <span class=\"badge-text__default\">{{ text() }}</span>\n </span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-slab{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);box-shadow:4px 4px 0 var(--dd-neo-badge-shadow);color:var(--dd-neo-badge-text);font-weight:900;letter-spacing:.1em;text-transform:uppercase;line-height:1;white-space:nowrap}.dd-badge-neo-slab[data-size=sm]{padding:6px 9px;font-size:11px}.dd-badge-neo-slab[data-size=md]{padding:8px 12px;font-size:12px}.badge-text__projected,.badge-text__default{display:contents}.badge-text__projected:not(:empty)+.badge-text__default{display:none}.dd-badge-neo-slab__dot{width:9px;height:9px;background:var(--dd-neo-badge-accent);border:2px solid var(--dd-neo-badge-border)}\n"] });
|
|
893
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: BadgeNeobrutalSlab, isStandalone: true, selector: "dd-badge-neobrutal-slab", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dd-badge--flush": "flush()", "class.dd-badge--stretch": "stretch()", "class.dd-badge--truncate": "truncate()", "class.dd-badge--wrap": "wrap()" } }, ngImport: i0, template: "<span class=\"dd-badge-neo-slab\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n <span class=\"dd-badge-neo-slab__dot\" aria-hidden=\"true\"></span>\n <span class=\"dd-badge-neo-slab__label\">\n <span class=\"badge-text__projected\"><ng-content></ng-content></span>\n <span class=\"badge-text__default\">{{ text() }}</span>\n </span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-slab{display:inline-flex;align-items:center;gap:8px;border:var(--dd-badge-border-width, 3px) solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);box-shadow:var(--dd-badge-shadow, 4px 4px 0 var(--dd-neo-badge-shadow));color:var(--dd-neo-badge-text);font-weight:900;letter-spacing:.1em;text-transform:uppercase;line-height:1;white-space:nowrap}.dd-badge-neo-slab[data-size=sm]{padding:6px 9px;font-size:11px}.dd-badge-neo-slab[data-size=md]{padding:8px 12px;font-size:12px}.badge-text__projected,.badge-text__default{display:contents}.badge-text__projected:not(:empty)+.badge-text__default{display:none}.dd-badge-neo-slab__dot{width:9px;height:9px;background:var(--dd-neo-badge-accent);border:2px solid var(--dd-neo-badge-border)}:host(.dd-badge--flush){display:block;width:100%;height:100%;--dd-badge-border-width: 0;--dd-badge-shadow: none}:host(.dd-badge--flush) .dd-badge-neo-slab{width:100%;height:100%;box-sizing:border-box}:host(.dd-badge--stretch){display:block;flex:1 1 0;min-width:0}:host(.dd-badge--stretch) .dd-badge-neo-slab{width:100%;box-sizing:border-box}:host(.dd-badge--truncate) .dd-badge-neo-slab{max-width:100%}:host(.dd-badge--truncate) .dd-badge-neo-slab__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.dd-badge--wrap) .dd-badge-neo-slab{white-space:normal}:host(.dd-badge--wrap) .dd-badge-neo-slab__label{word-break:break-word;overflow-wrap:anywhere}\n"] });
|
|
844
894
|
}
|
|
845
895
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalSlab, decorators: [{
|
|
846
896
|
type: Component,
|
|
847
|
-
args: [{ selector: 'dd-badge-neobrutal-slab', standalone: true,
|
|
848
|
-
|
|
897
|
+
args: [{ selector: 'dd-badge-neobrutal-slab', standalone: true, host: {
|
|
898
|
+
'[class.dd-badge--flush]': 'flush()',
|
|
899
|
+
'[class.dd-badge--stretch]': 'stretch()',
|
|
900
|
+
'[class.dd-badge--truncate]': 'truncate()',
|
|
901
|
+
'[class.dd-badge--wrap]': 'wrap()',
|
|
902
|
+
}, template: "<span class=\"dd-badge-neo-slab\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n <span class=\"dd-badge-neo-slab__dot\" aria-hidden=\"true\"></span>\n <span class=\"dd-badge-neo-slab__label\">\n <span class=\"badge-text__projected\"><ng-content></ng-content></span>\n <span class=\"badge-text__default\">{{ text() }}</span>\n </span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-slab{display:inline-flex;align-items:center;gap:8px;border:var(--dd-badge-border-width, 3px) solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);box-shadow:var(--dd-badge-shadow, 4px 4px 0 var(--dd-neo-badge-shadow));color:var(--dd-neo-badge-text);font-weight:900;letter-spacing:.1em;text-transform:uppercase;line-height:1;white-space:nowrap}.dd-badge-neo-slab[data-size=sm]{padding:6px 9px;font-size:11px}.dd-badge-neo-slab[data-size=md]{padding:8px 12px;font-size:12px}.badge-text__projected,.badge-text__default{display:contents}.badge-text__projected:not(:empty)+.badge-text__default{display:none}.dd-badge-neo-slab__dot{width:9px;height:9px;background:var(--dd-neo-badge-accent);border:2px solid var(--dd-neo-badge-border)}:host(.dd-badge--flush){display:block;width:100%;height:100%;--dd-badge-border-width: 0;--dd-badge-shadow: none}:host(.dd-badge--flush) .dd-badge-neo-slab{width:100%;height:100%;box-sizing:border-box}:host(.dd-badge--stretch){display:block;flex:1 1 0;min-width:0}:host(.dd-badge--stretch) .dd-badge-neo-slab{width:100%;box-sizing:border-box}:host(.dd-badge--truncate) .dd-badge-neo-slab{max-width:100%}:host(.dd-badge--truncate) .dd-badge-neo-slab__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.dd-badge--wrap) .dd-badge-neo-slab{white-space:normal}:host(.dd-badge--wrap) .dd-badge-neo-slab__label{word-break:break-word;overflow-wrap:anywhere}\n"] }]
|
|
903
|
+
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], stretch: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretch", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] } });
|
|
849
904
|
|
|
850
905
|
class BadgeNeobrutalStamp {
|
|
851
906
|
kicker = input.required({ ...(ngDevMode ? { debugName: "kicker" } : {}) });
|
|
@@ -865,14 +920,23 @@ class BadgeNeobrutalTicket {
|
|
|
865
920
|
text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
866
921
|
color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
867
922
|
size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
|
|
923
|
+
flush = input(false, { ...(ngDevMode ? { debugName: "flush" } : {}) });
|
|
924
|
+
stretch = input(false, { ...(ngDevMode ? { debugName: "stretch" } : {}) });
|
|
925
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
926
|
+
wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : {}) });
|
|
868
927
|
badgeStyle = computed(() => getNeobrutalBadgeStyle(this.color()), { ...(ngDevMode ? { debugName: "badgeStyle" } : {}) });
|
|
869
928
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
870
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: BadgeNeobrutalTicket, isStandalone: true, selector: "dd-badge-neobrutal-ticket", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"dd-badge-neo-ticket\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n <span class=\"dd-badge-neo-ticket__stub\" aria-hidden=\"true\"></span>\n <span>\n <span class=\"badge-text__projected\"><ng-content></ng-content></span>\n <span class=\"badge-text__default\">{{ text() }}</span>\n </span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-ticket{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-badge-accent) 26%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap}.dd-badge-neo-ticket[data-size=sm]{padding:6px 9px;font-size:11px}.dd-badge-neo-ticket[data-size=md]{padding:8px 12px;font-size:12px}.badge-text__projected,.badge-text__default{display:contents}.badge-text__projected:not(:empty)+.badge-text__default{display:none}.dd-badge-neo-ticket__stub{width:12px;height:18px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);box-shadow:3px 3px 0 var(--dd-neo-badge-shadow)}\n"] });
|
|
929
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: BadgeNeobrutalTicket, isStandalone: true, selector: "dd-badge-neobrutal-ticket", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dd-badge--flush": "flush()", "class.dd-badge--stretch": "stretch()", "class.dd-badge--truncate": "truncate()", "class.dd-badge--wrap": "wrap()" } }, ngImport: i0, template: "<span class=\"dd-badge-neo-ticket\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n <span class=\"dd-badge-neo-ticket__stub\" aria-hidden=\"true\"></span>\n <span class=\"dd-badge-neo-ticket__label\">\n <span class=\"badge-text__projected\"><ng-content></ng-content></span>\n <span class=\"badge-text__default\">{{ text() }}</span>\n </span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-ticket{display:inline-flex;align-items:center;gap:8px;border:var(--dd-badge-border-width, 3px) solid var(--dd-neo-badge-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-badge-accent) 26%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-badge-surface);box-shadow:var(--dd-badge-shadow, none);color:var(--dd-neo-badge-text);font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap}.dd-badge-neo-ticket[data-size=sm]{padding:6px 9px;font-size:11px}.dd-badge-neo-ticket[data-size=md]{padding:8px 12px;font-size:12px}.badge-text__projected,.badge-text__default{display:contents}.badge-text__projected:not(:empty)+.badge-text__default{display:none}.dd-badge-neo-ticket__stub{width:12px;height:18px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);box-shadow:3px 3px 0 var(--dd-neo-badge-shadow)}:host(.dd-badge--flush){display:block;width:100%;height:100%;--dd-badge-border-width: 0;--dd-badge-shadow: none}:host(.dd-badge--flush) .dd-badge-neo-ticket{width:100%;height:100%;box-sizing:border-box}:host(.dd-badge--stretch){display:block;flex:1 1 0;min-width:0}:host(.dd-badge--stretch) .dd-badge-neo-ticket{width:100%;box-sizing:border-box}:host(.dd-badge--truncate) .dd-badge-neo-ticket{max-width:100%}:host(.dd-badge--truncate) .dd-badge-neo-ticket__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.dd-badge--wrap) .dd-badge-neo-ticket{white-space:normal}:host(.dd-badge--wrap) .dd-badge-neo-ticket__label{word-break:break-word;overflow-wrap:anywhere}\n"] });
|
|
871
930
|
}
|
|
872
931
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalTicket, decorators: [{
|
|
873
932
|
type: Component,
|
|
874
|
-
args: [{ selector: 'dd-badge-neobrutal-ticket', standalone: true,
|
|
875
|
-
|
|
933
|
+
args: [{ selector: 'dd-badge-neobrutal-ticket', standalone: true, host: {
|
|
934
|
+
'[class.dd-badge--flush]': 'flush()',
|
|
935
|
+
'[class.dd-badge--stretch]': 'stretch()',
|
|
936
|
+
'[class.dd-badge--truncate]': 'truncate()',
|
|
937
|
+
'[class.dd-badge--wrap]': 'wrap()',
|
|
938
|
+
}, template: "<span class=\"dd-badge-neo-ticket\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n <span class=\"dd-badge-neo-ticket__stub\" aria-hidden=\"true\"></span>\n <span class=\"dd-badge-neo-ticket__label\">\n <span class=\"badge-text__projected\"><ng-content></ng-content></span>\n <span class=\"badge-text__default\">{{ text() }}</span>\n </span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-ticket{display:inline-flex;align-items:center;gap:8px;border:var(--dd-badge-border-width, 3px) solid var(--dd-neo-badge-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-badge-accent) 26%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-badge-surface);box-shadow:var(--dd-badge-shadow, none);color:var(--dd-neo-badge-text);font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap}.dd-badge-neo-ticket[data-size=sm]{padding:6px 9px;font-size:11px}.dd-badge-neo-ticket[data-size=md]{padding:8px 12px;font-size:12px}.badge-text__projected,.badge-text__default{display:contents}.badge-text__projected:not(:empty)+.badge-text__default{display:none}.dd-badge-neo-ticket__stub{width:12px;height:18px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);box-shadow:3px 3px 0 var(--dd-neo-badge-shadow)}:host(.dd-badge--flush){display:block;width:100%;height:100%;--dd-badge-border-width: 0;--dd-badge-shadow: none}:host(.dd-badge--flush) .dd-badge-neo-ticket{width:100%;height:100%;box-sizing:border-box}:host(.dd-badge--stretch){display:block;flex:1 1 0;min-width:0}:host(.dd-badge--stretch) .dd-badge-neo-ticket{width:100%;box-sizing:border-box}:host(.dd-badge--truncate) .dd-badge-neo-ticket{max-width:100%}:host(.dd-badge--truncate) .dd-badge-neo-ticket__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.dd-badge--wrap) .dd-badge-neo-ticket{white-space:normal}:host(.dd-badge--wrap) .dd-badge-neo-ticket__label{word-break:break-word;overflow-wrap:anywhere}\n"] }]
|
|
939
|
+
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], stretch: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretch", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] } });
|
|
876
940
|
|
|
877
941
|
const duckDevDockMedium = `
|
|
878
942
|
<svg
|
|
@@ -2368,21 +2432,35 @@ class DuckDevIcon {
|
|
|
2368
2432
|
sanitizer;
|
|
2369
2433
|
static iconMap = new Map(svgIcons.map((i) => [i.id, i.svg]));
|
|
2370
2434
|
name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}) });
|
|
2435
|
+
size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : {}) });
|
|
2436
|
+
color = input('', { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
2371
2437
|
constructor(sanitizer) {
|
|
2372
2438
|
this.sanitizer = sanitizer;
|
|
2373
2439
|
}
|
|
2440
|
+
sizeValue = computed(() => {
|
|
2441
|
+
const s = this.size();
|
|
2442
|
+
if (s === undefined || s === null || s === '') {
|
|
2443
|
+
return null;
|
|
2444
|
+
}
|
|
2445
|
+
return typeof s === 'number' ? `${s}px` : s;
|
|
2446
|
+
}, { ...(ngDevMode ? { debugName: "sizeValue" } : {}) });
|
|
2374
2447
|
svgHtml = computed(() => {
|
|
2375
2448
|
const n = this.name();
|
|
2376
2449
|
const svg = DuckDevIcon.iconMap.get(n) ?? '';
|
|
2377
2450
|
return this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
2378
2451
|
}, { ...(ngDevMode ? { debugName: "svgHtml" } : {}) });
|
|
2379
2452
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevIcon, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
2380
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevIcon, isStandalone: true, selector: "duck-dev-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <span class="duck-dev-icon" [innerHTML]="svgHtml()"></span> `, isInline: true, styles: [":host{display:inline-flex;line-height:0}.duck-dev-icon{display:inline-flex}\n"] });
|
|
2453
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevIcon, isStandalone: true, selector: "duck-dev-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dd-icon--sized": "sizeValue() !== null", "class.dd-icon--colored": "!!color()", "style.--dd-icon-size": "sizeValue()", "style.--dd-icon-color": "color() || null" } }, ngImport: i0, template: ` <span class="duck-dev-icon" [innerHTML]="svgHtml()"></span> `, isInline: true, styles: [":host{display:inline-flex;line-height:0;color:var(--dd-icon-color, inherit)}.duck-dev-icon{display:inline-flex}:host(.dd-icon--sized) ::ng-deep .duck-dev-icon svg{width:var(--dd-icon-size);height:var(--dd-icon-size)}:host(.dd-icon--colored) ::ng-deep .duck-dev-icon svg [stroke]:not([stroke=none]){stroke:currentColor}:host(.dd-icon--colored) ::ng-deep .duck-dev-icon svg [fill]:not([fill=none]){fill:currentColor}\n"] });
|
|
2381
2454
|
}
|
|
2382
2455
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevIcon, decorators: [{
|
|
2383
2456
|
type: Component,
|
|
2384
|
-
args: [{ selector: 'duck-dev-icon', standalone: true, template: ` <span class="duck-dev-icon" [innerHTML]="svgHtml()"></span> `,
|
|
2385
|
-
|
|
2457
|
+
args: [{ selector: 'duck-dev-icon', standalone: true, template: ` <span class="duck-dev-icon" [innerHTML]="svgHtml()"></span> `, host: {
|
|
2458
|
+
'[class.dd-icon--sized]': 'sizeValue() !== null',
|
|
2459
|
+
'[class.dd-icon--colored]': '!!color()',
|
|
2460
|
+
'[style.--dd-icon-size]': 'sizeValue()',
|
|
2461
|
+
'[style.--dd-icon-color]': 'color() || null',
|
|
2462
|
+
}, styles: [":host{display:inline-flex;line-height:0;color:var(--dd-icon-color, inherit)}.duck-dev-icon{display:inline-flex}:host(.dd-icon--sized) ::ng-deep .duck-dev-icon svg{width:var(--dd-icon-size);height:var(--dd-icon-size)}:host(.dd-icon--colored) ::ng-deep .duck-dev-icon svg [stroke]:not([stroke=none]){stroke:currentColor}:host(.dd-icon--colored) ::ng-deep .duck-dev-icon svg [fill]:not([fill=none]){fill:currentColor}\n"] }]
|
|
2463
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
2386
2464
|
|
|
2387
2465
|
class DuckDevAccordionComponent {
|
|
2388
2466
|
content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
|
|
@@ -2393,7 +2471,7 @@ class DuckDevAccordionComponent {
|
|
|
2393
2471
|
this.isOpen.update((prev) => !prev);
|
|
2394
2472
|
}
|
|
2395
2473
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2396
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevAccordionComponent, isStandalone: true, selector: "duck-dev-accordion", 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=\"duck-dev-accordion\">\n <button\n type=\"button\"\n class=\"accordion-header\"\n [class.open]=\"isOpen()\"\n [attr.data-color]=\"color()\"\n (click)=\"toggle()\"\n >\n {{ title() }}\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" [class.open-chevron]=\"isOpen()\" />\n </button>\n @if (isOpen()) {\n <div class=\"accordion-content\" animate.enter=\"enter-animation\" animate.leave=\"leaving\">\n <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.duck-dev-accordion{border:1px solid var(--dd-base-200);border-radius:12px;background:var(--dd-base-300);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;background:var(--dd-base-0);border:none;cursor:pointer;position:relative;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;color:var(--dd-base-600)}.accordion-header[data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue)}.accordion-header[data-color=violet]:hover{background:color-mix(in srgb,var(--dd-base-accent-blue) 24%,transparent)}.accordion-header[data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange)}.accordion-header[data-color=orange]:hover{background:color-mix(in srgb,var(--dd-base-accent-orange) 24%,transparent)}.accordion-header[data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600)}.accordion-header[data-color=gray]:hover{background:var(--dd-base-200)}.accordion-header[data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700)}.accordion-header[data-color=dark]:hover{background:var(--dd-base-300)}.accordion-header[data-color=white],.accordion-header:not([data-color]){background:var(--dd-base-0);color:var(--dd-base-600)}.accordion-header[data-color=white]:hover,.accordion-header:not([data-color]):hover{background:var(--dd-base-100)}.accordion-content{overflow:hidden;background-color:var(--dd-base-100);line-height:1.5}duck-dev-icon{transition:transform .3s}.open-chevron{transform:rotate(90deg)}.enter-animation{animation:slideDown .5s forwards}@keyframes slideDown{0%{max-height:0}to{max-height:500px}}.leaving{animation:slideUp .3s forwards}@keyframes slideUp{0%{max-height:300px}to{max-height:0}}\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 });
|
|
2474
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevAccordionComponent, isStandalone: true, selector: "duck-dev-accordion", 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=\"duck-dev-accordion\">\n <button\n type=\"button\"\n class=\"accordion-header\"\n [class.open]=\"isOpen()\"\n [attr.data-color]=\"color()\"\n (click)=\"toggle()\"\n >\n {{ title() }}\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" [class.open-chevron]=\"isOpen()\" />\n </button>\n @if (isOpen()) {\n <div class=\"accordion-content\" animate.enter=\"enter-animation\" animate.leave=\"leaving\">\n <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.duck-dev-accordion{border:1px solid var(--dd-base-200);border-radius:12px;background:var(--dd-base-300);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;background:var(--dd-base-0);border:none;cursor:pointer;position:relative;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;color:var(--dd-base-600)}.accordion-header[data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue)}.accordion-header[data-color=violet]:hover{background:color-mix(in srgb,var(--dd-base-accent-blue) 24%,transparent)}.accordion-header[data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange)}.accordion-header[data-color=orange]:hover{background:color-mix(in srgb,var(--dd-base-accent-orange) 24%,transparent)}.accordion-header[data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600)}.accordion-header[data-color=gray]:hover{background:var(--dd-base-200)}.accordion-header[data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700)}.accordion-header[data-color=dark]:hover{background:var(--dd-base-300)}.accordion-header[data-color=white],.accordion-header:not([data-color]){background:var(--dd-base-0);color:var(--dd-base-600)}.accordion-header[data-color=white]:hover,.accordion-header:not([data-color]):hover{background:var(--dd-base-100)}.accordion-content{overflow:hidden;background-color:var(--dd-base-100);line-height:1.5}duck-dev-icon{transition:transform .3s}.open-chevron{transform:rotate(90deg)}.enter-animation{animation:slideDown .5s forwards}@keyframes slideDown{0%{max-height:0}to{max-height:500px}}.leaving{animation:slideUp .3s forwards}@keyframes slideUp{0%{max-height:300px}to{max-height:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2397
2475
|
}
|
|
2398
2476
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionComponent, decorators: [{
|
|
2399
2477
|
type: Component,
|
|
@@ -3558,6 +3636,9 @@ class DuckDevSpeakerBubbleNeobrutalSlab {
|
|
|
3558
3636
|
color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
3559
3637
|
tail = input('left', { ...(ngDevMode ? { debugName: "tail" } : {}) });
|
|
3560
3638
|
target = input(null, { ...(ngDevMode ? { debugName: "target" } : {}) });
|
|
3639
|
+
flat = input(false, { ...(ngDevMode ? { debugName: "flat" } : {}) });
|
|
3640
|
+
showPin = input(true, { ...(ngDevMode ? { debugName: "showPin" } : {}) });
|
|
3641
|
+
showCorner = input(true, { ...(ngDevMode ? { debugName: "showCorner" } : {}) });
|
|
3561
3642
|
hostRef = inject((ElementRef));
|
|
3562
3643
|
documentRef = inject(DOCUMENT);
|
|
3563
3644
|
destroyRef = inject(DestroyRef);
|
|
@@ -3696,12 +3777,16 @@ class DuckDevSpeakerBubbleNeobrutalSlab {
|
|
|
3696
3777
|
return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
|
|
3697
3778
|
}
|
|
3698
3779
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3699
|
-
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"] }] });
|
|
3780
|
+
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 }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, showPin: { classPropertyName: "showPin", publicName: "showPin", isSignal: true, isRequired: false, transformFunction: null }, showCorner: { classPropertyName: "showCorner", publicName: "showCorner", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dd-speaker-bubble--flat": "flat()", "class.dd-speaker-bubble--no-pin": "!showPin()", "class.dd-speaker-bubble--no-corner": "!showCorner()" } }, 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:var(--dd-speaker-bubble-padding, 28px 22px 18px);border:var(--dd-speaker-bubble-border, none);border-radius:var(--dd-speaker-bubble-radius, 0);background:var(--dd-speaker-bubble-background, transparent);box-shadow:var(--dd-speaker-bubble-shadow, none);box-sizing:border-box;color:var(--dd-speaker-text);transition:var(--dd-speaker-bubble-padding-transition, none)}.dd-speaker-bubble-neo-slab__shape{position:absolute;inset:0;z-index:0;pointer-events:none;transform:var(--dd-speaker-bubble-shape-transform, 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;box-sizing:border-box;overflow:var(--dd-speaker-bubble-content-overflow, visible);font-size:15px;font-weight:800;line-height:1.55;transition:var(--dd-speaker-bubble-padding-transition, none);background:var(--dd-speaker-bubble-content-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:var(--dd-speaker-bubble-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%))}:host(.dd-speaker-bubble--flat) .dd-speaker-bubble-neo-slab__shape,:host(.dd-speaker-bubble--flat) .dd-speaker-bubble-neo-slab__pin,:host(.dd-speaker-bubble--flat) .dd-speaker-bubble-neo-slab__corner{display:none}:host(.dd-speaker-bubble--no-pin) .dd-speaker-bubble-neo-slab__pin{display:none}:host(.dd-speaker-bubble--no-corner) .dd-speaker-bubble-neo-slab__corner{display:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3700
3781
|
}
|
|
3701
3782
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalSlab, decorators: [{
|
|
3702
3783
|
type: Component,
|
|
3703
|
-
args: [{ selector: 'dd-speaker-bubble-neobrutal-slab', standalone: true, imports: [NgStyle],
|
|
3704
|
-
|
|
3784
|
+
args: [{ selector: 'dd-speaker-bubble-neobrutal-slab', standalone: true, imports: [NgStyle], host: {
|
|
3785
|
+
'[class.dd-speaker-bubble--flat]': 'flat()',
|
|
3786
|
+
'[class.dd-speaker-bubble--no-pin]': '!showPin()',
|
|
3787
|
+
'[class.dd-speaker-bubble--no-corner]': '!showCorner()',
|
|
3788
|
+
}, 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:var(--dd-speaker-bubble-padding, 28px 22px 18px);border:var(--dd-speaker-bubble-border, none);border-radius:var(--dd-speaker-bubble-radius, 0);background:var(--dd-speaker-bubble-background, transparent);box-shadow:var(--dd-speaker-bubble-shadow, none);box-sizing:border-box;color:var(--dd-speaker-text);transition:var(--dd-speaker-bubble-padding-transition, none)}.dd-speaker-bubble-neo-slab__shape{position:absolute;inset:0;z-index:0;pointer-events:none;transform:var(--dd-speaker-bubble-shape-transform, 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;box-sizing:border-box;overflow:var(--dd-speaker-bubble-content-overflow, visible);font-size:15px;font-weight:800;line-height:1.55;transition:var(--dd-speaker-bubble-padding-transition, none);background:var(--dd-speaker-bubble-content-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:var(--dd-speaker-bubble-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%))}:host(.dd-speaker-bubble--flat) .dd-speaker-bubble-neo-slab__shape,:host(.dd-speaker-bubble--flat) .dd-speaker-bubble-neo-slab__pin,:host(.dd-speaker-bubble--flat) .dd-speaker-bubble-neo-slab__corner{display:none}:host(.dd-speaker-bubble--no-pin) .dd-speaker-bubble-neo-slab__pin{display:none}:host(.dd-speaker-bubble--no-corner) .dd-speaker-bubble-neo-slab__corner{display:none}\n"] }]
|
|
3789
|
+
}], 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 }] }], flat: [{ type: i0.Input, args: [{ isSignal: true, alias: "flat", required: false }] }], showPin: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPin", required: false }] }], showCorner: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCorner", required: false }] }] } });
|
|
3705
3790
|
|
|
3706
3791
|
const DEFAULT_BUBBLE_GEOMETRY = {
|
|
3707
3792
|
side: 'left',
|
|
@@ -3935,7 +4020,7 @@ class ButtonNeobrutalBlock {
|
|
|
3935
4020
|
colorGray = AccentEnumColor.Gray;
|
|
3936
4021
|
colorDark = AccentEnumColor.Dark;
|
|
3937
4022
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3938
|
-
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\n <!-- Content Projection -->\n <h3>{{ 'buttons.neobrutal.contentProjectionTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'buttons.neobrutal.contentProjectionDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <pre><code><!-- With [text] \u2014 works as before -->\n<duck-dev-button-neobrutal-tape\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n [colorButton]=\"colorViolet\"\n/>\n\n<!-- With content projection \u2014 custom content instead of text -->\n<duck-dev-button-neobrutal-tape\n [icon]=\"'+'\"\n [colorButton]=\"colorViolet\"\n>\n Import selected (<kitty-number-flow [value]=\"count()\" />)\n</duck-dev-button-neobrutal-tape></code></pre>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleProjectionTape' | transloco }}</p>\n <duck-dev-button-neobrutal-tape [icon]=\"'+'\" [colorButton]=\"colorViolet\">\n Custom content\n </duck-dev-button-neobrutal-tape>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleProjectionBurst' | transloco }}</p>\n <duck-dev-button-neobrutal-burst [subtext]=\"'New'\" [colorButton]=\"colorOrange\">\n Projected text\n </duck-dev-button-neobrutal-burst>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleProjectionSlab' | transloco }}</p>\n <duck-dev-button-neobrutal-slab [helperText]=\"'with ng-content'\" [colorButton]=\"colorDark\">\n Rich content\n </duck-dev-button-neobrutal-slab>\n </div>\n </div>\n </div>\n</dd-card-section>\n", styles: [".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-neo-paper);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-base-accent-blue);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" }] });
|
|
4023
|
+
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 <li><strong>fullWidth</strong> - {{ 'buttons.neobrutal.inputFullWidth' | transloco }}</li>\n <li><strong>truncate</strong> - {{ 'buttons.neobrutal.inputTruncate' | transloco }}</li>\n <li><strong>wrapLabel</strong> - {{ 'buttons.neobrutal.inputWrapLabel' | transloco }}</li>\n <li>\n <strong>pillPosition / pillWrap</strong> - {{ 'buttons.neobrutal.inputPill' | transloco }}\n </li>\n </ul>\n <p class=\"description\">{{ 'buttons.neobrutal.cssVarsNote' | transloco }}</p>\n <p class=\"description\">{{ 'buttons.neobrutal.cssVarsNoteExtra' | transloco }}</p>\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\n <!-- Content Projection -->\n <h3>{{ 'buttons.neobrutal.contentProjectionTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'buttons.neobrutal.contentProjectionDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <pre><code><!-- With [text] \u2014 works as before -->\n<duck-dev-button-neobrutal-tape\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n [colorButton]=\"colorViolet\"\n/>\n\n<!-- With content projection \u2014 custom content instead of text -->\n<duck-dev-button-neobrutal-tape\n [icon]=\"'+'\"\n [colorButton]=\"colorViolet\"\n>\n Import selected (<kitty-number-flow [value]=\"count()\" />)\n</duck-dev-button-neobrutal-tape></code></pre>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleProjectionTape' | transloco }}</p>\n <duck-dev-button-neobrutal-tape [icon]=\"'+'\" [colorButton]=\"colorViolet\">\n Custom content\n </duck-dev-button-neobrutal-tape>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleProjectionBurst' | transloco }}</p>\n <duck-dev-button-neobrutal-burst [subtext]=\"'New'\" [colorButton]=\"colorOrange\">\n Projected text\n </duck-dev-button-neobrutal-burst>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleProjectionSlab' | transloco }}</p>\n <duck-dev-button-neobrutal-slab [helperText]=\"'with ng-content'\" [colorButton]=\"colorDark\">\n Rich content\n </duck-dev-button-neobrutal-slab>\n </div>\n </div>\n </div>\n\n <div class=\"fullwidth-block\">\n <h3>{{ 'buttons.neobrutal.fullWidthTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'buttons.neobrutal.fullWidthDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <pre><code><!-- Stretch to fill the parent (form column, modal footer, \u2026) -->\n<duck-dev-button-neobrutal-slab [text]=\"'Save changes'\" [fullWidth]=\"true\" />\n\n<!-- Clip an over-long label with an ellipsis -->\n<duck-dev-button-neobrutal-tag\n [text]=\"'A very long call to action'\"\n [tag]=\"'01'\"\n [fullWidth]=\"true\"\n [truncate]=\"true\"\n/>\n\n<!-- Low-level escape hatch via CSS custom properties -->\n<duck-dev-button-neobrutal-slab\n style=\"--dd-button-display: block; --dd-button-width: 100%; --dd-button-min-width: 0\"\n/></code></pre>\n </div>\n\n <div class=\"fullwidth-row\">\n <div class=\"fullwidth-frame\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleFullWidthSlab' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Save changes'\"\n [helperText]=\"'fills the column'\"\n [fullWidth]=\"true\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"fullwidth-frame\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleFullWidthTape' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Submit form'\"\n [icon]=\"'>>'\"\n [fullWidth]=\"true\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n </div>\n\n <div class=\"fullwidth-row\">\n <div class=\"fullwidth-frame fullwidth-frame--narrow\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTruncateTag' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'A very long call to action label that overflows'\"\n [tag]=\"'01'\"\n [fullWidth]=\"true\"\n [truncate]=\"true\"\n [colorButton]=\"colorDark\"\n />\n </div>\n <div class=\"fullwidth-frame fullwidth-frame--narrow\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTruncateSlab' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Another long primary action that should clip'\"\n [helperText]=\"'ellipsis'\"\n [fullWidth]=\"true\"\n [truncate]=\"true\"\n [colorButton]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n</dd-card-section>\n", styles: [".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-neo-paper);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-base-accent-blue);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}.fullwidth-block{margin-top:25px}.fullwidth-block .fullwidth-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.fullwidth-block .fullwidth-frame{flex:1;min-width:280px;padding:22px 18px 20px;border:3px dashed var(--dd-neo-ink);background:var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-blue);display:flex;flex-direction:column;align-items:stretch;gap:18px}.fullwidth-block .fullwidth-frame--narrow{max-width:360px}.fullwidth-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}@media(max-width:768px){.examples-block .example-item,.fullwidth-block .fullwidth-frame{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonNeobrutalBurst, selector: "duck-dev-button-neobrutal-burst", inputs: ["text", "subtext", "isDisabled", "fullWidth", "truncate", "wrapLabel", "pillPosition", "pillWrap", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "fullWidth", "truncate", "wrapLabel", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTag, selector: "duck-dev-button-neobrutal-tag", inputs: ["text", "tag", "isDisabled", "fullWidth", "truncate", "wrapLabel", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSticker, selector: "duck-dev-button-neobrutal-sticker", inputs: ["text", "subtext", "isDisabled", "fullWidth", "truncate", "wrapLabel", "colorButton"] }, { kind: "component", type: ButtonNeobrutalZigzag, selector: "duck-dev-button-neobrutal-zigzag", inputs: ["text", "label", "isDisabled", "fullWidth", "truncate", "wrapLabel", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTape, selector: "duck-dev-button-neobrutal-tape", inputs: ["text", "icon", "isDisabled", "fullWidth", "truncate", "wrapLabel", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
3939
4024
|
}
|
|
3940
4025
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBlock, decorators: [{
|
|
3941
4026
|
type: Component,
|
|
@@ -3948,7 +4033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3948
4033
|
ButtonNeobrutalTape,
|
|
3949
4034
|
DuckDevCardSection,
|
|
3950
4035
|
TranslocoPipe,
|
|
3951
|
-
], 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\n <!-- Content Projection -->\n <h3>{{ 'buttons.neobrutal.contentProjectionTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'buttons.neobrutal.contentProjectionDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <pre><code><!-- With [text] \u2014 works as before -->\n<duck-dev-button-neobrutal-tape\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n [colorButton]=\"colorViolet\"\n/>\n\n<!-- With content projection \u2014 custom content instead of text -->\n<duck-dev-button-neobrutal-tape\n [icon]=\"'+'\"\n [colorButton]=\"colorViolet\"\n>\n Import selected (<kitty-number-flow [value]=\"count()\" />)\n</duck-dev-button-neobrutal-tape></code></pre>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleProjectionTape' | transloco }}</p>\n <duck-dev-button-neobrutal-tape [icon]=\"'+'\" [colorButton]=\"colorViolet\">\n Custom content\n </duck-dev-button-neobrutal-tape>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleProjectionBurst' | transloco }}</p>\n <duck-dev-button-neobrutal-burst [subtext]=\"'New'\" [colorButton]=\"colorOrange\">\n Projected text\n </duck-dev-button-neobrutal-burst>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleProjectionSlab' | transloco }}</p>\n <duck-dev-button-neobrutal-slab [helperText]=\"'with ng-content'\" [colorButton]=\"colorDark\">\n Rich content\n </duck-dev-button-neobrutal-slab>\n </div>\n </div>\n </div>\n</dd-card-section>\n", styles: [".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-neo-paper);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-base-accent-blue);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"] }]
|
|
4036
|
+
], 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 <li><strong>fullWidth</strong> - {{ 'buttons.neobrutal.inputFullWidth' | transloco }}</li>\n <li><strong>truncate</strong> - {{ 'buttons.neobrutal.inputTruncate' | transloco }}</li>\n <li><strong>wrapLabel</strong> - {{ 'buttons.neobrutal.inputWrapLabel' | transloco }}</li>\n <li>\n <strong>pillPosition / pillWrap</strong> - {{ 'buttons.neobrutal.inputPill' | transloco }}\n </li>\n </ul>\n <p class=\"description\">{{ 'buttons.neobrutal.cssVarsNote' | transloco }}</p>\n <p class=\"description\">{{ 'buttons.neobrutal.cssVarsNoteExtra' | transloco }}</p>\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\n <!-- Content Projection -->\n <h3>{{ 'buttons.neobrutal.contentProjectionTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'buttons.neobrutal.contentProjectionDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <pre><code><!-- With [text] \u2014 works as before -->\n<duck-dev-button-neobrutal-tape\n [text]=\"'Stick it'\"\n [icon]=\"'>>'\"\n [colorButton]=\"colorViolet\"\n/>\n\n<!-- With content projection \u2014 custom content instead of text -->\n<duck-dev-button-neobrutal-tape\n [icon]=\"'+'\"\n [colorButton]=\"colorViolet\"\n>\n Import selected (<kitty-number-flow [value]=\"count()\" />)\n</duck-dev-button-neobrutal-tape></code></pre>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleProjectionTape' | transloco }}</p>\n <duck-dev-button-neobrutal-tape [icon]=\"'+'\" [colorButton]=\"colorViolet\">\n Custom content\n </duck-dev-button-neobrutal-tape>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleProjectionBurst' | transloco }}</p>\n <duck-dev-button-neobrutal-burst [subtext]=\"'New'\" [colorButton]=\"colorOrange\">\n Projected text\n </duck-dev-button-neobrutal-burst>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleProjectionSlab' | transloco }}</p>\n <duck-dev-button-neobrutal-slab [helperText]=\"'with ng-content'\" [colorButton]=\"colorDark\">\n Rich content\n </duck-dev-button-neobrutal-slab>\n </div>\n </div>\n </div>\n\n <div class=\"fullwidth-block\">\n <h3>{{ 'buttons.neobrutal.fullWidthTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'buttons.neobrutal.fullWidthDescription' | transloco }}</p>\n\n <div class=\"usage-block\">\n <pre><code><!-- Stretch to fill the parent (form column, modal footer, \u2026) -->\n<duck-dev-button-neobrutal-slab [text]=\"'Save changes'\" [fullWidth]=\"true\" />\n\n<!-- Clip an over-long label with an ellipsis -->\n<duck-dev-button-neobrutal-tag\n [text]=\"'A very long call to action'\"\n [tag]=\"'01'\"\n [fullWidth]=\"true\"\n [truncate]=\"true\"\n/>\n\n<!-- Low-level escape hatch via CSS custom properties -->\n<duck-dev-button-neobrutal-slab\n style=\"--dd-button-display: block; --dd-button-width: 100%; --dd-button-min-width: 0\"\n/></code></pre>\n </div>\n\n <div class=\"fullwidth-row\">\n <div class=\"fullwidth-frame\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleFullWidthSlab' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Save changes'\"\n [helperText]=\"'fills the column'\"\n [fullWidth]=\"true\"\n [colorButton]=\"colorViolet\"\n />\n </div>\n <div class=\"fullwidth-frame\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleFullWidthTape' | transloco }}</p>\n <duck-dev-button-neobrutal-tape\n [text]=\"'Submit form'\"\n [icon]=\"'>>'\"\n [fullWidth]=\"true\"\n [colorButton]=\"colorOrange\"\n />\n </div>\n </div>\n\n <div class=\"fullwidth-row\">\n <div class=\"fullwidth-frame fullwidth-frame--narrow\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTruncateTag' | transloco }}</p>\n <duck-dev-button-neobrutal-tag\n [text]=\"'A very long call to action label that overflows'\"\n [tag]=\"'01'\"\n [fullWidth]=\"true\"\n [truncate]=\"true\"\n [colorButton]=\"colorDark\"\n />\n </div>\n <div class=\"fullwidth-frame fullwidth-frame--narrow\">\n <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTruncateSlab' | transloco }}</p>\n <duck-dev-button-neobrutal-slab\n [text]=\"'Another long primary action that should clip'\"\n [helperText]=\"'ellipsis'\"\n [fullWidth]=\"true\"\n [truncate]=\"true\"\n [colorButton]=\"colorGray\"\n />\n </div>\n </div>\n </div>\n</dd-card-section>\n", styles: [".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-neo-paper);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-base-accent-blue);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}.fullwidth-block{margin-top:25px}.fullwidth-block .fullwidth-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.fullwidth-block .fullwidth-frame{flex:1;min-width:280px;padding:22px 18px 20px;border:3px dashed var(--dd-neo-ink);background:var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-blue);display:flex;flex-direction:column;align-items:stretch;gap:18px}.fullwidth-block .fullwidth-frame--narrow{max-width:360px}.fullwidth-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}@media(max-width:768px){.examples-block .example-item,.fullwidth-block .fullwidth-frame{min-width:100%}}\n"] }]
|
|
3952
4037
|
}] });
|
|
3953
4038
|
|
|
3954
4039
|
class DuckDevTab {
|
|
@@ -4040,6 +4125,7 @@ class DuckDevTabNeobrutal {
|
|
|
4040
4125
|
tabs = input([], { ...(ngDevMode ? { debugName: "tabs" } : {}) });
|
|
4041
4126
|
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
4042
4127
|
showContentWrapper = input(true, { ...(ngDevMode ? { debugName: "showContentWrapper" } : {}) });
|
|
4128
|
+
stretchTabs = input(false, { ...(ngDevMode ? { debugName: "stretchTabs" } : {}) });
|
|
4043
4129
|
tabChange = output();
|
|
4044
4130
|
panels = contentChildren(DdTabPanel, { ...(ngDevMode ? { debugName: "panels" } : {}) });
|
|
4045
4131
|
activeIndex = signal(0, { ...(ngDevMode ? { debugName: "activeIndex" } : {}) });
|
|
@@ -4081,12 +4167,12 @@ class DuckDevTabNeobrutal {
|
|
|
4081
4167
|
return 'hidden';
|
|
4082
4168
|
}
|
|
4083
4169
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4084
|
-
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 }, showContentWrapper: { classPropertyName: "showContentWrapper", publicName: "showContentWrapper", 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 @if (showContentWrapper()) {\n <div\n class=\"dd-tab-neo__viewport\"\n [class.dd-tab-neo__viewport--animating]=\"isAnimating()\"\n [class.dd-tab-neo__viewport--left]=\"isAnimating() && direction() === 'left'\"\n [class.dd-tab-neo__viewport--right]=\"isAnimating() && direction() === 'right'\"\n >\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 } @else {\n <div class=\"dd-tab-neo__content-bare\">\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 }\n</div>\n", styles: [":host{display:block;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-1);--dd-tab-neo-text: var(--dd-neo-ink);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-2);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-2)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-2);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6);--dd-tab-neo-number-bg: var(--dd-neo-ana-1)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-neo-ana-4);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-neo-ink);--dd-tab-neo-accent: var(--dd-neo-ana-3);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-5);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-5);--dd-tab-neo-number-bg: var(--dd-neo-ana-3);--dd-tab-neo-text: var(--dd-neo-paper)}.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-neo-ink);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;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1)}.dd-tab-neo__viewport--animating{animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__viewport--right{animation-name:neoViewportShakeRight}.dd-tab-neo__viewport--left{animation-name:neoViewportShakeLeft}.dd-tab-neo__content-bare{position:relative;overflow:hidden;perspective:1200px;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)}}@keyframes neoViewportShakeRight{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(4px,-2px) rotate(.5deg);box-shadow:6px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(-2px,1px) rotate(-.3deg);box-shadow:12px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@keyframes neoViewportShakeLeft{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(-4px,-2px) rotate(-.5deg);box-shadow:14px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(2px,1px) rotate(.3deg);box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@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"] }] });
|
|
4170
|
+
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 }, showContentWrapper: { classPropertyName: "showContentWrapper", publicName: "showContentWrapper", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, queries: [{ propertyName: "panels", predicate: DdTabPanel, isSignal: true }], ngImport: i0, template: "<div class=\"dd-tab-neo\" [class.dd-tab-neo--stretch]=\"stretchTabs()\" [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 @if (showContentWrapper()) {\n <div\n class=\"dd-tab-neo__viewport\"\n [class.dd-tab-neo__viewport--animating]=\"isAnimating()\"\n [class.dd-tab-neo__viewport--left]=\"isAnimating() && direction() === 'left'\"\n [class.dd-tab-neo__viewport--right]=\"isAnimating() && direction() === 'right'\"\n >\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 } @else {\n <div class=\"dd-tab-neo__content-bare\">\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 }\n</div>\n", styles: [":host{display:block;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-1);--dd-tab-neo-text: var(--dd-neo-ink);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-2);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-2)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-2);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6);--dd-tab-neo-number-bg: var(--dd-neo-ana-1)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-neo-ana-4);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-neo-ink);--dd-tab-neo-accent: var(--dd-neo-ana-3);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-5);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-5);--dd-tab-neo-number-bg: var(--dd-neo-ana-3);--dd-tab-neo-text: var(--dd-neo-paper)}.dd-tab-neo__header{display:flex;flex-wrap:wrap;gap:.85rem}.dd-tab-neo--stretch .dd-tab-neo__header{width:100%}.dd-tab-neo--stretch .dd-tab-neo__button{flex:1 1 0;min-width:0;justify-content:center}.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-neo-ink);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:var(--dd-tab-neo-viewport-overflow, hidden);perspective:1200px;border:var(--dd-tab-neo-viewport-border, 3px solid var(--dd-neo-ink));border-radius:var(--dd-tab-neo-viewport-radius, 28px);background:var(--dd-tab-neo-viewport-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:var(--dd-tab-neo-viewport-shadow, 10px 10px 0 var(--dd-tab-neo-content-shadow));min-height:var(--dd-tab-neo-viewport-min-height, 100px);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1)}.dd-tab-neo__viewport--animating{animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__viewport--right{animation-name:neoViewportShakeRight}.dd-tab-neo__viewport--left{animation-name:neoViewportShakeLeft}.dd-tab-neo__content-bare{position:relative;overflow:var(--dd-tab-neo-viewport-overflow, hidden);perspective:1200px;min-height:var(--dd-tab-neo-viewport-min-height, 100px)}.dd-tab-neo__panel{padding:var(--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)}}@keyframes neoViewportShakeRight{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(4px,-2px) rotate(.5deg);box-shadow:6px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(-2px,1px) rotate(-.3deg);box-shadow:12px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@keyframes neoViewportShakeLeft{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(-4px,-2px) rotate(-.5deg);box-shadow:14px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(2px,1px) rotate(.3deg);box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@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:var(--dd-tab-neo-panel-padding, 1rem)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
4085
4171
|
}
|
|
4086
4172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabNeobrutal, decorators: [{
|
|
4087
4173
|
type: Component,
|
|
4088
|
-
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 @if (showContentWrapper()) {\n <div\n class=\"dd-tab-neo__viewport\"\n [class.dd-tab-neo__viewport--animating]=\"isAnimating()\"\n [class.dd-tab-neo__viewport--left]=\"isAnimating() && direction() === 'left'\"\n [class.dd-tab-neo__viewport--right]=\"isAnimating() && direction() === 'right'\"\n >\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 } @else {\n <div class=\"dd-tab-neo__content-bare\">\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 }\n</div>\n", styles: [":host{display:block;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-1);--dd-tab-neo-text: var(--dd-neo-ink);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-2);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-2)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-2);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6);--dd-tab-neo-number-bg: var(--dd-neo-ana-1)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-neo-ana-4);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-neo-ink);--dd-tab-neo-accent: var(--dd-neo-ana-3);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-5);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-5);--dd-tab-neo-number-bg: var(--dd-neo-ana-3);--dd-tab-neo-text: var(--dd-neo-paper)}.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-neo-ink);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;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1)}.dd-tab-neo__viewport--animating{animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__viewport--right{animation-name:neoViewportShakeRight}.dd-tab-neo__viewport--left{animation-name:neoViewportShakeLeft}.dd-tab-neo__content-bare{position:relative;overflow:hidden;perspective:1200px;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)}}@keyframes neoViewportShakeRight{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(4px,-2px) rotate(.5deg);box-shadow:6px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(-2px,1px) rotate(-.3deg);box-shadow:12px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@keyframes neoViewportShakeLeft{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(-4px,-2px) rotate(-.5deg);box-shadow:14px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(2px,1px) rotate(.3deg);box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@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"] }]
|
|
4089
|
-
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showContentWrapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showContentWrapper", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DdTabPanel), { isSignal: true }] }] } });
|
|
4174
|
+
args: [{ selector: 'duck-dev-tab-neobrutal', standalone: true, imports: [NgTemplateOutlet], template: "<div class=\"dd-tab-neo\" [class.dd-tab-neo--stretch]=\"stretchTabs()\" [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 @if (showContentWrapper()) {\n <div\n class=\"dd-tab-neo__viewport\"\n [class.dd-tab-neo__viewport--animating]=\"isAnimating()\"\n [class.dd-tab-neo__viewport--left]=\"isAnimating() && direction() === 'left'\"\n [class.dd-tab-neo__viewport--right]=\"isAnimating() && direction() === 'right'\"\n >\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 } @else {\n <div class=\"dd-tab-neo__content-bare\">\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 }\n</div>\n", styles: [":host{display:block;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-1);--dd-tab-neo-text: var(--dd-neo-ink);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-2);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-2)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-2);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6);--dd-tab-neo-number-bg: var(--dd-neo-ana-1)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-neo-ana-4);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-neo-ink);--dd-tab-neo-accent: var(--dd-neo-ana-3);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-5);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-5);--dd-tab-neo-number-bg: var(--dd-neo-ana-3);--dd-tab-neo-text: var(--dd-neo-paper)}.dd-tab-neo__header{display:flex;flex-wrap:wrap;gap:.85rem}.dd-tab-neo--stretch .dd-tab-neo__header{width:100%}.dd-tab-neo--stretch .dd-tab-neo__button{flex:1 1 0;min-width:0;justify-content:center}.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-neo-ink);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:var(--dd-tab-neo-viewport-overflow, hidden);perspective:1200px;border:var(--dd-tab-neo-viewport-border, 3px solid var(--dd-neo-ink));border-radius:var(--dd-tab-neo-viewport-radius, 28px);background:var(--dd-tab-neo-viewport-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:var(--dd-tab-neo-viewport-shadow, 10px 10px 0 var(--dd-tab-neo-content-shadow));min-height:var(--dd-tab-neo-viewport-min-height, 100px);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1)}.dd-tab-neo__viewport--animating{animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__viewport--right{animation-name:neoViewportShakeRight}.dd-tab-neo__viewport--left{animation-name:neoViewportShakeLeft}.dd-tab-neo__content-bare{position:relative;overflow:var(--dd-tab-neo-viewport-overflow, hidden);perspective:1200px;min-height:var(--dd-tab-neo-viewport-min-height, 100px)}.dd-tab-neo__panel{padding:var(--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)}}@keyframes neoViewportShakeRight{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(4px,-2px) rotate(.5deg);box-shadow:6px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(-2px,1px) rotate(-.3deg);box-shadow:12px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@keyframes neoViewportShakeLeft{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(-4px,-2px) rotate(-.5deg);box-shadow:14px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(2px,1px) rotate(.3deg);box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@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:var(--dd-tab-neo-panel-padding, 1rem)}}\n"] }]
|
|
4175
|
+
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showContentWrapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showContentWrapper", required: false }] }], stretchTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretchTabs", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DdTabPanel), { isSignal: true }] }] } });
|
|
4090
4176
|
|
|
4091
4177
|
class ButtonBlock {
|
|
4092
4178
|
t = inject(TranslocoService);
|
|
@@ -4236,11 +4322,11 @@ class DuckDevInputNeobrutalSlab {
|
|
|
4236
4322
|
options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
4237
4323
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
4238
4324
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4239
|
-
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
|
|
4325
|
+
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 <div class=\"neo-input-affix\">\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 <span class=\"neo-input-suffix\"><ng-content select=\"[ddInputSuffix]\" /></span>\n </div>\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-base-accent-orange);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-neo-paper);box-shadow:var(--dd-input-neo-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:not(.neo-input_select){padding-inline-end:var(--dd-input-neo-padding-inline-end, 16px)}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:var(--dd-input-neo-shadow-focus, 8px 8px 0 var(--dd-base-accent-orange))}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:var(--dd-input-neo-textarea-min-height, 136px);padding:var(--dd-input-neo-textarea-padding, 14px 16px);resize:var(--dd-input-neo-textarea-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-input-neo-error-border-color, var(--dd-base-accent-orange));box-shadow:var(--dd-input-neo-error-shadow, 6px 6px 0 var(--dd-base-accent-orange))}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-input-neo-error-message-background, var(--dd-base-accent-orange));color:var(--dd-input-neo-error-message-color, var(--dd-base-600));font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-input-affix{position:relative;display:block}.neo-input-suffix{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center}.neo-input-suffix:empty{display:none}.neo-input-affix:has(.neo-input-suffix:not(:empty)) .neo-input{padding-inline-end:var(--dd-input-neo-padding-inline-end, 52px)}.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-neo-paper);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"] }] });
|
|
4240
4326
|
}
|
|
4241
4327
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, decorators: [{
|
|
4242
4328
|
type: Component,
|
|
4243
|
-
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
|
|
4329
|
+
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 <div class=\"neo-input-affix\">\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 <span class=\"neo-input-suffix\"><ng-content select=\"[ddInputSuffix]\" /></span>\n </div>\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-base-accent-orange);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-neo-paper);box-shadow:var(--dd-input-neo-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:not(.neo-input_select){padding-inline-end:var(--dd-input-neo-padding-inline-end, 16px)}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:var(--dd-input-neo-shadow-focus, 8px 8px 0 var(--dd-base-accent-orange))}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:var(--dd-input-neo-textarea-min-height, 136px);padding:var(--dd-input-neo-textarea-padding, 14px 16px);resize:var(--dd-input-neo-textarea-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-input-neo-error-border-color, var(--dd-base-accent-orange));box-shadow:var(--dd-input-neo-error-shadow, 6px 6px 0 var(--dd-base-accent-orange))}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-input-neo-error-message-background, var(--dd-base-accent-orange));color:var(--dd-input-neo-error-message-color, var(--dd-base-600));font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-input-affix{position:relative;display:block}.neo-input-suffix{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center}.neo-input-suffix:empty{display:none}.neo-input-affix:has(.neo-input-suffix:not(:empty)) .neo-input{padding-inline-end:var(--dd-input-neo-padding-inline-end, 52px)}.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-neo-paper);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"] }]
|
|
4244
4330
|
}], 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 }] }] } });
|
|
4245
4331
|
|
|
4246
4332
|
class DuckDevInputNeobrutalStrip {
|
|
@@ -4324,7 +4410,7 @@ class DuckDevNotification {
|
|
|
4324
4410
|
this.timer = undefined;
|
|
4325
4411
|
}
|
|
4326
4412
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4327
|
-
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"] }] });
|
|
4413
|
+
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", "size", "color"] }] });
|
|
4328
4414
|
}
|
|
4329
4415
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, decorators: [{
|
|
4330
4416
|
type: Component,
|
|
@@ -4454,7 +4540,7 @@ function getNeobrutalAccordionStyle(color) {
|
|
|
4454
4540
|
'--dd-neo-accordion-panel': 'color-mix(in srgb, var(--dd-neo-ana-3) 7%, var(--dd-neo-paper))',
|
|
4455
4541
|
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-1)',
|
|
4456
4542
|
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
4457
|
-
'--dd-neo-accordion-text': 'var(--dd-
|
|
4543
|
+
'--dd-neo-accordion-text': 'var(--dd-base-600)',
|
|
4458
4544
|
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-6)',
|
|
4459
4545
|
};
|
|
4460
4546
|
case AccentEnumColor.Orange:
|
|
@@ -4463,7 +4549,7 @@ function getNeobrutalAccordionStyle(color) {
|
|
|
4463
4549
|
'--dd-neo-accordion-panel': 'color-mix(in srgb, var(--dd-neo-ana-2) 8%, var(--dd-neo-paper))',
|
|
4464
4550
|
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-1)',
|
|
4465
4551
|
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
4466
|
-
'--dd-neo-accordion-text': 'var(--dd-
|
|
4552
|
+
'--dd-neo-accordion-text': 'var(--dd-base-600)',
|
|
4467
4553
|
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-5)',
|
|
4468
4554
|
};
|
|
4469
4555
|
case AccentEnumColor.Gray:
|
|
@@ -4472,7 +4558,7 @@ function getNeobrutalAccordionStyle(color) {
|
|
|
4472
4558
|
'--dd-neo-accordion-panel': 'var(--dd-neo-paper)',
|
|
4473
4559
|
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-2)',
|
|
4474
4560
|
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
4475
|
-
'--dd-neo-accordion-text': 'var(--dd-
|
|
4561
|
+
'--dd-neo-accordion-text': 'var(--dd-base-600)',
|
|
4476
4562
|
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-6)',
|
|
4477
4563
|
};
|
|
4478
4564
|
case AccentEnumColor.Dark:
|
|
@@ -4491,7 +4577,7 @@ function getNeobrutalAccordionStyle(color) {
|
|
|
4491
4577
|
'--dd-neo-accordion-panel': 'var(--dd-base-100)',
|
|
4492
4578
|
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-6)',
|
|
4493
4579
|
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
4494
|
-
'--dd-neo-accordion-text': 'var(--dd-
|
|
4580
|
+
'--dd-neo-accordion-text': 'var(--dd-base-600)',
|
|
4495
4581
|
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-5)',
|
|
4496
4582
|
};
|
|
4497
4583
|
}
|
|
@@ -4547,6 +4633,8 @@ class DuckDevAccordionNeobrutalComponent {
|
|
|
4547
4633
|
title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
|
|
4548
4634
|
stampLabel = input.required({ ...(ngDevMode ? { debugName: "stampLabel" } : {}) });
|
|
4549
4635
|
color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
4636
|
+
bodyConnector = input(true, { ...(ngDevMode ? { debugName: "bodyConnector" } : {}) });
|
|
4637
|
+
allowOverflow = input(false, { ...(ngDevMode ? { debugName: "allowOverflow" } : {}) });
|
|
4550
4638
|
paletteStyle = computed(() => getNeobrutalAccordionStyle(this.color()), { ...(ngDevMode ? { debugName: "paletteStyle" } : {}) });
|
|
4551
4639
|
isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
|
|
4552
4640
|
stateLabel = computed(() => (this.isOpen() ? 'OPEN' : 'CLOSED'), { ...(ngDevMode ? { debugName: "stateLabel" } : {}) });
|
|
@@ -4562,12 +4650,12 @@ class DuckDevAccordionNeobrutalComponent {
|
|
|
4562
4650
|
this.isOpen.update((prev) => !prev);
|
|
4563
4651
|
}
|
|
4564
4652
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4565
|
-
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
|
|
4653
|
+
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 }, bodyConnector: { classPropertyName: "bodyConnector", publicName: "bodyConnector", isSignal: true, isRequired: false, transformFunction: null }, allowOverflow: { classPropertyName: "allowOverflow", publicName: "allowOverflow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-accordion-brutal\"\n [class.is-open]=\"isOpen()\"\n [class.dd-accordion-brutal--no-connector]=\"!bodyConnector()\"\n [class.dd-accordion-brutal--overflow]=\"allowOverflow()\"\n [ngStyle]=\"paletteStyle()\"\n>\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: [":host{display:block}.dd-accordion-brutal{display:block;background:var(--dd-neo-accordion-bg);border:4px solid var(--dd-neo-accordion-border);box-shadow:10px 10px 0 var(--dd-neo-accordion-shadow);overflow:clip;color:var(--dd-neo-accordion-text)}.dd-accordion-brutal--overflow.is-open,.dd-accordion-brutal--overflow.is-open .dd-accordion-brutal__body-shell,.dd-accordion-brutal--overflow.is-open .dd-accordion-brutal__body-frame{overflow:visible}.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-neo-accordion-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-accordion-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-neo-accordion-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-neo-accordion-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-neo-accordion-accent);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-neo-accordion-border);transform:rotate(-4deg)}.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-neo-accordion-border);background:color-mix(in srgb,var(--dd-neo-accordion-accent) 14%,var(--dd-neo-accordion-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-neo-accordion-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-neo-accordion-accent);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-neo-accordion-accent) 20%,var(--dd-neo-paper));box-shadow:2px 2px 0 var(--dd-neo-accordion-accent)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-neo-accordion-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:var(--dd-accordion-body-border-top, 4px solid var(--dd-neo-accordion-border))}.dd-accordion-brutal__body-content{position:relative;padding:0 var(--dd-accordion-body-padding-inline-end, 20px) 0 var(--dd-accordion-body-padding-inline-start, 24px);opacity:0;transform:translateY(-12px) scale(.98);transition:var(--dd-accordion-body-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-neo-accordion-accent);display:var(--dd-accordion-body-marker-display, block)}.dd-accordion-brutal--no-connector{--dd-accordion-body-marker-display: none}.dd-accordion-brutal__body-shell.is-open .dd-accordion-brutal__body-content{padding-top:var(--dd-accordion-body-padding-block-start, 20px);padding-bottom:var(--dd-accordion-body-padding-block-end, 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:10px 10px 0 var(--dd-neo-accordion-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:var(--dd-accordion-body-padding-inline-end, 16px);padding-left:var(--dd-accordion-body-padding-inline-start, 20px)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4566
4654
|
}
|
|
4567
4655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, decorators: [{
|
|
4568
4656
|
type: Component,
|
|
4569
|
-
args: [{ selector: 'duck-dev-accordion-neobrutal', standalone: true, imports: [NgStyle, NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
4570
|
-
}], 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 }] }] } });
|
|
4657
|
+
args: [{ selector: 'duck-dev-accordion-neobrutal', standalone: true, imports: [NgStyle, NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"dd-accordion-brutal\"\n [class.is-open]=\"isOpen()\"\n [class.dd-accordion-brutal--no-connector]=\"!bodyConnector()\"\n [class.dd-accordion-brutal--overflow]=\"allowOverflow()\"\n [ngStyle]=\"paletteStyle()\"\n>\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: [":host{display:block}.dd-accordion-brutal{display:block;background:var(--dd-neo-accordion-bg);border:4px solid var(--dd-neo-accordion-border);box-shadow:10px 10px 0 var(--dd-neo-accordion-shadow);overflow:clip;color:var(--dd-neo-accordion-text)}.dd-accordion-brutal--overflow.is-open,.dd-accordion-brutal--overflow.is-open .dd-accordion-brutal__body-shell,.dd-accordion-brutal--overflow.is-open .dd-accordion-brutal__body-frame{overflow:visible}.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-neo-accordion-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-accordion-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-neo-accordion-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-neo-accordion-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-neo-accordion-accent);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-neo-accordion-border);transform:rotate(-4deg)}.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-neo-accordion-border);background:color-mix(in srgb,var(--dd-neo-accordion-accent) 14%,var(--dd-neo-accordion-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-neo-accordion-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-neo-accordion-accent);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-neo-accordion-accent) 20%,var(--dd-neo-paper));box-shadow:2px 2px 0 var(--dd-neo-accordion-accent)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-neo-accordion-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:var(--dd-accordion-body-border-top, 4px solid var(--dd-neo-accordion-border))}.dd-accordion-brutal__body-content{position:relative;padding:0 var(--dd-accordion-body-padding-inline-end, 20px) 0 var(--dd-accordion-body-padding-inline-start, 24px);opacity:0;transform:translateY(-12px) scale(.98);transition:var(--dd-accordion-body-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-neo-accordion-accent);display:var(--dd-accordion-body-marker-display, block)}.dd-accordion-brutal--no-connector{--dd-accordion-body-marker-display: none}.dd-accordion-brutal__body-shell.is-open .dd-accordion-brutal__body-content{padding-top:var(--dd-accordion-body-padding-block-start, 20px);padding-bottom:var(--dd-accordion-body-padding-block-end, 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:10px 10px 0 var(--dd-neo-accordion-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:var(--dd-accordion-body-padding-inline-end, 16px);padding-left:var(--dd-accordion-body-padding-inline-start, 20px)}}\n"] }]
|
|
4658
|
+
}], 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 }] }], bodyConnector: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyConnector", required: false }] }], allowOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOverflow", required: false }] }] } });
|
|
4571
4659
|
|
|
4572
4660
|
class DuckDevAccordionNeobrutalTapeComponent {
|
|
4573
4661
|
content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
|
|
@@ -4580,7 +4668,7 @@ class DuckDevAccordionNeobrutalTapeComponent {
|
|
|
4580
4668
|
this.isOpen.update((prev) => !prev);
|
|
4581
4669
|
}
|
|
4582
4670
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4583
|
-
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()\" [ngStyle]=\"paletteStyle()\">\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{display:block;position:relative;color:var(--dd-neo-tape-text)}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-neo-tape-bg);border:3px solid var(--dd-neo-tape-border);cursor:pointer;color:var(--dd-neo-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:4px 4px 0 var(--dd-neo-tape-accent);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-tape-accent)}.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-neo-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-neo-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-neo-tape-border);border-top:none;background:var(--dd-neo-paper);padding:0 20px;margin-top:-2px;position:relative;box-shadow:4px 4px 0 var(--dd-neo-tape-accent);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-neo-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}@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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4671
|
+
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()\" [ngStyle]=\"paletteStyle()\">\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{display:block;position:relative;color:var(--dd-neo-tape-text)}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-neo-tape-bg);border:3px solid var(--dd-neo-tape-border);cursor:pointer;color:var(--dd-neo-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:4px 4px 0 var(--dd-neo-tape-accent);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-tape-accent)}.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-neo-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-neo-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-neo-tape-border);border-top:none;background:var(--dd-neo-paper);padding:0 20px;margin-top:-2px;position:relative;box-shadow:4px 4px 0 var(--dd-neo-tape-accent);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-neo-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}@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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4584
4672
|
}
|
|
4585
4673
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, decorators: [{
|
|
4586
4674
|
type: Component,
|
|
@@ -4617,7 +4705,7 @@ class SliderClassic {
|
|
|
4617
4705
|
return this.direction() === 'next' ? 'leave-to-left' : 'leave-to-right';
|
|
4618
4706
|
}
|
|
4619
4707
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4620
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SliderClassic, isStandalone: true, selector: "dd-slider-classic", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"" } }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"slides\" #slidesContainer>\n @for (item of items(); track $index) {\n @if ($index === currentIndex()) {\n <div\n class=\"slide current content-full\"\n [animate.enter]=\"getEnterAnimation()\"\n [animate.leave]=\"getLeaveAnimation()\"\n >\n <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n </div>\n }\n }\n </div>\n\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-prev\"\n name=\"duck-dev-chevron-left-medium\"\n (click)=\"goPrev()\"\n />\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-next\"\n name=\"duck-dev-chevron-right-medium\"\n (click)=\"goNext()\"\n />\n</div>\n", styles: [".container{position:relative;overflow:hidden;margin:0 auto;height:100%}.slides{position:relative;min-height:1px;display:grid;height:100%;justify-items:start;align-items:start}.slide{position:relative;width:100%;height:100%;grid-area:1/1}.enter-from-right{animation:enter-from-right-animation .3s ease-out}@keyframes enter-from-right-animation{0%{opacity:.5;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.enter-from-left{animation:enter-from-left-animation .3s ease-out}@keyframes enter-from-left-animation{0%{opacity:.5;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.leave-to-left{animation:leave-to-left .3s ease-in}@keyframes leave-to-left{0%{opacity:1;transform:translate(0)}to{opacity:.5;transform:translate(-100%)}}.leave-to-right{animation:leave-to-right .3s ease-in}@keyframes leave-to-right{0%{opacity:1;transform:translate(0)}to{opacity:.5;transform:translate(100%)}}.dd-slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--dd-base-0);cursor:pointer;transition:scale .2s cubic-bezier(.22,1,.36,1)}.dd-slider-btn:hover{scale:1.4}.dd-slider-btn:disabled{opacity:.5;cursor:default}.dd-slider-btn-prev{left:8px}.dd-slider-btn-next{right:8px}@media(prefers-reduced-motion:reduce){.enter-from-right,.enter-from-left,.leave-to-left,.leave-to-right{animation:none}}\n"], dependencies: [{ kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
4708
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SliderClassic, isStandalone: true, selector: "dd-slider-classic", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"" } }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"slides\" #slidesContainer>\n @for (item of items(); track $index) {\n @if ($index === currentIndex()) {\n <div\n class=\"slide current content-full\"\n [animate.enter]=\"getEnterAnimation()\"\n [animate.leave]=\"getLeaveAnimation()\"\n >\n <ng-container [ngTemplateOutlet]=\"item\"></ng-container>\n </div>\n }\n }\n </div>\n\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-prev\"\n name=\"duck-dev-chevron-left-medium\"\n (click)=\"goPrev()\"\n />\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-next\"\n name=\"duck-dev-chevron-right-medium\"\n (click)=\"goNext()\"\n />\n</div>\n", styles: [".container{position:relative;overflow:hidden;margin:0 auto;height:100%}.slides{position:relative;min-height:1px;display:grid;height:100%;justify-items:start;align-items:start}.slide{position:relative;width:100%;height:100%;grid-area:1/1}.enter-from-right{animation:enter-from-right-animation .3s ease-out}@keyframes enter-from-right-animation{0%{opacity:.5;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.enter-from-left{animation:enter-from-left-animation .3s ease-out}@keyframes enter-from-left-animation{0%{opacity:.5;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.leave-to-left{animation:leave-to-left .3s ease-in}@keyframes leave-to-left{0%{opacity:1;transform:translate(0)}to{opacity:.5;transform:translate(-100%)}}.leave-to-right{animation:leave-to-right .3s ease-in}@keyframes leave-to-right{0%{opacity:1;transform:translate(0)}to{opacity:.5;transform:translate(100%)}}.dd-slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--dd-base-0);cursor:pointer;transition:scale .2s cubic-bezier(.22,1,.36,1)}.dd-slider-btn:hover{scale:1.4}.dd-slider-btn:disabled{opacity:.5;cursor:default}.dd-slider-btn-prev{left:8px}.dd-slider-btn-next{right:8px}@media(prefers-reduced-motion:reduce){.enter-from-right,.enter-from-left,.leave-to-left,.leave-to-right{animation:none}}\n"], dependencies: [{ kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
4621
4709
|
}
|
|
4622
4710
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderClassic, decorators: [{
|
|
4623
4711
|
type: Component,
|
|
@@ -5060,11 +5148,11 @@ class DuckDevCardNeobrutalSlab {
|
|
|
5060
5148
|
return Math.min(Math.max(value, min), max);
|
|
5061
5149
|
}
|
|
5062
5150
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5063
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalSlab, isStandalone: true, selector: "dd-card-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strapLabel: { classPropertyName: "strapLabel", publicName: "strapLabel", isSignal: true, isRequired: true, transformFunction: null }, swipeable: { classPropertyName: "swipeable", publicName: "swipeable", isSignal: true, isRequired: false, transformFunction: null }, swipeThreshold: { classPropertyName: "swipeThreshold", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { swipedLeft: "swipedLeft", swipedRight: "swipedRight" }, ngImport: i0, template: "<article\n class=\"dd-card-neo-slab\"\n [class.dd-card-neo-slab--dragging]=\"isDragging()\"\n [class.dd-card-neo-slab--swipeable]=\"swipeable()\"\n [ngStyle]=\"cardStyle()\"\n [style.cursor]=\"cursorStyle()\"\n [style.touch-action]=\"touchActionStyle()\"\n [style.transform]=\"transformStyle()\"\n [style.transition]=\"dragTransition()\"\n (pointercancel)=\"onPointerCancel($event)\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n>\n <div class=\"dd-card-neo-slab__strap-frame\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n <div class=\"dd-card-neo-slab__panel\">\n <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n <div class=\"dd-card-neo-slab__content\">\n <ng-content />\n </div>\n </div>\n <div class=\"dd-card-neo-slab__strap-text\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);transform-origin:center bottom;will-change:transform}.dd-card-neo-slab.dd-card-neo-slab--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-slab.dd-card-neo-slab--dragging{z-index:1}.dd-card-neo-slab__strap-frame,.dd-card-neo-slab__strap-text{position:absolute;
|
|
5151
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalSlab, isStandalone: true, selector: "dd-card-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strapLabel: { classPropertyName: "strapLabel", publicName: "strapLabel", isSignal: true, isRequired: true, transformFunction: null }, swipeable: { classPropertyName: "swipeable", publicName: "swipeable", isSignal: true, isRequired: false, transformFunction: null }, swipeThreshold: { classPropertyName: "swipeThreshold", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { swipedLeft: "swipedLeft", swipedRight: "swipedRight" }, ngImport: i0, template: "<article\n class=\"dd-card-neo-slab\"\n [class.dd-card-neo-slab--dragging]=\"isDragging()\"\n [class.dd-card-neo-slab--swipeable]=\"swipeable()\"\n [ngStyle]=\"cardStyle()\"\n [style.cursor]=\"cursorStyle()\"\n [style.touch-action]=\"touchActionStyle()\"\n [style.transform]=\"transformStyle()\"\n [style.transition]=\"dragTransition()\"\n (pointercancel)=\"onPointerCancel($event)\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n>\n <div class=\"dd-card-neo-slab__strap-frame\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n <div class=\"dd-card-neo-slab__panel\">\n <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n <div class=\"dd-card-neo-slab__content\">\n <ng-content />\n </div>\n </div>\n <div class=\"dd-card-neo-slab__strap-text\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n</article>\n", styles: [":host{display:block}.dd-card-neo-slab{position:relative;display:block;background:var(--dd-card-background, var(--dd-neo-card-surface));border:4px solid var(--dd-card-border-color, var(--dd-neo-card-border));box-shadow:var(--dd-card-shadow, 10px 10px 0 var(--dd-neo-card-shadow));color:var(--dd-neo-card-text);transform-origin:center bottom;will-change:transform}.dd-card-neo-slab.dd-card-neo-slab--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-slab.dd-card-neo-slab--dragging{z-index:1}.dd-card-neo-slab__strap-frame,.dd-card-neo-slab__strap-text{position:absolute;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg);white-space:nowrap;pointer-events:none}.dd-card-neo-slab__strap-frame{top:-22px;z-index:0;border:3px solid var(--dd-neo-card-border);background:var(--dd-card-strap-background, var(--dd-neo-card-accent));box-shadow:4px 4px 0 var(--dd-neo-card-shadow);color:transparent;-webkit-user-select:none;user-select:none}.dd-card-neo-slab__strap-text{top:-22px;z-index:2;color:var(--dd-card-strap-color, inherit)}.dd-card-neo-slab__panel{position:relative;z-index:1;padding:var(--dd-card-panel-padding, 28px 22px 22px);background:var(--dd-card-panel-background, linear-gradient(135deg, color-mix(in srgb, var(--dd-neo-card-accent) 28%, transparent) 0 16%, transparent 16% 100%), var(--dd-neo-card-panel));border:var(--dd-card-panel-border, none);box-shadow:var(--dd-card-panel-shadow, none)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-card-marker-background, var(--dd-neo-card-accent))}.dd-card-neo-slab__content{position:relative;display:var(--dd-card-content-display, block);flex-direction:var(--dd-card-content-flex-direction, column);gap:var(--dd-card-content-gap, 0);min-height:var(--dd-card-content-min-height, auto);justify-content:var(--dd-card-content-justify-content, normal);padding-block:var(--dd-card-content-padding-block, 0);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
5064
5152
|
}
|
|
5065
5153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalSlab, decorators: [{
|
|
5066
5154
|
type: Component,
|
|
5067
|
-
args: [{ selector: 'dd-card-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<article\n class=\"dd-card-neo-slab\"\n [class.dd-card-neo-slab--dragging]=\"isDragging()\"\n [class.dd-card-neo-slab--swipeable]=\"swipeable()\"\n [ngStyle]=\"cardStyle()\"\n [style.cursor]=\"cursorStyle()\"\n [style.touch-action]=\"touchActionStyle()\"\n [style.transform]=\"transformStyle()\"\n [style.transition]=\"dragTransition()\"\n (pointercancel)=\"onPointerCancel($event)\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n>\n <div class=\"dd-card-neo-slab__strap-frame\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n <div class=\"dd-card-neo-slab__panel\">\n <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n <div class=\"dd-card-neo-slab__content\">\n <ng-content />\n </div>\n </div>\n <div class=\"dd-card-neo-slab__strap-text\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);transform-origin:center bottom;will-change:transform}.dd-card-neo-slab.dd-card-neo-slab--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-slab.dd-card-neo-slab--dragging{z-index:1}.dd-card-neo-slab__strap-frame,.dd-card-neo-slab__strap-text{position:absolute;
|
|
5155
|
+
args: [{ selector: 'dd-card-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<article\n class=\"dd-card-neo-slab\"\n [class.dd-card-neo-slab--dragging]=\"isDragging()\"\n [class.dd-card-neo-slab--swipeable]=\"swipeable()\"\n [ngStyle]=\"cardStyle()\"\n [style.cursor]=\"cursorStyle()\"\n [style.touch-action]=\"touchActionStyle()\"\n [style.transform]=\"transformStyle()\"\n [style.transition]=\"dragTransition()\"\n (pointercancel)=\"onPointerCancel($event)\"\n (pointerdown)=\"onPointerDown($event)\"\n (pointermove)=\"onPointerMove($event)\"\n (pointerup)=\"onPointerUp($event)\"\n>\n <div class=\"dd-card-neo-slab__strap-frame\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n <div class=\"dd-card-neo-slab__panel\">\n <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n <div class=\"dd-card-neo-slab__content\">\n <ng-content />\n </div>\n </div>\n <div class=\"dd-card-neo-slab__strap-text\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n</article>\n", styles: [":host{display:block}.dd-card-neo-slab{position:relative;display:block;background:var(--dd-card-background, var(--dd-neo-card-surface));border:4px solid var(--dd-card-border-color, var(--dd-neo-card-border));box-shadow:var(--dd-card-shadow, 10px 10px 0 var(--dd-neo-card-shadow));color:var(--dd-neo-card-text);transform-origin:center bottom;will-change:transform}.dd-card-neo-slab.dd-card-neo-slab--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-slab.dd-card-neo-slab--dragging{z-index:1}.dd-card-neo-slab__strap-frame,.dd-card-neo-slab__strap-text{position:absolute;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg);white-space:nowrap;pointer-events:none}.dd-card-neo-slab__strap-frame{top:-22px;z-index:0;border:3px solid var(--dd-neo-card-border);background:var(--dd-card-strap-background, var(--dd-neo-card-accent));box-shadow:4px 4px 0 var(--dd-neo-card-shadow);color:transparent;-webkit-user-select:none;user-select:none}.dd-card-neo-slab__strap-text{top:-22px;z-index:2;color:var(--dd-card-strap-color, inherit)}.dd-card-neo-slab__panel{position:relative;z-index:1;padding:var(--dd-card-panel-padding, 28px 22px 22px);background:var(--dd-card-panel-background, linear-gradient(135deg, color-mix(in srgb, var(--dd-neo-card-accent) 28%, transparent) 0 16%, transparent 16% 100%), var(--dd-neo-card-panel));border:var(--dd-card-panel-border, none);box-shadow:var(--dd-card-panel-shadow, none)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-card-marker-background, var(--dd-neo-card-accent))}.dd-card-neo-slab__content{position:relative;display:var(--dd-card-content-display, block);flex-direction:var(--dd-card-content-flex-direction, column);gap:var(--dd-card-content-gap, 0);min-height:var(--dd-card-content-min-height, auto);justify-content:var(--dd-card-content-justify-content, normal);padding-block:var(--dd-card-content-padding-block, 0);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"] }]
|
|
5068
5156
|
}], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "strapLabel", required: true }] }], swipeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeable", required: false }] }], swipeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeThreshold", required: false }] }], swipedLeft: [{ type: i0.Output, args: ["swipedLeft"] }], swipedRight: [{ type: i0.Output, args: ["swipedRight"] }] } });
|
|
5069
5157
|
|
|
5070
5158
|
class DuckDevCardNeobrutalStamp {
|
|
@@ -5374,11 +5462,11 @@ class DuckDevProgressNeobrutalSlab {
|
|
|
5374
5462
|
color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5375
5463
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5376
5464
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5377
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", 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 } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-neo-paper)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-
|
|
5465
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", 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 } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-neo-paper)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-panel);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-panel) 50%,var(--dd-neo-ana-4));overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-neo-paper)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-neo-ana-6);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ana-6) 14%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-neo-ana-1);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ana-3) 32%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-neo-ana-2);--dd-progress-panel: var(--dd-neo-ana-4)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-neo-ink);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ink) 12%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-neo-paper);--dd-progress-panel: var(--dd-neo-ana-4)}\n"] });
|
|
5378
5466
|
}
|
|
5379
5467
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
|
|
5380
5468
|
type: Component,
|
|
5381
|
-
args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-neo-paper)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-
|
|
5469
|
+
args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-slab__header\">\n <div class=\"dd-progress-neo-slab__copy\">\n <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n @if (subtext()) {\n <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n }\n </div>\n <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n </header>\n\n <div class=\"dd-progress-neo-slab__track\">\n <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-neo-paper)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-panel);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-panel) 50%,var(--dd-neo-ana-4));overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-neo-paper)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-neo-ana-6);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ana-6) 14%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-neo-ana-1);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ana-3) 32%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-neo-ana-2);--dd-progress-panel: var(--dd-neo-ana-4)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-neo-ink);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ink) 12%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-neo-paper);--dd-progress-panel: var(--dd-neo-ana-4)}\n"] }]
|
|
5382
5470
|
}], 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 }] }] } });
|
|
5383
5471
|
|
|
5384
5472
|
class DuckDevProgressNeobrutalStamp {
|
|
@@ -6410,6 +6498,12 @@ class TabsBlock {
|
|
|
6410
6498
|
{ id: 'signals', label: 'Signals' },
|
|
6411
6499
|
{ id: 'slots', label: 'Slots' },
|
|
6412
6500
|
];
|
|
6501
|
+
// Neobrutal stretched (equal-width) tabs
|
|
6502
|
+
neoStretchTabs = [
|
|
6503
|
+
{ id: 'plan', label: 'Plan' },
|
|
6504
|
+
{ id: 'build', label: 'Build' },
|
|
6505
|
+
{ id: 'ship', label: 'Ship' },
|
|
6506
|
+
];
|
|
6413
6507
|
neoVerticalTabs = [
|
|
6414
6508
|
{ id: 'pulse', label: 'Pulse' },
|
|
6415
6509
|
{ id: 'stack', label: 'Stack' },
|
|
@@ -6419,6 +6513,7 @@ class TabsBlock {
|
|
|
6419
6513
|
activeDemoTab = signal(this.demoTabs[0], { ...(ngDevMode ? { debugName: "activeDemoTab" } : {}) });
|
|
6420
6514
|
activeHorizontalTab = signal(this.neoHorizontalTabs[0], { ...(ngDevMode ? { debugName: "activeHorizontalTab" } : {}) });
|
|
6421
6515
|
activeBareTab = signal(this.neoBareHorizontalTabs[0], { ...(ngDevMode ? { debugName: "activeBareTab" } : {}) });
|
|
6516
|
+
activeStretchTab = signal(this.neoStretchTabs[0], { ...(ngDevMode ? { debugName: "activeStretchTab" } : {}) });
|
|
6422
6517
|
activeVerticalTab = signal(this.neoVerticalTabs[0], { ...(ngDevMode ? { debugName: "activeVerticalTab" } : {}) });
|
|
6423
6518
|
onStyleTabChange(tab) {
|
|
6424
6519
|
this.activeStyleTab.set(tab);
|
|
@@ -6432,11 +6527,14 @@ class TabsBlock {
|
|
|
6432
6527
|
onBareTabChange(tab) {
|
|
6433
6528
|
this.activeBareTab.set(tab);
|
|
6434
6529
|
}
|
|
6530
|
+
onStretchTabChange(tab) {
|
|
6531
|
+
this.activeStretchTab.set(tab);
|
|
6532
|
+
}
|
|
6435
6533
|
onVerticalTabChange(tab) {
|
|
6436
6534
|
this.activeVerticalTab.set(tab);
|
|
6437
6535
|
}
|
|
6438
6536
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6439
|
-
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]=\"'B'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.bareTitle' | transloco }}</h2>\n </div>\n\n <p class=\"tab-section__desc\">{{ 'tabsComponent.neobrutal.bareDescription' | transloco }}</p>\n\n <div class=\"example-shell\">\n <duck-dev-tab-neobrutal\n [tabs]=\"neoBareHorizontalTabs\"\n [showContentWrapper]=\"false\"\n (tabChange)=\"onBareTabChange($event)\"\n >\n <ng-template ddTabPanel>\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.bareKickerSignals' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.bareCardSignalsTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.bareCardSignalsText' | 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.bareKickerSlots' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.bareCardSlotsTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.bareCardSlotsText' | 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: [".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", "showContentWrapper"], 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" }] });
|
|
6537
|
+
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]=\"'B'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.bareTitle' | transloco }}</h2>\n </div>\n\n <p class=\"tab-section__desc\">\n {{ 'tabsComponent.neobrutal.bareDescription' | transloco }}\n </p>\n\n <div class=\"example-shell\">\n <duck-dev-tab-neobrutal\n [tabs]=\"neoBareHorizontalTabs\"\n [showContentWrapper]=\"false\"\n (tabChange)=\"onBareTabChange($event)\"\n >\n <ng-template ddTabPanel>\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.bareKickerSignals' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.bareCardSignalsTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.bareCardSignalsText' | 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.bareKickerSlots' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.bareCardSlotsTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.bareCardSlotsText' | 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]=\"'S'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.stretchTitle' | transloco }}</h2>\n </div>\n\n <p class=\"tab-section__desc\">\n {{ 'tabsComponent.neobrutal.stretchDescription' | transloco }}\n </p>\n\n <div class=\"example-shell\">\n <duck-dev-tab-neobrutal\n [tabs]=\"neoStretchTabs\"\n [stretchTabs]=\"true\"\n [color]=\"colorViolet\"\n (tabChange)=\"onStretchTabChange($event)\"\n >\n <ng-template ddTabPanel>\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.stretchKickerPlan' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.stretchCardPlanTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.stretchCardPlanText' | 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.stretchKickerBuild' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.stretchCardBuildTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.stretchCardBuildText' | 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.stretchKickerShip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.stretchCardShipTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.stretchCardShipText' | transloco }}</p>\n </article>\n </ng-template>\n </duck-dev-tab-neobrutal>\n </div>\n\n <h3 class=\"sub-title\">{{ 'tabsComponent.neobrutal.customizeTitle' | transloco }}</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>stretchTabs</strong>\n <dd-badge\n [text]=\"'boolean'\"\n [color]=\"colorGray\"\n [variant]=\"'outline'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'tabsComponent.neobrutal.inputStretchTabs' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>showContentWrapper</strong>\n <dd-badge\n [text]=\"'boolean'\"\n [color]=\"colorGray\"\n [variant]=\"'outline'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'tabsComponent.neobrutal.inputShowContentWrapper' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>--dd-tab-neo-viewport-*</strong>\n <dd-badge [text]=\"'css'\" [color]=\"colorOrange\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.neobrutal.cssViewport' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>--dd-tab-neo-panel-padding</strong>\n <dd-badge [text]=\"'css'\" [color]=\"colorOrange\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.neobrutal.cssPanelPadding' | transloco }}</span>\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\">{{\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: [".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", "showContentWrapper", "stretchTabs"], 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" }] });
|
|
6440
6538
|
}
|
|
6441
6539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, decorators: [{
|
|
6442
6540
|
type: Component,
|
|
@@ -6450,7 +6548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6450
6548
|
Badge,
|
|
6451
6549
|
DuckDevAccordionComponent,
|
|
6452
6550
|
DuckDevSpeakerBubbleSoft,
|
|
6453
|
-
], 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]=\"'B'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.bareTitle' | transloco }}</h2>\n </div>\n\n <p class=\"tab-section__desc\">{{ 'tabsComponent.neobrutal.bareDescription' | transloco }}</p>\n\n <div class=\"example-shell\">\n <duck-dev-tab-neobrutal\n [tabs]=\"neoBareHorizontalTabs\"\n [showContentWrapper]=\"false\"\n (tabChange)=\"onBareTabChange($event)\"\n >\n <ng-template ddTabPanel>\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.bareKickerSignals' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.bareCardSignalsTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.bareCardSignalsText' | 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.bareKickerSlots' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.bareCardSlotsTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.bareCardSlotsText' | 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: [".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"] }]
|
|
6551
|
+
], 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]=\"'B'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.bareTitle' | transloco }}</h2>\n </div>\n\n <p class=\"tab-section__desc\">\n {{ 'tabsComponent.neobrutal.bareDescription' | transloco }}\n </p>\n\n <div class=\"example-shell\">\n <duck-dev-tab-neobrutal\n [tabs]=\"neoBareHorizontalTabs\"\n [showContentWrapper]=\"false\"\n (tabChange)=\"onBareTabChange($event)\"\n >\n <ng-template ddTabPanel>\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.bareKickerSignals' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.bareCardSignalsTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.bareCardSignalsText' | 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.bareKickerSlots' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.bareCardSlotsTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.bareCardSlotsText' | 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]=\"'S'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.stretchTitle' | transloco }}</h2>\n </div>\n\n <p class=\"tab-section__desc\">\n {{ 'tabsComponent.neobrutal.stretchDescription' | transloco }}\n </p>\n\n <div class=\"example-shell\">\n <duck-dev-tab-neobrutal\n [tabs]=\"neoStretchTabs\"\n [stretchTabs]=\"true\"\n [color]=\"colorViolet\"\n (tabChange)=\"onStretchTabChange($event)\"\n >\n <ng-template ddTabPanel>\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.stretchKickerPlan' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.stretchCardPlanTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.stretchCardPlanText' | 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.stretchKickerBuild' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.stretchCardBuildTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.stretchCardBuildText' | 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.stretchKickerShip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.stretchCardShipTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.stretchCardShipText' | transloco }}</p>\n </article>\n </ng-template>\n </duck-dev-tab-neobrutal>\n </div>\n\n <h3 class=\"sub-title\">{{ 'tabsComponent.neobrutal.customizeTitle' | transloco }}</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>stretchTabs</strong>\n <dd-badge\n [text]=\"'boolean'\"\n [color]=\"colorGray\"\n [variant]=\"'outline'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'tabsComponent.neobrutal.inputStretchTabs' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>showContentWrapper</strong>\n <dd-badge\n [text]=\"'boolean'\"\n [color]=\"colorGray\"\n [variant]=\"'outline'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'tabsComponent.neobrutal.inputShowContentWrapper' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>--dd-tab-neo-viewport-*</strong>\n <dd-badge [text]=\"'css'\" [color]=\"colorOrange\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.neobrutal.cssViewport' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>--dd-tab-neo-panel-padding</strong>\n <dd-badge [text]=\"'css'\" [color]=\"colorOrange\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.neobrutal.cssPanelPadding' | transloco }}</span>\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\">{{\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: [".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"] }]
|
|
6454
6552
|
}] });
|
|
6455
6553
|
|
|
6456
6554
|
class DuckDevSvgBlock {
|
|
@@ -6538,11 +6636,11 @@ class DuckDevSvgBlock {
|
|
|
6538
6636
|
this.page.set(p + 1);
|
|
6539
6637
|
}
|
|
6540
6638
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSvgBlock, deps: [{ token: i1.DomSanitizer }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
6541
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSvgBlock, isStandalone: true, selector: "app-duck-dev-svg-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n <div class=\"icons-toolbar\">\n <duck-dev-input\n [form]=\"searchForm\"\n controlName=\"search\"\n [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n type=\"text\"\n />\n <div class=\"icons-stats\">\n Page {{ page() }} / {{ totalPages() }} \u2022 Showing\n {{ paginatedIcons().length === 0 ? 0 : (page() - 1) * pageSize + 1 }}\u2013\n {{ (page() - 1) * pageSize + paginatedIcons().length }}\n of {{ filteredIcons().length }}\n </div>\n </div>\n\n @if (filteredIcons().length === 0) {\n <p>No icons found.</p>\n } @else {\n <div class=\"icons-showcase\">\n @for (icon of paginatedIcons(); track icon.id) {\n <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code\n class=\"icon-tag\"\n [title]=\"\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n \"\n ><{{ icon.id }}></code\n >\n <div class=\"copy-hint\">\n {{\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n }}\n </div>\n </div>\n }\n </div>\n\n <div class=\"pagination-controls\">\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n (click)=\"prevPage()\"\n [direction]=\"'previous'\"\n ></duck-dev-button-flip>\n <span>Page {{ page() }} of {{ totalPages() }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n </div>\n }\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"], dependencies: [{ kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6639
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSvgBlock, isStandalone: true, selector: "app-duck-dev-svg-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n <div class=\"icons-toolbar\">\n <duck-dev-input\n [form]=\"searchForm\"\n controlName=\"search\"\n [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n type=\"text\"\n />\n <div class=\"icons-stats\">\n Page {{ page() }} / {{ totalPages() }} \u2022 Showing\n {{ paginatedIcons().length === 0 ? 0 : (page() - 1) * pageSize + 1 }}\u2013\n {{ (page() - 1) * pageSize + paginatedIcons().length }}\n of {{ filteredIcons().length }}\n </div>\n </div>\n\n @if (filteredIcons().length === 0) {\n <p>No icons found.</p>\n } @else {\n <div class=\"icons-showcase\">\n @for (icon of paginatedIcons(); track icon.id) {\n <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code\n class=\"icon-tag\"\n [title]=\"\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n \"\n ><{{ icon.id }}></code\n >\n <div class=\"copy-hint\">\n {{\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n }}\n </div>\n </div>\n }\n </div>\n\n <div class=\"pagination-controls\">\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n (click)=\"prevPage()\"\n [direction]=\"'previous'\"\n ></duck-dev-button-flip>\n <span>Page {{ page() }} of {{ totalPages() }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n </div>\n }\n </div>\n\n <div class=\"sizing-block\">\n <h3>{{ 'svgComponent.handlesTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'svgComponent.handlesText' | transloco }}</p>\n <div class=\"sizing-row\">\n <div class=\"sizing-item\">\n <duck-dev-icon [name]=\"icons[0].id\" [size]=\"20\" />\n <span>[size]=\"20\"</span>\n </div>\n <div class=\"sizing-item\">\n <duck-dev-icon [name]=\"icons[0].id\" [size]=\"32\" />\n <span>[size]=\"32\"</span>\n </div>\n <div class=\"sizing-item\">\n <duck-dev-icon [name]=\"icons[0].id\" [size]=\"48\" />\n <span>[size]=\"48\"</span>\n </div>\n <div class=\"sizing-item\">\n <duck-dev-icon\n [name]=\"icons[0].id\"\n [size]=\"48\"\n [color]=\"'var(--dd-base-accent-orange)'\"\n />\n <span>[color]</span>\n </div>\n </div>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}.sizing-block{margin-top:28px}.sizing-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;margin-top:12px}.sizing-item{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;color:var(--dd-base-500)}\n"], dependencies: [{ kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name", "size", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6542
6640
|
}
|
|
6543
6641
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSvgBlock, decorators: [{
|
|
6544
6642
|
type: Component,
|
|
6545
|
-
args: [{ selector: 'app-duck-dev-svg-block', imports: [TranslocoPipe, DuckDevInput, ButtonFlip, DuckDevCardSection], template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n <div class=\"icons-toolbar\">\n <duck-dev-input\n [form]=\"searchForm\"\n controlName=\"search\"\n [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n type=\"text\"\n />\n <div class=\"icons-stats\">\n Page {{ page() }} / {{ totalPages() }} \u2022 Showing\n {{ paginatedIcons().length === 0 ? 0 : (page() - 1) * pageSize + 1 }}\u2013\n {{ (page() - 1) * pageSize + paginatedIcons().length }}\n of {{ filteredIcons().length }}\n </div>\n </div>\n\n @if (filteredIcons().length === 0) {\n <p>No icons found.</p>\n } @else {\n <div class=\"icons-showcase\">\n @for (icon of paginatedIcons(); track icon.id) {\n <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code\n class=\"icon-tag\"\n [title]=\"\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n \"\n ><{{ icon.id }}></code\n >\n <div class=\"copy-hint\">\n {{\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n }}\n </div>\n </div>\n }\n </div>\n\n <div class=\"pagination-controls\">\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n (click)=\"prevPage()\"\n [direction]=\"'previous'\"\n ></duck-dev-button-flip>\n <span>Page {{ page() }} of {{ totalPages() }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n </div>\n }\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"] }]
|
|
6643
|
+
args: [{ selector: 'app-duck-dev-svg-block', imports: [TranslocoPipe, DuckDevInput, ButtonFlip, DuckDevCardSection, DuckDevIcon], template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n <div class=\"icons-toolbar\">\n <duck-dev-input\n [form]=\"searchForm\"\n controlName=\"search\"\n [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n type=\"text\"\n />\n <div class=\"icons-stats\">\n Page {{ page() }} / {{ totalPages() }} \u2022 Showing\n {{ paginatedIcons().length === 0 ? 0 : (page() - 1) * pageSize + 1 }}\u2013\n {{ (page() - 1) * pageSize + paginatedIcons().length }}\n of {{ filteredIcons().length }}\n </div>\n </div>\n\n @if (filteredIcons().length === 0) {\n <p>No icons found.</p>\n } @else {\n <div class=\"icons-showcase\">\n @for (icon of paginatedIcons(); track icon.id) {\n <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code\n class=\"icon-tag\"\n [title]=\"\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n \"\n ><{{ icon.id }}></code\n >\n <div class=\"copy-hint\">\n {{\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n }}\n </div>\n </div>\n }\n </div>\n\n <div class=\"pagination-controls\">\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n (click)=\"prevPage()\"\n [direction]=\"'previous'\"\n ></duck-dev-button-flip>\n <span>Page {{ page() }} of {{ totalPages() }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n </div>\n }\n </div>\n\n <div class=\"sizing-block\">\n <h3>{{ 'svgComponent.handlesTitle' | transloco }}</h3>\n <p class=\"description\">{{ 'svgComponent.handlesText' | transloco }}</p>\n <div class=\"sizing-row\">\n <div class=\"sizing-item\">\n <duck-dev-icon [name]=\"icons[0].id\" [size]=\"20\" />\n <span>[size]=\"20\"</span>\n </div>\n <div class=\"sizing-item\">\n <duck-dev-icon [name]=\"icons[0].id\" [size]=\"32\" />\n <span>[size]=\"32\"</span>\n </div>\n <div class=\"sizing-item\">\n <duck-dev-icon [name]=\"icons[0].id\" [size]=\"48\" />\n <span>[size]=\"48\"</span>\n </div>\n <div class=\"sizing-item\">\n <duck-dev-icon\n [name]=\"icons[0].id\"\n [size]=\"48\"\n [color]=\"'var(--dd-base-accent-orange)'\"\n />\n <span>[color]</span>\n </div>\n </div>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}.sizing-block{margin-top:28px}.sizing-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;margin-top:12px}.sizing-item{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;color:var(--dd-base-500)}\n"] }]
|
|
6546
6644
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i1$1.FormBuilder }] });
|
|
6547
6645
|
|
|
6548
6646
|
class InputBlock {
|
|
@@ -6572,6 +6670,10 @@ class InputBlock {
|
|
|
6572
6670
|
textareaExampleForm = this.fb.group({
|
|
6573
6671
|
bio: [''],
|
|
6574
6672
|
});
|
|
6673
|
+
passwordExampleForm = this.fb.group({
|
|
6674
|
+
password: ['', [Validators.required, Validators.minLength(6)]],
|
|
6675
|
+
});
|
|
6676
|
+
showPassword = signal(false, { ...(ngDevMode ? { debugName: "showPassword" } : {}) });
|
|
6575
6677
|
demoForm = this.fb.group({
|
|
6576
6678
|
fullName: ['', [Validators.required, Validators.minLength(3)]],
|
|
6577
6679
|
email: ['', [Validators.required, Validators.email]],
|
|
@@ -6656,6 +6758,9 @@ getError(controlName: string): string {
|
|
|
6656
6758
|
onStyleTabChange(tab) {
|
|
6657
6759
|
this.activeStyleTab.set(tab);
|
|
6658
6760
|
}
|
|
6761
|
+
togglePassword() {
|
|
6762
|
+
this.showPassword.update((value) => !value);
|
|
6763
|
+
}
|
|
6659
6764
|
getError(controlName, form = this.demoForm) {
|
|
6660
6765
|
const control = form.get(controlName);
|
|
6661
6766
|
if (!control || !control.touched || !control.invalid) {
|
|
@@ -6676,7 +6781,7 @@ getError(controlName: string): string {
|
|
|
6676
6781
|
return this.t.translate('inputComponent.demo.errors.invalid');
|
|
6677
6782
|
}
|
|
6678
6783
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6679
|
-
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: [".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" }] });
|
|
6784
|
+
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\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Suffix slot</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"passwordExampleForm\"\n controlName=\"password\"\n [label]=\"'inputComponent.neobrutal.passwordLabel' | transloco\"\n [type]=\"showPassword() ? 'text' : 'password'\"\n [placeholder]=\"'inputComponent.neobrutal.passwordPlaceholder' | transloco\"\n [errorMessage]=\"getError('password', passwordExampleForm)\"\n >\n <button\n ddInputSuffix\n type=\"button\"\n class=\"pwd-toggle\"\n (click)=\"togglePassword()\"\n [attr.aria-label]=\"'inputComponent.neobrutal.passwordToggle' | transloco\"\n >\n {{ showPassword() ? '\uD83D\uDE48' : '\uD83D\uDC41\uFE0F' }}\n </button>\n </duck-dev-input-neobrutal-slab>\n <p class=\"checkbox-note\">{{ 'inputComponent.neobrutal.suffixCaption' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"neo-customize\">\n <h3>{{ 'inputComponent.neobrutal.customizeTitle' | transloco }}</h3>\n <ul class=\"api-list\">\n <li>\n <strong>[ddInputSuffix]</strong> -\n {{ 'inputComponent.neobrutal.suffixSlot' | transloco }}\n </li>\n <li>\n <strong>--dd-input-neo-shadow / -shadow-focus</strong> -\n {{ 'inputComponent.neobrutal.cssShadow' | transloco }}\n </li>\n <li>\n <strong>--dd-input-neo-error-*</strong> -\n {{ 'inputComponent.neobrutal.cssError' | transloco }}\n </li>\n <li>\n <strong>--dd-input-neo-textarea-*</strong> -\n {{ 'inputComponent.neobrutal.cssTextarea' | transloco }}\n </li>\n <li>\n <strong>--dd-input-neo-padding-inline-end</strong> -\n {{ 'inputComponent.neobrutal.cssPaddingInlineEnd' | transloco }}\n </li>\n </ul>\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: [".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)}.pwd-toggle{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;font-size:18px;line-height:1;cursor:pointer}.neo-customize{margin-top:28px}.neo-customize h3{margin-bottom:12px}.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" }] });
|
|
6680
6785
|
}
|
|
6681
6786
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, decorators: [{
|
|
6682
6787
|
type: Component,
|
|
@@ -6692,7 +6797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6692
6797
|
ReactiveFormsModule,
|
|
6693
6798
|
JsonPipe,
|
|
6694
6799
|
DuckDevTab,
|
|
6695
|
-
], 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: [".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"] }]
|
|
6800
|
+
], 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\n <div class=\"showcase-item showcase-item--neobrutal\">\n <p class=\"showcase-label\">Slab / Suffix slot</p>\n <duck-dev-input-neobrutal-slab\n [form]=\"passwordExampleForm\"\n controlName=\"password\"\n [label]=\"'inputComponent.neobrutal.passwordLabel' | transloco\"\n [type]=\"showPassword() ? 'text' : 'password'\"\n [placeholder]=\"'inputComponent.neobrutal.passwordPlaceholder' | transloco\"\n [errorMessage]=\"getError('password', passwordExampleForm)\"\n >\n <button\n ddInputSuffix\n type=\"button\"\n class=\"pwd-toggle\"\n (click)=\"togglePassword()\"\n [attr.aria-label]=\"'inputComponent.neobrutal.passwordToggle' | transloco\"\n >\n {{ showPassword() ? '\uD83D\uDE48' : '\uD83D\uDC41\uFE0F' }}\n </button>\n </duck-dev-input-neobrutal-slab>\n <p class=\"checkbox-note\">{{ 'inputComponent.neobrutal.suffixCaption' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"neo-customize\">\n <h3>{{ 'inputComponent.neobrutal.customizeTitle' | transloco }}</h3>\n <ul class=\"api-list\">\n <li>\n <strong>[ddInputSuffix]</strong> -\n {{ 'inputComponent.neobrutal.suffixSlot' | transloco }}\n </li>\n <li>\n <strong>--dd-input-neo-shadow / -shadow-focus</strong> -\n {{ 'inputComponent.neobrutal.cssShadow' | transloco }}\n </li>\n <li>\n <strong>--dd-input-neo-error-*</strong> -\n {{ 'inputComponent.neobrutal.cssError' | transloco }}\n </li>\n <li>\n <strong>--dd-input-neo-textarea-*</strong> -\n {{ 'inputComponent.neobrutal.cssTextarea' | transloco }}\n </li>\n <li>\n <strong>--dd-input-neo-padding-inline-end</strong> -\n {{ 'inputComponent.neobrutal.cssPaddingInlineEnd' | transloco }}\n </li>\n </ul>\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: [".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)}.pwd-toggle{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:none;background:transparent;font-size:18px;line-height:1;cursor:pointer}.neo-customize{margin-top:28px}.neo-customize h3{margin-bottom:12px}.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"] }]
|
|
6696
6801
|
}] });
|
|
6697
6802
|
|
|
6698
6803
|
class NotificationBlock {
|
|
@@ -6760,7 +6865,7 @@ class NotificationBlock {
|
|
|
6760
6865
|
this.notify.clear();
|
|
6761
6866
|
}
|
|
6762
6867
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6763
|
-
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: [".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" }] });
|
|
6868
|
+
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: [".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", "fullWidth", "truncate", "wrapLabel", "colorButton"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6764
6869
|
}
|
|
6765
6870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationBlock, decorators: [{
|
|
6766
6871
|
type: Component,
|
|
@@ -6811,7 +6916,7 @@ class BadgeBlock {
|
|
|
6811
6916
|
return el;
|
|
6812
6917
|
}
|
|
6813
6918
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6814
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n } @else {\n <h2>{{ 'badgeDoc.neoBadgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.neoUsage' | transloco }}</h3>\n <pre><code><dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.neoSlab' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n\n <h3>{{ 'badgeDoc.neoStamp' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n\n <h3>{{ 'badgeDoc.neoTicket' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-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:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: BadgeNeobrutalSlab, selector: "dd-badge-neobrutal-slab", inputs: ["text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalStamp, selector: "dd-badge-neobrutal-stamp", inputs: ["kicker", "text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalTicket, selector: "dd-badge-neobrutal-ticket", inputs: ["text", "color", "size"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6919
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n } @else {\n <h2>{{ 'badgeDoc.neoBadgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.neoUsage' | transloco }}</h3>\n <pre><code><dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.neoSlab' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n\n <h3>{{ 'badgeDoc.neoStamp' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n\n <h3>{{ 'badgeDoc.neoTicket' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n\n <h3>{{ 'badgeDoc.neoHandlesTitle' | transloco }}</h3>\n <p class=\"handles-desc\">{{ 'badgeDoc.neoHandlesDesc' | transloco }}</p>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal handles-frame\">\n <p class=\"example-label\">{{ 'badgeDoc.handleStretch' | transloco }}</p>\n <div class=\"handles-row\">\n <dd-badge-neobrutal-slab [text]=\"'Active'\" [color]=\"colorViolet\" [stretch]=\"true\" />\n <dd-badge-neobrutal-slab [text]=\"'Paused'\" [color]=\"colorGray\" [stretch]=\"true\" />\n </div>\n </div>\n <div class=\"example-item example-item--neobrutal handles-frame\">\n <p class=\"example-label\">{{ 'badgeDoc.handleTruncate' | transloco }}</p>\n <dd-badge-neobrutal-ticket\n [text]=\"'A very long ticket label that overflows'\"\n [color]=\"colorDark\"\n [stretch]=\"true\"\n [truncate]=\"true\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal handles-frame\">\n <p class=\"example-label\">{{ 'badgeDoc.handleWrap' | transloco }}</p>\n <dd-badge-neobrutal-ticket\n [text]=\"'A very long ticket label that wraps onto lines'\"\n [color]=\"colorOrange\"\n [stretch]=\"true\"\n [wrap]=\"true\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal handles-frame handles-frame--fill\">\n <p class=\"example-label\">{{ 'badgeDoc.handleFlush' | transloco }}</p>\n <dd-badge-neobrutal-slab\n [text]=\"'Fills the box'\"\n [color]=\"colorWhite\"\n [flush]=\"true\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-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:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}.handles-desc{margin:0 0 12px;color:var(--dd-base-400);font-size:14px;line-height:1.5}.handles-frame{align-items:stretch;max-width:280px}.handles-frame .example-label{text-align:center}.handles-frame--fill{min-height:120px}.handles-frame--fill dd-badge-neobrutal-slab{flex:1}.handles-row{display:flex;gap:8px;width:100%}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: BadgeNeobrutalSlab, selector: "dd-badge-neobrutal-slab", inputs: ["text", "color", "size", "flush", "stretch", "truncate", "wrap"] }, { kind: "component", type: BadgeNeobrutalStamp, selector: "dd-badge-neobrutal-stamp", inputs: ["kicker", "text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalTicket, selector: "dd-badge-neobrutal-ticket", inputs: ["text", "color", "size", "flush", "stretch", "truncate", "wrap"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6815
6920
|
}
|
|
6816
6921
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, decorators: [{
|
|
6817
6922
|
type: Component,
|
|
@@ -6825,7 +6930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6825
6930
|
DdFlexDirectionDirective,
|
|
6826
6931
|
DuckDevCardSection,
|
|
6827
6932
|
DuckDevTab,
|
|
6828
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n } @else {\n <h2>{{ 'badgeDoc.neoBadgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.neoUsage' | transloco }}</h3>\n <pre><code><dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.neoSlab' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n\n <h3>{{ 'badgeDoc.neoStamp' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-stamp [kicker]=\"stampBadgeKicker\" [text]=\"stampBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n\n <h3>{{ 'badgeDoc.neoTicket' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-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:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
6933
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <dd-card-section>\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n @if (activeStyleTab().id === 'classic') {\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n } @else {\n <h2>{{ 'badgeDoc.neoBadgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.neoUsage' | transloco }}</h3>\n <pre><code><dd-badge-neobrutal-slab\n [text]=\"'Hot drop'\"\n [color]=\"colorOrange\"\n [size]=\"'md'\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.neoSlab' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n\n <h3>{{ 'badgeDoc.neoStamp' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorViolet\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorOrange\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorGray\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorDark\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-stamp\n [kicker]=\"stampBadgeKicker\"\n [text]=\"stampBadgeText\"\n [color]=\"colorWhite\"\n />\n </div>\n </div>\n\n <h3>{{ 'badgeDoc.neoTicket' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Violet</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorViolet\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Orange</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorOrange\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Gray</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorGray\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">Dark</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorDark\" />\n </div>\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">White</p>\n <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorWhite\" />\n </div>\n </div>\n\n <h3>{{ 'badgeDoc.neoHandlesTitle' | transloco }}</h3>\n <p class=\"handles-desc\">{{ 'badgeDoc.neoHandlesDesc' | transloco }}</p>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal handles-frame\">\n <p class=\"example-label\">{{ 'badgeDoc.handleStretch' | transloco }}</p>\n <div class=\"handles-row\">\n <dd-badge-neobrutal-slab [text]=\"'Active'\" [color]=\"colorViolet\" [stretch]=\"true\" />\n <dd-badge-neobrutal-slab [text]=\"'Paused'\" [color]=\"colorGray\" [stretch]=\"true\" />\n </div>\n </div>\n <div class=\"example-item example-item--neobrutal handles-frame\">\n <p class=\"example-label\">{{ 'badgeDoc.handleTruncate' | transloco }}</p>\n <dd-badge-neobrutal-ticket\n [text]=\"'A very long ticket label that overflows'\"\n [color]=\"colorDark\"\n [stretch]=\"true\"\n [truncate]=\"true\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal handles-frame\">\n <p class=\"example-label\">{{ 'badgeDoc.handleWrap' | transloco }}</p>\n <dd-badge-neobrutal-ticket\n [text]=\"'A very long ticket label that wraps onto lines'\"\n [color]=\"colorOrange\"\n [stretch]=\"true\"\n [wrap]=\"true\"\n />\n </div>\n <div class=\"example-item example-item--neobrutal handles-frame handles-frame--fill\">\n <p class=\"example-label\">{{ 'badgeDoc.handleFlush' | transloco }}</p>\n <dd-badge-neobrutal-slab\n [text]=\"'Fills the box'\"\n [color]=\"colorWhite\"\n [flush]=\"true\"\n />\n </div>\n </div>\n </div>\n }\n </duck-dev-tab>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-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:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}.handles-desc{margin:0 0 12px;color:var(--dd-base-400);font-size:14px;line-height:1.5}.handles-frame{align-items:stretch;max-width:280px}.handles-frame .example-label{text-align:center}.handles-frame--fill{min-height:120px}.handles-frame--fill dd-badge-neobrutal-slab{flex:1}.handles-row{display:flex;gap:8px;width:100%}\n"] }]
|
|
6829
6934
|
}], ctorParameters: () => [] });
|
|
6830
6935
|
|
|
6831
6936
|
class DirectiveBlock {
|
|
@@ -6870,7 +6975,7 @@ class AccordionBlock {
|
|
|
6870
6975
|
this.activeStyleTab.set(tab);
|
|
6871
6976
|
}
|
|
6872
6977
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6873
|
-
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: [".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" }] });
|
|
6978
|
+
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 <h3>{{ 'accordionDoc.neobrutal.handlesTitle' | transloco }}</h3>\n <ul class=\"handles-list\">\n <li>\n <strong>[bodyConnector]</strong> \u2014\n {{ 'accordionDoc.neobrutal.handleConnector' | transloco }}\n </li>\n <li>\n <strong>[allowOverflow]</strong> \u2014\n {{ 'accordionDoc.neobrutal.handleOverflow' | transloco }}\n </li>\n <li>\n <strong>--dd-accordion-body-*</strong> \u2014\n {{ 'accordionDoc.neobrutal.handleBodyVars' | transloco }}\n </li>\n </ul>\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: [".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", "bodyConnector", "allowOverflow"] }, { 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" }] });
|
|
6874
6979
|
}
|
|
6875
6980
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, decorators: [{
|
|
6876
6981
|
type: Component,
|
|
@@ -6881,7 +6986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6881
6986
|
DuckDevAccordionNeobrutalTapeComponent,
|
|
6882
6987
|
DuckDevCardSection,
|
|
6883
6988
|
DuckDevTab,
|
|
6884
|
-
], 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: [".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"] }]
|
|
6989
|
+
], 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 <h3>{{ 'accordionDoc.neobrutal.handlesTitle' | transloco }}</h3>\n <ul class=\"handles-list\">\n <li>\n <strong>[bodyConnector]</strong> \u2014\n {{ 'accordionDoc.neobrutal.handleConnector' | transloco }}\n </li>\n <li>\n <strong>[allowOverflow]</strong> \u2014\n {{ 'accordionDoc.neobrutal.handleOverflow' | transloco }}\n </li>\n <li>\n <strong>--dd-accordion-body-*</strong> \u2014\n {{ 'accordionDoc.neobrutal.handleBodyVars' | transloco }}\n </li>\n </ul>\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: [".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"] }]
|
|
6885
6990
|
}] });
|
|
6886
6991
|
|
|
6887
6992
|
class SliderFlip {
|
|
@@ -6941,7 +7046,7 @@ class SliderFlip {
|
|
|
6941
7046
|
this.animateIn = false;
|
|
6942
7047
|
}
|
|
6943
7048
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderFlip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6944
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SliderFlip, isStandalone: true, selector: "dd-slider-flip", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"" } }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"slides\">\n @if (isAnimating && previousIndex !== null) {\n <div class=\"slide blurred\">\n <ng-container [ngTemplateOutlet]=\"items()[previousIndex]\"></ng-container>\n </div>\n }\n <div\n class=\"slide\"\n [class.current]=\"!isAnimating || animateIn\"\n [class.animate-in]=\"animateIn\"\n (transitionend)=\"onTransitionEnd($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"items()[currentIndex]\"></ng-container>\n </div>\n </div>\n\n <!-- Always visible navigation controls placed at the edges -->\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-prev\"\n name=\"duck-dev-chevron-left-medium\"\n (click)=\"goPrev()\"\n />\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-next\"\n name=\"duck-dev-chevron-right-medium\"\n (click)=\"goNext()\"\n />\n</div>\n", styles: [".container{width:min(100%,900px);aspect-ratio:16/9;position:relative;overflow:hidden;margin:0 auto}.slides{position:relative;width:100%;display:grid;min-height:1px;height:100%;justify-items:stretch;align-items:stretch}.slide{position:relative;width:100%;height:100%;grid-area:1/1;opacity:0;transform:translateZ(0) scale(.96) translateY(16px);transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}.slide.current,.slide.animate-in{opacity:1;transform:translateZ(0) scale(1) translateY(0)}.slide.blurred{position:absolute;inset:0;opacity:.45;filter:blur(14px) saturate(1.1);transform:translateZ(0) scale(.94) translateY(24px)}.dd-slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:none;color:var(--dd-base-0);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px var(--dd-base-300);transition:scale .2s cubic-bezier(.22,1,.36,1)}.dd-slider-btn:hover{scale:1.2}.dd-slider-btn:disabled{opacity:.5;cursor:default}.dd-slider-btn-prev{left:8px}.dd-slider-btn-next{right:8px}@media(prefers-reduced-motion:reduce){.slide{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }] });
|
|
7049
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SliderFlip, isStandalone: true, selector: "dd-slider-flip", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"" } }, ngImport: i0, template: "<div class=\"container\">\n <div class=\"slides\">\n @if (isAnimating && previousIndex !== null) {\n <div class=\"slide blurred\">\n <ng-container [ngTemplateOutlet]=\"items()[previousIndex]\"></ng-container>\n </div>\n }\n <div\n class=\"slide\"\n [class.current]=\"!isAnimating || animateIn\"\n [class.animate-in]=\"animateIn\"\n (transitionend)=\"onTransitionEnd($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"items()[currentIndex]\"></ng-container>\n </div>\n </div>\n\n <!-- Always visible navigation controls placed at the edges -->\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-prev\"\n name=\"duck-dev-chevron-left-medium\"\n (click)=\"goPrev()\"\n />\n <duck-dev-icon\n class=\"dd-slider-btn dd-slider-btn-next\"\n name=\"duck-dev-chevron-right-medium\"\n (click)=\"goNext()\"\n />\n</div>\n", styles: [".container{width:min(100%,900px);aspect-ratio:16/9;position:relative;overflow:hidden;margin:0 auto}.slides{position:relative;width:100%;display:grid;min-height:1px;height:100%;justify-items:stretch;align-items:stretch}.slide{position:relative;width:100%;height:100%;grid-area:1/1;opacity:0;transform:translateZ(0) scale(.96) translateY(16px);transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}.slide.current,.slide.animate-in{opacity:1;transform:translateZ(0) scale(1) translateY(0)}.slide.blurred{position:absolute;inset:0;opacity:.45;filter:blur(14px) saturate(1.1);transform:translateZ(0) scale(.94) translateY(24px)}.dd-slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:none;color:var(--dd-base-0);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px var(--dd-base-300);transition:scale .2s cubic-bezier(.22,1,.36,1)}.dd-slider-btn:hover{scale:1.2}.dd-slider-btn:disabled{opacity:.5;cursor:default}.dd-slider-btn-prev{left:8px}.dd-slider-btn-next{right:8px}@media(prefers-reduced-motion:reduce){.slide{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name", "size", "color"] }] });
|
|
6945
7050
|
}
|
|
6946
7051
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderFlip, decorators: [{
|
|
6947
7052
|
type: Component,
|
|
@@ -7145,7 +7250,7 @@ class CardBlock {
|
|
|
7145
7250
|
return el;
|
|
7146
7251
|
}
|
|
7147
7252
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7148
|
-
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" }] });
|
|
7253
|
+
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\n <h3>{{ 'cardDoc.neobrutal.handlesTitle' | transloco }}</h3>\n <ul class=\"handles-list\">\n <li>\n <strong>--dd-card-content-*</strong> \u2014\n {{ 'cardDoc.neobrutal.handleContent' | transloco }}\n </li>\n <li>\n <strong>--dd-card-panel-* / --dd-card-background / -border-color / -shadow</strong> \u2014\n {{ 'cardDoc.neobrutal.handlePanel' | transloco }}\n </li>\n <li>\n <strong>--dd-card-strap-* / --dd-card-marker-background</strong> \u2014\n {{ 'cardDoc.neobrutal.handleDecoration' | transloco }}\n </li>\n </ul>\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" }] });
|
|
7149
7254
|
}
|
|
7150
7255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, decorators: [{
|
|
7151
7256
|
type: Component,
|
|
@@ -7161,7 +7266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
7161
7266
|
DuckDevCardSection,
|
|
7162
7267
|
NeobrutalTicketCardBlock,
|
|
7163
7268
|
DuckDevTab,
|
|
7164
|
-
], 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"] }]
|
|
7269
|
+
], 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\n <h3>{{ 'cardDoc.neobrutal.handlesTitle' | transloco }}</h3>\n <ul class=\"handles-list\">\n <li>\n <strong>--dd-card-content-*</strong> \u2014\n {{ 'cardDoc.neobrutal.handleContent' | transloco }}\n </li>\n <li>\n <strong>--dd-card-panel-* / --dd-card-background / -border-color / -shadow</strong> \u2014\n {{ 'cardDoc.neobrutal.handlePanel' | transloco }}\n </li>\n <li>\n <strong>--dd-card-strap-* / --dd-card-marker-background</strong> \u2014\n {{ 'cardDoc.neobrutal.handleDecoration' | transloco }}\n </li>\n </ul>\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"] }]
|
|
7165
7270
|
}], ctorParameters: () => [] });
|
|
7166
7271
|
|
|
7167
7272
|
class TooltipBlock {
|
|
@@ -7224,7 +7329,7 @@ class QuickStartBlock {
|
|
|
7224
7329
|
});
|
|
7225
7330
|
}
|
|
7226
7331
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QuickStartBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7227
|
-
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\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 8 \u2014 DOWNLOAD DOCS \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]=\"'08'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.download.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <p class=\"section-description\">{{ 'quickStart.download.description' | transloco }}</p>\n\n <div class=\"download-block\">\n <duck-dev-button-neobrutal-slab\n [text]=\"'quickStart.download.button' | transloco\"\n [helperText]=\"'quickStart.download.helper' | transloco\"\n [colorButton]=\"colorViolet\"\n (click)=\"downloadDocs()\"\n />\n </div>\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}.download-block{display:flex;justify-content:center;padding:12px 0 4px}.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" }] });
|
|
7332
|
+
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\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 8 \u2014 DOWNLOAD DOCS \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]=\"'08'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'quickStart.download.title' | transloco }}</h2>\n </div>\n\n <dd-card-section>\n <p class=\"section-description\">{{ 'quickStart.download.description' | transloco }}</p>\n\n <div class=\"download-block\">\n <duck-dev-button-neobrutal-slab\n [text]=\"'quickStart.download.button' | transloco\"\n [helperText]=\"'quickStart.download.helper' | transloco\"\n [colorButton]=\"colorViolet\"\n (click)=\"downloadDocs()\"\n />\n </div>\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}.download-block{display:flex;justify-content:center;padding:12px 0 4px}.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", "fullWidth", "truncate", "wrapLabel", "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" }] });
|
|
7228
7333
|
}
|
|
7229
7334
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QuickStartBlock, decorators: [{
|
|
7230
7335
|
type: Component,
|
|
@@ -7256,7 +7361,7 @@ class ModalBlock {
|
|
|
7256
7361
|
this.isOpen.set(false);
|
|
7257
7362
|
}
|
|
7258
7363
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModalBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7259
|
-
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" }] });
|
|
7364
|
+
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", "size", "color"] }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
|
|
7260
7365
|
}
|
|
7261
7366
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModalBlock, decorators: [{
|
|
7262
7367
|
type: Component,
|
|
@@ -7359,7 +7464,7 @@ class SpeakerBubbleBlock {
|
|
|
7359
7464
|
return el;
|
|
7360
7465
|
}
|
|
7361
7466
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SpeakerBubbleBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7362
|
-
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" }] });
|
|
7467
|
+
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\n <h3>{{ 'speakerBubbleDoc.neobrutal.handlesTitle' | transloco }}</h3>\n <p class=\"handles-desc\">{{ 'speakerBubbleDoc.neobrutal.handlesDesc' | transloco }}</p>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.neobrutal.flatLabel' | transloco }}</p>\n <dd-speaker-bubble-neobrutal-slab\n [color]=\"colorViolet\"\n [flat]=\"true\"\n style=\"\n --dd-speaker-bubble-background: var(--dd-neo-paper);\n --dd-speaker-bubble-border: 4px solid var(--dd-neo-ink);\n --dd-speaker-bubble-shadow: 8px 8px 0 var(--dd-base-accent-orange);\n \"\n >\n <small>Docked</small>\n <p>\n <strong>Flat</strong> panel \u2014 tail, pin and corner are hidden and the surface is\n re-skinned through CSS variables.\n </p>\n </dd-speaker-bubble-neobrutal-slab>\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", "flat", "showPin", "showCorner"] }, { 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" }] });
|
|
7363
7468
|
}
|
|
7364
7469
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SpeakerBubbleBlock, decorators: [{
|
|
7365
7470
|
type: Component,
|
|
@@ -7373,7 +7478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
7373
7478
|
DuckDevSpeakerBubbleNeobrutalSlab,
|
|
7374
7479
|
DuckDevSpeakerBubbleNeobrutalTicket,
|
|
7375
7480
|
DuckDevTab,
|
|
7376
|
-
], 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"] }]
|
|
7481
|
+
], 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\n <h3>{{ 'speakerBubbleDoc.neobrutal.handlesTitle' | transloco }}</h3>\n <p class=\"handles-desc\">{{ 'speakerBubbleDoc.neobrutal.handlesDesc' | transloco }}</p>\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'speakerBubbleDoc.neobrutal.flatLabel' | transloco }}</p>\n <dd-speaker-bubble-neobrutal-slab\n [color]=\"colorViolet\"\n [flat]=\"true\"\n style=\"\n --dd-speaker-bubble-background: var(--dd-neo-paper);\n --dd-speaker-bubble-border: 4px solid var(--dd-neo-ink);\n --dd-speaker-bubble-shadow: 8px 8px 0 var(--dd-base-accent-orange);\n \"\n >\n <small>Docked</small>\n <p>\n <strong>Flat</strong> panel \u2014 tail, pin and corner are hidden and the surface is\n re-skinned through CSS variables.\n </p>\n </dd-speaker-bubble-neobrutal-slab>\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"] }]
|
|
7377
7482
|
}], ctorParameters: () => [] });
|
|
7378
7483
|
|
|
7379
7484
|
class BreadcrumbBlock {
|
|
@@ -7509,8 +7614,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
7509
7614
|
}] });
|
|
7510
7615
|
|
|
7511
7616
|
const DuckDevLibTranslations = {
|
|
7512
|
-
en: import('./duck-dev-lib-documentation-en-
|
|
7513
|
-
ru: import('./duck-dev-lib-documentation-ru-
|
|
7617
|
+
en: import('./duck-dev-lib-documentation-en-CAkNMIl-.mjs'),
|
|
7618
|
+
ru: import('./duck-dev-lib-documentation-ru-D_Za91c6.mjs'),
|
|
7514
7619
|
};
|
|
7515
7620
|
|
|
7516
7621
|
/*
|