duck-dev-lib 0.0.50 → 0.0.51
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.
|
@@ -3461,11 +3461,11 @@ class DuckDevSpeakerBubbleNeobrutalSlab {
|
|
|
3461
3461
|
return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
|
|
3462
3462
|
}
|
|
3463
3463
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3464
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleNeobrutalSlab, isStandalone: true, selector: "dd-speaker-bubble-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-speaker-bubble-neo-slab\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\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\n class=\"dd-speaker-bubble-neo-slab__shape-path\"\n [attr.d]=\"shapePath()\"\n />\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%,
|
|
3464
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleNeobrutalSlab, isStandalone: true, selector: "dd-speaker-bubble-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-speaker-bubble-neo-slab\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\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\n class=\"dd-speaker-bubble-neo-slab__shape-path\"\n [attr.d]=\"shapePath()\"\n />\n </svg>\n <span class=\"dd-speaker-bubble-neo-slab__pin\" aria-hidden=\"true\"></span>\n <span class=\"dd-speaker-bubble-neo-slab__corner\" aria-hidden=\"true\"></span>\n <div class=\"dd-speaker-bubble-neo-slab__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,38rem)}.dd-speaker-bubble-neo-slab{position:relative;isolation:isolate;overflow:visible;padding:28px 22px 18px;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-slab__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-slab__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-slab__pin{position:absolute;top:-16px;left:18px;width:46px;height:18px;border:4px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-border);transform:rotate(-4deg)}.dd-speaker-bubble-neo-slab__corner{position:absolute;top:0;right:0;width:24px;height:24px;border-left:4px solid var(--dd-speaker-border);border-bottom:4px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 74%,var(--dd-base-0))}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__pin{right:18px;left:auto;transform:rotate(4deg)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__corner{right:auto;left:0;border-right:4px solid var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-slab__content{position:relative;z-index:1;font-size:15px;font-weight:800;line-height:1.55;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}.dd-speaker-bubble-neo-slab__content :first-child{margin-top:0}.dd-speaker-bubble-neo-slab__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-slab__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab__content small{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:6px 10px 5px;border:3px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 20%,var(--dd-speaker-surface));box-shadow:3px 3px 0 var(--dd-speaker-shadow);color:var(--dd-speaker-text);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-slab__content small:before{content:\"\";width:10px;height:10px;flex:0 0 auto;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__content{background:linear-gradient(225deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3465
3465
|
}
|
|
3466
3466
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalSlab, decorators: [{
|
|
3467
3467
|
type: Component,
|
|
3468
|
-
args: [{ selector: 'dd-speaker-bubble-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<div\n class=\"dd-speaker-bubble-neo-slab\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\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\n class=\"dd-speaker-bubble-neo-slab__shape-path\"\n [attr.d]=\"shapePath()\"\n />\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%,
|
|
3468
|
+
args: [{ selector: 'dd-speaker-bubble-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<div\n class=\"dd-speaker-bubble-neo-slab\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\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\n class=\"dd-speaker-bubble-neo-slab__shape-path\"\n [attr.d]=\"shapePath()\"\n />\n </svg>\n <span class=\"dd-speaker-bubble-neo-slab__pin\" aria-hidden=\"true\"></span>\n <span class=\"dd-speaker-bubble-neo-slab__corner\" aria-hidden=\"true\"></span>\n <div class=\"dd-speaker-bubble-neo-slab__content\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,38rem)}.dd-speaker-bubble-neo-slab{position:relative;isolation:isolate;overflow:visible;padding:28px 22px 18px;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-slab__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-slab__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-slab__pin{position:absolute;top:-16px;left:18px;width:46px;height:18px;border:4px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-border);transform:rotate(-4deg)}.dd-speaker-bubble-neo-slab__corner{position:absolute;top:0;right:0;width:24px;height:24px;border-left:4px solid var(--dd-speaker-border);border-bottom:4px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 74%,var(--dd-base-0))}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__pin{right:18px;left:auto;transform:rotate(4deg)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__corner{right:auto;left:0;border-right:4px solid var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-slab__content{position:relative;z-index:1;font-size:15px;font-weight:800;line-height:1.55;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}.dd-speaker-bubble-neo-slab__content :first-child{margin-top:0}.dd-speaker-bubble-neo-slab__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-slab__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab__content small{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:6px 10px 5px;border:3px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 20%,var(--dd-speaker-surface));box-shadow:3px 3px 0 var(--dd-speaker-shadow);color:var(--dd-speaker-text);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-slab__content small:before{content:\"\";width:10px;height:10px;flex:0 0 auto;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__content{background:linear-gradient(225deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}\n"] }]
|
|
3469
3469
|
}], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
|
|
3470
3470
|
|
|
3471
3471
|
const DEFAULT_BUBBLE_GEOMETRY = {
|
|
@@ -3684,11 +3684,11 @@ class DuckDevSpeakerBubbleNeobrutalTicket {
|
|
|
3684
3684
|
return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
|
|
3685
3685
|
}
|
|
3686
3686
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3687
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleNeobrutalTicket, isStandalone: true, selector: "dd-speaker-bubble-neobrutal-ticket", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-speaker-bubble-neo-ticket\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-ticket__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path\n class=\"dd-speaker-bubble-neo-ticket__shape-path\"\n [attr.d]=\"shapePath()\"\n />\n </svg>\n\n <div class=\"dd-speaker-bubble-neo-ticket__shell\">\n <div class=\"dd-speaker-bubble-neo-ticket__body\">\n <span class=\"dd-speaker-bubble-neo-ticket__flash\" aria-hidden=\"true\"></span>\n\n <div class=\"dd-speaker-bubble-neo-ticket__content\">\n <ng-content />\n </div>\n </div>\n\n <span class=\"dd-speaker-bubble-neo-ticket__stub\" aria-hidden=\"true\">\n <span></span>\n <span></span>\n <span></span>\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,40rem)}.dd-speaker-bubble-neo-ticket{position:relative;isolation:isolate;overflow:visible;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-ticket__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-ticket__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(10px 10px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-areas:\"body stub\";padding:4px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:58px minmax(0,1fr);grid-template-areas:\"stub body\"}.dd-speaker-bubble-neo-ticket__body{grid-area:body;position:relative;padding:22px 22px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 20%,transparent) 0 16px,transparent 16px 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-speaker-border) 8%,transparent) 14px 16px),color-mix(in srgb,var(--dd-speaker-surface-muted) 78%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after{content:\"\";position:absolute;top:18px;right:-18px;width:28px;height:28px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:var(--dd-speaker-surface)}.dd-speaker-bubble-neo-ticket__body:after{top:auto;bottom:18px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{right:auto;left:-18px}.dd-speaker-bubble-neo-ticket__flash{position:absolute;top:14px;left:18px;width:30px;height:12px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-shadow);transform:rotate(-7deg)}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__flash{left:auto;right:18px;transform:rotate(7deg)}.dd-speaker-bubble-neo-ticket__content{position:relative;z-index:1;padding-top:18px;font-size:15px;font-weight:800;line-height:1.55}.dd-speaker-bubble-neo-ticket__content :first-child{margin-top:0}.dd-speaker-bubble-neo-ticket__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-ticket__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-ticket__content small{display:inline-flex;margin-bottom:10px;padding:5px 8px 4px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);color:var(--dd-speaker-border);font-size:11px;font-weight:1000;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-ticket__stub{grid-area:stub;display:grid;align-content:center;justify-items:center;gap:10px;padding:16px 8px;border-left:4px dashed var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 70%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{border-right:4px dashed var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-ticket__stub span{width:18px;height:18px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:color-mix(in srgb,var(--dd-speaker-surface) 80%,
|
|
3687
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleNeobrutalTicket, isStandalone: true, selector: "dd-speaker-bubble-neobrutal-ticket", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"dd-speaker-bubble-neo-ticket\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-ticket__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path\n class=\"dd-speaker-bubble-neo-ticket__shape-path\"\n [attr.d]=\"shapePath()\"\n />\n </svg>\n\n <div class=\"dd-speaker-bubble-neo-ticket__shell\">\n <div class=\"dd-speaker-bubble-neo-ticket__body\">\n <span class=\"dd-speaker-bubble-neo-ticket__flash\" aria-hidden=\"true\"></span>\n\n <div class=\"dd-speaker-bubble-neo-ticket__content\">\n <ng-content />\n </div>\n </div>\n\n <span class=\"dd-speaker-bubble-neo-ticket__stub\" aria-hidden=\"true\">\n <span></span>\n <span></span>\n <span></span>\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,40rem)}.dd-speaker-bubble-neo-ticket{position:relative;isolation:isolate;overflow:visible;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-ticket__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-ticket__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(10px 10px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-areas:\"body stub\";padding:4px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:58px minmax(0,1fr);grid-template-areas:\"stub body\"}.dd-speaker-bubble-neo-ticket__body{grid-area:body;position:relative;padding:22px 22px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 20%,transparent) 0 16px,transparent 16px 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-speaker-border) 8%,transparent) 14px 16px),color-mix(in srgb,var(--dd-speaker-surface-muted) 78%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after{content:\"\";position:absolute;top:18px;right:-18px;width:28px;height:28px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:var(--dd-speaker-surface)}.dd-speaker-bubble-neo-ticket__body:after{top:auto;bottom:18px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{right:auto;left:-18px}.dd-speaker-bubble-neo-ticket__flash{position:absolute;top:14px;left:18px;width:30px;height:12px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-shadow);transform:rotate(-7deg)}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__flash{left:auto;right:18px;transform:rotate(7deg)}.dd-speaker-bubble-neo-ticket__content{position:relative;z-index:1;padding-top:18px;font-size:15px;font-weight:800;line-height:1.55}.dd-speaker-bubble-neo-ticket__content :first-child{margin-top:0}.dd-speaker-bubble-neo-ticket__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-ticket__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-ticket__content small{display:inline-flex;margin-bottom:10px;padding:5px 8px 4px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);color:var(--dd-speaker-border);font-size:11px;font-weight:1000;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-ticket__stub{grid-area:stub;display:grid;align-content:center;justify-items:center;gap:10px;padding:16px 8px;border-left:4px dashed var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 70%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{border-right:4px dashed var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-ticket__stub span{width:18px;height:18px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:color-mix(in srgb,var(--dd-speaker-surface) 80%,var(--dd-base-0))}@media(max-width:640px){.dd-speaker-bubble-neo-ticket__shape-path{filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:1fr;grid-template-areas:\"body\" \"stub\"}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{inset:auto auto -18px 22px;width:24px;height:24px}.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{left:auto;right:22px}.dd-speaker-bubble-neo-ticket__stub,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px 14px;border-top:4px dashed var(--dd-speaker-border);border-right:0;border-left:0}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3688
3688
|
}
|
|
3689
3689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalTicket, decorators: [{
|
|
3690
3690
|
type: Component,
|
|
3691
|
-
args: [{ selector: 'dd-speaker-bubble-neobrutal-ticket', standalone: true, imports: [NgStyle], template: "<div\n class=\"dd-speaker-bubble-neo-ticket\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-ticket__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path\n class=\"dd-speaker-bubble-neo-ticket__shape-path\"\n [attr.d]=\"shapePath()\"\n />\n </svg>\n\n <div class=\"dd-speaker-bubble-neo-ticket__shell\">\n <div class=\"dd-speaker-bubble-neo-ticket__body\">\n <span class=\"dd-speaker-bubble-neo-ticket__flash\" aria-hidden=\"true\"></span>\n\n <div class=\"dd-speaker-bubble-neo-ticket__content\">\n <ng-content />\n </div>\n </div>\n\n <span class=\"dd-speaker-bubble-neo-ticket__stub\" aria-hidden=\"true\">\n <span></span>\n <span></span>\n <span></span>\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,40rem)}.dd-speaker-bubble-neo-ticket{position:relative;isolation:isolate;overflow:visible;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-ticket__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-ticket__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(10px 10px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-areas:\"body stub\";padding:4px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:58px minmax(0,1fr);grid-template-areas:\"stub body\"}.dd-speaker-bubble-neo-ticket__body{grid-area:body;position:relative;padding:22px 22px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 20%,transparent) 0 16px,transparent 16px 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-speaker-border) 8%,transparent) 14px 16px),color-mix(in srgb,var(--dd-speaker-surface-muted) 78%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after{content:\"\";position:absolute;top:18px;right:-18px;width:28px;height:28px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:var(--dd-speaker-surface)}.dd-speaker-bubble-neo-ticket__body:after{top:auto;bottom:18px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{right:auto;left:-18px}.dd-speaker-bubble-neo-ticket__flash{position:absolute;top:14px;left:18px;width:30px;height:12px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-shadow);transform:rotate(-7deg)}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__flash{left:auto;right:18px;transform:rotate(7deg)}.dd-speaker-bubble-neo-ticket__content{position:relative;z-index:1;padding-top:18px;font-size:15px;font-weight:800;line-height:1.55}.dd-speaker-bubble-neo-ticket__content :first-child{margin-top:0}.dd-speaker-bubble-neo-ticket__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-ticket__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-ticket__content small{display:inline-flex;margin-bottom:10px;padding:5px 8px 4px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);color:var(--dd-speaker-border);font-size:11px;font-weight:1000;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-ticket__stub{grid-area:stub;display:grid;align-content:center;justify-items:center;gap:10px;padding:16px 8px;border-left:4px dashed var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 70%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{border-right:4px dashed var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-ticket__stub span{width:18px;height:18px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:color-mix(in srgb,var(--dd-speaker-surface) 80%,
|
|
3691
|
+
args: [{ selector: 'dd-speaker-bubble-neobrutal-ticket', standalone: true, imports: [NgStyle], template: "<div\n class=\"dd-speaker-bubble-neo-ticket\"\n [attr.data-tail]=\"resolvedTail()\"\n [ngStyle]=\"bubbleStyle()\"\n>\n <svg\n class=\"dd-speaker-bubble-neo-ticket__shape\"\n aria-hidden=\"true\"\n [ngStyle]=\"shapeStyle()\"\n [attr.viewBox]=\"shapeViewBox()\"\n preserveAspectRatio=\"none\"\n focusable=\"false\"\n >\n <path\n class=\"dd-speaker-bubble-neo-ticket__shape-path\"\n [attr.d]=\"shapePath()\"\n />\n </svg>\n\n <div class=\"dd-speaker-bubble-neo-ticket__shell\">\n <div class=\"dd-speaker-bubble-neo-ticket__body\">\n <span class=\"dd-speaker-bubble-neo-ticket__flash\" aria-hidden=\"true\"></span>\n\n <div class=\"dd-speaker-bubble-neo-ticket__content\">\n <ng-content />\n </div>\n </div>\n\n <span class=\"dd-speaker-bubble-neo-ticket__stub\" aria-hidden=\"true\">\n <span></span>\n <span></span>\n <span></span>\n </span>\n </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,40rem)}.dd-speaker-bubble-neo-ticket{position:relative;isolation:isolate;overflow:visible;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-ticket__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-ticket__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(10px 10px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-areas:\"body stub\";padding:4px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:58px minmax(0,1fr);grid-template-areas:\"stub body\"}.dd-speaker-bubble-neo-ticket__body{grid-area:body;position:relative;padding:22px 22px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 20%,transparent) 0 16px,transparent 16px 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-speaker-border) 8%,transparent) 14px 16px),color-mix(in srgb,var(--dd-speaker-surface-muted) 78%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after{content:\"\";position:absolute;top:18px;right:-18px;width:28px;height:28px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:var(--dd-speaker-surface)}.dd-speaker-bubble-neo-ticket__body:after{top:auto;bottom:18px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{right:auto;left:-18px}.dd-speaker-bubble-neo-ticket__flash{position:absolute;top:14px;left:18px;width:30px;height:12px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-shadow);transform:rotate(-7deg)}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__flash{left:auto;right:18px;transform:rotate(7deg)}.dd-speaker-bubble-neo-ticket__content{position:relative;z-index:1;padding-top:18px;font-size:15px;font-weight:800;line-height:1.55}.dd-speaker-bubble-neo-ticket__content :first-child{margin-top:0}.dd-speaker-bubble-neo-ticket__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-ticket__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-ticket__content small{display:inline-flex;margin-bottom:10px;padding:5px 8px 4px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);color:var(--dd-speaker-border);font-size:11px;font-weight:1000;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-ticket__stub{grid-area:stub;display:grid;align-content:center;justify-items:center;gap:10px;padding:16px 8px;border-left:4px dashed var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 70%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{border-right:4px dashed var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-ticket__stub span{width:18px;height:18px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:color-mix(in srgb,var(--dd-speaker-surface) 80%,var(--dd-base-0))}@media(max-width:640px){.dd-speaker-bubble-neo-ticket__shape-path{filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:1fr;grid-template-areas:\"body\" \"stub\"}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{inset:auto auto -18px 22px;width:24px;height:24px}.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{left:auto;right:22px}.dd-speaker-bubble-neo-ticket__stub,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px 14px;border-top:4px dashed var(--dd-speaker-border);border-right:0;border-left:0}}\n"] }]
|
|
3692
3692
|
}], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
|
|
3693
3693
|
|
|
3694
3694
|
class ButtonNeobrutalBlock {
|
|
@@ -3950,11 +3950,11 @@ class DuckDevInputNeobrutalRadio {
|
|
|
3950
3950
|
options = input.required({ ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
3951
3951
|
errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
|
|
3952
3952
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3953
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalRadio, isStandalone: true, selector: "duck-dev-input-neobrutal-radio", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n <div class=\"neo-radio__copy\">\n <label class=\"neo-radio__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n }\n </div>\n\n <div\n class=\"neo-radio__group\"\n [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n role=\"radiogroup\"\n [attr.aria-describedby]=\"describedBy\"\n >\n @for (option of options(); track option.value; let index = $index) {\n <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n <input\n class=\"neo-radio__input\"\n type=\"radio\"\n [id]=\"control + '-' + index\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n formControlName=\"{{ control }}\"\n />\n <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n <span class=\"neo-radio__text\">{{ option.label }}</span>\n </label>\n }\n </div>\n\n @if (erMessage) {\n <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-0)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,
|
|
3953
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalRadio, isStandalone: true, selector: "duck-dev-input-neobrutal-radio", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n <div class=\"neo-radio__copy\">\n <label class=\"neo-radio__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n }\n </div>\n\n <div\n class=\"neo-radio__group\"\n [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n role=\"radiogroup\"\n [attr.aria-describedby]=\"describedBy\"\n >\n @for (option of options(); track option.value; let index = $index) {\n <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n <input\n class=\"neo-radio__input\"\n type=\"radio\"\n [id]=\"control + '-' + index\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n formControlName=\"{{ control }}\"\n />\n <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n <span class=\"neo-radio__text\">{{ option.label }}</span>\n </label>\n }\n </div>\n\n @if (erMessage) {\n <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-0)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,var(--dd-base-0));box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-radio__option:hover,.neo-radio__option:has(.neo-radio__input:focus-visible){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-radio__group_error .neo-radio__option{border-color:var(--dd-base-accent-orange)}.neo-radio__option_disabled{opacity:.55;cursor:not-allowed}.neo-radio__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
3954
3954
|
}
|
|
3955
3955
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalRadio, decorators: [{
|
|
3956
3956
|
type: Component,
|
|
3957
|
-
args: [{ selector: 'duck-dev-input-neobrutal-radio', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n <div class=\"neo-radio__copy\">\n <label class=\"neo-radio__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n }\n </div>\n\n <div\n class=\"neo-radio__group\"\n [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n role=\"radiogroup\"\n [attr.aria-describedby]=\"describedBy\"\n >\n @for (option of options(); track option.value; let index = $index) {\n <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n <input\n class=\"neo-radio__input\"\n type=\"radio\"\n [id]=\"control + '-' + index\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n formControlName=\"{{ control }}\"\n />\n <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n <span class=\"neo-radio__text\">{{ option.label }}</span>\n </label>\n }\n </div>\n\n @if (erMessage) {\n <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-0)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,
|
|
3957
|
+
args: [{ selector: 'duck-dev-input-neobrutal-radio', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n <div class=\"neo-radio__copy\">\n <label class=\"neo-radio__label\">{{ label() }}</label>\n @if (description()) {\n <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n }\n </div>\n\n <div\n class=\"neo-radio__group\"\n [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n role=\"radiogroup\"\n [attr.aria-describedby]=\"describedBy\"\n >\n @for (option of options(); track option.value; let index = $index) {\n <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n <input\n class=\"neo-radio__input\"\n type=\"radio\"\n [id]=\"control + '-' + index\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled ?? false\"\n formControlName=\"{{ control }}\"\n />\n <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n <span class=\"neo-radio__text\">{{ option.label }}</span>\n </label>\n }\n </div>\n\n @if (erMessage) {\n <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-0)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,var(--dd-base-0));box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-radio__option:hover,.neo-radio__option:has(.neo-radio__input:focus-visible){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-radio__group_error .neo-radio__option{border-color:var(--dd-base-accent-orange)}.neo-radio__option_disabled{opacity:.55;cursor:not-allowed}.neo-radio__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}\n"] }]
|
|
3958
3958
|
}], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
|
|
3959
3959
|
|
|
3960
3960
|
class DuckDevInputNeobrutalSlab {
|
|
@@ -5604,11 +5604,11 @@ class DuckDevProgressNeobrutalSlab {
|
|
|
5604
5604
|
color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5605
5605
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5606
5606
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5607
|
-
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-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,
|
|
5607
|
+
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-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-base-600)}.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-base-600);background:var(--dd-base-0);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-base-600);background:var(--dd-base-0);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-base-0)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-blue) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] });
|
|
5608
5608
|
}
|
|
5609
5609
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
|
|
5610
5610
|
type: Component,
|
|
5611
|
-
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-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,
|
|
5611
|
+
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-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-base-600)}.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-base-600);background:var(--dd-base-0);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-base-600);background:var(--dd-base-0);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-base-0)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-blue) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] }]
|
|
5612
5612
|
}], 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 }] }] } });
|
|
5613
5613
|
|
|
5614
5614
|
class DuckDevProgressNeobrutalStamp {
|
|
@@ -5618,11 +5618,11 @@ class DuckDevProgressNeobrutalStamp {
|
|
|
5618
5618
|
color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5619
5619
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5620
5620
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5621
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,
|
|
5621
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-base-0)) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:0 0 0 4px var(--dd-base-0),8px 8px 0 var(--dd-base-600)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-base-600);background:var(--dd-base-100);overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-base-600)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
|
|
5622
5622
|
}
|
|
5623
5623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, decorators: [{
|
|
5624
5624
|
type: Component,
|
|
5625
|
-
args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,
|
|
5625
|
+
args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-stamp__header\">\n <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n </header>\n\n <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n <div class=\"dd-progress-neo-stamp__track\">\n <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n <span class=\"dd-progress-neo-stamp__grid\"></span>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-base-0)) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:0 0 0 4px var(--dd-base-0),8px 8px 0 var(--dd-base-600)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-base-600);background:var(--dd-base-100);overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-base-600)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
|
|
5626
5626
|
}], propDecorators: { kicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "kicker", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5627
5627
|
|
|
5628
5628
|
class DuckDevProgressNeobrutalTicket {
|
|
@@ -5633,11 +5633,11 @@ class DuckDevProgressNeobrutalTicket {
|
|
|
5633
5633
|
color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5634
5634
|
percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
|
|
5635
5635
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5636
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-base-600))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-base-600)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-base-600)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-base-600);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,
|
|
5636
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-base-600))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-base-600)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-base-600)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-base-600);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
|
|
5637
5637
|
}
|
|
5638
5638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, decorators: [{
|
|
5639
5639
|
type: Component,
|
|
5640
|
-
args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-base-600))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-base-600)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-base-600)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-base-600);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,
|
|
5640
|
+
args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n <header class=\"dd-progress-neo-ticket__header\">\n <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n </header>\n\n <div class=\"dd-progress-neo-ticket__body\">\n <div class=\"dd-progress-neo-ticket__copy\">\n <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n </div>\n\n <div class=\"dd-progress-neo-ticket__track\">\n <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n </div>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-base-600))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-base-600)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-base-600)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-base-600);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
|
|
5641
5641
|
}], propDecorators: { leftTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftTag", required: true }] }], rightTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightTag", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
5642
5642
|
|
|
5643
5643
|
class QuickStartBlock {
|