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.
|
@@ -3736,6 +3736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3736
3736
|
class DuckDevTabNeobrutal {
|
|
3737
3737
|
tabs = input([], { ...(ngDevMode ? { debugName: "tabs" } : {}) });
|
|
3738
3738
|
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
3739
|
+
showContentWrapper = input(true, { ...(ngDevMode ? { debugName: "showContentWrapper" } : {}) });
|
|
3739
3740
|
tabChange = output();
|
|
3740
3741
|
panels = contentChildren(DdTabPanel, { ...(ngDevMode ? { debugName: "panels" } : {}) });
|
|
3741
3742
|
activeIndex = signal(0, { ...(ngDevMode ? { debugName: "activeIndex" } : {}) });
|
|
@@ -3777,12 +3778,12 @@ class DuckDevTabNeobrutal {
|
|
|
3777
3778
|
return 'hidden';
|
|
3778
3779
|
}
|
|
3779
3780
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3780
|
-
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
|
|
3781
|
+
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"] }] });
|
|
3781
3782
|
}
|
|
3782
3783
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabNeobrutal, decorators: [{
|
|
3783
3784
|
type: Component,
|
|
3784
|
-
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
|
|
3785
|
-
}], 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 }] }] } });
|
|
3785
|
+
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"] }]
|
|
3786
|
+
}], 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 }] }] } });
|
|
3786
3787
|
|
|
3787
3788
|
class ButtonBlock {
|
|
3788
3789
|
t = inject(TranslocoService);
|
|
@@ -5321,47 +5322,47 @@ class DuckDevSegmentNeobrutal {
|
|
|
5321
5322
|
switch (color) {
|
|
5322
5323
|
case AccentEnumColor.Violet:
|
|
5323
5324
|
return {
|
|
5324
|
-
'--dd-segment-neo-surface': 'var(--dd-
|
|
5325
|
-
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-
|
|
5326
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
5327
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
5328
|
-
'--dd-segment-neo-text': 'var(--dd-
|
|
5329
|
-
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-
|
|
5325
|
+
'--dd-segment-neo-surface': 'var(--dd-neo-ana-3)',
|
|
5326
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-neo-ana-3) 84%, var(--dd-base-0))',
|
|
5327
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
5328
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-6)',
|
|
5329
|
+
'--dd-segment-neo-text': 'var(--dd-neo-ana-3-contrast)',
|
|
5330
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-neo-ana-3-contrast) 74%, transparent)',
|
|
5330
5331
|
};
|
|
5331
5332
|
case AccentEnumColor.Orange:
|
|
5332
5333
|
return {
|
|
5333
|
-
'--dd-segment-neo-surface': 'var(--dd-
|
|
5334
|
-
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-
|
|
5335
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
5336
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
5337
|
-
'--dd-segment-neo-text': 'var(--dd-
|
|
5338
|
-
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-
|
|
5334
|
+
'--dd-segment-neo-surface': 'var(--dd-neo-ana-2)',
|
|
5335
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-neo-ana-5) 68%, var(--dd-base-0))',
|
|
5336
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
5337
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-5)',
|
|
5338
|
+
'--dd-segment-neo-text': 'var(--dd-neo-ana-2-contrast)',
|
|
5339
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-neo-ana-2-contrast) 66%, transparent)',
|
|
5339
5340
|
};
|
|
5340
5341
|
case AccentEnumColor.Gray:
|
|
5341
5342
|
return {
|
|
5342
5343
|
'--dd-segment-neo-surface': 'var(--dd-base-100)',
|
|
5343
5344
|
'--dd-segment-neo-panel': 'var(--dd-base-0)',
|
|
5344
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
5345
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
5345
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
5346
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-6)',
|
|
5346
5347
|
'--dd-segment-neo-text': 'var(--dd-base-600)',
|
|
5347
5348
|
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
|
|
5348
5349
|
};
|
|
5349
5350
|
case AccentEnumColor.Dark:
|
|
5350
5351
|
return {
|
|
5351
|
-
'--dd-segment-neo-surface': 'var(--dd-
|
|
5352
|
-
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-
|
|
5353
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
5354
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
5355
|
-
'--dd-segment-neo-text': 'var(--dd-
|
|
5356
|
-
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-
|
|
5352
|
+
'--dd-segment-neo-surface': 'var(--dd-neo-ana-4)',
|
|
5353
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-neo-ana-4) 92%, var(--dd-neo-ana-3))',
|
|
5354
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
5355
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-3)',
|
|
5356
|
+
'--dd-segment-neo-text': 'var(--dd-neo-ana-4-contrast)',
|
|
5357
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-neo-ana-4-contrast) 68%, transparent)',
|
|
5357
5358
|
};
|
|
5358
5359
|
case AccentEnumColor.White:
|
|
5359
5360
|
default:
|
|
5360
5361
|
return {
|
|
5361
5362
|
'--dd-segment-neo-surface': 'var(--dd-base-0)',
|
|
5362
5363
|
'--dd-segment-neo-panel': 'var(--dd-base-100)',
|
|
5363
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
5364
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
5364
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-5)',
|
|
5365
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-6)',
|
|
5365
5366
|
'--dd-segment-neo-text': 'var(--dd-base-600)',
|
|
5366
5367
|
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
|
|
5367
5368
|
};
|
|
@@ -5444,47 +5445,47 @@ class DuckDevSegmentNeobrutalVertical {
|
|
|
5444
5445
|
switch (color) {
|
|
5445
5446
|
case AccentEnumColor.Violet:
|
|
5446
5447
|
return {
|
|
5447
|
-
'--dd-segment-neo-v-surface': 'var(--dd-
|
|
5448
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
5449
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
5450
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
5451
|
-
'--dd-segment-neo-v-text': 'var(--dd-
|
|
5452
|
-
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-
|
|
5448
|
+
'--dd-segment-neo-v-surface': 'var(--dd-neo-ana-3)',
|
|
5449
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-3) 84%, var(--dd-base-0))',
|
|
5450
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
5451
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-6)',
|
|
5452
|
+
'--dd-segment-neo-v-text': 'var(--dd-neo-ana-3-contrast)',
|
|
5453
|
+
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-neo-ana-3-contrast) 74%, transparent)',
|
|
5453
5454
|
};
|
|
5454
5455
|
case AccentEnumColor.Orange:
|
|
5455
5456
|
return {
|
|
5456
|
-
'--dd-segment-neo-v-surface': 'var(--dd-
|
|
5457
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
5458
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
5459
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
5460
|
-
'--dd-segment-neo-v-text': 'var(--dd-
|
|
5461
|
-
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-
|
|
5457
|
+
'--dd-segment-neo-v-surface': 'var(--dd-neo-ana-2)',
|
|
5458
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-5) 68%, var(--dd-base-0))',
|
|
5459
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
5460
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-5)',
|
|
5461
|
+
'--dd-segment-neo-v-text': 'var(--dd-neo-ana-2-contrast)',
|
|
5462
|
+
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-neo-ana-2-contrast) 66%, transparent)',
|
|
5462
5463
|
};
|
|
5463
5464
|
case AccentEnumColor.Gray:
|
|
5464
5465
|
return {
|
|
5465
5466
|
'--dd-segment-neo-v-surface': 'var(--dd-base-100)',
|
|
5466
5467
|
'--dd-segment-neo-v-panel': 'var(--dd-base-0)',
|
|
5467
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
5468
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
5468
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
5469
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-6)',
|
|
5469
5470
|
'--dd-segment-neo-v-text': 'var(--dd-base-600)',
|
|
5470
5471
|
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
|
|
5471
5472
|
};
|
|
5472
5473
|
case AccentEnumColor.Dark:
|
|
5473
5474
|
return {
|
|
5474
|
-
'--dd-segment-neo-v-surface': 'var(--dd-
|
|
5475
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
5476
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
5477
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
5478
|
-
'--dd-segment-neo-v-text': 'var(--dd-
|
|
5479
|
-
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-
|
|
5475
|
+
'--dd-segment-neo-v-surface': 'var(--dd-neo-ana-4)',
|
|
5476
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-4) 92%, var(--dd-neo-ana-3))',
|
|
5477
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
5478
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-3)',
|
|
5479
|
+
'--dd-segment-neo-v-text': 'var(--dd-neo-ana-4-contrast)',
|
|
5480
|
+
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-neo-ana-4-contrast) 68%, transparent)',
|
|
5480
5481
|
};
|
|
5481
5482
|
case AccentEnumColor.White:
|
|
5482
5483
|
default:
|
|
5483
5484
|
return {
|
|
5484
5485
|
'--dd-segment-neo-v-surface': 'var(--dd-base-0)',
|
|
5485
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
5486
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
5487
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
5486
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-5) 14%, var(--dd-base-0))',
|
|
5487
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-5)',
|
|
5488
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-6)',
|
|
5488
5489
|
'--dd-segment-neo-v-text': 'var(--dd-base-600)',
|
|
5489
5490
|
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-base-400) 72%, transparent)',
|
|
5490
5491
|
};
|
|
@@ -5791,48 +5792,48 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5791
5792
|
switch (color) {
|
|
5792
5793
|
case AccentEnumColor.Violet:
|
|
5793
5794
|
return {
|
|
5794
|
-
'--neo-bc-surface': 'var(--dd-
|
|
5795
|
-
'--neo-bc-text': 'var(--dd-
|
|
5796
|
-
'--neo-bc-link': 'var(--dd-
|
|
5797
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5798
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5799
|
-
'--neo-bc-active': 'var(--dd-
|
|
5795
|
+
'--neo-bc-surface': 'var(--dd-neo-ana-3)',
|
|
5796
|
+
'--neo-bc-text': 'var(--dd-neo-ana-3-contrast)',
|
|
5797
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5798
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-1)',
|
|
5799
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-6)',
|
|
5800
|
+
'--neo-bc-active': 'var(--dd-neo-ana-3-contrast)',
|
|
5800
5801
|
};
|
|
5801
5802
|
case AccentEnumColor.Orange:
|
|
5802
5803
|
return {
|
|
5803
|
-
'--neo-bc-surface': 'var(--dd-
|
|
5804
|
-
'--neo-bc-text': 'var(--dd-
|
|
5805
|
-
'--neo-bc-link': 'var(--dd-
|
|
5806
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5807
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5808
|
-
'--neo-bc-active': 'var(--dd-
|
|
5804
|
+
'--neo-bc-surface': 'var(--dd-neo-ana-2)',
|
|
5805
|
+
'--neo-bc-text': 'var(--dd-neo-ana-2-contrast)',
|
|
5806
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5807
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-5)',
|
|
5808
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-5)',
|
|
5809
|
+
'--neo-bc-active': 'var(--dd-neo-ana-2-contrast)',
|
|
5809
5810
|
};
|
|
5810
5811
|
case AccentEnumColor.Gray:
|
|
5811
5812
|
return {
|
|
5812
5813
|
'--neo-bc-surface': 'var(--dd-base-200)',
|
|
5813
5814
|
'--neo-bc-text': 'var(--dd-base-600)',
|
|
5814
|
-
'--neo-bc-link': 'var(--dd-
|
|
5815
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5816
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5815
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5816
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-2)',
|
|
5817
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-6)',
|
|
5817
5818
|
'--neo-bc-active': 'var(--dd-base-600)',
|
|
5818
5819
|
};
|
|
5819
5820
|
case AccentEnumColor.Dark:
|
|
5820
5821
|
return {
|
|
5821
|
-
'--neo-bc-surface': 'var(--dd-
|
|
5822
|
-
'--neo-bc-text': 'var(--dd-
|
|
5823
|
-
'--neo-bc-link': 'var(--dd-
|
|
5824
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5825
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5826
|
-
'--neo-bc-active': 'var(--dd-
|
|
5822
|
+
'--neo-bc-surface': 'var(--dd-neo-ana-4)',
|
|
5823
|
+
'--neo-bc-text': 'var(--dd-neo-ana-4-contrast)',
|
|
5824
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5825
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-5)',
|
|
5826
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-3)',
|
|
5827
|
+
'--neo-bc-active': 'var(--dd-neo-ana-4-contrast)',
|
|
5827
5828
|
};
|
|
5828
5829
|
case AccentEnumColor.White:
|
|
5829
5830
|
default:
|
|
5830
5831
|
return {
|
|
5831
5832
|
'--neo-bc-surface': 'var(--dd-base-0)',
|
|
5832
5833
|
'--neo-bc-text': 'var(--dd-base-600)',
|
|
5833
|
-
'--neo-bc-link': 'var(--dd-
|
|
5834
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5835
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5834
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5835
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-5)',
|
|
5836
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-6)',
|
|
5836
5837
|
'--neo-bc-active': 'var(--dd-base-600)',
|
|
5837
5838
|
};
|
|
5838
5839
|
}
|
|
@@ -6182,7 +6183,7 @@ class TabsBlock {
|
|
|
6182
6183
|
this.activeVerticalTab.set(tab);
|
|
6183
6184
|
}
|
|
6184
6185
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6185
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"tabs-page\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeStyleTab().id === 'classic') {\n <!-- Description -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"feature-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorGray\">\n <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n\n <!-- API -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>tabs</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>tabChange</strong>\n <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"sub-title\">DuckDevTabItem</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>id</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>label</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>content</strong>\n <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Code -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n </div>\n\n <ng-template #tabsUsageTemplate>\n <pre class=\"accordion-code\"><code><duck-dev-tab\n [tabs]=\"tabs\"\n (tabChange)=\"onTabChange($event)\"\n>\n @if (activeTab().id === 'first') {{ '{' }}\n <p>First tab content</p>\n {{ '}' }}\n @if (activeTab().id === 'second') {{ '{' }}\n <p>Second tab content</p>\n {{ '}' }}\n</duck-dev-tab></code></pre>\n </ng-template>\n\n <ng-template #tabsUsageComponent>\n <pre\n class=\"accordion-code\"\n ><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '@angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '@jsverse/transloco';\n\n@Component({{ '{' }}\n imports: [DuckDevTab],\n // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n private readonly t = inject(TranslocoService);\n\n tabs: DuckDevTabItem[] = [\n {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n ];\n\n activeTab = signal<DuckDevTabItem>(this.tabs[0]);\n\n onTabChange(tab: DuckDevTabItem) {{ '{' }}\n this.activeTab.set(tab);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n [content]=\"tabsUsageTemplate\"\n [color]=\"colorOrange\"\n />\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n [content]=\"tabsUsageComponent\"\n [color]=\"colorViolet\"\n />\n </div>\n </dd-card-section>\n </section>\n\n <!-- Live demo -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n </div>\n\n <div class=\"live-demo\">\n <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n @if (activeDemoTab().id === 'overview') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'features') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'api') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n </div>\n }\n </duck-dev-tab>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Tip -->\n <section class=\"tab-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong>\n {{ 'tabsComponent.classicTip.text' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n } @else {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <duck-dev-tab-neobrutal\n [tabs]=\"neoHorizontalTabs\"\n (tabChange)=\"onHorizontalTabChange($event)\"\n >\n <ng-template ddTabPanel>\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerRush' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerDrop' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerReview' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n </ng-template>\n </duck-dev-tab-neobrutal>\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <div class=\"neo-demo-vertical\">\n <div class=\"neo-demo-vertical__sidebar\">\n @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-vertical-button\"\n [class.active]=\"activeVerticalTab().id === tab.id\"\n (click)=\"onVerticalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{\n i + 1 < 10 ? '0' + (i + 1) : i + 1\n }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-vertical__content\">\n @if (activeVerticalTab().id === 'pulse') {\n <article class=\"neo-story\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyPulseChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'stack') {\n <article class=\"neo-story neo-story-alt\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyStackChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'blast') {\n <article class=\"neo-story neo-story-dark\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyBlastChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\n </div>\n </dd-card-section>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [".tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevTabNeobrutal, selector: "duck-dev-tab-neobrutal", inputs: ["tabs", "color"], outputs: ["tabChange"] }, { kind: "directive", type: DdTabPanel, selector: "[ddTabPanel]" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6186
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"tabs-page\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <header class=\"page-header\">\n <div class=\"page-header__badges\">\n <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n </header>\n\n <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n @if (activeStyleTab().id === 'classic') {\n <!-- Description -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <div>\n <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n </div>\n </div>\n\n <div class=\"feature-cards\">\n <dd-card-minimal [color]=\"colorViolet\">\n <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorOrange\">\n <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n </dd-card-minimal>\n <dd-card-minimal [color]=\"colorGray\">\n <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n </dd-card-minimal>\n </div>\n </dd-card-section>\n </section>\n\n <!-- API -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n </div>\n\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>tabs</strong>\n <dd-badge\n [text]=\"'required'\"\n [color]=\"colorOrange\"\n [variant]=\"'soft'\"\n [size]=\"'sm'\"\n />\n <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>tabChange</strong>\n <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n </div>\n </div>\n\n <h3 class=\"sub-title\">DuckDevTabItem</h3>\n <div class=\"inputs-grid\">\n <div class=\"input-card\">\n <strong>id</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>label</strong>\n <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n </div>\n <div class=\"input-card\">\n <strong>content</strong>\n <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n </div>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Code -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n </div>\n\n <ng-template #tabsUsageTemplate>\n <pre class=\"accordion-code\"><code><duck-dev-tab\n [tabs]=\"tabs\"\n (tabChange)=\"onTabChange($event)\"\n>\n @if (activeTab().id === 'first') {{ '{' }}\n <p>First tab content</p>\n {{ '}' }}\n @if (activeTab().id === 'second') {{ '{' }}\n <p>Second tab content</p>\n {{ '}' }}\n</duck-dev-tab></code></pre>\n </ng-template>\n\n <ng-template #tabsUsageComponent>\n <pre\n class=\"accordion-code\"\n ><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '@angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '@jsverse/transloco';\n\n@Component({{ '{' }}\n imports: [DuckDevTab],\n // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n private readonly t = inject(TranslocoService);\n\n tabs: DuckDevTabItem[] = [\n {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n ];\n\n activeTab = signal<DuckDevTabItem>(this.tabs[0]);\n\n onTabChange(tab: DuckDevTabItem) {{ '{' }}\n this.activeTab.set(tab);\n {{ '}' }}\n{{ '}' }}</code></pre>\n </ng-template>\n\n <div class=\"accordion-row\">\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n [content]=\"tabsUsageTemplate\"\n [color]=\"colorOrange\"\n />\n <duck-dev-accordion\n [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n [content]=\"tabsUsageComponent\"\n [color]=\"colorViolet\"\n />\n </div>\n </dd-card-section>\n </section>\n\n <!-- Live demo -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n </div>\n\n <div class=\"live-demo\">\n <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n @if (activeDemoTab().id === 'overview') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'features') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n </div>\n }\n @if (activeDemoTab().id === 'api') {\n <div class=\"demo-panel\">\n <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n </div>\n }\n </duck-dev-tab>\n </div>\n </dd-card-section>\n </section>\n\n <!-- Tip -->\n <section class=\"tab-section\">\n <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n <p>\n <strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong>\n {{ 'tabsComponent.classicTip.text' | transloco }}\n </p>\n </dd-speaker-bubble-soft>\n </section>\n } @else {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <duck-dev-tab-neobrutal\n [tabs]=\"neoHorizontalTabs\"\n (tabChange)=\"onHorizontalTabChange($event)\"\n >\n <ng-template ddTabPanel>\n <article class=\"neo-panel\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerRush' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-alt\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerDrop' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n </article>\n </ng-template>\n <ng-template ddTabPanel>\n <article class=\"neo-panel neo-panel-dark\">\n <span class=\"neo-kicker\">{{\n 'tabsComponent.neobrutal.kickerReview' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n </article>\n </ng-template>\n </duck-dev-tab-neobrutal>\n </div>\n </dd-card-section>\n </section>\n\n <section class=\"tab-section\">\n <dd-card-section>\n <div class=\"tab-section__head\">\n <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n </div>\n\n <div class=\"example-shell\">\n <div class=\"neo-demo-vertical\">\n <div class=\"neo-demo-vertical__sidebar\">\n @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n <button\n class=\"neo-demo-vertical-button\"\n [class.active]=\"activeVerticalTab().id === tab.id\"\n (click)=\"onVerticalTabChange(tab)\"\n type=\"button\"\n >\n <span class=\"neo-demo-tab-number\">{{\n i + 1 < 10 ? '0' + (i + 1) : i + 1\n }}</span>\n <span>{{ tab.label }}</span>\n </button>\n }\n </div>\n\n <div class=\"neo-demo-vertical__content\">\n @if (activeVerticalTab().id === 'pulse') {\n <article class=\"neo-story\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyPulseChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'stack') {\n <article class=\"neo-story neo-story-alt\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyStackChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n </article>\n }\n @if (activeVerticalTab().id === 'blast') {\n <article class=\"neo-story neo-story-dark\">\n <span class=\"neo-chip\">{{\n 'tabsComponent.neobrutal.storyBlastChip' | transloco\n }}</span>\n <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n </article>\n }\n </div>\n </div>\n </div>\n </dd-card-section>\n </section>\n }\n </duck-dev-tab>\n</div>\n", styles: [".tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevTabNeobrutal, selector: "duck-dev-tab-neobrutal", inputs: ["tabs", "color", "showContentWrapper"], outputs: ["tabChange"] }, { kind: "directive", type: DdTabPanel, selector: "[ddTabPanel]" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6186
6187
|
}
|
|
6187
6188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, decorators: [{
|
|
6188
6189
|
type: Component,
|