duck-dev-lib 0.0.98 → 0.0.99
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-FazwFbO9.mjs → duck-dev-lib-documentation-en-B7HcW-fA.mjs} +7 -2
- package/fesm2022/{duck-dev-lib-documentation-en-FazwFbO9.mjs.map → duck-dev-lib-documentation-en-B7HcW-fA.mjs.map} +1 -1
- package/fesm2022/{duck-dev-lib-documentation-ru-ztj5kIGA.mjs → duck-dev-lib-documentation-ru-HvXNcT1n.mjs} +7 -2
- package/fesm2022/{duck-dev-lib-documentation-ru-ztj5kIGA.mjs.map → duck-dev-lib-documentation-ru-HvXNcT1n.mjs.map} +1 -1
- package/fesm2022/duck-dev-lib-documentation.mjs +22 -22
- package/fesm2022/duck-dev-lib-documentation.mjs.map +1 -1
- package/fesm2022/duck-dev-lib.mjs +18 -18
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/duck-dev-lib.d.ts +9 -9
|
@@ -682,11 +682,11 @@ class ButtonNeobrutalBurst {
|
|
|
682
682
|
colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
683
683
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
684
684
|
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\">{{ text() }}</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:.95rem 1.35rem;border:3px solid var(--dd-neo-ink);border-radius:20px 8px 18px 10px;background:var(--neo-surface);box-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:translate(3px,3px) rotate(-1deg);box-shadow:3px 3px 0 var(--neo-shadow)}}.neo-burst:active{transform:translate(6px,6px);box-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:6px 6px 0 var(--neo-shadow)}.neo-burst:active{transform:translate(6px,6px);box-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:-14px;right:12px;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.72rem;line-height:1;transform:rotate(8deg)}.burst-text{display:inline-block;max-width:100%;text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
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:.95rem 1.35rem;border:3px solid var(--dd-neo-ink);border-radius:20px 8px 18px 10px;background:var(--neo-surface);box-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:translate(3px,3px) rotate(-1deg);box-shadow:3px 3px 0 var(--neo-shadow)}}.neo-burst:active{transform:translate(6px,6px);box-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:6px 6px 0 var(--neo-shadow)}.neo-burst:active{transform:translate(6px,6px);box-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:-14px;right:12px;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.72rem;line-height:1;transform:rotate(8deg)}.burst-text{display:inline-block;max-width:100%;text-align:center}.burst-text__projected,.burst-text__default{display:contents}.burst-text__projected:not(:empty)+.burst-text__default{display:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
686
686
|
}
|
|
687
687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBurst, decorators: [{
|
|
688
688
|
type: Component,
|
|
689
|
-
args: [{ selector: 'duck-dev-button-neobrutal-burst', standalone: true, imports: [NgStyle], template: "<button class=\"neo-burst\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"burst-pill\">{{ subtext() }}</span>\n <span class=\"burst-text\">{{ text() }}</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:.95rem 1.35rem;border:3px solid var(--dd-neo-ink);border-radius:20px 8px 18px 10px;background:var(--neo-surface);box-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:translate(3px,3px) rotate(-1deg);box-shadow:3px 3px 0 var(--neo-shadow)}}.neo-burst:active{transform:translate(6px,6px);box-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:6px 6px 0 var(--neo-shadow)}.neo-burst:active{transform:translate(6px,6px);box-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:-14px;right:12px;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.72rem;line-height:1;transform:rotate(8deg)}.burst-text{display:inline-block;max-width:100%;text-align:center}\n"] }]
|
|
689
|
+
args: [{ selector: 'duck-dev-button-neobrutal-burst', standalone: true, imports: [NgStyle], 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:.95rem 1.35rem;border:3px solid var(--dd-neo-ink);border-radius:20px 8px 18px 10px;background:var(--neo-surface);box-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:translate(3px,3px) rotate(-1deg);box-shadow:3px 3px 0 var(--neo-shadow)}}.neo-burst:active{transform:translate(6px,6px);box-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:6px 6px 0 var(--neo-shadow)}.neo-burst:active{transform:translate(6px,6px);box-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:-14px;right:12px;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.72rem;line-height:1;transform:rotate(8deg)}.burst-text{display:inline-block;max-width:100%;text-align:center}.burst-text__projected,.burst-text__default{display:contents}.burst-text__projected:not(:empty)+.burst-text__default{display:none}\n"] }]
|
|
690
690
|
}], 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 }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
691
691
|
|
|
692
692
|
class ButtonNeobrutalSlab {
|
|
@@ -696,11 +696,11 @@ class ButtonNeobrutalSlab {
|
|
|
696
696
|
colorButton = input(AccentEnumColor.Gray, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
697
697
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
698
698
|
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\">{{ text() }}</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-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"] }] });
|
|
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"] }] });
|
|
700
700
|
}
|
|
701
701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSlab, decorators: [{
|
|
702
702
|
type: Component,
|
|
703
|
-
args: [{ selector: 'duck-dev-button-neobrutal-slab', standalone: true, imports: [NgStyle], 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\">{{ text() }}</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-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"] }]
|
|
703
|
+
args: [{ selector: 'duck-dev-button-neobrutal-slab', standalone: true, imports: [NgStyle], 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"] }]
|
|
704
704
|
}], 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 }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
705
705
|
|
|
706
706
|
class ButtonNeobrutalTag {
|
|
@@ -710,11 +710,11 @@ class ButtonNeobrutalTag {
|
|
|
710
710
|
colorButton = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
711
711
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
712
712
|
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\">{{ text() }}</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}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
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"] }] });
|
|
714
714
|
}
|
|
715
715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTag, decorators: [{
|
|
716
716
|
type: Component,
|
|
717
|
-
args: [{ selector: 'duck-dev-button-neobrutal-tag', standalone: true, imports: [NgStyle], template: "<button class=\"neo-tag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"tag-chip\">{{ tag() }}</span>\n <span class=\"tag-text\">{{ text() }}</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}\n"] }]
|
|
717
|
+
args: [{ selector: 'duck-dev-button-neobrutal-tag', standalone: true, imports: [NgStyle], 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"] }]
|
|
718
718
|
}], 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 }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
719
719
|
|
|
720
720
|
class ButtonNeobrutalSticker {
|
|
@@ -724,11 +724,11 @@ class ButtonNeobrutalSticker {
|
|
|
724
724
|
colorButton = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
725
725
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
726
726
|
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\">{{ text() }}</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-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"] }] });
|
|
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"] }] });
|
|
728
728
|
}
|
|
729
729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSticker, decorators: [{
|
|
730
730
|
type: Component,
|
|
731
|
-
args: [{ selector: 'duck-dev-button-neobrutal-sticker', standalone: true, imports: [NgStyle], template: "<button class=\"neo-sticker\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"sticker-text\">{{ text() }}</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-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"] }]
|
|
731
|
+
args: [{ selector: 'duck-dev-button-neobrutal-sticker', standalone: true, imports: [NgStyle], 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"] }]
|
|
732
732
|
}], 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 }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
733
733
|
|
|
734
734
|
class ButtonNeobrutalZigzag {
|
|
@@ -738,11 +738,11 @@ class ButtonNeobrutalZigzag {
|
|
|
738
738
|
colorButton = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
739
739
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
740
740
|
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\">{{ text() }}</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-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"] }] });
|
|
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"] }] });
|
|
742
742
|
}
|
|
743
743
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalZigzag, decorators: [{
|
|
744
744
|
type: Component,
|
|
745
|
-
args: [{ selector: 'duck-dev-button-neobrutal-zigzag', standalone: true, imports: [NgStyle], 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\">{{ text() }}</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-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"] }]
|
|
745
|
+
args: [{ selector: 'duck-dev-button-neobrutal-zigzag', standalone: true, imports: [NgStyle], 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"] }]
|
|
746
746
|
}], 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 }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
747
747
|
|
|
748
748
|
class ButtonNeobrutalTape {
|
|
@@ -752,11 +752,11 @@ class ButtonNeobrutalTape {
|
|
|
752
752
|
colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
753
753
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
754
754
|
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\">{{ text() }}</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-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"] }] });
|
|
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"] }] });
|
|
756
756
|
}
|
|
757
757
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTape, decorators: [{
|
|
758
758
|
type: Component,
|
|
759
|
-
args: [{ selector: 'duck-dev-button-neobrutal-tape', standalone: true, imports: [NgStyle], 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\">{{ text() }}</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-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"] }]
|
|
759
|
+
args: [{ selector: 'duck-dev-button-neobrutal-tape', standalone: true, imports: [NgStyle], 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"] }]
|
|
760
760
|
}], 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 }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
761
761
|
|
|
762
762
|
class LoaderLoadingBubble {
|
|
@@ -2799,11 +2799,11 @@ class BadgeNeobrutalSlab {
|
|
|
2799
2799
|
size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
|
|
2800
2800
|
badgeStyle = computed(() => getNeobrutalBadgeStyle(this.color()), { ...(ngDevMode ? { debugName: "badgeStyle" } : {}) });
|
|
2801
2801
|
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>{{ text() }}</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}.dd-badge-neo-slab__dot{width:9px;height:9px;background:var(--dd-neo-badge-accent);border:2px solid var(--dd-neo-badge-border)}\n"] });
|
|
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"] });
|
|
2803
2803
|
}
|
|
2804
2804
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalSlab, decorators: [{
|
|
2805
2805
|
type: Component,
|
|
2806
|
-
args: [{ selector: 'dd-badge-neobrutal-slab', standalone: true, 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>{{ text() }}</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}.dd-badge-neo-slab__dot{width:9px;height:9px;background:var(--dd-neo-badge-accent);border:2px solid var(--dd-neo-badge-border)}\n"] }]
|
|
2806
|
+
args: [{ selector: 'dd-badge-neobrutal-slab', standalone: true, 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"] }]
|
|
2807
2807
|
}], 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 }] }] } });
|
|
2808
2808
|
|
|
2809
2809
|
class BadgeNeobrutalStamp {
|
|
@@ -2813,11 +2813,11 @@ class BadgeNeobrutalStamp {
|
|
|
2813
2813
|
size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
|
|
2814
2814
|
badgeStyle = computed(() => getNeobrutalBadgeStyle(this.color()), { ...(ngDevMode ? { debugName: "badgeStyle" } : {}) });
|
|
2815
2815
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2816
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: BadgeNeobrutalStamp, isStandalone: true, selector: "dd-badge-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, 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-stamp\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n <span class=\"dd-badge-neo-stamp__kicker\">{{ kicker() }}</span>\n <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-stamp{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);box-shadow:4px 4px 0 var(--dd-neo-badge-shadow);font-weight:900;line-height:1;white-space:nowrap;transform:rotate(-2deg)}.dd-badge-neo-stamp[data-size=sm]{padding:5px 8px;font-size:11px}.dd-badge-neo-stamp[data-size=md]{padding:7px 10px;font-size:12px}.dd-badge-neo-stamp__kicker{display:inline-flex;align-items:center;padding:4px 6px;border:2px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);color:var(--dd-neo-badge-accent-contrast);letter-spacing:.12em;text-transform:uppercase}\n"] });
|
|
2816
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: BadgeNeobrutalStamp, isStandalone: true, selector: "dd-badge-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, 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-stamp\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n <span class=\"dd-badge-neo-stamp__kicker\">{{ kicker() }}</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-stamp{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);box-shadow:4px 4px 0 var(--dd-neo-badge-shadow);font-weight:900;line-height:1;white-space:nowrap;transform:rotate(-2deg)}.dd-badge-neo-stamp[data-size=sm]{padding:5px 8px;font-size:11px}.dd-badge-neo-stamp[data-size=md]{padding:7px 10px;font-size:12px}.badge-text__projected,.badge-text__default{display:contents}.badge-text__projected:not(:empty)+.badge-text__default{display:none}.dd-badge-neo-stamp__kicker{display:inline-flex;align-items:center;padding:4px 6px;border:2px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);color:var(--dd-neo-badge-accent-contrast);letter-spacing:.12em;text-transform:uppercase}\n"] });
|
|
2817
2817
|
}
|
|
2818
2818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalStamp, decorators: [{
|
|
2819
2819
|
type: Component,
|
|
2820
|
-
args: [{ selector: 'dd-badge-neobrutal-stamp', standalone: true, template: "<span class=\"dd-badge-neo-stamp\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n <span class=\"dd-badge-neo-stamp__kicker\">{{ kicker() }}</span>\n <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-stamp{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);box-shadow:4px 4px 0 var(--dd-neo-badge-shadow);font-weight:900;line-height:1;white-space:nowrap;transform:rotate(-2deg)}.dd-badge-neo-stamp[data-size=sm]{padding:5px 8px;font-size:11px}.dd-badge-neo-stamp[data-size=md]{padding:7px 10px;font-size:12px}.dd-badge-neo-stamp__kicker{display:inline-flex;align-items:center;padding:4px 6px;border:2px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);color:var(--dd-neo-badge-accent-contrast);letter-spacing:.12em;text-transform:uppercase}\n"] }]
|
|
2820
|
+
args: [{ selector: 'dd-badge-neobrutal-stamp', standalone: true, template: "<span class=\"dd-badge-neo-stamp\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n <span class=\"dd-badge-neo-stamp__kicker\">{{ kicker() }}</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-stamp{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);box-shadow:4px 4px 0 var(--dd-neo-badge-shadow);font-weight:900;line-height:1;white-space:nowrap;transform:rotate(-2deg)}.dd-badge-neo-stamp[data-size=sm]{padding:5px 8px;font-size:11px}.dd-badge-neo-stamp[data-size=md]{padding:7px 10px;font-size:12px}.badge-text__projected,.badge-text__default{display:contents}.badge-text__projected:not(:empty)+.badge-text__default{display:none}.dd-badge-neo-stamp__kicker{display:inline-flex;align-items:center;padding:4px 6px;border:2px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);color:var(--dd-neo-badge-accent-contrast);letter-spacing:.12em;text-transform:uppercase}\n"] }]
|
|
2821
2821
|
}], propDecorators: { kicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "kicker", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
2822
2822
|
|
|
2823
2823
|
class BadgeNeobrutalTicket {
|
|
@@ -2826,11 +2826,11 @@ class BadgeNeobrutalTicket {
|
|
|
2826
2826
|
size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
|
|
2827
2827
|
badgeStyle = computed(() => getNeobrutalBadgeStyle(this.color()), { ...(ngDevMode ? { debugName: "badgeStyle" } : {}) });
|
|
2828
2828
|
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>{{ text() }}</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}.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"] });
|
|
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"] });
|
|
2830
2830
|
}
|
|
2831
2831
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalTicket, decorators: [{
|
|
2832
2832
|
type: Component,
|
|
2833
|
-
args: [{ selector: 'dd-badge-neobrutal-ticket', standalone: true, 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>{{ text() }}</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}.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"] }]
|
|
2833
|
+
args: [{ selector: 'dd-badge-neobrutal-ticket', standalone: true, 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"] }]
|
|
2834
2834
|
}], 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 }] }] } });
|
|
2835
2835
|
|
|
2836
2836
|
class DuckDevAccordionComponent {
|