duck-dev-lib 0.0.75 → 0.0.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/{duck-dev-lib-en-BUr6Xr1h.mjs → duck-dev-lib-en-XYugblp4.mjs} +62 -3
- package/fesm2022/{duck-dev-lib-ru-BxtBEpPE.mjs.map → duck-dev-lib-en-XYugblp4.mjs.map} +1 -1
- package/fesm2022/{duck-dev-lib-ru-BxtBEpPE.mjs → duck-dev-lib-ru-BBQhEnLr.mjs} +62 -3
- package/fesm2022/{duck-dev-lib-en-BUr6Xr1h.mjs.map → duck-dev-lib-ru-BBQhEnLr.mjs.map} +1 -1
- package/fesm2022/duck-dev-lib.mjs +362 -12
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/duck-dev-lib.d.ts +77 -2
|
@@ -6330,11 +6330,53 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
6330
6330
|
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
6331
6331
|
isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
|
|
6332
6332
|
navigate = output();
|
|
6333
|
-
|
|
6334
|
-
|
|
6333
|
+
listRef = viewChild('listEl', { ...(ngDevMode ? { debugName: "listRef" } : {}) });
|
|
6334
|
+
visibleItems = computed(() => this.items(), { ...(ngDevMode ? { debugName: "visibleItems" } : {}) });
|
|
6335
6335
|
breadcrumbStyle = computed(() => this.getPalette(this.color()), { ...(ngDevMode ? { debugName: "breadcrumbStyle" } : {}) });
|
|
6336
6336
|
activePopoverIndex = signal(null, { ...(ngDevMode ? { debugName: "activePopoverIndex" } : {}) });
|
|
6337
|
+
isDragging = signal(false, { ...(ngDevMode ? { debugName: "isDragging" } : {}) });
|
|
6338
|
+
dragStartX = 0;
|
|
6339
|
+
scrollStartX = 0;
|
|
6340
|
+
hasDragged = false;
|
|
6341
|
+
destroyRef = inject(DestroyRef);
|
|
6342
|
+
onMouseMove = (e) => {
|
|
6343
|
+
const el = this.listRef()?.nativeElement;
|
|
6344
|
+
if (!el)
|
|
6345
|
+
return;
|
|
6346
|
+
e.preventDefault();
|
|
6347
|
+
const dx = e.clientX - this.dragStartX;
|
|
6348
|
+
el.scrollLeft = this.scrollStartX - dx;
|
|
6349
|
+
if (Math.abs(dx) > 3) {
|
|
6350
|
+
this.hasDragged = true;
|
|
6351
|
+
}
|
|
6352
|
+
};
|
|
6353
|
+
onMouseUp = () => {
|
|
6354
|
+
this.isDragging.set(false);
|
|
6355
|
+
document.removeEventListener('mousemove', this.onMouseMove);
|
|
6356
|
+
document.removeEventListener('mouseup', this.onMouseUp);
|
|
6357
|
+
};
|
|
6358
|
+
onListMouseDown(e) {
|
|
6359
|
+
const el = this.listRef()?.nativeElement;
|
|
6360
|
+
if (!el || el.scrollWidth <= el.clientWidth)
|
|
6361
|
+
return;
|
|
6362
|
+
this.isDragging.set(true);
|
|
6363
|
+
this.hasDragged = false;
|
|
6364
|
+
this.dragStartX = e.clientX;
|
|
6365
|
+
this.scrollStartX = el.scrollLeft;
|
|
6366
|
+
document.addEventListener('mousemove', this.onMouseMove);
|
|
6367
|
+
document.addEventListener('mouseup', this.onMouseUp);
|
|
6368
|
+
}
|
|
6369
|
+
constructor() {
|
|
6370
|
+
this.destroyRef.onDestroy(() => {
|
|
6371
|
+
document.removeEventListener('mousemove', this.onMouseMove);
|
|
6372
|
+
document.removeEventListener('mouseup', this.onMouseUp);
|
|
6373
|
+
});
|
|
6374
|
+
}
|
|
6337
6375
|
onNavigate(item, index) {
|
|
6376
|
+
if (this.hasDragged) {
|
|
6377
|
+
this.hasDragged = false;
|
|
6378
|
+
return;
|
|
6379
|
+
}
|
|
6338
6380
|
if (!this.isMobile()) {
|
|
6339
6381
|
this.navigate.emit(item);
|
|
6340
6382
|
return;
|
|
@@ -6409,12 +6451,12 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
6409
6451
|
}
|
|
6410
6452
|
}
|
|
6411
6453
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6412
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbNeobrutal, isStandalone: true, selector: "dd-breadcrumb-neobrutal", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<nav\n class=\"neo-bc\"\n [class.neo-bc--mobile]=\"isMobile()\"\n
|
|
6454
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbNeobrutal, isStandalone: true, selector: "dd-breadcrumb-neobrutal", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, viewQueries: [{ propertyName: "listRef", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav\n class=\"neo-bc\"\n [class.neo-bc--mobile]=\"isMobile()\"\n aria-label=\"Breadcrumb\"\n [ngStyle]=\"breadcrumbStyle()\"\n>\n <ol\n class=\"neo-bc__list\"\n #listEl\n [class.neo-bc__list--dragging]=\"isDragging()\"\n (mousedown)=\"onListMouseDown($event)\"\n >\n @for (item of visibleItems(); track $index; let last = $last) {\n <li\n class=\"neo-bc__item\"\n animate.enter=\"neo-bc__item--enter\"\n animate.leave=\"neo-bc__item--leave\"\n >\n @if (!last && item.url) {\n <button\n class=\"neo-bc__link\"\n [class.neo-bc__link--popover-open]=\"isPopoverOpen($index)\"\n type=\"button\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onNavigate(item, $index)\"\n (keydown.escape)=\"closePopover()\"\n >\n <span class=\"neo-bc__chip\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </button>\n } @else {\n <span\n class=\"neo-bc__current\"\n [class.neo-bc__current--popover-open]=\"isPopoverOpen($index)\"\n tabindex=\"0\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onCurrentClick($index)\"\n (keydown.enter)=\"onCurrentClick($index)\"\n (keydown.space)=\"$event.preventDefault(); onCurrentClick($index)\"\n (keydown.escape)=\"closePopover()\"\n >\n <span class=\"neo-bc__chip neo-bc__chip--active\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </span>\n }\n <span\n class=\"neo-bc__arrow\"\n [class.neo-bc__arrow--visible]=\"!last\"\n aria-hidden=\"true\"\n ></span>\n </li>\n }\n </ol>\n</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );display:block;width:100%;height:calc(var(--neo-bc-row-height) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y));box-sizing:border-box;padding:10px 14px;border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{display:flex;align-items:center;width:100%;height:100%;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}.neo-bc__list--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neo-bc__item{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:pan-x}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--dd-neo-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;touch-action:pan-x}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-right:var(--neo-bc-arrow-gap);margin-left:var(--neo-bc-arrow-gap);border-width:var(--neo-bc-arrow-top) 0 var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.neo-bc__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-link);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:scale(.96)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:scale(1)}50%{opacity:0}to{opacity:0;transform:scale(.96)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{--neo-bc-row-height: 28px;--neo-bc-block-padding-y: 16px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;padding:8px 10px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}}@media(max-width:480px){.neo-bc{--neo-bc-border-y: 4px;--neo-bc-arrow-gap: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 6px;padding:8px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__popover{max-width:min(260px,100vw - 24px);font-size:.68rem}}@media(max-width:360px){.neo-bc{--neo-bc-row-height: 24px;--neo-bc-block-padding-y: 12px;--neo-bc-arrow-gap: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px;padding:6px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
6413
6455
|
}
|
|
6414
6456
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, decorators: [{
|
|
6415
6457
|
type: Component,
|
|
6416
|
-
args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<nav\n class=\"neo-bc\"\n [class.neo-bc--mobile]=\"isMobile()\"\n
|
|
6417
|
-
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }] } });
|
|
6458
|
+
args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<nav\n class=\"neo-bc\"\n [class.neo-bc--mobile]=\"isMobile()\"\n aria-label=\"Breadcrumb\"\n [ngStyle]=\"breadcrumbStyle()\"\n>\n <ol\n class=\"neo-bc__list\"\n #listEl\n [class.neo-bc__list--dragging]=\"isDragging()\"\n (mousedown)=\"onListMouseDown($event)\"\n >\n @for (item of visibleItems(); track $index; let last = $last) {\n <li\n class=\"neo-bc__item\"\n animate.enter=\"neo-bc__item--enter\"\n animate.leave=\"neo-bc__item--leave\"\n >\n @if (!last && item.url) {\n <button\n class=\"neo-bc__link\"\n [class.neo-bc__link--popover-open]=\"isPopoverOpen($index)\"\n type=\"button\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onNavigate(item, $index)\"\n (keydown.escape)=\"closePopover()\"\n >\n <span class=\"neo-bc__chip\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </button>\n } @else {\n <span\n class=\"neo-bc__current\"\n [class.neo-bc__current--popover-open]=\"isPopoverOpen($index)\"\n tabindex=\"0\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onCurrentClick($index)\"\n (keydown.enter)=\"onCurrentClick($index)\"\n (keydown.space)=\"$event.preventDefault(); onCurrentClick($index)\"\n (keydown.escape)=\"closePopover()\"\n >\n <span class=\"neo-bc__chip neo-bc__chip--active\">\n <span class=\"neo-bc__label\">{{ item.label }}</span>\n </span>\n <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n </span>\n }\n <span\n class=\"neo-bc__arrow\"\n [class.neo-bc__arrow--visible]=\"!last\"\n aria-hidden=\"true\"\n ></span>\n </li>\n }\n </ol>\n</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );display:block;width:100%;height:calc(var(--neo-bc-row-height) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y));box-sizing:border-box;padding:10px 14px;border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{display:flex;align-items:center;width:100%;height:100%;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}.neo-bc__list--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neo-bc__item{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:pan-x}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--dd-neo-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;touch-action:pan-x}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-right:var(--neo-bc-arrow-gap);margin-left:var(--neo-bc-arrow-gap);border-width:var(--neo-bc-arrow-top) 0 var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.neo-bc__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-link);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:scale(.96)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:scale(1)}50%{opacity:0}to{opacity:0;transform:scale(.96)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{--neo-bc-row-height: 28px;--neo-bc-block-padding-y: 16px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;padding:8px 10px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}}@media(max-width:480px){.neo-bc{--neo-bc-border-y: 4px;--neo-bc-arrow-gap: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 6px;padding:8px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__popover{max-width:min(260px,100vw - 24px);font-size:.68rem}}@media(max-width:360px){.neo-bc{--neo-bc-row-height: 24px;--neo-bc-block-padding-y: 12px;--neo-bc-arrow-gap: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px;padding:6px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"] }]
|
|
6459
|
+
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], listRef: [{ type: i0.ViewChild, args: ['listEl', { isSignal: true }] }] } });
|
|
6418
6460
|
|
|
6419
6461
|
class BreadcrumbBlock {
|
|
6420
6462
|
colorViolet = AccentEnumColor.Violet;
|
|
@@ -6432,12 +6474,35 @@ class BreadcrumbBlock {
|
|
|
6432
6474
|
{ label: 'Navigation', url: '/navigation' },
|
|
6433
6475
|
{ label: 'Breadcrumb' },
|
|
6434
6476
|
];
|
|
6477
|
+
sampleLabels = [
|
|
6478
|
+
'Settings', 'Profile', 'Dashboard', 'Analytics', 'Reports', 'Users', 'Permissions',
|
|
6479
|
+
];
|
|
6480
|
+
interactiveItems = signal([
|
|
6481
|
+
{ label: 'Home', url: '/' },
|
|
6482
|
+
{ label: 'Components', url: '/components' },
|
|
6483
|
+
{ label: 'Breadcrumb' },
|
|
6484
|
+
], { ...(ngDevMode ? { debugName: "interactiveItems" } : {}) });
|
|
6435
6485
|
lastNavigated = signal('', { ...(ngDevMode ? { debugName: "lastNavigated" } : {}) });
|
|
6436
6486
|
onNavigate(item) {
|
|
6437
6487
|
this.lastNavigated.set(item.label);
|
|
6438
6488
|
}
|
|
6489
|
+
addBreadcrumb() {
|
|
6490
|
+
const current = this.interactiveItems();
|
|
6491
|
+
const label = this.sampleLabels[current.length % this.sampleLabels.length];
|
|
6492
|
+
const updated = current.map(item => ({ ...item, url: item.url || `/${item.label.toLowerCase()}` }));
|
|
6493
|
+
updated.push({ label });
|
|
6494
|
+
this.interactiveItems.set(updated);
|
|
6495
|
+
}
|
|
6496
|
+
removeBreadcrumb() {
|
|
6497
|
+
const current = this.interactiveItems();
|
|
6498
|
+
if (current.length <= 1)
|
|
6499
|
+
return;
|
|
6500
|
+
const updated = current.slice(0, -1);
|
|
6501
|
+
updated[updated.length - 1] = { label: updated[updated.length - 1].label };
|
|
6502
|
+
this.interactiveItems.set(updated);
|
|
6503
|
+
}
|
|
6439
6504
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BreadcrumbBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6440
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BreadcrumbBlock, isStandalone: true, selector: "app-breadcrumb-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-breadcrumb-classic\n [items]=\"breadcrumbs\"\n (navigate)=\"onNavigate($event)\"\n/>\n\n<dd-breadcrumb-neobrutal\n [items]=\"breadcrumbs\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n <dd-breadcrumb-classic [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n </div>\n\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n <dd-breadcrumb-classic\n [items]=\"longItems\"\n separator=\">\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n <dd-breadcrumb-neobrutal [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"longItems\"\n [color]=\"colorOrange\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorDark\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n @if (lastNavigated()) {\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n <b>{{ lastNavigated() }}</b>\n </div>\n }\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevBreadcrumbClassic, selector: "dd-breadcrumb-classic", inputs: ["items", "separator"], outputs: ["navigate"] }, { kind: "component", type: DuckDevBreadcrumbNeobrutal, selector: "dd-breadcrumb-neobrutal", inputs: ["items", "color", "isMobile"], outputs: ["navigate"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6505
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BreadcrumbBlock, isStandalone: true, selector: "app-breadcrumb-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-breadcrumb-classic\n [items]=\"breadcrumbs\"\n (navigate)=\"onNavigate($event)\"\n/>\n\n<dd-breadcrumb-neobrutal\n [items]=\"breadcrumbs\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n <dd-breadcrumb-classic [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n </div>\n\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n <dd-breadcrumb-classic\n [items]=\"longItems\"\n separator=\">\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n <dd-breadcrumb-neobrutal [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"longItems\"\n [color]=\"colorOrange\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorDark\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n @if (lastNavigated()) {\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n <b>{{ lastNavigated() }}</b>\n </div>\n }\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'breadcrumbDoc.interactive.title' | transloco }}</h2>\n <p class=\"description\">{{ 'breadcrumbDoc.interactive.description' | transloco }}</p>\n\n <div class=\"interactive-controls\">\n <button class=\"interactive-btn interactive-btn--add\" type=\"button\" (click)=\"addBreadcrumb()\">\n + {{ 'breadcrumbDoc.interactive.add' | transloco }}\n </button>\n <button\n class=\"interactive-btn interactive-btn--remove\"\n type=\"button\"\n [disabled]=\"interactiveItems().length <= 1\"\n (click)=\"removeBreadcrumb()\"\n >\n \u2212 {{ 'breadcrumbDoc.interactive.remove' | transloco }}\n </button>\n <span class=\"interactive-count\">\n {{ 'breadcrumbDoc.interactive.count' | transloco }}: {{ interactiveItems().length }}\n </span>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal example-item--wide\">\n <dd-breadcrumb-neobrutal\n [items]=\"interactiveItems()\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.demo-container .interactive-controls{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-container .interactive-btn{padding:8px 16px;border:3px solid var(--dd-neo-ink);font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.demo-container .interactive-btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--dd-neo-ink)}.demo-container .interactive-btn:disabled{opacity:.4;cursor:not-allowed}.demo-container .interactive-btn--add{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.demo-container .interactive-btn--remove{background:var(--dd-base-accent-pink);color:var(--dd-base-0)}.demo-container .interactive-count{padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.demo-container .example-item--wide{flex:1 1 100%;min-width:100%}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevBreadcrumbClassic, selector: "dd-breadcrumb-classic", inputs: ["items", "separator"], outputs: ["navigate"] }, { kind: "component", type: DuckDevBreadcrumbNeobrutal, selector: "dd-breadcrumb-neobrutal", inputs: ["items", "color", "isMobile"], outputs: ["navigate"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6441
6506
|
}
|
|
6442
6507
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BreadcrumbBlock, decorators: [{
|
|
6443
6508
|
type: Component,
|
|
@@ -6446,7 +6511,290 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6446
6511
|
DuckDevCardSection,
|
|
6447
6512
|
DuckDevBreadcrumbClassic,
|
|
6448
6513
|
DuckDevBreadcrumbNeobrutal,
|
|
6449
|
-
], template: "<div class=\"demo-container\">\n <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-breadcrumb-classic\n [items]=\"breadcrumbs\"\n (navigate)=\"onNavigate($event)\"\n/>\n\n<dd-breadcrumb-neobrutal\n [items]=\"breadcrumbs\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n <dd-breadcrumb-classic [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n </div>\n\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n <dd-breadcrumb-classic\n [items]=\"longItems\"\n separator=\">\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n <dd-breadcrumb-neobrutal [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"longItems\"\n [color]=\"colorOrange\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorDark\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n @if (lastNavigated()) {\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n <b>{{ lastNavigated() }}</b>\n </div>\n }\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
6514
|
+
], template: "<div class=\"demo-container\">\n <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-breadcrumb-classic\n [items]=\"breadcrumbs\"\n (navigate)=\"onNavigate($event)\"\n/>\n\n<dd-breadcrumb-neobrutal\n [items]=\"breadcrumbs\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n/></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n <dd-breadcrumb-classic [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n </div>\n\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n <dd-breadcrumb-classic\n [items]=\"longItems\"\n separator=\">\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n <dd-breadcrumb-neobrutal [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"longItems\"\n [color]=\"colorOrange\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n <dd-breadcrumb-neobrutal\n [items]=\"basicItems\"\n [color]=\"colorDark\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n\n @if (lastNavigated()) {\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n <b>{{ lastNavigated() }}</b>\n </div>\n }\n </div>\n </dd-card-section>\n\n <dd-card-section>\n <h2>{{ 'breadcrumbDoc.interactive.title' | transloco }}</h2>\n <p class=\"description\">{{ 'breadcrumbDoc.interactive.description' | transloco }}</p>\n\n <div class=\"interactive-controls\">\n <button class=\"interactive-btn interactive-btn--add\" type=\"button\" (click)=\"addBreadcrumb()\">\n + {{ 'breadcrumbDoc.interactive.add' | transloco }}\n </button>\n <button\n class=\"interactive-btn interactive-btn--remove\"\n type=\"button\"\n [disabled]=\"interactiveItems().length <= 1\"\n (click)=\"removeBreadcrumb()\"\n >\n \u2212 {{ 'breadcrumbDoc.interactive.remove' | transloco }}\n </button>\n <span class=\"interactive-count\">\n {{ 'breadcrumbDoc.interactive.count' | transloco }}: {{ interactiveItems().length }}\n </span>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal example-item--wide\">\n <dd-breadcrumb-neobrutal\n [items]=\"interactiveItems()\"\n [color]=\"colorViolet\"\n (navigate)=\"onNavigate($event)\"\n />\n </div>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.demo-container .interactive-controls{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-container .interactive-btn{padding:8px 16px;border:3px solid var(--dd-neo-ink);font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.demo-container .interactive-btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--dd-neo-ink)}.demo-container .interactive-btn:disabled{opacity:.4;cursor:not-allowed}.demo-container .interactive-btn--add{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.demo-container .interactive-btn--remove{background:var(--dd-base-accent-pink);color:var(--dd-base-0)}.demo-container .interactive-count{padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.demo-container .example-item--wide{flex:1 1 100%;min-width:100%}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
6515
|
+
}] });
|
|
6516
|
+
|
|
6517
|
+
class DuckDevSelectorOption {
|
|
6518
|
+
value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
|
|
6519
|
+
contentId = input(undefined, { ...(ngDevMode ? { debugName: "contentId" } : {}) });
|
|
6520
|
+
templateRef = viewChild.required('contentTpl');
|
|
6521
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSelectorOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6522
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: DuckDevSelectorOption, isStandalone: true, selector: "duck-dev-selector-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
6523
|
+
<ng-template #contentTpl>
|
|
6524
|
+
<ng-content />
|
|
6525
|
+
</ng-template>
|
|
6526
|
+
`, isInline: true, styles: [":host{display:none}\n"] });
|
|
6527
|
+
}
|
|
6528
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSelectorOption, decorators: [{
|
|
6529
|
+
type: Component,
|
|
6530
|
+
args: [{ selector: 'duck-dev-selector-option', imports: [], template: `
|
|
6531
|
+
<ng-template #contentTpl>
|
|
6532
|
+
<ng-content />
|
|
6533
|
+
</ng-template>
|
|
6534
|
+
`, styles: [":host{display:none}\n"] }]
|
|
6535
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentId", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ['contentTpl', { isSignal: true }] }] } });
|
|
6536
|
+
|
|
6537
|
+
function getNeobrutalSelectorStyle(color) {
|
|
6538
|
+
switch (color) {
|
|
6539
|
+
case AccentEnumColor.Violet:
|
|
6540
|
+
return {
|
|
6541
|
+
'--neo-selector-surface': 'var(--dd-base-secondary)',
|
|
6542
|
+
'--neo-selector-active': 'color-mix(in srgb, var(--dd-base-secondary) 78%, var(--dd-base-0))',
|
|
6543
|
+
'--neo-selector-text': 'var(--dd-base-0)',
|
|
6544
|
+
'--neo-selector-shadow': 'var(--dd-base-accent-blue)',
|
|
6545
|
+
'--neo-selector-accent': 'var(--dd-base-accent-yellow)',
|
|
6546
|
+
};
|
|
6547
|
+
case AccentEnumColor.Orange:
|
|
6548
|
+
return {
|
|
6549
|
+
'--neo-selector-surface': 'var(--dd-base-accent-orange)',
|
|
6550
|
+
'--neo-selector-active': 'color-mix(in srgb, var(--dd-base-accent-yellow) 68%, var(--dd-base-0))',
|
|
6551
|
+
'--neo-selector-text': 'var(--dd-base-600)',
|
|
6552
|
+
'--neo-selector-shadow': 'var(--dd-base-accent-pink)',
|
|
6553
|
+
'--neo-selector-accent': 'var(--dd-base-accent-yellow)',
|
|
6554
|
+
};
|
|
6555
|
+
case AccentEnumColor.Gray:
|
|
6556
|
+
return {
|
|
6557
|
+
'--neo-selector-surface': 'var(--dd-base-200)',
|
|
6558
|
+
'--neo-selector-active': 'var(--dd-base-0)',
|
|
6559
|
+
'--neo-selector-text': 'var(--dd-base-600)',
|
|
6560
|
+
'--neo-selector-shadow': 'var(--dd-base-accent-blue)',
|
|
6561
|
+
'--neo-selector-accent': 'var(--dd-base-accent-orange)',
|
|
6562
|
+
};
|
|
6563
|
+
case AccentEnumColor.Dark:
|
|
6564
|
+
return {
|
|
6565
|
+
'--neo-selector-surface': 'var(--dd-base-600)',
|
|
6566
|
+
'--neo-selector-active': 'color-mix(in srgb, var(--dd-base-600) 84%, var(--dd-base-400))',
|
|
6567
|
+
'--neo-selector-text': 'var(--dd-base-0)',
|
|
6568
|
+
'--neo-selector-shadow': 'var(--dd-base-accent-orange)',
|
|
6569
|
+
'--neo-selector-accent': 'var(--dd-base-accent-yellow)',
|
|
6570
|
+
};
|
|
6571
|
+
case AccentEnumColor.White:
|
|
6572
|
+
default:
|
|
6573
|
+
return {
|
|
6574
|
+
'--neo-selector-surface': 'var(--dd-base-0)',
|
|
6575
|
+
'--neo-selector-active': 'var(--dd-base-accent-yellow)',
|
|
6576
|
+
'--neo-selector-text': 'var(--dd-base-600)',
|
|
6577
|
+
'--neo-selector-shadow': 'var(--dd-base-600)',
|
|
6578
|
+
'--neo-selector-accent': 'var(--dd-base-accent-orange)',
|
|
6579
|
+
};
|
|
6580
|
+
}
|
|
6581
|
+
}
|
|
6582
|
+
|
|
6583
|
+
class DuckDevSelectorDrum {
|
|
6584
|
+
destroyRef = inject(DestroyRef);
|
|
6585
|
+
value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
|
|
6586
|
+
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
6587
|
+
showHints = input(true, { ...(ngDevMode ? { debugName: "showHints" } : {}) });
|
|
6588
|
+
hintAlign = input('center', { ...(ngDevMode ? { debugName: "hintAlign" } : {}) });
|
|
6589
|
+
valueChange = output();
|
|
6590
|
+
ionChange = output();
|
|
6591
|
+
options = contentChildren(DuckDevSelectorOption, { ...(ngDevMode ? { debugName: "options" } : {}) });
|
|
6592
|
+
drumEl = viewChild.required('drum');
|
|
6593
|
+
selectorStyle = computed(() => getNeobrutalSelectorStyle(this.color()), { ...(ngDevMode ? { debugName: "selectorStyle" } : {}) });
|
|
6594
|
+
optionsList = computed(() => {
|
|
6595
|
+
return this.options().map((opt) => ({
|
|
6596
|
+
value: opt.value(),
|
|
6597
|
+
contentId: opt.contentId(),
|
|
6598
|
+
template: opt.templateRef(),
|
|
6599
|
+
}));
|
|
6600
|
+
}, { ...(ngDevMode ? { debugName: "optionsList" } : {}) });
|
|
6601
|
+
faceCount = computed(() => Math.max(3, this.optionsList().length), { ...(ngDevMode ? { debugName: "faceCount" } : {}) });
|
|
6602
|
+
faceAngle = computed(() => 360 / this.faceCount(), { ...(ngDevMode ? { debugName: "faceAngle" } : {}) });
|
|
6603
|
+
radius = computed(() => {
|
|
6604
|
+
const faceHeight = 70;
|
|
6605
|
+
return faceHeight / (2 * Math.tan(Math.PI / this.faceCount()));
|
|
6606
|
+
}, { ...(ngDevMode ? { debugName: "radius" } : {}) });
|
|
6607
|
+
currentAngle = signal(0, { ...(ngDevMode ? { debugName: "currentAngle" } : {}) });
|
|
6608
|
+
isDragging = signal(false, { ...(ngDevMode ? { debugName: "isDragging" } : {}) });
|
|
6609
|
+
isAnimating = signal(false, { ...(ngDevMode ? { debugName: "isAnimating" } : {}) });
|
|
6610
|
+
isIdle = computed(() => !this.isDragging() && !this.isAnimating(), { ...(ngDevMode ? { debugName: "isIdle" } : {}) });
|
|
6611
|
+
startY = 0;
|
|
6612
|
+
startAngle = 0;
|
|
6613
|
+
lastY = 0;
|
|
6614
|
+
lastTime = 0;
|
|
6615
|
+
velocity = 0;
|
|
6616
|
+
animationId = null;
|
|
6617
|
+
boundPointerMove = this.onPointerMove.bind(this);
|
|
6618
|
+
boundPointerUp = this.onPointerUp.bind(this);
|
|
6619
|
+
constructor() {
|
|
6620
|
+
afterNextRender(() => {
|
|
6621
|
+
this.syncAngleToValue();
|
|
6622
|
+
});
|
|
6623
|
+
this.destroyRef.onDestroy(() => {
|
|
6624
|
+
if (this.animationId !== null) {
|
|
6625
|
+
cancelAnimationFrame(this.animationId);
|
|
6626
|
+
}
|
|
6627
|
+
document.removeEventListener('pointermove', this.boundPointerMove);
|
|
6628
|
+
document.removeEventListener('pointerup', this.boundPointerUp);
|
|
6629
|
+
});
|
|
6630
|
+
}
|
|
6631
|
+
ngAfterContentInit() {
|
|
6632
|
+
this.syncAngleToValue();
|
|
6633
|
+
}
|
|
6634
|
+
onStepPrev() {
|
|
6635
|
+
if (this.isAnimating())
|
|
6636
|
+
return;
|
|
6637
|
+
this.isAnimating.set(true);
|
|
6638
|
+
const angle = this.faceAngle();
|
|
6639
|
+
this.settleToAngle(this.currentAngle() - angle);
|
|
6640
|
+
}
|
|
6641
|
+
onStepNext() {
|
|
6642
|
+
if (this.isAnimating())
|
|
6643
|
+
return;
|
|
6644
|
+
this.isAnimating.set(true);
|
|
6645
|
+
const angle = this.faceAngle();
|
|
6646
|
+
this.settleToAngle(this.currentAngle() + angle);
|
|
6647
|
+
}
|
|
6648
|
+
onPointerDown(event) {
|
|
6649
|
+
event.preventDefault();
|
|
6650
|
+
if (this.animationId !== null) {
|
|
6651
|
+
cancelAnimationFrame(this.animationId);
|
|
6652
|
+
this.animationId = null;
|
|
6653
|
+
}
|
|
6654
|
+
this.isDragging.set(true);
|
|
6655
|
+
this.isAnimating.set(false);
|
|
6656
|
+
this.startY = event.clientY;
|
|
6657
|
+
this.startAngle = this.currentAngle();
|
|
6658
|
+
this.lastY = event.clientY;
|
|
6659
|
+
this.lastTime = performance.now();
|
|
6660
|
+
this.velocity = 0;
|
|
6661
|
+
document.addEventListener('pointermove', this.boundPointerMove);
|
|
6662
|
+
document.addEventListener('pointerup', this.boundPointerUp);
|
|
6663
|
+
}
|
|
6664
|
+
onPointerMove(event) {
|
|
6665
|
+
const deltaY = event.clientY - this.startY;
|
|
6666
|
+
const sensitivity = 0.5;
|
|
6667
|
+
const newAngle = this.startAngle + deltaY * sensitivity;
|
|
6668
|
+
const now = performance.now();
|
|
6669
|
+
const dt = now - this.lastTime;
|
|
6670
|
+
if (dt > 0) {
|
|
6671
|
+
this.velocity = (event.clientY - this.lastY) / dt;
|
|
6672
|
+
}
|
|
6673
|
+
this.lastY = event.clientY;
|
|
6674
|
+
this.lastTime = now;
|
|
6675
|
+
this.currentAngle.set(newAngle);
|
|
6676
|
+
}
|
|
6677
|
+
onPointerUp() {
|
|
6678
|
+
document.removeEventListener('pointermove', this.boundPointerMove);
|
|
6679
|
+
document.removeEventListener('pointerup', this.boundPointerUp);
|
|
6680
|
+
this.isDragging.set(false);
|
|
6681
|
+
this.isAnimating.set(true);
|
|
6682
|
+
// Convert pointer velocity (px/ms) to angular velocity (deg/frame at 60fps)
|
|
6683
|
+
const angularVelocity = this.velocity * 0.5 * (1000 / 60);
|
|
6684
|
+
this.spinWithFriction(angularVelocity);
|
|
6685
|
+
}
|
|
6686
|
+
spinWithFriction(angularVelocity) {
|
|
6687
|
+
const friction = 0.985;
|
|
6688
|
+
const snapThreshold = 0.15;
|
|
6689
|
+
let vel = angularVelocity;
|
|
6690
|
+
let lastTime = performance.now();
|
|
6691
|
+
const step = (now) => {
|
|
6692
|
+
const dt = (now - lastTime) / 16.667; // normalize to 60fps
|
|
6693
|
+
lastTime = now;
|
|
6694
|
+
vel *= Math.pow(friction, dt);
|
|
6695
|
+
this.currentAngle.update((a) => a + vel * dt);
|
|
6696
|
+
if (Math.abs(vel) > snapThreshold) {
|
|
6697
|
+
this.animationId = requestAnimationFrame(step);
|
|
6698
|
+
}
|
|
6699
|
+
else {
|
|
6700
|
+
// Velocity died — settle to nearest face
|
|
6701
|
+
const angle = this.faceAngle();
|
|
6702
|
+
const targetSnap = Math.round(this.currentAngle() / angle) * angle;
|
|
6703
|
+
this.settleToAngle(targetSnap);
|
|
6704
|
+
}
|
|
6705
|
+
};
|
|
6706
|
+
this.animationId = requestAnimationFrame(step);
|
|
6707
|
+
}
|
|
6708
|
+
settleToAngle(target) {
|
|
6709
|
+
const start = this.currentAngle();
|
|
6710
|
+
const diff = target - start;
|
|
6711
|
+
// If already very close, just set it
|
|
6712
|
+
if (Math.abs(diff) < 0.5) {
|
|
6713
|
+
this.currentAngle.set(target);
|
|
6714
|
+
this.isAnimating.set(false);
|
|
6715
|
+
this.emitCurrentValue();
|
|
6716
|
+
return;
|
|
6717
|
+
}
|
|
6718
|
+
// Spring-like settle: longer for bigger gaps, min 300ms, max 700ms
|
|
6719
|
+
const duration = Math.min(700, Math.max(300, Math.abs(diff) * 8));
|
|
6720
|
+
const startTime = performance.now();
|
|
6721
|
+
const step = (now) => {
|
|
6722
|
+
const elapsed = now - startTime;
|
|
6723
|
+
const t = Math.min(elapsed / duration, 1);
|
|
6724
|
+
// Smooth ease-out with slight overshoot for natural feel
|
|
6725
|
+
const eased = 1 - Math.pow(1 - t, 2.5);
|
|
6726
|
+
this.currentAngle.set(start + diff * eased);
|
|
6727
|
+
if (t < 1) {
|
|
6728
|
+
this.animationId = requestAnimationFrame(step);
|
|
6729
|
+
}
|
|
6730
|
+
else {
|
|
6731
|
+
this.animationId = null;
|
|
6732
|
+
this.currentAngle.set(target);
|
|
6733
|
+
this.isAnimating.set(false);
|
|
6734
|
+
this.emitCurrentValue();
|
|
6735
|
+
}
|
|
6736
|
+
};
|
|
6737
|
+
this.animationId = requestAnimationFrame(step);
|
|
6738
|
+
}
|
|
6739
|
+
emitCurrentValue() {
|
|
6740
|
+
const angle = this.faceAngle();
|
|
6741
|
+
const opts = this.optionsList();
|
|
6742
|
+
if (opts.length === 0)
|
|
6743
|
+
return;
|
|
6744
|
+
const normalizedAngle = ((this.currentAngle() % 360) + 360) % 360;
|
|
6745
|
+
const index = Math.round(normalizedAngle / angle) % opts.length;
|
|
6746
|
+
const value = opts[index].value;
|
|
6747
|
+
this.valueChange.emit(value);
|
|
6748
|
+
this.ionChange.emit({ detail: { value } });
|
|
6749
|
+
}
|
|
6750
|
+
syncAngleToValue() {
|
|
6751
|
+
const incoming = this.value();
|
|
6752
|
+
const opts = this.optionsList();
|
|
6753
|
+
if (!incoming || opts.length === 0)
|
|
6754
|
+
return;
|
|
6755
|
+
const index = opts.findIndex((o) => o.value === incoming);
|
|
6756
|
+
if (index >= 0) {
|
|
6757
|
+
this.currentAngle.set(index * this.faceAngle());
|
|
6758
|
+
}
|
|
6759
|
+
}
|
|
6760
|
+
getFaceTransform(index) {
|
|
6761
|
+
const angle = this.faceAngle();
|
|
6762
|
+
const r = this.radius();
|
|
6763
|
+
return `rotateX(${index * angle}deg) translateZ(${r}px)`;
|
|
6764
|
+
}
|
|
6765
|
+
isActiveFace(index) {
|
|
6766
|
+
const angle = this.faceAngle();
|
|
6767
|
+
const opts = this.optionsList();
|
|
6768
|
+
if (opts.length === 0)
|
|
6769
|
+
return false;
|
|
6770
|
+
const normalizedAngle = ((this.currentAngle() % 360) + 360) % 360;
|
|
6771
|
+
const activeIndex = Math.round(normalizedAngle / angle) % opts.length;
|
|
6772
|
+
return activeIndex === index;
|
|
6773
|
+
}
|
|
6774
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSelectorDrum, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6775
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSelectorDrum, isStandalone: true, selector: "duck-dev-selector-drum", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showHints: { classPropertyName: "showHints", publicName: "showHints", isSignal: true, isRequired: false, transformFunction: null }, hintAlign: { classPropertyName: "hintAlign", publicName: "hintAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "options", predicate: DuckDevSelectorOption, isSignal: true }], viewQueries: [{ propertyName: "drumEl", first: true, predicate: ["drum"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"dd-drum\"\n [class.dd-drum--hints-start]=\"hintAlign() === 'start'\"\n [class.dd-drum--hints-end]=\"hintAlign() === 'end'\"\n [ngStyle]=\"selectorStyle()\"\n>\n @if (showHints()) {\n <button class=\"dd-drum__hint dd-drum__hint--top\" type=\"button\" (click)=\"onStepPrev()\">\n ▲\n </button>\n }\n\n <div class=\"dd-drum__scene\">\n <div\n class=\"dd-drum__prism\"\n [class.dd-drum__prism--idle]=\"isIdle()\"\n #drum\n [style.transform]=\"'rotateX(' + -currentAngle() + 'deg)'\"\n (pointerdown)=\"onPointerDown($event)\"\n >\n @for (opt of optionsList(); track opt.value; let i = $index) {\n <div\n class=\"dd-drum__face\"\n [class.dd-drum__face--active]=\"isActiveFace(i)\"\n [style.transform]=\"getFaceTransform(i)\"\n >\n <span class=\"dd-drum__face-copy\">\n <ng-container *ngTemplateOutlet=\"opt.template\" />\n </span>\n </div>\n }\n </div>\n </div>\n\n @if (showHints()) {\n <button class=\"dd-drum__hint dd-drum__hint--bottom\" type=\"button\" (click)=\"onStepNext()\">\n ▼\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}.dd-drum{--neo-selector-surface: var(--dd-base-0);--neo-selector-active: var(--dd-base-accent-yellow);--neo-selector-text: var(--dd-base-600);--neo-selector-shadow: var(--dd-base-600);--neo-selector-accent: var(--dd-base-accent-orange);display:inline-flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.dd-drum--hints-start{align-items:flex-start}.dd-drum--hints-end{align-items:flex-end}.dd-drum__hint{font-size:14px;color:var(--neo-selector-shadow);opacity:.35;transition:opacity .3s ease,transform .2s ease;line-height:1;background:none;border:none;padding:4px 12px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}.dd-drum__hint:hover{opacity:.85}.dd-drum__hint:active{opacity:1}.dd-drum__hint--top{animation:hint-bob-up 2s ease-in-out infinite}.dd-drum__hint--top:hover{animation:none;transform:translateY(-2px)}.dd-drum__hint--bottom{animation:hint-bob-down 2s ease-in-out infinite}.dd-drum__hint--bottom:hover{animation:none;transform:translateY(2px)}@keyframes hint-bob-up{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes hint-bob-down{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}.dd-drum:hover .dd-drum__hint{opacity:.6}.dd-drum__scene{perspective:600px;perspective-origin:center center;width:220px;height:140px;display:flex;align-items:center;justify-content:center;cursor:grab}.dd-drum__scene:active{cursor:grabbing}.dd-drum__prism{width:100%;height:70px;position:relative;transform-style:preserve-3d;transition:transform .15s ease}.dd-drum__prism--idle{animation:drum-idle 3.5s ease-in-out infinite}.dd-drum__scene:hover .dd-drum__prism--idle{animation:drum-hover 1.8s ease-in-out infinite}@keyframes drum-idle{0%,to{transform:rotateY(0)}33%{transform:rotateY(1.5deg)}66%{transform:rotateY(-1.5deg)}}@keyframes drum-hover{0%,to{transform:rotateY(0) rotateX(0)}25%{transform:rotateY(2.5deg) rotateX(-4deg)}75%{transform:rotateY(-2.5deg) rotateX(4deg)}}.dd-drum__face{position:absolute;width:100%;height:70px;top:0;left:0;display:flex;align-items:center;justify-content:center;border:4px solid var(--dd-neo-ink);background:var(--neo-selector-surface);box-shadow:4px 4px 0 var(--neo-selector-shadow);backface-visibility:hidden;box-sizing:border-box;transition:background .2s ease}.dd-drum__face--active{background:var(--neo-selector-active)}.dd-drum__face-copy{display:inline-flex;align-items:center;justify-content:center;font-size:.88rem;font-weight:900;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;color:var(--neo-selector-text)}@media(max-width:640px){.dd-drum__scene{width:180px;height:120px}.dd-drum__prism,.dd-drum__face{height:60px}.dd-drum__face-copy{font-size:.76rem;letter-spacing:.11em}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
6776
|
+
}
|
|
6777
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSelectorDrum, decorators: [{
|
|
6778
|
+
type: Component,
|
|
6779
|
+
args: [{ selector: 'duck-dev-selector-drum', imports: [NgStyle, NgTemplateOutlet], template: "<div\n class=\"dd-drum\"\n [class.dd-drum--hints-start]=\"hintAlign() === 'start'\"\n [class.dd-drum--hints-end]=\"hintAlign() === 'end'\"\n [ngStyle]=\"selectorStyle()\"\n>\n @if (showHints()) {\n <button class=\"dd-drum__hint dd-drum__hint--top\" type=\"button\" (click)=\"onStepPrev()\">\n ▲\n </button>\n }\n\n <div class=\"dd-drum__scene\">\n <div\n class=\"dd-drum__prism\"\n [class.dd-drum__prism--idle]=\"isIdle()\"\n #drum\n [style.transform]=\"'rotateX(' + -currentAngle() + 'deg)'\"\n (pointerdown)=\"onPointerDown($event)\"\n >\n @for (opt of optionsList(); track opt.value; let i = $index) {\n <div\n class=\"dd-drum__face\"\n [class.dd-drum__face--active]=\"isActiveFace(i)\"\n [style.transform]=\"getFaceTransform(i)\"\n >\n <span class=\"dd-drum__face-copy\">\n <ng-container *ngTemplateOutlet=\"opt.template\" />\n </span>\n </div>\n }\n </div>\n </div>\n\n @if (showHints()) {\n <button class=\"dd-drum__hint dd-drum__hint--bottom\" type=\"button\" (click)=\"onStepNext()\">\n ▼\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}.dd-drum{--neo-selector-surface: var(--dd-base-0);--neo-selector-active: var(--dd-base-accent-yellow);--neo-selector-text: var(--dd-base-600);--neo-selector-shadow: var(--dd-base-600);--neo-selector-accent: var(--dd-base-accent-orange);display:inline-flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.dd-drum--hints-start{align-items:flex-start}.dd-drum--hints-end{align-items:flex-end}.dd-drum__hint{font-size:14px;color:var(--neo-selector-shadow);opacity:.35;transition:opacity .3s ease,transform .2s ease;line-height:1;background:none;border:none;padding:4px 12px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}.dd-drum__hint:hover{opacity:.85}.dd-drum__hint:active{opacity:1}.dd-drum__hint--top{animation:hint-bob-up 2s ease-in-out infinite}.dd-drum__hint--top:hover{animation:none;transform:translateY(-2px)}.dd-drum__hint--bottom{animation:hint-bob-down 2s ease-in-out infinite}.dd-drum__hint--bottom:hover{animation:none;transform:translateY(2px)}@keyframes hint-bob-up{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes hint-bob-down{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}.dd-drum:hover .dd-drum__hint{opacity:.6}.dd-drum__scene{perspective:600px;perspective-origin:center center;width:220px;height:140px;display:flex;align-items:center;justify-content:center;cursor:grab}.dd-drum__scene:active{cursor:grabbing}.dd-drum__prism{width:100%;height:70px;position:relative;transform-style:preserve-3d;transition:transform .15s ease}.dd-drum__prism--idle{animation:drum-idle 3.5s ease-in-out infinite}.dd-drum__scene:hover .dd-drum__prism--idle{animation:drum-hover 1.8s ease-in-out infinite}@keyframes drum-idle{0%,to{transform:rotateY(0)}33%{transform:rotateY(1.5deg)}66%{transform:rotateY(-1.5deg)}}@keyframes drum-hover{0%,to{transform:rotateY(0) rotateX(0)}25%{transform:rotateY(2.5deg) rotateX(-4deg)}75%{transform:rotateY(-2.5deg) rotateX(4deg)}}.dd-drum__face{position:absolute;width:100%;height:70px;top:0;left:0;display:flex;align-items:center;justify-content:center;border:4px solid var(--dd-neo-ink);background:var(--neo-selector-surface);box-shadow:4px 4px 0 var(--neo-selector-shadow);backface-visibility:hidden;box-sizing:border-box;transition:background .2s ease}.dd-drum__face--active{background:var(--neo-selector-active)}.dd-drum__face-copy{display:inline-flex;align-items:center;justify-content:center;font-size:.88rem;font-weight:900;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;color:var(--neo-selector-text)}@media(max-width:640px){.dd-drum__scene{width:180px;height:120px}.dd-drum__prism,.dd-drum__face{height:60px}.dd-drum__face-copy{font-size:.76rem;letter-spacing:.11em}}\n"] }]
|
|
6780
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showHints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHints", required: false }] }], hintAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintAlign", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ionChange: [{ type: i0.Output, args: ["ionChange"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DuckDevSelectorOption), { isSignal: true }] }], drumEl: [{ type: i0.ViewChild, args: ['drum', { isSignal: true }] }] } });
|
|
6781
|
+
|
|
6782
|
+
class SelectorBlock {
|
|
6783
|
+
drumSelected = signal('rush', { ...(ngDevMode ? { debugName: "drumSelected" } : {}) });
|
|
6784
|
+
lastEvent = signal('', { ...(ngDevMode ? { debugName: "lastEvent" } : {}) });
|
|
6785
|
+
colorViolet = AccentEnumColor.Violet;
|
|
6786
|
+
colorOrange = AccentEnumColor.Orange;
|
|
6787
|
+
colorDark = AccentEnumColor.Dark;
|
|
6788
|
+
colorGray = AccentEnumColor.Gray;
|
|
6789
|
+
onIonChange(e) {
|
|
6790
|
+
this.lastEvent.set(e.detail.value);
|
|
6791
|
+
}
|
|
6792
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SelectorBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6793
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SelectorBlock, isStandalone: true, selector: "app-selector-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'selectorDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'selectorDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'selectorDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'selectorDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-selector-drum [value]=\"selected()\" (valueChange)=\"selected.set($event)\">\n <duck-dev-selector-option value=\"rush\">Rush</duck-dev-selector-option>\n <duck-dev-selector-option value=\"strategy\">Strategy</duck-dev-selector-option>\n <duck-dev-selector-option value=\"rpg\">RPG</duck-dev-selector-option>\n</duck-dev-selector-drum></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'selectorDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>value</strong> \u2014 {{ 'selectorDoc.inputsDesc.value' | transloco }}</li>\n <li>\n <strong>valueChange</strong> \u2014 {{ 'selectorDoc.inputsDesc.valueChange' | transloco }}\n </li>\n <li><strong>ionChange</strong> \u2014 {{ 'selectorDoc.inputsDesc.ionChange' | transloco }}</li>\n <li><strong>color</strong> \u2014 {{ 'selectorDoc.inputsDesc.color' | transloco }}</li>\n <li>\n <strong>duck-dev-selector-option[value]</strong> \u2014\n {{ 'selectorDoc.inputsDesc.optionValue' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'selectorDoc.drum.title' | transloco }}</h3>\n <p class=\"description\">{{ 'selectorDoc.drum.description' | transloco }}</p>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'selectorDoc.examples.drumWhite' | transloco }}</p>\n <duck-dev-selector-drum\n [value]=\"drumSelected()\"\n (valueChange)=\"drumSelected.set($event)\"\n (ionChange)=\"onIonChange($event)\"\n >\n <duck-dev-selector-option value=\"rush\">{{\n 'selectorDoc.labels.rush' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"strategy\">{{\n 'selectorDoc.labels.strategy' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"rpg\">{{\n 'selectorDoc.labels.rpg' | transloco\n }}</duck-dev-selector-option>\n </duck-dev-selector-drum>\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'selectorDoc.labels.selected' | transloco }}: </span>\n <b>{{ drumSelected() }}</b>\n <span class=\"divider\">|</span>\n <span\n >ionChange: <b>{{ lastEvent() }}</b></span\n >\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'selectorDoc.examples.drumViolet' | transloco }}</p>\n <duck-dev-selector-drum [value]=\"'rush'\" [color]=\"colorViolet\">\n <duck-dev-selector-option value=\"rush\">{{\n 'selectorDoc.labels.rush' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"strategy\">{{\n 'selectorDoc.labels.strategy' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"rpg\">{{\n 'selectorDoc.labels.rpg' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"arcade\">{{\n 'selectorDoc.labels.arcade' | transloco\n }}</duck-dev-selector-option>\n </duck-dev-selector-drum>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'selectorDoc.examples.drumOrange' | transloco }}</p>\n <duck-dev-selector-drum [value]=\"'draft'\" [color]=\"colorOrange\">\n <duck-dev-selector-option value=\"draft\">{{\n 'selectorDoc.labels.draft' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"launch\">{{\n 'selectorDoc.labels.launch' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"archive\">{{\n 'selectorDoc.labels.archive' | transloco\n }}</duck-dev-selector-option>\n </duck-dev-selector-drum>\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'selectorDoc.examples.drumDark' | transloco }}</p>\n <duck-dev-selector-drum [value]=\"'strategy'\" [color]=\"colorDark\">\n <duck-dev-selector-option value=\"strategy\">{{\n 'selectorDoc.labels.strategy' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"research\">{{\n 'selectorDoc.labels.research' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"prototype\">{{\n 'selectorDoc.labels.prototype' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"validate\">{{\n 'selectorDoc.labels.validate' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"deliver\">{{\n 'selectorDoc.labels.deliver' | transloco\n }}</duck-dev-selector-option>\n </duck-dev-selector-drum>\n </div>\n </div>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row.example-row--roadsign{align-items:flex-start}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left;width:100%}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevSelectorDrum, selector: "duck-dev-selector-drum", inputs: ["value", "color", "showHints", "hintAlign"], outputs: ["valueChange", "ionChange"] }, { kind: "component", type: DuckDevSelectorOption, selector: "duck-dev-selector-option", inputs: ["value", "contentId"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
6794
|
+
}
|
|
6795
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SelectorBlock, decorators: [{
|
|
6796
|
+
type: Component,
|
|
6797
|
+
args: [{ selector: 'app-selector-block', imports: [TranslocoPipe, DuckDevCardSection, DuckDevSelectorDrum, DuckDevSelectorOption], template: "<div class=\"demo-container\">\n <h1>{{ 'selectorDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'selectorDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'selectorDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'selectorDoc.basic.usage' | transloco }}</h3>\n <pre><code><duck-dev-selector-drum [value]=\"selected()\" (valueChange)=\"selected.set($event)\">\n <duck-dev-selector-option value=\"rush\">Rush</duck-dev-selector-option>\n <duck-dev-selector-option value=\"strategy\">Strategy</duck-dev-selector-option>\n <duck-dev-selector-option value=\"rpg\">RPG</duck-dev-selector-option>\n</duck-dev-selector-drum></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'selectorDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>value</strong> \u2014 {{ 'selectorDoc.inputsDesc.value' | transloco }}</li>\n <li>\n <strong>valueChange</strong> \u2014 {{ 'selectorDoc.inputsDesc.valueChange' | transloco }}\n </li>\n <li><strong>ionChange</strong> \u2014 {{ 'selectorDoc.inputsDesc.ionChange' | transloco }}</li>\n <li><strong>color</strong> \u2014 {{ 'selectorDoc.inputsDesc.color' | transloco }}</li>\n <li>\n <strong>duck-dev-selector-option[value]</strong> \u2014\n {{ 'selectorDoc.inputsDesc.optionValue' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'selectorDoc.drum.title' | transloco }}</h3>\n <p class=\"description\">{{ 'selectorDoc.drum.description' | transloco }}</p>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'selectorDoc.examples.drumWhite' | transloco }}</p>\n <duck-dev-selector-drum\n [value]=\"drumSelected()\"\n (valueChange)=\"drumSelected.set($event)\"\n (ionChange)=\"onIonChange($event)\"\n >\n <duck-dev-selector-option value=\"rush\">{{\n 'selectorDoc.labels.rush' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"strategy\">{{\n 'selectorDoc.labels.strategy' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"rpg\">{{\n 'selectorDoc.labels.rpg' | transloco\n }}</duck-dev-selector-option>\n </duck-dev-selector-drum>\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'selectorDoc.labels.selected' | transloco }}: </span>\n <b>{{ drumSelected() }}</b>\n <span class=\"divider\">|</span>\n <span\n >ionChange: <b>{{ lastEvent() }}</b></span\n >\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'selectorDoc.examples.drumViolet' | transloco }}</p>\n <duck-dev-selector-drum [value]=\"'rush'\" [color]=\"colorViolet\">\n <duck-dev-selector-option value=\"rush\">{{\n 'selectorDoc.labels.rush' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"strategy\">{{\n 'selectorDoc.labels.strategy' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"rpg\">{{\n 'selectorDoc.labels.rpg' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"arcade\">{{\n 'selectorDoc.labels.arcade' | transloco\n }}</duck-dev-selector-option>\n </duck-dev-selector-drum>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'selectorDoc.examples.drumOrange' | transloco }}</p>\n <duck-dev-selector-drum [value]=\"'draft'\" [color]=\"colorOrange\">\n <duck-dev-selector-option value=\"draft\">{{\n 'selectorDoc.labels.draft' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"launch\">{{\n 'selectorDoc.labels.launch' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"archive\">{{\n 'selectorDoc.labels.archive' | transloco\n }}</duck-dev-selector-option>\n </duck-dev-selector-drum>\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'selectorDoc.examples.drumDark' | transloco }}</p>\n <duck-dev-selector-drum [value]=\"'strategy'\" [color]=\"colorDark\">\n <duck-dev-selector-option value=\"strategy\">{{\n 'selectorDoc.labels.strategy' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"research\">{{\n 'selectorDoc.labels.research' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"prototype\">{{\n 'selectorDoc.labels.prototype' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"validate\">{{\n 'selectorDoc.labels.validate' | transloco\n }}</duck-dev-selector-option>\n <duck-dev-selector-option value=\"deliver\">{{\n 'selectorDoc.labels.deliver' | transloco\n }}</duck-dev-selector-option>\n </duck-dev-selector-drum>\n </div>\n </div>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row.example-row--roadsign{align-items:flex-start}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left;width:100%}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
6450
6798
|
}] });
|
|
6451
6799
|
|
|
6452
6800
|
class MainDocumentationPage {
|
|
@@ -6470,6 +6818,7 @@ class MainDocumentationPage {
|
|
|
6470
6818
|
{ id: 'segment', label: this.translocoService.translate('tabs.segment') },
|
|
6471
6819
|
{ id: 'slider', label: this.translocoService.translate('tabs.slider') },
|
|
6472
6820
|
{ id: 'breadcrumb', label: this.translocoService.translate('tabs.breadcrumb') },
|
|
6821
|
+
{ id: 'selector', label: this.translocoService.translate('tabs.selector') },
|
|
6473
6822
|
{ id: 'svg', label: this.translocoService.translate('tabs.svg') },
|
|
6474
6823
|
];
|
|
6475
6824
|
activeTab = signal(this.tabs[0], { ...(ngDevMode ? { debugName: "activeTab" } : {}) });
|
|
@@ -6477,7 +6826,7 @@ class MainDocumentationPage {
|
|
|
6477
6826
|
this.activeTab.set(tab);
|
|
6478
6827
|
}
|
|
6479
6828
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6480
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('quick-start') {\n <app-quick-start-block />\n }\n @case ('accordion') {\n <app-accordion-block />\n }\n @case ('buttons') {\n <app-button-block />\n }\n @case ('loaders') {\n <app-loader-block />\n }\n @case ('progress') {\n <app-progress-bar-block />\n }\n @case ('tabs') {\n <app-tabs-block />\n }\n @case ('tooltip') {\n <app-tooltip-block />\n }\n @case ('badge') {\n <app-badge-block />\n }\n @case ('directives') {\n <app-directive-block />\n }\n @case ('card') {\n <app-card-block />\n }\n @case ('speaker-bubble') {\n <app-speaker-bubble-block />\n }\n @case ('modal') {\n <app-modal-block />\n }\n @case ('input') {\n <app-input-block />\n }\n @case ('notifications') {\n <app-notification-block />\n }\n @case ('slider') {\n <app-slider-block />\n }\n @case ('segment') {\n <app-segment-block />\n }\n @case ('breadcrumb') {\n <app-breadcrumb-block />\n }\n @case ('svg') {\n <app-duck-dev-svg-block />\n }\n }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }, { kind: "component", type: TooltipBlock, selector: "app-tooltip-block" }, { kind: "component", type: QuickStartBlock, selector: "app-quick-start-block" }, { kind: "component", type: ModalBlock, selector: "app-modal-block" }, { kind: "component", type: SegmentBlock, selector: "app-segment-block" }, { kind: "component", type: ProgressBarBlock, selector: "app-progress-bar-block" }, { kind: "component", type: SpeakerBubbleBlock, selector: "app-speaker-bubble-block" }, { kind: "component", type: BreadcrumbBlock, selector: "app-breadcrumb-block" }] });
|
|
6829
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('quick-start') {\n <app-quick-start-block />\n }\n @case ('accordion') {\n <app-accordion-block />\n }\n @case ('buttons') {\n <app-button-block />\n }\n @case ('loaders') {\n <app-loader-block />\n }\n @case ('progress') {\n <app-progress-bar-block />\n }\n @case ('tabs') {\n <app-tabs-block />\n }\n @case ('tooltip') {\n <app-tooltip-block />\n }\n @case ('badge') {\n <app-badge-block />\n }\n @case ('directives') {\n <app-directive-block />\n }\n @case ('card') {\n <app-card-block />\n }\n @case ('speaker-bubble') {\n <app-speaker-bubble-block />\n }\n @case ('modal') {\n <app-modal-block />\n }\n @case ('input') {\n <app-input-block />\n }\n @case ('notifications') {\n <app-notification-block />\n }\n @case ('slider') {\n <app-slider-block />\n }\n @case ('segment') {\n <app-segment-block />\n }\n @case ('breadcrumb') {\n <app-breadcrumb-block />\n }\n @case ('selector') {\n <app-selector-block />\n }\n @case ('svg') {\n <app-duck-dev-svg-block />\n }\n }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }, { kind: "component", type: TooltipBlock, selector: "app-tooltip-block" }, { kind: "component", type: QuickStartBlock, selector: "app-quick-start-block" }, { kind: "component", type: ModalBlock, selector: "app-modal-block" }, { kind: "component", type: SegmentBlock, selector: "app-segment-block" }, { kind: "component", type: ProgressBarBlock, selector: "app-progress-bar-block" }, { kind: "component", type: SpeakerBubbleBlock, selector: "app-speaker-bubble-block" }, { kind: "component", type: BreadcrumbBlock, selector: "app-breadcrumb-block" }, { kind: "component", type: SelectorBlock, selector: "app-selector-block" }] });
|
|
6481
6830
|
}
|
|
6482
6831
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
|
|
6483
6832
|
type: Component,
|
|
@@ -6502,12 +6851,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
6502
6851
|
ProgressBarBlock,
|
|
6503
6852
|
SpeakerBubbleBlock,
|
|
6504
6853
|
BreadcrumbBlock,
|
|
6505
|
-
|
|
6854
|
+
SelectorBlock,
|
|
6855
|
+
], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('quick-start') {\n <app-quick-start-block />\n }\n @case ('accordion') {\n <app-accordion-block />\n }\n @case ('buttons') {\n <app-button-block />\n }\n @case ('loaders') {\n <app-loader-block />\n }\n @case ('progress') {\n <app-progress-bar-block />\n }\n @case ('tabs') {\n <app-tabs-block />\n }\n @case ('tooltip') {\n <app-tooltip-block />\n }\n @case ('badge') {\n <app-badge-block />\n }\n @case ('directives') {\n <app-directive-block />\n }\n @case ('card') {\n <app-card-block />\n }\n @case ('speaker-bubble') {\n <app-speaker-bubble-block />\n }\n @case ('modal') {\n <app-modal-block />\n }\n @case ('input') {\n <app-input-block />\n }\n @case ('notifications') {\n <app-notification-block />\n }\n @case ('slider') {\n <app-slider-block />\n }\n @case ('segment') {\n <app-segment-block />\n }\n @case ('breadcrumb') {\n <app-breadcrumb-block />\n }\n @case ('selector') {\n <app-selector-block />\n }\n @case ('svg') {\n <app-duck-dev-svg-block />\n }\n }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
|
|
6506
6856
|
}] });
|
|
6507
6857
|
|
|
6508
6858
|
const DuckDevLibTranslations = {
|
|
6509
|
-
en: import('./duck-dev-lib-en-
|
|
6510
|
-
ru: import('./duck-dev-lib-ru-
|
|
6859
|
+
en: import('./duck-dev-lib-en-XYugblp4.mjs'),
|
|
6860
|
+
ru: import('./duck-dev-lib-ru-BBQhEnLr.mjs'),
|
|
6511
6861
|
};
|
|
6512
6862
|
|
|
6513
6863
|
/*
|
|
@@ -6518,5 +6868,5 @@ const DuckDevLibTranslations = {
|
|
|
6518
6868
|
* Generated bundle index. Do not edit.
|
|
6519
6869
|
*/
|
|
6520
6870
|
|
|
6521
|
-
export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalSticker, ButtonNeobrutalTag, ButtonNeobrutalTape, ButtonNeobrutalZigzag, DdFlexDirectionDirective, DdTabPanel, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevAccordionNeobrutalTapeComponent as DuckDevAccordionNeobrutalTape, DuckDevBreadcrumbClassic, DuckDevBreadcrumbNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevSegmentButton, DuckDevSegmentClassic, DuckDevSegmentNeobrutal, DuckDevSegmentNeobrutalVertical, DuckDevSpeakerBubbleClassic, DuckDevSpeakerBubbleNeobrutalSlab, DuckDevSpeakerBubbleNeobrutalTicket, DuckDevSpeakerBubbleOutline, DuckDevSpeakerBubbleSoft, DuckDevTab, DuckDevTabNeobrutal, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic, getClassicSpeakerBubbleStyle, getNeobrutalSpeakerBubbleStyle, useSpeakerBubbleTail };
|
|
6871
|
+
export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalSticker, ButtonNeobrutalTag, ButtonNeobrutalTape, ButtonNeobrutalZigzag, DdFlexDirectionDirective, DdTabPanel, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevAccordionNeobrutalTapeComponent as DuckDevAccordionNeobrutalTape, DuckDevBreadcrumbClassic, DuckDevBreadcrumbNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevSegmentButton, DuckDevSegmentClassic, DuckDevSegmentNeobrutal, DuckDevSegmentNeobrutalVertical, DuckDevSelectorDrum, DuckDevSelectorOption, DuckDevSpeakerBubbleClassic, DuckDevSpeakerBubbleNeobrutalSlab, DuckDevSpeakerBubbleNeobrutalTicket, DuckDevSpeakerBubbleOutline, DuckDevSpeakerBubbleSoft, DuckDevTab, DuckDevTabNeobrutal, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic, getClassicSpeakerBubbleStyle, getNeobrutalSelectorStyle, getNeobrutalSpeakerBubbleStyle, useSpeakerBubbleTail };
|
|
6522
6872
|
//# sourceMappingURL=duck-dev-lib.mjs.map
|