duck-dev-lib 0.1.6 → 0.1.8
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.
|
@@ -779,7 +779,7 @@ class ButtonNeobrutalZigzag {
|
|
|
779
779
|
colorButton = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
780
780
|
buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
781
781
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalZigzag, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
782
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalZigzag, isStandalone: true, selector: "duck-dev-button-neobrutal-zigzag", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dd-button--full-width": "fullWidth()", "class.dd-button--truncate": "truncate()", "class.dd-button--wrap": "wrapLabel()" } }, ngImport: i0, template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">\n <span class=\"zigzag-text__projected\"><ng-content></ng-content></span>\n <span class=\"zigzag-text__default\">{{ text() }}</span>\n </span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\">\n <svg class=\"zigzag-edge__svg\" viewBox=\"0 0 100 14\" preserveAspectRatio=\"none\">\n <path\n class=\"zigzag-edge__shape\"\n d=\"M 0 0 L 5 14 L 10 0 L 15 14 L 20 0 L 25 14 L 30 0 L 35 14 L 40 0 L 45 14 L 50 0 L 55 14 L 60 0 L 65 14 L 70 0 L 75 14 L 80 0 L 85 14 L 90 0 L 95 14 L 100 0\"\n />\n </svg>\n </span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-zigzag{position:relative;display:flex;flex-direction:column;align-items:stretch;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 200px);padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--neo-text);transition:transform .2s ease}.neo-zigzag:hover,.neo-zigzag:focus-visible{transform:translateY(-4px)}.neo-zigzag:hover .zigzag-body,.neo-zigzag:focus-visible .zigzag-body{box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow)}.neo-zigzag:hover .zigzag-edge,.neo-zigzag:focus-visible .zigzag-edge{transform:translateY(2px)}.neo-zigzag:active{transform:translateY(2px)}.neo-zigzag:active .zigzag-body{box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-zigzag:disabled{cursor:not-allowed;opacity:.6;transform:none}.zigzag-body{position:relative;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.3rem;border:3px solid var(--dd-neo-ink);border-bottom:none;border-radius:8px 8px 0 0;background:var(--neo-surface);box-shadow:4px 4px 0 var(--neo-shadow),4px 4px 0 3px var(--dd-neo-shadow);transition:box-shadow .2s ease}.zigzag-label{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.zigzag-text{font-size:.95rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.zigzag-text__projected,.zigzag-text__default{display:contents}.zigzag-text__projected:not(:empty)+.zigzag-text__default{display:none}:host(.dd-button--full-width) .zigzag-body{box-sizing:border-box}:host(.dd-button--truncate) .zigzag-body{min-width:0}:host(.dd-button--truncate) .zigzag-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .zigzag-text{display:block;white-space:normal;overflow-wrap:anywhere}.zigzag-edge{position:relative;display:block;width:100%;height:14px;margin-top:-1px;color:var(--dd-neo-ink);transition:transform .2s ease}.zigzag-edge:before{content:\"\";position:absolute;inset:0;background:var(--neo-surface);clip-path:polygon(0% 0%,5% 100%,10% 0%,15% 100%,20% 0%,25% 100%,30% 0%,35% 100%,40% 0%,45% 100%,50% 0%,55% 100%,60% 0%,65% 100%,70% 0%,75% 100%,80% 0%,85% 100%,90% 0%,95% 100%,100% 0%)}.zigzag-edge__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.zigzag-edge__shape{fill:none;stroke:currentColor;stroke-linecap:butt;stroke-linejoin:miter;stroke-width:
|
|
782
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalZigzag, isStandalone: true, selector: "duck-dev-button-neobrutal-zigzag", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dd-button--full-width": "fullWidth()", "class.dd-button--truncate": "truncate()", "class.dd-button--wrap": "wrapLabel()" } }, ngImport: i0, template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">\n <span class=\"zigzag-text__projected\"><ng-content></ng-content></span>\n <span class=\"zigzag-text__default\">{{ text() }}</span>\n </span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\">\n <svg class=\"zigzag-edge__svg\" viewBox=\"0 0 100 14\" preserveAspectRatio=\"none\">\n <path\n class=\"zigzag-edge__shape\"\n d=\"M 0 0 L 5 14 L 10 0 L 15 14 L 20 0 L 25 14 L 30 0 L 35 14 L 40 0 L 45 14 L 50 0 L 55 14 L 60 0 L 65 14 L 70 0 L 75 14 L 80 0 L 85 14 L 90 0 L 95 14 L 100 0\"\n />\n </svg>\n </span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-zigzag{position:relative;display:flex;flex-direction:column;align-items:stretch;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 200px);padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--neo-text);transition:transform .2s ease}.neo-zigzag:hover,.neo-zigzag:focus-visible{transform:translateY(-4px)}.neo-zigzag:hover .zigzag-body,.neo-zigzag:focus-visible .zigzag-body{box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow)}.neo-zigzag:hover .zigzag-edge,.neo-zigzag:focus-visible .zigzag-edge{transform:translateY(2px)}.neo-zigzag:active{transform:translateY(2px)}.neo-zigzag:active .zigzag-body{box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-zigzag:disabled{cursor:not-allowed;opacity:.6;transform:none}.zigzag-body{position:relative;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.3rem;border:3px solid var(--dd-neo-ink);border-bottom:none;border-radius:8px 8px 0 0;background:var(--neo-surface);box-shadow:4px 4px 0 var(--neo-shadow),4px 4px 0 3px var(--dd-neo-shadow);transition:box-shadow .2s ease}.zigzag-label{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.zigzag-text{font-size:.95rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.zigzag-text__projected,.zigzag-text__default{display:contents}.zigzag-text__projected:not(:empty)+.zigzag-text__default{display:none}:host(.dd-button--full-width) .zigzag-body{box-sizing:border-box}:host(.dd-button--truncate) .zigzag-body{min-width:0}:host(.dd-button--truncate) .zigzag-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .zigzag-text{display:block;white-space:normal;overflow-wrap:anywhere}.zigzag-edge{position:relative;display:block;width:100%;height:14px;margin-top:-1px;color:var(--dd-neo-ink);transition:transform .2s ease}.zigzag-edge:before{content:\"\";position:absolute;inset:0;background:var(--neo-surface);clip-path:polygon(0% 0%,5% 100%,10% 0%,15% 100%,20% 0%,25% 100%,30% 0%,35% 100%,40% 0%,45% 100%,50% 0%,55% 100%,60% 0%,65% 100%,70% 0%,75% 100%,80% 0%,85% 100%,90% 0%,95% 100%,100% 0%)}.zigzag-edge__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.zigzag-edge__shape{fill:none;stroke:currentColor;stroke-linecap:butt;stroke-linejoin:miter;stroke-width:3;vector-effect:non-scaling-stroke}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
783
783
|
}
|
|
784
784
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalZigzag, decorators: [{
|
|
785
785
|
type: Component,
|
|
@@ -787,7 +787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
787
787
|
'[class.dd-button--full-width]': 'fullWidth()',
|
|
788
788
|
'[class.dd-button--truncate]': 'truncate()',
|
|
789
789
|
'[class.dd-button--wrap]': 'wrapLabel()',
|
|
790
|
-
}, template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">\n <span class=\"zigzag-text__projected\"><ng-content></ng-content></span>\n <span class=\"zigzag-text__default\">{{ text() }}</span>\n </span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\">\n <svg class=\"zigzag-edge__svg\" viewBox=\"0 0 100 14\" preserveAspectRatio=\"none\">\n <path\n class=\"zigzag-edge__shape\"\n d=\"M 0 0 L 5 14 L 10 0 L 15 14 L 20 0 L 25 14 L 30 0 L 35 14 L 40 0 L 45 14 L 50 0 L 55 14 L 60 0 L 65 14 L 70 0 L 75 14 L 80 0 L 85 14 L 90 0 L 95 14 L 100 0\"\n />\n </svg>\n </span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-zigzag{position:relative;display:flex;flex-direction:column;align-items:stretch;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 200px);padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--neo-text);transition:transform .2s ease}.neo-zigzag:hover,.neo-zigzag:focus-visible{transform:translateY(-4px)}.neo-zigzag:hover .zigzag-body,.neo-zigzag:focus-visible .zigzag-body{box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow)}.neo-zigzag:hover .zigzag-edge,.neo-zigzag:focus-visible .zigzag-edge{transform:translateY(2px)}.neo-zigzag:active{transform:translateY(2px)}.neo-zigzag:active .zigzag-body{box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-zigzag:disabled{cursor:not-allowed;opacity:.6;transform:none}.zigzag-body{position:relative;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.3rem;border:3px solid var(--dd-neo-ink);border-bottom:none;border-radius:8px 8px 0 0;background:var(--neo-surface);box-shadow:4px 4px 0 var(--neo-shadow),4px 4px 0 3px var(--dd-neo-shadow);transition:box-shadow .2s ease}.zigzag-label{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.zigzag-text{font-size:.95rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.zigzag-text__projected,.zigzag-text__default{display:contents}.zigzag-text__projected:not(:empty)+.zigzag-text__default{display:none}:host(.dd-button--full-width) .zigzag-body{box-sizing:border-box}:host(.dd-button--truncate) .zigzag-body{min-width:0}:host(.dd-button--truncate) .zigzag-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .zigzag-text{display:block;white-space:normal;overflow-wrap:anywhere}.zigzag-edge{position:relative;display:block;width:100%;height:14px;margin-top:-1px;color:var(--dd-neo-ink);transition:transform .2s ease}.zigzag-edge:before{content:\"\";position:absolute;inset:0;background:var(--neo-surface);clip-path:polygon(0% 0%,5% 100%,10% 0%,15% 100%,20% 0%,25% 100%,30% 0%,35% 100%,40% 0%,45% 100%,50% 0%,55% 100%,60% 0%,65% 100%,70% 0%,75% 100%,80% 0%,85% 100%,90% 0%,95% 100%,100% 0%)}.zigzag-edge__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.zigzag-edge__shape{fill:none;stroke:currentColor;stroke-linecap:butt;stroke-linejoin:miter;stroke-width:
|
|
790
|
+
}, template: "<button class=\"neo-zigzag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n <span class=\"zigzag-body\">\n <span class=\"zigzag-label\">{{ label() }}</span>\n <span class=\"zigzag-text\">\n <span class=\"zigzag-text__projected\"><ng-content></ng-content></span>\n <span class=\"zigzag-text__default\">{{ text() }}</span>\n </span>\n </span>\n <span class=\"zigzag-edge\" aria-hidden=\"true\">\n <svg class=\"zigzag-edge__svg\" viewBox=\"0 0 100 14\" preserveAspectRatio=\"none\">\n <path\n class=\"zigzag-edge__shape\"\n d=\"M 0 0 L 5 14 L 10 0 L 15 14 L 20 0 L 25 14 L 30 0 L 35 14 L 40 0 L 45 14 L 50 0 L 55 14 L 60 0 L 65 14 L 70 0 L 75 14 L 80 0 L 85 14 L 90 0 L 95 14 L 100 0\"\n />\n </svg>\n </span>\n</button>\n", styles: [":host{display:var(--dd-button-display, inline-block);width:var(--dd-button-width, auto)}:host(.dd-button--full-width){--dd-button-display: block;--dd-button-width: 100%;--dd-button-min-width: 0}.neo-zigzag{position:relative;display:flex;flex-direction:column;align-items:stretch;width:var(--dd-button-width, auto);min-width:var(--dd-button-min-width, 200px);padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:var(--neo-text);transition:transform .2s ease}.neo-zigzag:hover,.neo-zigzag:focus-visible{transform:translateY(-4px)}.neo-zigzag:hover .zigzag-body,.neo-zigzag:focus-visible .zigzag-body{box-shadow:6px 6px 0 var(--neo-shadow),6px 6px 0 3px var(--dd-neo-shadow)}.neo-zigzag:hover .zigzag-edge,.neo-zigzag:focus-visible .zigzag-edge{transform:translateY(2px)}.neo-zigzag:active{transform:translateY(2px)}.neo-zigzag:active .zigzag-body{box-shadow:2px 2px 0 var(--neo-shadow),2px 2px 0 3px var(--dd-neo-shadow)}.neo-zigzag:disabled{cursor:not-allowed;opacity:.6;transform:none}.zigzag-body{position:relative;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.3rem;border:3px solid var(--dd-neo-ink);border-bottom:none;border-radius:8px 8px 0 0;background:var(--neo-surface);box-shadow:4px 4px 0 var(--neo-shadow),4px 4px 0 3px var(--dd-neo-shadow);transition:box-shadow .2s ease}.zigzag-label{display:inline-flex;align-items:center;justify-content:center;padding:.2rem .5rem;border:2px solid var(--dd-neo-ink);border-radius:4px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0}.zigzag-text{font-size:.95rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.zigzag-text__projected,.zigzag-text__default{display:contents}.zigzag-text__projected:not(:empty)+.zigzag-text__default{display:none}:host(.dd-button--full-width) .zigzag-body{box-sizing:border-box}:host(.dd-button--truncate) .zigzag-body{min-width:0}:host(.dd-button--truncate) .zigzag-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.dd-button--wrap) .zigzag-text{display:block;white-space:normal;overflow-wrap:anywhere}.zigzag-edge{position:relative;display:block;width:100%;height:14px;margin-top:-1px;color:var(--dd-neo-ink);transition:transform .2s ease}.zigzag-edge:before{content:\"\";position:absolute;inset:0;background:var(--neo-surface);clip-path:polygon(0% 0%,5% 100%,10% 0%,15% 100%,20% 0%,25% 100%,30% 0%,35% 100%,40% 0%,45% 100%,50% 0%,55% 100%,60% 0%,65% 100%,70% 0%,75% 100%,80% 0%,85% 100%,90% 0%,95% 100%,100% 0%)}.zigzag-edge__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.zigzag-edge__shape{fill:none;stroke:currentColor;stroke-linecap:butt;stroke-linejoin:miter;stroke-width:3;vector-effect:non-scaling-stroke}\n"] }]
|
|
791
791
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], wrapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapLabel", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
|
|
792
792
|
|
|
793
793
|
class ButtonNeobrutalTape {
|
|
@@ -996,11 +996,11 @@ class DuckDevTabNeobrutal {
|
|
|
996
996
|
return 'hidden';
|
|
997
997
|
}
|
|
998
998
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
999
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabNeobrutal, isStandalone: true, selector: "duck-dev-tab-neobrutal", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showContentWrapper: { classPropertyName: "showContentWrapper", publicName: "showContentWrapper", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, queries: [{ propertyName: "panels", predicate: DdTabPanel, isSignal: true }], ngImport: i0, template: "<div class=\"dd-tab-neo\" [class.dd-tab-neo--stretch]=\"stretchTabs()\" [attr.data-color]=\"color()\">\n <div class=\"dd-tab-neo__header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"dd-tab-neo__button\"\n [class.dd-tab-neo__button--active]=\"activeIndex() === i\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n <span class=\"dd-tab-neo__number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span class=\"dd-tab-neo__label\">{{ tab.label }}</span>\n </button>\n }\n </div>\n\n @if (showContentWrapper()) {\n <div\n class=\"dd-tab-neo__viewport\"\n [class.dd-tab-neo__viewport--animating]=\"isAnimating()\"\n [class.dd-tab-neo__viewport--left]=\"isAnimating() && direction() === 'left'\"\n [class.dd-tab-neo__viewport--right]=\"isAnimating() && direction() === 'right'\"\n >\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\n } @else {\n <div class=\"dd-tab-neo__content-bare\">\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-1);--dd-tab-neo-text: var(--dd-neo-ink);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-2);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-2)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-2);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6);--dd-tab-neo-number-bg: var(--dd-neo-ana-1)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-neo-ana-4);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-neo-ink);--dd-tab-neo-accent: var(--dd-neo-ana-3);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-5);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-5);--dd-tab-neo-number-bg: var(--dd-neo-ana-3);--dd-tab-neo-text: var(--dd-neo-paper)}.dd-tab-neo__header{display:flex;flex-wrap:wrap;gap:.85rem}.dd-tab-neo--stretch .dd-tab-neo__header{width:100%}.dd-tab-neo--stretch .dd-tab-neo__button{flex:1 1 0;min-width:0;justify-content:center}.dd-tab-neo__button{display:inline-flex;align-items:center;gap:.75rem;min-width:140px;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:
|
|
999
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabNeobrutal, isStandalone: true, selector: "duck-dev-tab-neobrutal", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showContentWrapper: { classPropertyName: "showContentWrapper", publicName: "showContentWrapper", isSignal: true, isRequired: false, transformFunction: null }, stretchTabs: { classPropertyName: "stretchTabs", publicName: "stretchTabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, queries: [{ propertyName: "panels", predicate: DdTabPanel, isSignal: true }], ngImport: i0, template: "<div class=\"dd-tab-neo\" [class.dd-tab-neo--stretch]=\"stretchTabs()\" [attr.data-color]=\"color()\">\n <div class=\"dd-tab-neo__header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"dd-tab-neo__button\"\n [class.dd-tab-neo__button--active]=\"activeIndex() === i\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n <span class=\"dd-tab-neo__number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span class=\"dd-tab-neo__label\">{{ tab.label }}</span>\n </button>\n }\n </div>\n\n @if (showContentWrapper()) {\n <div\n class=\"dd-tab-neo__viewport\"\n [class.dd-tab-neo__viewport--animating]=\"isAnimating()\"\n [class.dd-tab-neo__viewport--left]=\"isAnimating() && direction() === 'left'\"\n [class.dd-tab-neo__viewport--right]=\"isAnimating() && direction() === 'right'\"\n >\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\n } @else {\n <div class=\"dd-tab-neo__content-bare\">\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-1);--dd-tab-neo-text: var(--dd-neo-ink);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-2);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-2)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-2);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6);--dd-tab-neo-number-bg: var(--dd-neo-ana-1)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-neo-ana-4);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-neo-ink);--dd-tab-neo-accent: var(--dd-neo-ana-3);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-5);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-5);--dd-tab-neo-number-bg: var(--dd-neo-ana-3);--dd-tab-neo-text: var(--dd-neo-paper)}.dd-tab-neo__header{display:flex;flex-wrap:wrap;gap:.85rem}.dd-tab-neo--stretch .dd-tab-neo__header{width:100%}.dd-tab-neo--stretch .dd-tab-neo__button{flex:1 1 0;min-width:0;justify-content:center}.dd-tab-neo__button{display:inline-flex;align-items:center;gap:.75rem;min-width:140px;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-tab-neo-surface);color:var(--dd-tab-neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:6px 6px 0 var(--dd-tab-neo-btn-shadow);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;-webkit-tap-highlight-color:transparent}.dd-tab-neo__button:hover,.dd-tab-neo__button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button:focus-visible{outline:3px solid var(--dd-tab-neo-accent);outline-offset:2px}.dd-tab-neo__button--active{background:var(--dd-tab-neo-active-bg);box-shadow:8px 8px 0 var(--dd-tab-neo-active-shadow);transform:translate(-3px,-3px) rotate(-1deg)}.dd-tab-neo__button--active:hover{transform:translate(-4px,-4px) rotate(-1.5deg);box-shadow:10px 10px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:3px solid currentColor;border-radius:12px;background:var(--dd-tab-neo-number-bg);color:var(--dd-neo-ink);font-size:.72rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.dd-tab-neo__label{font-size:.82rem}.dd-tab-neo__viewport{position:relative;overflow:var(--dd-tab-neo-viewport-overflow, hidden);perspective:1200px;border:var(--dd-tab-neo-viewport-border, 3px solid var(--dd-neo-ink));border-radius:var(--dd-tab-neo-viewport-radius, 28px);background:var(--dd-tab-neo-viewport-background, linear-gradient(135deg, color-mix(in srgb, var(--dd-tab-neo-accent) 40%, transparent) 0 14px, transparent 14px) top left/42px 42px no-repeat, var(--dd-tab-neo-surface));box-shadow:var(--dd-tab-neo-viewport-shadow, 10px 10px 0 var(--dd-tab-neo-content-shadow));min-height:var(--dd-tab-neo-viewport-min-height, 100px);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1)}.dd-tab-neo__viewport--animating{animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__viewport--right{animation-name:neoViewportShakeRight}.dd-tab-neo__viewport--left{animation-name:neoViewportShakeLeft}.dd-tab-neo__content-bare{position:relative;overflow:var(--dd-tab-neo-viewport-overflow, hidden);perspective:1200px;min-height:var(--dd-tab-neo-viewport-min-height, 100px)}.dd-tab-neo__panel{padding:var(--dd-tab-neo-panel-padding, 1.25rem)}.dd-tab-neo__panel--active{position:relative}.dd-tab-neo__panel--hidden{display:none}.dd-tab-neo__panel--leave-left,.dd-tab-neo__panel--leave-right{position:absolute;top:0;left:0;right:0;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--leave-left{animation-name:neoFlipLeaveLeft}.dd-tab-neo__panel--leave-right{animation-name:neoFlipLeaveRight}.dd-tab-neo__panel--enter-right,.dd-tab-neo__panel--enter-left{position:relative;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--enter-right{animation-name:neoFlipEnterRight}.dd-tab-neo__panel--enter-left{animation-name:neoFlipEnterLeft}@keyframes neoFlipEnterRight{0%{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveLeft{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}}@keyframes neoFlipEnterLeft{0%{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveRight{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}}@keyframes neoViewportShakeRight{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(4px,-2px) rotate(.5deg);box-shadow:6px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(-2px,1px) rotate(-.3deg);box-shadow:12px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@keyframes neoViewportShakeLeft{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(-4px,-2px) rotate(-.5deg);box-shadow:14px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(2px,1px) rotate(.3deg);box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@media(max-width:640px){.dd-tab-neo__header{gap:.6rem}.dd-tab-neo__button{min-width:110px;padding:.7rem .85rem;box-shadow:4px 4px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button--active{box-shadow:6px 6px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{width:32px;height:32px}.dd-tab-neo__viewport{border-radius:22px;box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}.dd-tab-neo__panel{padding:var(--dd-tab-neo-panel-padding, 1rem)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1000
1000
|
}
|
|
1001
1001
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabNeobrutal, decorators: [{
|
|
1002
1002
|
type: Component,
|
|
1003
|
-
args: [{ selector: 'duck-dev-tab-neobrutal', standalone: true, imports: [NgTemplateOutlet], template: "<div class=\"dd-tab-neo\" [class.dd-tab-neo--stretch]=\"stretchTabs()\" [attr.data-color]=\"color()\">\n <div class=\"dd-tab-neo__header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"dd-tab-neo__button\"\n [class.dd-tab-neo__button--active]=\"activeIndex() === i\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n <span class=\"dd-tab-neo__number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span class=\"dd-tab-neo__label\">{{ tab.label }}</span>\n </button>\n }\n </div>\n\n @if (showContentWrapper()) {\n <div\n class=\"dd-tab-neo__viewport\"\n [class.dd-tab-neo__viewport--animating]=\"isAnimating()\"\n [class.dd-tab-neo__viewport--left]=\"isAnimating() && direction() === 'left'\"\n [class.dd-tab-neo__viewport--right]=\"isAnimating() && direction() === 'right'\"\n >\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\n } @else {\n <div class=\"dd-tab-neo__content-bare\">\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-1);--dd-tab-neo-text: var(--dd-neo-ink);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-2);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-2)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-2);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6);--dd-tab-neo-number-bg: var(--dd-neo-ana-1)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-neo-ana-4);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-neo-ink);--dd-tab-neo-accent: var(--dd-neo-ana-3);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-5);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-5);--dd-tab-neo-number-bg: var(--dd-neo-ana-3);--dd-tab-neo-text: var(--dd-neo-paper)}.dd-tab-neo__header{display:flex;flex-wrap:wrap;gap:.85rem}.dd-tab-neo--stretch .dd-tab-neo__header{width:100%}.dd-tab-neo--stretch .dd-tab-neo__button{flex:1 1 0;min-width:0;justify-content:center}.dd-tab-neo__button{display:inline-flex;align-items:center;gap:.75rem;min-width:140px;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:
|
|
1003
|
+
args: [{ selector: 'duck-dev-tab-neobrutal', standalone: true, imports: [NgTemplateOutlet], template: "<div class=\"dd-tab-neo\" [class.dd-tab-neo--stretch]=\"stretchTabs()\" [attr.data-color]=\"color()\">\n <div class=\"dd-tab-neo__header\">\n @for (tab of tabs(); track tab.id; let i = $index) {\n <button\n class=\"dd-tab-neo__button\"\n [class.dd-tab-neo__button--active]=\"activeIndex() === i\"\n (click)=\"selectTab(i)\"\n type=\"button\"\n >\n <span class=\"dd-tab-neo__number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n <span class=\"dd-tab-neo__label\">{{ tab.label }}</span>\n </button>\n }\n </div>\n\n @if (showContentWrapper()) {\n <div\n class=\"dd-tab-neo__viewport\"\n [class.dd-tab-neo__viewport--animating]=\"isAnimating()\"\n [class.dd-tab-neo__viewport--left]=\"isAnimating() && direction() === 'left'\"\n [class.dd-tab-neo__viewport--right]=\"isAnimating() && direction() === 'right'\"\n >\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\n } @else {\n <div class=\"dd-tab-neo__content-bare\">\n @for (panel of panels(); track $index; let i = $index) {\n @if (isVisible(i)) {\n <div [class]=\"'dd-tab-neo__panel dd-tab-neo__panel--' + panelClass(i)\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.dd-tab-neo{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-1);--dd-tab-neo-text: var(--dd-neo-ink);display:flex;flex-direction:column;gap:1rem;width:100%}.dd-tab-neo[data-color=violet]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-2);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-2);--dd-tab-neo-number-bg: var(--dd-neo-ana-2)}.dd-tab-neo[data-color=orange]{--dd-tab-neo-surface: var(--dd-neo-paper);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-2);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6);--dd-tab-neo-number-bg: var(--dd-neo-ana-1)}.dd-tab-neo[data-color=gray]{--dd-tab-neo-surface: var(--dd-neo-ana-4);--dd-tab-neo-accent: var(--dd-neo-ana-1);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-6);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-6)}.dd-tab-neo[data-color=dark]{--dd-tab-neo-surface: var(--dd-neo-ink);--dd-tab-neo-accent: var(--dd-neo-ana-3);--dd-tab-neo-btn-shadow: var(--dd-neo-ana-5);--dd-tab-neo-active-bg: var(--dd-neo-ana-3);--dd-tab-neo-active-shadow: var(--dd-neo-ana-1);--dd-tab-neo-content-shadow: var(--dd-neo-ana-5);--dd-tab-neo-number-bg: var(--dd-neo-ana-3);--dd-tab-neo-text: var(--dd-neo-paper)}.dd-tab-neo__header{display:flex;flex-wrap:wrap;gap:.85rem}.dd-tab-neo--stretch .dd-tab-neo__header{width:100%}.dd-tab-neo--stretch .dd-tab-neo__button{flex:1 1 0;min-width:0;justify-content:center}.dd-tab-neo__button{display:inline-flex;align-items:center;gap:.75rem;min-width:140px;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-tab-neo-surface);color:var(--dd-tab-neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:6px 6px 0 var(--dd-tab-neo-btn-shadow);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;-webkit-tap-highlight-color:transparent}.dd-tab-neo__button:hover,.dd-tab-neo__button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button:focus-visible{outline:3px solid var(--dd-tab-neo-accent);outline-offset:2px}.dd-tab-neo__button--active{background:var(--dd-tab-neo-active-bg);box-shadow:8px 8px 0 var(--dd-tab-neo-active-shadow);transform:translate(-3px,-3px) rotate(-1deg)}.dd-tab-neo__button--active:hover{transform:translate(-4px,-4px) rotate(-1.5deg);box-shadow:10px 10px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:3px solid currentColor;border-radius:12px;background:var(--dd-tab-neo-number-bg);color:var(--dd-neo-ink);font-size:.72rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.dd-tab-neo__label{font-size:.82rem}.dd-tab-neo__viewport{position:relative;overflow:var(--dd-tab-neo-viewport-overflow, hidden);perspective:1200px;border:var(--dd-tab-neo-viewport-border, 3px solid var(--dd-neo-ink));border-radius:var(--dd-tab-neo-viewport-radius, 28px);background:var(--dd-tab-neo-viewport-background, linear-gradient(135deg, color-mix(in srgb, var(--dd-tab-neo-accent) 40%, transparent) 0 14px, transparent 14px) top left/42px 42px no-repeat, var(--dd-tab-neo-surface));box-shadow:var(--dd-tab-neo-viewport-shadow, 10px 10px 0 var(--dd-tab-neo-content-shadow));min-height:var(--dd-tab-neo-viewport-min-height, 100px);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1)}.dd-tab-neo__viewport--animating{animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__viewport--right{animation-name:neoViewportShakeRight}.dd-tab-neo__viewport--left{animation-name:neoViewportShakeLeft}.dd-tab-neo__content-bare{position:relative;overflow:var(--dd-tab-neo-viewport-overflow, hidden);perspective:1200px;min-height:var(--dd-tab-neo-viewport-min-height, 100px)}.dd-tab-neo__panel{padding:var(--dd-tab-neo-panel-padding, 1.25rem)}.dd-tab-neo__panel--active{position:relative}.dd-tab-neo__panel--hidden{display:none}.dd-tab-neo__panel--leave-left,.dd-tab-neo__panel--leave-right{position:absolute;top:0;left:0;right:0;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--leave-left{animation-name:neoFlipLeaveLeft}.dd-tab-neo__panel--leave-right{animation-name:neoFlipLeaveRight}.dd-tab-neo__panel--enter-right,.dd-tab-neo__panel--enter-left{position:relative;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}.dd-tab-neo__panel--enter-right{animation-name:neoFlipEnterRight}.dd-tab-neo__panel--enter-left{animation-name:neoFlipEnterLeft}@keyframes neoFlipEnterRight{0%{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveLeft{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}}@keyframes neoFlipEnterLeft{0%{transform:translate(-80%) rotateY(18deg) scale(.88);opacity:0;filter:blur(3px)}to{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}}@keyframes neoFlipLeaveRight{0%{transform:translate(0) rotateY(0) scale(1);opacity:1;filter:blur(0)}to{transform:translate(80%) rotateY(-18deg) scale(.88);opacity:0;filter:blur(3px)}}@keyframes neoViewportShakeRight{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(4px,-2px) rotate(.5deg);box-shadow:6px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(-2px,1px) rotate(-.3deg);box-shadow:12px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@keyframes neoViewportShakeLeft{0%{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}25%{transform:translate(-4px,-2px) rotate(-.5deg);box-shadow:14px 12px 0 var(--dd-tab-neo-content-shadow)}50%{transform:translate(2px,1px) rotate(.3deg);box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}to{transform:translate(0) rotate(0);box-shadow:10px 10px 0 var(--dd-tab-neo-content-shadow)}}@media(max-width:640px){.dd-tab-neo__header{gap:.6rem}.dd-tab-neo__button{min-width:110px;padding:.7rem .85rem;box-shadow:4px 4px 0 var(--dd-tab-neo-btn-shadow)}.dd-tab-neo__button--active{box-shadow:6px 6px 0 var(--dd-tab-neo-active-shadow)}.dd-tab-neo__number{width:32px;height:32px}.dd-tab-neo__viewport{border-radius:22px;box-shadow:8px 8px 0 var(--dd-tab-neo-content-shadow)}.dd-tab-neo__panel{padding:var(--dd-tab-neo-panel-padding, 1rem)}}\n"] }]
|
|
1004
1004
|
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showContentWrapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showContentWrapper", required: false }] }], stretchTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretchTabs", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DdTabPanel), { isSignal: true }] }] } });
|
|
1005
1005
|
|
|
1006
1006
|
class DuckDevInput {
|