duck-dev-lib 0.0.93 → 0.0.95
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.
|
@@ -598,6 +598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
598
598
|
class DuckDevTabNeobrutal {
|
|
599
599
|
tabs = input([], { ...(ngDevMode ? { debugName: "tabs" } : {}) });
|
|
600
600
|
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
601
|
+
showContentWrapper = input(true, { ...(ngDevMode ? { debugName: "showContentWrapper" } : {}) });
|
|
601
602
|
tabChange = output();
|
|
602
603
|
panels = contentChildren(DdTabPanel, { ...(ngDevMode ? { debugName: "panels" } : {}) });
|
|
603
604
|
activeIndex = signal(0, { ...(ngDevMode ? { debugName: "activeIndex" } : {}) });
|
|
@@ -639,12 +640,12 @@ class DuckDevTabNeobrutal {
|
|
|
639
640
|
return 'hidden';
|
|
640
641
|
}
|
|
641
642
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
642
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabNeobrutal, isStandalone: true, selector: "duck-dev-tab-neobrutal", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, queries: [{ propertyName: "panels", predicate: DdTabPanel, isSignal: true }], ngImport: i0, template: "<div class=\"dd-tab-neo\" [attr.data-color]=\"color()\">\n <div class=\"dd-tab-neo__header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"dd-tab-neo__button\"\n [class.dd-tab-neo__button--active]=\"activeIndex() === i\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n <span class=\"dd-tab-neo__number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span class=\"dd-tab-neo__label\">{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div
|
|
643
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabNeobrutal, isStandalone: true, selector: "duck-dev-tab-neobrutal", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showContentWrapper: { classPropertyName: "showContentWrapper", publicName: "showContentWrapper", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, queries: [{ propertyName: "panels", predicate: DdTabPanel, isSignal: true }], ngImport: i0, template: "<div class=\"dd-tab-neo\" [attr.data-color]=\"color()\">\n <div class=\"dd-tab-neo__header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"dd-tab-neo__button\"\n [class.dd-tab-neo__button--active]=\"activeIndex() === i\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n <span class=\"dd-tab-neo__number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span class=\"dd-tab-neo__label\">{{ tab.label }}</span>\n </button>\n }\n </div>\n\n @if (showContentWrapper()) {\n <div\n class=\"dd-tab-neo__viewport\"\n [class.dd-tab-neo__viewport--animating]=\"isAnimating()\"\n [class.dd-tab-neo__viewport--left]=\"isAnimating() && direction() === 'left'\"\n [class.dd-tab-neo__viewport--right]=\"isAnimating() && direction() === 'right'\"\n >\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\n } @else {\n <div class=\"dd-tab-neo__content-bare\">\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-1);--dd-tab-neo-text: var(--dd-neo-ink);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-2);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-2)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-2);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6);--dd-tab-neo-number-bg: var(--dd-neo-ana-1)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-neo-ana-4);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-neo-ink);--dd-tab-neo-accent: var(--dd-neo-ana-3);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-5);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-5);--dd-tab-neo-number-bg: var(--dd-neo-ana-3);--dd-tab-neo-text: var(--dd-neo-paper)}.dd-tab-neo__header{display:flex;flex-wrap:wrap;gap:.85rem}.dd-tab-neo__button{display:inline-flex;align-items:center;gap:.75rem;min-width:140px;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-tab-neo-surface);color:var(--dd-tab-neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:6px 6px 0 var(--dd-tab-neo-btn-shadow);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;-webkit-tap-highlight-color:transparent}.dd-tab-neo__button:hover,.dd-tab-neo__button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button:focus-visible{outline:3px solid var(--dd-tab-neo-accent);outline-offset:2px}.dd-tab-neo__button--active{background:var(--dd-tab-neo-active-bg);box-shadow:8px 8px 0 var(--dd-tab-neo-active-shadow);transform:translate(-3px,-3px) rotate(-1deg)}.dd-tab-neo__button--active:hover{transform:translate(-4px,-4px) rotate(-1.5deg);box-shadow:10px 10px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:3px solid currentColor;border-radius:12px;background:var(--dd-tab-neo-number-bg);color:var(--dd-neo-ink);font-size:.72rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.dd-tab-neo__label{font-size:.82rem}.dd-tab-neo__viewport{position:relative;overflow:hidden;perspective:1200px;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tab-neo-accent) 40%,transparent) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-tab-neo-surface);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow);min-height:100px;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1)}.dd-tab-neo__viewport--animating{animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__viewport--right{animation-name:neoViewportShakeRight}.dd-tab-neo__viewport--left{animation-name:neoViewportShakeLeft}.dd-tab-neo__content-bare{position:relative;overflow:hidden;perspective:1200px;min-height:100px}.dd-tab-neo__panel{padding:1.25rem}.dd-tab-neo__panel--active{position:relative}.dd-tab-neo__panel--hidden{display:none}.dd-tab-neo__panel--leave-left,.dd-tab-neo__panel--leave-right{position:absolute;top:0;left:0;right:0;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--leave-left{animation-name:neoFlipLeaveLeft}.dd-tab-neo__panel--leave-right{animation-name:neoFlipLeaveRight}.dd-tab-neo__panel--enter-right,.dd-tab-neo__panel--enter-left{position:relative;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--enter-right{animation-name:neoFlipEnterRight}.dd-tab-neo__panel--enter-left{animation-name:neoFlipEnterLeft}@keyframes neoFlipEnterRight{0%{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveLeft{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}}@keyframes neoFlipEnterLeft{0%{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveRight{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}}@keyframes neoViewportShakeRight{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(4px,-2px) rotate(.5deg);box-shadow:6px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(-2px,1px) rotate(-.3deg);box-shadow:12px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@keyframes neoViewportShakeLeft{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(-4px,-2px) rotate(-.5deg);box-shadow:14px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(2px,1px) rotate(.3deg);box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@media(max-width:640px){.dd-tab-neo__header{gap:.6rem}.dd-tab-neo__button{min-width:110px;padding:.7rem .85rem;box-shadow:4px 4px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button--active{box-shadow:6px 6px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{width:32px;height:32px}.dd-tab-neo__viewport{border-radius:22px;box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}.dd-tab-neo__panel{padding:1rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
643
644
|
}
|
|
644
645
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabNeobrutal, decorators: [{
|
|
645
646
|
type: Component,
|
|
646
|
-
args: [{ selector: 'duck-dev-tab-neobrutal', standalone: true, imports: [NgTemplateOutlet], template: "<div class=\"dd-tab-neo\" [attr.data-color]=\"color()\">\n <div class=\"dd-tab-neo__header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"dd-tab-neo__button\"\n [class.dd-tab-neo__button--active]=\"activeIndex() === i\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n <span class=\"dd-tab-neo__number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span class=\"dd-tab-neo__label\">{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div
|
|
647
|
-
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DdTabPanel), { isSignal: true }] }] } });
|
|
647
|
+
args: [{ selector: 'duck-dev-tab-neobrutal', standalone: true, imports: [NgTemplateOutlet], template: "<div class=\"dd-tab-neo\" [attr.data-color]=\"color()\">\n <div class=\"dd-tab-neo__header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"dd-tab-neo__button\"\n [class.dd-tab-neo__button--active]=\"activeIndex() === i\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n <span class=\"dd-tab-neo__number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span class=\"dd-tab-neo__label\">{{ tab.label }}</span>\n </button>\n }\n </div>\n\n @if (showContentWrapper()) {\n <div\n class=\"dd-tab-neo__viewport\"\n [class.dd-tab-neo__viewport--animating]=\"isAnimating()\"\n [class.dd-tab-neo__viewport--left]=\"isAnimating() && direction() === 'left'\"\n [class.dd-tab-neo__viewport--right]=\"isAnimating() && direction() === 'right'\"\n >\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\n } @else {\n <div class=\"dd-tab-neo__content-bare\">\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-1);--dd-tab-neo-text: var(--dd-neo-ink);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-2);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-2)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-2);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6);--dd-tab-neo-number-bg: var(--dd-neo-ana-1)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-neo-ana-4);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-neo-ink);--dd-tab-neo-accent: var(--dd-neo-ana-3);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-5);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-5);--dd-tab-neo-number-bg: var(--dd-neo-ana-3);--dd-tab-neo-text: var(--dd-neo-paper)}.dd-tab-neo__header{display:flex;flex-wrap:wrap;gap:.85rem}.dd-tab-neo__button{display:inline-flex;align-items:center;gap:.75rem;min-width:140px;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-tab-neo-surface);color:var(--dd-tab-neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:6px 6px 0 var(--dd-tab-neo-btn-shadow);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;-webkit-tap-highlight-color:transparent}.dd-tab-neo__button:hover,.dd-tab-neo__button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button:focus-visible{outline:3px solid var(--dd-tab-neo-accent);outline-offset:2px}.dd-tab-neo__button--active{background:var(--dd-tab-neo-active-bg);box-shadow:8px 8px 0 var(--dd-tab-neo-active-shadow);transform:translate(-3px,-3px) rotate(-1deg)}.dd-tab-neo__button--active:hover{transform:translate(-4px,-4px) rotate(-1.5deg);box-shadow:10px 10px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:3px solid currentColor;border-radius:12px;background:var(--dd-tab-neo-number-bg);color:var(--dd-neo-ink);font-size:.72rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.dd-tab-neo__label{font-size:.82rem}.dd-tab-neo__viewport{position:relative;overflow:hidden;perspective:1200px;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tab-neo-accent) 40%,transparent) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-tab-neo-surface);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow);min-height:100px;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1)}.dd-tab-neo__viewport--animating{animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__viewport--right{animation-name:neoViewportShakeRight}.dd-tab-neo__viewport--left{animation-name:neoViewportShakeLeft}.dd-tab-neo__content-bare{position:relative;overflow:hidden;perspective:1200px;min-height:100px}.dd-tab-neo__panel{padding:1.25rem}.dd-tab-neo__panel--active{position:relative}.dd-tab-neo__panel--hidden{display:none}.dd-tab-neo__panel--leave-left,.dd-tab-neo__panel--leave-right{position:absolute;top:0;left:0;right:0;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--leave-left{animation-name:neoFlipLeaveLeft}.dd-tab-neo__panel--leave-right{animation-name:neoFlipLeaveRight}.dd-tab-neo__panel--enter-right,.dd-tab-neo__panel--enter-left{position:relative;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--enter-right{animation-name:neoFlipEnterRight}.dd-tab-neo__panel--enter-left{animation-name:neoFlipEnterLeft}@keyframes neoFlipEnterRight{0%{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveLeft{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}}@keyframes neoFlipEnterLeft{0%{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveRight{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}}@keyframes neoViewportShakeRight{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(4px,-2px) rotate(.5deg);box-shadow:6px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(-2px,1px) rotate(-.3deg);box-shadow:12px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@keyframes neoViewportShakeLeft{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(-4px,-2px) rotate(-.5deg);box-shadow:14px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(2px,1px) rotate(.3deg);box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@media(max-width:640px){.dd-tab-neo__header{gap:.6rem}.dd-tab-neo__button{min-width:110px;padding:.7rem .85rem;box-shadow:4px 4px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button--active{box-shadow:6px 6px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{width:32px;height:32px}.dd-tab-neo__viewport{border-radius:22px;box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}.dd-tab-neo__panel{padding:1rem}}\n"] }]
|
|
648
|
+
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showContentWrapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showContentWrapper", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DdTabPanel), { isSignal: true }] }] } });
|
|
648
649
|
|
|
649
650
|
class DuckDevInput {
|
|
650
651
|
form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
|
|
@@ -3733,47 +3734,47 @@ class DuckDevSegmentNeobrutal {
|
|
|
3733
3734
|
switch (color) {
|
|
3734
3735
|
case AccentEnumColor.Violet:
|
|
3735
3736
|
return {
|
|
3736
|
-
'--dd-segment-neo-surface': 'var(--dd-
|
|
3737
|
-
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-
|
|
3738
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
3739
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
3740
|
-
'--dd-segment-neo-text': 'var(--dd-
|
|
3741
|
-
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-
|
|
3737
|
+
'--dd-segment-neo-surface': 'var(--dd-neo-ana-3)',
|
|
3738
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-neo-ana-3) 84%, var(--dd-base-0))',
|
|
3739
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
3740
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-6)',
|
|
3741
|
+
'--dd-segment-neo-text': 'var(--dd-neo-ana-3-contrast)',
|
|
3742
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-neo-ana-3-contrast) 74%, transparent)',
|
|
3742
3743
|
};
|
|
3743
3744
|
case AccentEnumColor.Orange:
|
|
3744
3745
|
return {
|
|
3745
|
-
'--dd-segment-neo-surface': 'var(--dd-
|
|
3746
|
-
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-
|
|
3747
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
3748
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
3749
|
-
'--dd-segment-neo-text': 'var(--dd-
|
|
3750
|
-
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-
|
|
3746
|
+
'--dd-segment-neo-surface': 'var(--dd-neo-ana-2)',
|
|
3747
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-neo-ana-5) 68%, var(--dd-base-0))',
|
|
3748
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
3749
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-5)',
|
|
3750
|
+
'--dd-segment-neo-text': 'var(--dd-neo-ana-2-contrast)',
|
|
3751
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-neo-ana-2-contrast) 66%, transparent)',
|
|
3751
3752
|
};
|
|
3752
3753
|
case AccentEnumColor.Gray:
|
|
3753
3754
|
return {
|
|
3754
3755
|
'--dd-segment-neo-surface': 'var(--dd-base-100)',
|
|
3755
3756
|
'--dd-segment-neo-panel': 'var(--dd-base-0)',
|
|
3756
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
3757
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
3757
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
3758
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-6)',
|
|
3758
3759
|
'--dd-segment-neo-text': 'var(--dd-base-600)',
|
|
3759
3760
|
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
|
|
3760
3761
|
};
|
|
3761
3762
|
case AccentEnumColor.Dark:
|
|
3762
3763
|
return {
|
|
3763
|
-
'--dd-segment-neo-surface': 'var(--dd-
|
|
3764
|
-
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-
|
|
3765
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
3766
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
3767
|
-
'--dd-segment-neo-text': 'var(--dd-
|
|
3768
|
-
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-
|
|
3764
|
+
'--dd-segment-neo-surface': 'var(--dd-neo-ana-4)',
|
|
3765
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-neo-ana-4) 92%, var(--dd-neo-ana-3))',
|
|
3766
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
3767
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-3)',
|
|
3768
|
+
'--dd-segment-neo-text': 'var(--dd-neo-ana-4-contrast)',
|
|
3769
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-neo-ana-4-contrast) 68%, transparent)',
|
|
3769
3770
|
};
|
|
3770
3771
|
case AccentEnumColor.White:
|
|
3771
3772
|
default:
|
|
3772
3773
|
return {
|
|
3773
3774
|
'--dd-segment-neo-surface': 'var(--dd-base-0)',
|
|
3774
3775
|
'--dd-segment-neo-panel': 'var(--dd-base-100)',
|
|
3775
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
3776
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
3776
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-5)',
|
|
3777
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-6)',
|
|
3777
3778
|
'--dd-segment-neo-text': 'var(--dd-base-600)',
|
|
3778
3779
|
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
|
|
3779
3780
|
};
|
|
@@ -3856,47 +3857,47 @@ class DuckDevSegmentNeobrutalVertical {
|
|
|
3856
3857
|
switch (color) {
|
|
3857
3858
|
case AccentEnumColor.Violet:
|
|
3858
3859
|
return {
|
|
3859
|
-
'--dd-segment-neo-v-surface': 'var(--dd-
|
|
3860
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
3861
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
3862
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
3863
|
-
'--dd-segment-neo-v-text': 'var(--dd-
|
|
3864
|
-
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-
|
|
3860
|
+
'--dd-segment-neo-v-surface': 'var(--dd-neo-ana-3)',
|
|
3861
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-3) 84%, var(--dd-base-0))',
|
|
3862
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
3863
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-6)',
|
|
3864
|
+
'--dd-segment-neo-v-text': 'var(--dd-neo-ana-3-contrast)',
|
|
3865
|
+
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-neo-ana-3-contrast) 74%, transparent)',
|
|
3865
3866
|
};
|
|
3866
3867
|
case AccentEnumColor.Orange:
|
|
3867
3868
|
return {
|
|
3868
|
-
'--dd-segment-neo-v-surface': 'var(--dd-
|
|
3869
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
3870
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
3871
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
3872
|
-
'--dd-segment-neo-v-text': 'var(--dd-
|
|
3873
|
-
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-
|
|
3869
|
+
'--dd-segment-neo-v-surface': 'var(--dd-neo-ana-2)',
|
|
3870
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-5) 68%, var(--dd-base-0))',
|
|
3871
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
3872
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-5)',
|
|
3873
|
+
'--dd-segment-neo-v-text': 'var(--dd-neo-ana-2-contrast)',
|
|
3874
|
+
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-neo-ana-2-contrast) 66%, transparent)',
|
|
3874
3875
|
};
|
|
3875
3876
|
case AccentEnumColor.Gray:
|
|
3876
3877
|
return {
|
|
3877
3878
|
'--dd-segment-neo-v-surface': 'var(--dd-base-100)',
|
|
3878
3879
|
'--dd-segment-neo-v-panel': 'var(--dd-base-0)',
|
|
3879
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
3880
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
3880
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
3881
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-6)',
|
|
3881
3882
|
'--dd-segment-neo-v-text': 'var(--dd-base-600)',
|
|
3882
3883
|
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
|
|
3883
3884
|
};
|
|
3884
3885
|
case AccentEnumColor.Dark:
|
|
3885
3886
|
return {
|
|
3886
|
-
'--dd-segment-neo-v-surface': 'var(--dd-
|
|
3887
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
3888
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
3889
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
3890
|
-
'--dd-segment-neo-v-text': 'var(--dd-
|
|
3891
|
-
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-
|
|
3887
|
+
'--dd-segment-neo-v-surface': 'var(--dd-neo-ana-4)',
|
|
3888
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-4) 92%, var(--dd-neo-ana-3))',
|
|
3889
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
3890
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-3)',
|
|
3891
|
+
'--dd-segment-neo-v-text': 'var(--dd-neo-ana-4-contrast)',
|
|
3892
|
+
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-neo-ana-4-contrast) 68%, transparent)',
|
|
3892
3893
|
};
|
|
3893
3894
|
case AccentEnumColor.White:
|
|
3894
3895
|
default:
|
|
3895
3896
|
return {
|
|
3896
3897
|
'--dd-segment-neo-v-surface': 'var(--dd-base-0)',
|
|
3897
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
3898
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
3899
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
3898
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-5) 14%, var(--dd-base-0))',
|
|
3899
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-5)',
|
|
3900
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-6)',
|
|
3900
3901
|
'--dd-segment-neo-v-text': 'var(--dd-base-600)',
|
|
3901
3902
|
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-base-400) 72%, transparent)',
|
|
3902
3903
|
};
|
|
@@ -5731,48 +5732,48 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5731
5732
|
switch (color) {
|
|
5732
5733
|
case AccentEnumColor.Violet:
|
|
5733
5734
|
return {
|
|
5734
|
-
'--neo-bc-surface': 'var(--dd-
|
|
5735
|
-
'--neo-bc-text': 'var(--dd-
|
|
5736
|
-
'--neo-bc-link': 'var(--dd-
|
|
5737
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5738
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5739
|
-
'--neo-bc-active': 'var(--dd-
|
|
5735
|
+
'--neo-bc-surface': 'var(--dd-neo-ana-3)',
|
|
5736
|
+
'--neo-bc-text': 'var(--dd-neo-ana-3-contrast)',
|
|
5737
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5738
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-1)',
|
|
5739
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-6)',
|
|
5740
|
+
'--neo-bc-active': 'var(--dd-neo-ana-3-contrast)',
|
|
5740
5741
|
};
|
|
5741
5742
|
case AccentEnumColor.Orange:
|
|
5742
5743
|
return {
|
|
5743
|
-
'--neo-bc-surface': 'var(--dd-
|
|
5744
|
-
'--neo-bc-text': 'var(--dd-
|
|
5745
|
-
'--neo-bc-link': 'var(--dd-
|
|
5746
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5747
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5748
|
-
'--neo-bc-active': 'var(--dd-
|
|
5744
|
+
'--neo-bc-surface': 'var(--dd-neo-ana-2)',
|
|
5745
|
+
'--neo-bc-text': 'var(--dd-neo-ana-2-contrast)',
|
|
5746
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5747
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-5)',
|
|
5748
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-5)',
|
|
5749
|
+
'--neo-bc-active': 'var(--dd-neo-ana-2-contrast)',
|
|
5749
5750
|
};
|
|
5750
5751
|
case AccentEnumColor.Gray:
|
|
5751
5752
|
return {
|
|
5752
5753
|
'--neo-bc-surface': 'var(--dd-base-200)',
|
|
5753
5754
|
'--neo-bc-text': 'var(--dd-base-600)',
|
|
5754
|
-
'--neo-bc-link': 'var(--dd-
|
|
5755
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5756
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5755
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5756
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-2)',
|
|
5757
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-6)',
|
|
5757
5758
|
'--neo-bc-active': 'var(--dd-base-600)',
|
|
5758
5759
|
};
|
|
5759
5760
|
case AccentEnumColor.Dark:
|
|
5760
5761
|
return {
|
|
5761
|
-
'--neo-bc-surface': 'var(--dd-
|
|
5762
|
-
'--neo-bc-text': 'var(--dd-
|
|
5763
|
-
'--neo-bc-link': 'var(--dd-
|
|
5764
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5765
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5766
|
-
'--neo-bc-active': 'var(--dd-
|
|
5762
|
+
'--neo-bc-surface': 'var(--dd-neo-ana-4)',
|
|
5763
|
+
'--neo-bc-text': 'var(--dd-neo-ana-4-contrast)',
|
|
5764
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5765
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-5)',
|
|
5766
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-3)',
|
|
5767
|
+
'--neo-bc-active': 'var(--dd-neo-ana-4-contrast)',
|
|
5767
5768
|
};
|
|
5768
5769
|
case AccentEnumColor.White:
|
|
5769
5770
|
default:
|
|
5770
5771
|
return {
|
|
5771
5772
|
'--neo-bc-surface': 'var(--dd-base-0)',
|
|
5772
5773
|
'--neo-bc-text': 'var(--dd-base-600)',
|
|
5773
|
-
'--neo-bc-link': 'var(--dd-
|
|
5774
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5775
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5774
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5775
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-5)',
|
|
5776
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-6)',
|
|
5776
5777
|
'--neo-bc-active': 'var(--dd-base-600)',
|
|
5777
5778
|
};
|
|
5778
5779
|
}
|