duck-dev-lib 0.1.2 → 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
|
@@ -679,85 +679,131 @@ class ButtonNeobrutalBurst {
|
|
|
679
679
|
text = input('Launch', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
680
680
|
subtext = input('HOT DROP', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
|
|
681
681
|
isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
|
|
682
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}) });
|
|
683
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
684
|
+
wrapLabel = input(false, { ...(ngDevMode ? { debugName: "wrapLabel" } : {}) });
|
|
685
|
+
pillPosition = input('top-right', { ...(ngDevMode ? { debugName: "pillPosition" } : {}) });
|
|
686
|
+
pillWrap = input(false, { ...(ngDevMode ? { debugName: "pillWrap" } : {}) });
|
|
682
687
|
colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
683
688
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
684
689
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBurst, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
685
|
-
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
|
|
690
|
+
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"] }] });
|
|
686
691
|
}
|
|
687
692
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBurst, decorators: [{
|
|
688
693
|
type: Component,
|
|
689
|
-
args: [{ selector: 'duck-dev-button-neobrutal-burst', standalone: true, imports: [NgStyle],
|
|
690
|
-
|
|
694
|
+
args: [{ selector: 'duck-dev-button-neobrutal-burst', standalone: true, imports: [NgStyle], host: {
|
|
695
|
+
'[class.dd-button--full-width]': 'fullWidth()',
|
|
696
|
+
'[class.dd-button--truncate]': 'truncate()',
|
|
697
|
+
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
698
|
+
'[class.dd-button--pill-center]': "pillPosition() === 'top-center'",
|
|
699
|
+
'[class.dd-button--pill-wrap]': 'pillWrap()',
|
|
700
|
+
}, 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"] }]
|
|
701
|
+
}], 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 }] }] } });
|
|
691
702
|
|
|
692
703
|
class ButtonNeobrutalSlab {
|
|
693
704
|
text = input('Drop Zone', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
694
705
|
helperText = input('ready to ship', { ...(ngDevMode ? { debugName: "helperText" } : {}) });
|
|
695
706
|
isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
|
|
707
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}) });
|
|
708
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
709
|
+
wrapLabel = input(false, { ...(ngDevMode ? { debugName: "wrapLabel" } : {}) });
|
|
696
710
|
colorButton = input(AccentEnumColor.Gray, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
697
711
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
698
712
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
699
|
-
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"] }] });
|
|
713
|
+
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"] }] });
|
|
700
714
|
}
|
|
701
715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSlab, decorators: [{
|
|
702
716
|
type: Component,
|
|
703
|
-
args: [{ selector: 'duck-dev-button-neobrutal-slab', standalone: true, imports: [NgStyle],
|
|
704
|
-
|
|
717
|
+
args: [{ selector: 'duck-dev-button-neobrutal-slab', standalone: true, imports: [NgStyle], host: {
|
|
718
|
+
'[class.dd-button--full-width]': 'fullWidth()',
|
|
719
|
+
'[class.dd-button--truncate]': 'truncate()',
|
|
720
|
+
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
721
|
+
}, 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"] }]
|
|
722
|
+
}], 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 }] }] } });
|
|
705
723
|
|
|
706
724
|
class ButtonNeobrutalTag {
|
|
707
725
|
text = input('Buy now', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
708
726
|
tag = input('01', { ...(ngDevMode ? { debugName: "tag" } : {}) });
|
|
709
727
|
isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
|
|
728
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}) });
|
|
729
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
730
|
+
wrapLabel = input(false, { ...(ngDevMode ? { debugName: "wrapLabel" } : {}) });
|
|
710
731
|
colorButton = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
711
732
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
712
733
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
713
|
-
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"] }] });
|
|
734
|
+
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"] }] });
|
|
714
735
|
}
|
|
715
736
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTag, decorators: [{
|
|
716
737
|
type: Component,
|
|
717
|
-
args: [{ selector: 'duck-dev-button-neobrutal-tag', standalone: true, imports: [NgStyle],
|
|
718
|
-
|
|
738
|
+
args: [{ selector: 'duck-dev-button-neobrutal-tag', standalone: true, imports: [NgStyle], host: {
|
|
739
|
+
'[class.dd-button--full-width]': 'fullWidth()',
|
|
740
|
+
'[class.dd-button--truncate]': 'truncate()',
|
|
741
|
+
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
742
|
+
}, 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"] }]
|
|
743
|
+
}], 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 }] }] } });
|
|
719
744
|
|
|
720
745
|
class ButtonNeobrutalSticker {
|
|
721
746
|
text = input('Peel me', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
722
747
|
subtext = input('new', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
|
|
723
748
|
isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
|
|
749
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}) });
|
|
750
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
751
|
+
wrapLabel = input(false, { ...(ngDevMode ? { debugName: "wrapLabel" } : {}) });
|
|
724
752
|
colorButton = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
725
753
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
726
754
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSticker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
727
|
-
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"] }] });
|
|
755
|
+
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"] }] });
|
|
728
756
|
}
|
|
729
757
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSticker, decorators: [{
|
|
730
758
|
type: Component,
|
|
731
|
-
args: [{ selector: 'duck-dev-button-neobrutal-sticker', standalone: true, imports: [NgStyle],
|
|
732
|
-
|
|
759
|
+
args: [{ selector: 'duck-dev-button-neobrutal-sticker', standalone: true, imports: [NgStyle], host: {
|
|
760
|
+
'[class.dd-button--full-width]': 'fullWidth()',
|
|
761
|
+
'[class.dd-button--truncate]': 'truncate()',
|
|
762
|
+
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
763
|
+
}, 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"] }]
|
|
764
|
+
}], 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 }] }] } });
|
|
733
765
|
|
|
734
766
|
class ButtonNeobrutalZigzag {
|
|
735
767
|
text = input('Tear off', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
736
768
|
label = input('FREE', { ...(ngDevMode ? { debugName: "label" } : {}) });
|
|
737
769
|
isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
|
|
770
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}) });
|
|
771
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
772
|
+
wrapLabel = input(false, { ...(ngDevMode ? { debugName: "wrapLabel" } : {}) });
|
|
738
773
|
colorButton = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
739
774
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
740
775
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalZigzag, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
741
|
-
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"] }] });
|
|
776
|
+
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"] }] });
|
|
742
777
|
}
|
|
743
778
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalZigzag, decorators: [{
|
|
744
779
|
type: Component,
|
|
745
|
-
args: [{ selector: 'duck-dev-button-neobrutal-zigzag', standalone: true, imports: [NgStyle],
|
|
746
|
-
|
|
780
|
+
args: [{ selector: 'duck-dev-button-neobrutal-zigzag', standalone: true, imports: [NgStyle], host: {
|
|
781
|
+
'[class.dd-button--full-width]': 'fullWidth()',
|
|
782
|
+
'[class.dd-button--truncate]': 'truncate()',
|
|
783
|
+
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
784
|
+
}, 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"] }]
|
|
785
|
+
}], 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 }] }] } });
|
|
747
786
|
|
|
748
787
|
class ButtonNeobrutalTape {
|
|
749
788
|
text = input('Stick it', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
750
789
|
icon = input('>>', { ...(ngDevMode ? { debugName: "icon" } : {}) });
|
|
751
790
|
isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
|
|
791
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}) });
|
|
792
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
793
|
+
wrapLabel = input(false, { ...(ngDevMode ? { debugName: "wrapLabel" } : {}) });
|
|
752
794
|
colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
753
795
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
754
796
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTape, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
755
|
-
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"] }] });
|
|
797
|
+
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"] }] });
|
|
756
798
|
}
|
|
757
799
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTape, decorators: [{
|
|
758
800
|
type: Component,
|
|
759
|
-
args: [{ selector: 'duck-dev-button-neobrutal-tape', standalone: true, imports: [NgStyle],
|
|
760
|
-
|
|
801
|
+
args: [{ selector: 'duck-dev-button-neobrutal-tape', standalone: true, imports: [NgStyle], host: {
|
|
802
|
+
'[class.dd-button--full-width]': 'fullWidth()',
|
|
803
|
+
'[class.dd-button--truncate]': 'truncate()',
|
|
804
|
+
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
805
|
+
}, 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"] }]
|
|
806
|
+
}], 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 }] }] } });
|
|
761
807
|
|
|
762
808
|
class LoaderLoadingBubble {
|
|
763
809
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -902,6 +948,7 @@ class DuckDevTabNeobrutal {
|
|
|
902
948
|
tabs = input([], { ...(ngDevMode ? { debugName: "tabs" } : {}) });
|
|
903
949
|
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
904
950
|
showContentWrapper = input(true, { ...(ngDevMode ? { debugName: "showContentWrapper" } : {}) });
|
|
951
|
+
stretchTabs = input(false, { ...(ngDevMode ? { debugName: "stretchTabs" } : {}) });
|
|
905
952
|
tabChange = output();
|
|
906
953
|
panels = contentChildren(DdTabPanel, { ...(ngDevMode ? { debugName: "panels" } : {}) });
|
|
907
954
|
activeIndex = signal(0, { ...(ngDevMode ? { debugName: "activeIndex" } : {}) });
|
|
@@ -943,12 +990,12 @@ class DuckDevTabNeobrutal {
|
|
|
943
990
|
return 'hidden';
|
|
944
991
|
}
|
|
945
992
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
946
|
-
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"] }] });
|
|
993
|
+
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"] }] });
|
|
947
994
|
}
|
|
948
995
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabNeobrutal, decorators: [{
|
|
949
996
|
type: Component,
|
|
950
|
-
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"] }]
|
|
951
|
-
}], 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 }] }] } });
|
|
997
|
+
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"] }]
|
|
998
|
+
}], 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 }] }] } });
|
|
952
999
|
|
|
953
1000
|
class DuckDevInput {
|
|
954
1001
|
form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
|
|
@@ -1009,11 +1056,11 @@ class DuckDevInputNeobrutalSlab {
|
|
|
1009
1056
|
options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
1010
1057
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
1011
1058
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1012
|
-
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
|
|
1059
|
+
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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
1013
1060
|
}
|
|
1014
1061
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, decorators: [{
|
|
1015
1062
|
type: Component,
|
|
1016
|
-
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
|
|
1063
|
+
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"] }]
|
|
1017
1064
|
}], 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 }] }] } });
|
|
1018
1065
|
|
|
1019
1066
|
class DuckDevInputNeobrutalStrip {
|
|
@@ -2543,21 +2590,35 @@ class DuckDevIcon {
|
|
|
2543
2590
|
sanitizer;
|
|
2544
2591
|
static iconMap = new Map(svgIcons.map((i) => [i.id, i.svg]));
|
|
2545
2592
|
name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}) });
|
|
2593
|
+
size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : {}) });
|
|
2594
|
+
color = input('', { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
2546
2595
|
constructor(sanitizer) {
|
|
2547
2596
|
this.sanitizer = sanitizer;
|
|
2548
2597
|
}
|
|
2598
|
+
sizeValue = computed(() => {
|
|
2599
|
+
const s = this.size();
|
|
2600
|
+
if (s === undefined || s === null || s === '') {
|
|
2601
|
+
return null;
|
|
2602
|
+
}
|
|
2603
|
+
return typeof s === 'number' ? `${s}px` : s;
|
|
2604
|
+
}, { ...(ngDevMode ? { debugName: "sizeValue" } : {}) });
|
|
2549
2605
|
svgHtml = computed(() => {
|
|
2550
2606
|
const n = this.name();
|
|
2551
2607
|
const svg = DuckDevIcon.iconMap.get(n) ?? '';
|
|
2552
2608
|
return this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
2553
2609
|
}, { ...(ngDevMode ? { debugName: "svgHtml" } : {}) });
|
|
2554
2610
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevIcon, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
2555
|
-
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"] });
|
|
2611
|
+
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"] });
|
|
2556
2612
|
}
|
|
2557
2613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevIcon, decorators: [{
|
|
2558
2614
|
type: Component,
|
|
2559
|
-
args: [{ selector: 'duck-dev-icon', standalone: true, template: ` <span class="duck-dev-icon" [innerHTML]="svgHtml()"></span> `,
|
|
2560
|
-
|
|
2615
|
+
args: [{ selector: 'duck-dev-icon', standalone: true, template: ` <span class="duck-dev-icon" [innerHTML]="svgHtml()"></span> `, host: {
|
|
2616
|
+
'[class.dd-icon--sized]': 'sizeValue() !== null',
|
|
2617
|
+
'[class.dd-icon--colored]': '!!color()',
|
|
2618
|
+
'[style.--dd-icon-size]': 'sizeValue()',
|
|
2619
|
+
'[style.--dd-icon-color]': 'color() || null',
|
|
2620
|
+
}, 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"] }]
|
|
2621
|
+
}], ctorParameters: () => [{ type: i1$1.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 }] }] } });
|
|
2561
2622
|
|
|
2562
2623
|
class DuckDevNotification {
|
|
2563
2624
|
type = input('success', { ...(ngDevMode ? { debugName: "type" } : {}) });
|
|
@@ -2607,7 +2668,7 @@ class DuckDevNotification {
|
|
|
2607
2668
|
this.timer = undefined;
|
|
2608
2669
|
}
|
|
2609
2670
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2610
|
-
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"] }] });
|
|
2671
|
+
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"] }] });
|
|
2611
2672
|
}
|
|
2612
2673
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, decorators: [{
|
|
2613
2674
|
type: Component,
|
|
@@ -2797,14 +2858,23 @@ class BadgeNeobrutalSlab {
|
|
|
2797
2858
|
text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
2798
2859
|
color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
2799
2860
|
size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
|
|
2861
|
+
flush = input(false, { ...(ngDevMode ? { debugName: "flush" } : {}) });
|
|
2862
|
+
stretch = input(false, { ...(ngDevMode ? { debugName: "stretch" } : {}) });
|
|
2863
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
2864
|
+
wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : {}) });
|
|
2800
2865
|
badgeStyle = computed(() => getNeobrutalBadgeStyle(this.color()), { ...(ngDevMode ? { debugName: "badgeStyle" } : {}) });
|
|
2801
2866
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2802
|
-
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"] });
|
|
2867
|
+
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"] });
|
|
2803
2868
|
}
|
|
2804
2869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalSlab, decorators: [{
|
|
2805
2870
|
type: Component,
|
|
2806
|
-
args: [{ selector: 'dd-badge-neobrutal-slab', standalone: true,
|
|
2807
|
-
|
|
2871
|
+
args: [{ selector: 'dd-badge-neobrutal-slab', standalone: true, host: {
|
|
2872
|
+
'[class.dd-badge--flush]': 'flush()',
|
|
2873
|
+
'[class.dd-badge--stretch]': 'stretch()',
|
|
2874
|
+
'[class.dd-badge--truncate]': 'truncate()',
|
|
2875
|
+
'[class.dd-badge--wrap]': 'wrap()',
|
|
2876
|
+
}, 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"] }]
|
|
2877
|
+
}], 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 }] }] } });
|
|
2808
2878
|
|
|
2809
2879
|
class BadgeNeobrutalStamp {
|
|
2810
2880
|
kicker = input.required({ ...(ngDevMode ? { debugName: "kicker" } : {}) });
|
|
@@ -2824,14 +2894,23 @@ class BadgeNeobrutalTicket {
|
|
|
2824
2894
|
text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
2825
2895
|
color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
2826
2896
|
size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
|
|
2897
|
+
flush = input(false, { ...(ngDevMode ? { debugName: "flush" } : {}) });
|
|
2898
|
+
stretch = input(false, { ...(ngDevMode ? { debugName: "stretch" } : {}) });
|
|
2899
|
+
truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : {}) });
|
|
2900
|
+
wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : {}) });
|
|
2827
2901
|
badgeStyle = computed(() => getNeobrutalBadgeStyle(this.color()), { ...(ngDevMode ? { debugName: "badgeStyle" } : {}) });
|
|
2828
2902
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2829
|
-
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"] });
|
|
2903
|
+
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"] });
|
|
2830
2904
|
}
|
|
2831
2905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalTicket, decorators: [{
|
|
2832
2906
|
type: Component,
|
|
2833
|
-
args: [{ selector: 'dd-badge-neobrutal-ticket', standalone: true,
|
|
2834
|
-
|
|
2907
|
+
args: [{ selector: 'dd-badge-neobrutal-ticket', standalone: true, host: {
|
|
2908
|
+
'[class.dd-badge--flush]': 'flush()',
|
|
2909
|
+
'[class.dd-badge--stretch]': 'stretch()',
|
|
2910
|
+
'[class.dd-badge--truncate]': 'truncate()',
|
|
2911
|
+
'[class.dd-badge--wrap]': 'wrap()',
|
|
2912
|
+
}, 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"] }]
|
|
2913
|
+
}], 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 }] }] } });
|
|
2835
2914
|
|
|
2836
2915
|
class DuckDevAccordionComponent {
|
|
2837
2916
|
content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
|
|
@@ -2842,7 +2921,7 @@ class DuckDevAccordionComponent {
|
|
|
2842
2921
|
this.isOpen.update((prev) => !prev);
|
|
2843
2922
|
}
|
|
2844
2923
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2845
|
-
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 });
|
|
2924
|
+
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 });
|
|
2846
2925
|
}
|
|
2847
2926
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionComponent, decorators: [{
|
|
2848
2927
|
type: Component,
|
|
@@ -2857,7 +2936,7 @@ function getNeobrutalAccordionStyle(color) {
|
|
|
2857
2936
|
'--dd-neo-accordion-panel': 'color-mix(in srgb, var(--dd-neo-ana-3) 7%, var(--dd-neo-paper))',
|
|
2858
2937
|
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-1)',
|
|
2859
2938
|
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
2860
|
-
'--dd-neo-accordion-text': 'var(--dd-
|
|
2939
|
+
'--dd-neo-accordion-text': 'var(--dd-base-600)',
|
|
2861
2940
|
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-6)',
|
|
2862
2941
|
};
|
|
2863
2942
|
case AccentEnumColor.Orange:
|
|
@@ -2866,7 +2945,7 @@ function getNeobrutalAccordionStyle(color) {
|
|
|
2866
2945
|
'--dd-neo-accordion-panel': 'color-mix(in srgb, var(--dd-neo-ana-2) 8%, var(--dd-neo-paper))',
|
|
2867
2946
|
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-1)',
|
|
2868
2947
|
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
2869
|
-
'--dd-neo-accordion-text': 'var(--dd-
|
|
2948
|
+
'--dd-neo-accordion-text': 'var(--dd-base-600)',
|
|
2870
2949
|
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-5)',
|
|
2871
2950
|
};
|
|
2872
2951
|
case AccentEnumColor.Gray:
|
|
@@ -2875,7 +2954,7 @@ function getNeobrutalAccordionStyle(color) {
|
|
|
2875
2954
|
'--dd-neo-accordion-panel': 'var(--dd-neo-paper)',
|
|
2876
2955
|
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-2)',
|
|
2877
2956
|
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
2878
|
-
'--dd-neo-accordion-text': 'var(--dd-
|
|
2957
|
+
'--dd-neo-accordion-text': 'var(--dd-base-600)',
|
|
2879
2958
|
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-6)',
|
|
2880
2959
|
};
|
|
2881
2960
|
case AccentEnumColor.Dark:
|
|
@@ -2894,7 +2973,7 @@ function getNeobrutalAccordionStyle(color) {
|
|
|
2894
2973
|
'--dd-neo-accordion-panel': 'var(--dd-base-100)',
|
|
2895
2974
|
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-6)',
|
|
2896
2975
|
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
2897
|
-
'--dd-neo-accordion-text': 'var(--dd-
|
|
2976
|
+
'--dd-neo-accordion-text': 'var(--dd-base-600)',
|
|
2898
2977
|
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-5)',
|
|
2899
2978
|
};
|
|
2900
2979
|
}
|
|
@@ -2950,6 +3029,8 @@ class DuckDevAccordionNeobrutalComponent {
|
|
|
2950
3029
|
title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
|
|
2951
3030
|
stampLabel = input.required({ ...(ngDevMode ? { debugName: "stampLabel" } : {}) });
|
|
2952
3031
|
color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
3032
|
+
bodyConnector = input(true, { ...(ngDevMode ? { debugName: "bodyConnector" } : {}) });
|
|
3033
|
+
allowOverflow = input(false, { ...(ngDevMode ? { debugName: "allowOverflow" } : {}) });
|
|
2953
3034
|
paletteStyle = computed(() => getNeobrutalAccordionStyle(this.color()), { ...(ngDevMode ? { debugName: "paletteStyle" } : {}) });
|
|
2954
3035
|
isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
|
|
2955
3036
|
stateLabel = computed(() => (this.isOpen() ? 'OPEN' : 'CLOSED'), { ...(ngDevMode ? { debugName: "stateLabel" } : {}) });
|
|
@@ -2965,12 +3046,12 @@ class DuckDevAccordionNeobrutalComponent {
|
|
|
2965
3046
|
this.isOpen.update((prev) => !prev);
|
|
2966
3047
|
}
|
|
2967
3048
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2968
|
-
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
|
|
3049
|
+
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 });
|
|
2969
3050
|
}
|
|
2970
3051
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, decorators: [{
|
|
2971
3052
|
type: Component,
|
|
2972
|
-
args: [{ selector: 'duck-dev-accordion-neobrutal', standalone: true, imports: [NgStyle, NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
2973
|
-
}], 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 }] }] } });
|
|
3053
|
+
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"] }]
|
|
3054
|
+
}], 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 }] }] } });
|
|
2974
3055
|
|
|
2975
3056
|
class DuckDevAccordionNeobrutalTapeComponent {
|
|
2976
3057
|
content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
|
|
@@ -2983,7 +3064,7 @@ class DuckDevAccordionNeobrutalTapeComponent {
|
|
|
2983
3064
|
this.isOpen.update((prev) => !prev);
|
|
2984
3065
|
}
|
|
2985
3066
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2986
|
-
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 });
|
|
3067
|
+
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 });
|
|
2987
3068
|
}
|
|
2988
3069
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, decorators: [{
|
|
2989
3070
|
type: Component,
|
|
@@ -3020,7 +3101,7 @@ class SliderClassic {
|
|
|
3020
3101
|
return this.direction() === 'next' ? 'leave-to-left' : 'leave-to-right';
|
|
3021
3102
|
}
|
|
3022
3103
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3023
|
-
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"] }] });
|
|
3104
|
+
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"] }] });
|
|
3024
3105
|
}
|
|
3025
3106
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderClassic, decorators: [{
|
|
3026
3107
|
type: Component,
|
|
@@ -3463,11 +3544,11 @@ class DuckDevCardNeobrutalSlab {
|
|
|
3463
3544
|
return Math.min(Math.max(value, min), max);
|
|
3464
3545
|
}
|
|
3465
3546
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3466
|
-
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;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-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}.dd-card-neo-slab__panel{position:relative;z-index:1;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3547
|
+
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"] }] });
|
|
3467
3548
|
}
|
|
3468
3549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalSlab, decorators: [{
|
|
3469
3550
|
type: Component,
|
|
3470
|
-
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;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-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}.dd-card-neo-slab__panel{position:relative;z-index:1;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"] }]
|
|
3551
|
+
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"] }]
|
|
3471
3552
|
}], 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"] }] } });
|
|
3472
3553
|
|
|
3473
3554
|
class DuckDevCardNeobrutalStamp {
|
|
@@ -3786,11 +3867,11 @@ class DuckDevProgressNeobrutalSlab {
|
|
|
3786
3867
|
color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
3787
3868
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
3788
3869
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3789
|
-
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-
|
|
3870
|
+
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"] });
|
|
3790
3871
|
}
|
|
3791
3872
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
|
|
3792
3873
|
type: Component,
|
|
3793
|
-
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-
|
|
3874
|
+
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"] }]
|
|
3794
3875
|
}], 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 }] }] } });
|
|
3795
3876
|
|
|
3796
3877
|
class DuckDevProgressNeobrutalStamp {
|
|
@@ -5375,6 +5456,9 @@ class DuckDevSpeakerBubbleNeobrutalSlab {
|
|
|
5375
5456
|
color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5376
5457
|
tail = input('left', { ...(ngDevMode ? { debugName: "tail" } : {}) });
|
|
5377
5458
|
target = input(null, { ...(ngDevMode ? { debugName: "target" } : {}) });
|
|
5459
|
+
flat = input(false, { ...(ngDevMode ? { debugName: "flat" } : {}) });
|
|
5460
|
+
showPin = input(true, { ...(ngDevMode ? { debugName: "showPin" } : {}) });
|
|
5461
|
+
showCorner = input(true, { ...(ngDevMode ? { debugName: "showCorner" } : {}) });
|
|
5378
5462
|
hostRef = inject((ElementRef));
|
|
5379
5463
|
documentRef = inject(DOCUMENT);
|
|
5380
5464
|
destroyRef = inject(DestroyRef);
|
|
@@ -5513,12 +5597,16 @@ class DuckDevSpeakerBubbleNeobrutalSlab {
|
|
|
5513
5597
|
return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
|
|
5514
5598
|
}
|
|
5515
5599
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5516
|
-
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"] }] });
|
|
5600
|
+
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"] }] });
|
|
5517
5601
|
}
|
|
5518
5602
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalSlab, decorators: [{
|
|
5519
5603
|
type: Component,
|
|
5520
|
-
args: [{ selector: 'dd-speaker-bubble-neobrutal-slab', standalone: true, imports: [NgStyle],
|
|
5521
|
-
|
|
5604
|
+
args: [{ selector: 'dd-speaker-bubble-neobrutal-slab', standalone: true, imports: [NgStyle], host: {
|
|
5605
|
+
'[class.dd-speaker-bubble--flat]': 'flat()',
|
|
5606
|
+
'[class.dd-speaker-bubble--no-pin]': '!showPin()',
|
|
5607
|
+
'[class.dd-speaker-bubble--no-corner]': '!showCorner()',
|
|
5608
|
+
}, 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"] }]
|
|
5609
|
+
}], 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 }] }] } });
|
|
5522
5610
|
|
|
5523
5611
|
const DEFAULT_BUBBLE_GEOMETRY = {
|
|
5524
5612
|
side: 'left',
|