duck-dev-lib 0.0.88 → 0.0.90
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.
|
@@ -5401,13 +5401,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
5401
5401
|
args: [{ selector: 'dd-breadcrumb-classic', standalone: true, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n <ol class=\"breadcrumb__list\">\n @for (item of items(); track $index; let last = $last) {\n <li\n class=\"breadcrumb__item\"\n animate.enter=\"breadcrumb__item--enter\"\n animate.leave=\"breadcrumb__item--leave\"\n >\n @if (!last && item.url) {\n <button class=\"breadcrumb__link\" type=\"button\" (click)=\"navigate.emit(item)\">\n {{ item.label }}\n </button>\n } @else {\n <span class=\"breadcrumb__current\" [attr.aria-current]=\"last ? 'page' : null\">{{\n item.label\n }}</span>\n }\n @if (!last) {\n <span class=\"breadcrumb__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n }\n </li>\n }\n </ol>\n</nav>\n", styles: [":host{display:block;height:40px;box-sizing:border-box}.breadcrumb__list{display:flex;flex-wrap:nowrap;align-items:center;margin:0;padding:0;list-style:none;height:100%;overflow-x:auto;scrollbar-width:none}.breadcrumb__list::-webkit-scrollbar{display:none}.breadcrumb__item{display:inline-flex;align-items:center;min-width:0}.breadcrumb__link{display:inline-block;max-width:150px;padding:6px 4px;border:none;background:transparent;color:var(--dd-base-accent-blue);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s ease,opacity .18s ease}.breadcrumb__link:hover{color:var(--dd-base-secondary);text-decoration:underline}.breadcrumb__link:focus-visible{outline:2px solid var(--dd-base-accent-blue);outline-offset:2px;border-radius:3px}.breadcrumb__current{display:inline-block;max-width:150px;padding:6px 4px;color:var(--dd-base-500);font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.breadcrumb__separator{flex-shrink:0;margin:0 8px;color:var(--dd-base-400);font-size:.8rem;-webkit-user-select:none;user-select:none}@keyframes breadcrumb-item-enter{0%{opacity:0;max-width:0;transform:translate(-8px)}50%{opacity:.4;max-width:250px}to{opacity:1;max-width:250px;transform:translate(0)}}@keyframes breadcrumb-item-leave{0%{opacity:1;max-width:250px;transform:translate(0)}50%{opacity:0;max-width:250px}to{opacity:0;max-width:0;transform:translate(-8px)}}.breadcrumb__item--enter{animation:breadcrumb-item-enter .3s cubic-bezier(.16,1,.3,1) both}.breadcrumb__item--leave{animation:breadcrumb-item-leave .22s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.breadcrumb__link,.breadcrumb__current{max-width:150px;font-size:.84rem}.breadcrumb__separator{margin:0 6px}}@media(max-width:480px){:host{height:36px}.breadcrumb__link{max-width:120px;padding:8px 2px;font-size:.8rem}.breadcrumb__current{max-width:140px;padding:8px 2px;font-size:.8rem}.breadcrumb__separator{margin:0 4px;font-size:.72rem}}@media(max-width:360px){.breadcrumb__link{max-width:90px;font-size:.75rem}.breadcrumb__current{max-width:110px;font-size:.75rem}.breadcrumb__separator{margin:0 3px}}\n"] }]
|
|
5402
5402
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }] } });
|
|
5403
5403
|
|
|
5404
|
-
const SCROLL_FADE_RANGE_PX =
|
|
5405
|
-
const SCROLL_FADE_MAX_OPACITY =
|
|
5404
|
+
const SCROLL_FADE_RANGE_PX = 16;
|
|
5405
|
+
const SCROLL_FADE_MAX_OPACITY = 1;
|
|
5406
5406
|
const SCROLL_EDGE_EPSILON_PX = 1;
|
|
5407
5407
|
const LONG_PRESS_TOOLTIP_DELAY_MS = 500;
|
|
5408
5408
|
const LONG_PRESS_MOVE_TOLERANCE_PX = 6;
|
|
5409
5409
|
const TOOLTIP_HORIZONTAL_GAP_PX = 8;
|
|
5410
5410
|
const TOOLTIP_MAX_WIDTH_PX = 320;
|
|
5411
|
+
const EMPTY_ITEMS_CLEAR_DELAY_MS = 80;
|
|
5411
5412
|
class DuckDevBreadcrumbNeobrutal {
|
|
5412
5413
|
items = input.required({ ...(ngDevMode ? { debugName: "items" } : {}) });
|
|
5413
5414
|
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
@@ -5416,11 +5417,15 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5416
5417
|
navRef = viewChild('navEl', { ...(ngDevMode ? { debugName: "navRef" } : {}) });
|
|
5417
5418
|
listRef = viewChild('listEl', { ...(ngDevMode ? { debugName: "listRef" } : {}) });
|
|
5418
5419
|
labelRefs = viewChildren('labelEl', { ...(ngDevMode ? { debugName: "labelRefs" } : {}) });
|
|
5419
|
-
|
|
5420
|
+
retainedItems = signal([], { ...(ngDevMode ? { debugName: "retainedItems" } : {}) });
|
|
5421
|
+
visibleItems = computed(() => {
|
|
5422
|
+
const items = this.items();
|
|
5423
|
+
return items.length > 0 ? items : this.retainedItems();
|
|
5424
|
+
}, { ...(ngDevMode ? { debugName: "visibleItems" } : {}) });
|
|
5420
5425
|
breadcrumbStyle = computed(() => this.getPalette(this.color()), { ...(ngDevMode ? { debugName: "breadcrumbStyle" } : {}) });
|
|
5421
5426
|
tooltipState = signal(null, { ...(ngDevMode ? { debugName: "tooltipState" } : {}) });
|
|
5422
5427
|
tooltipLabel = computed(() => this.tooltipState()?.label ?? '', { ...(ngDevMode ? { debugName: "tooltipLabel" } : {}) });
|
|
5423
|
-
tooltipVisible =
|
|
5428
|
+
tooltipVisible = signal(false, { ...(ngDevMode ? { debugName: "tooltipVisible" } : {}) });
|
|
5424
5429
|
tooltipStyle = computed(() => {
|
|
5425
5430
|
const tooltipState = this.tooltipState();
|
|
5426
5431
|
if (!tooltipState) {
|
|
@@ -5440,6 +5445,7 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5440
5445
|
destroyRef = inject(DestroyRef);
|
|
5441
5446
|
resizeObserver = null;
|
|
5442
5447
|
scrollFadeFrameId = 0;
|
|
5448
|
+
emptyItemsClearTimerId = null;
|
|
5443
5449
|
longPressTimerId = null;
|
|
5444
5450
|
longPressPointerId = null;
|
|
5445
5451
|
longPressIndex = null;
|
|
@@ -5476,7 +5482,7 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5476
5482
|
}
|
|
5477
5483
|
constructor() {
|
|
5478
5484
|
effect(() => {
|
|
5479
|
-
this.items();
|
|
5485
|
+
this.syncVisibleItems(this.items());
|
|
5480
5486
|
this.queueScrollFadeUpdate();
|
|
5481
5487
|
});
|
|
5482
5488
|
this.destroyRef.onDestroy(() => {
|
|
@@ -5486,6 +5492,7 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5486
5492
|
if (this.scrollFadeFrameId && typeof cancelAnimationFrame !== 'undefined') {
|
|
5487
5493
|
cancelAnimationFrame(this.scrollFadeFrameId);
|
|
5488
5494
|
}
|
|
5495
|
+
this.clearEmptyItemsTimer();
|
|
5489
5496
|
this.clearLongPressTimer();
|
|
5490
5497
|
});
|
|
5491
5498
|
}
|
|
@@ -5542,6 +5549,7 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5542
5549
|
}
|
|
5543
5550
|
this.longPressActivatedIndex = index;
|
|
5544
5551
|
this.tooltipState.set(tooltipState);
|
|
5552
|
+
this.tooltipVisible.set(true);
|
|
5545
5553
|
}, LONG_PRESS_TOOLTIP_DELAY_MS);
|
|
5546
5554
|
}
|
|
5547
5555
|
onCrumbPointerMove(event) {
|
|
@@ -5556,9 +5564,14 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5556
5564
|
this.longPressActivatedIndex = null;
|
|
5557
5565
|
}
|
|
5558
5566
|
}
|
|
5559
|
-
onCrumbPointerEnd(event) {
|
|
5567
|
+
onCrumbPointerEnd(event, suppressNextClick = false) {
|
|
5560
5568
|
if (this.longPressPointerId === event.pointerId) {
|
|
5569
|
+
const shouldSuppressNextClick = suppressNextClick && this.longPressActivatedIndex === this.longPressIndex;
|
|
5561
5570
|
this.clearLongPressTimer();
|
|
5571
|
+
this.hideTooltip();
|
|
5572
|
+
if (!shouldSuppressNextClick) {
|
|
5573
|
+
this.longPressActivatedIndex = null;
|
|
5574
|
+
}
|
|
5562
5575
|
}
|
|
5563
5576
|
}
|
|
5564
5577
|
observeScrollContainer() {
|
|
@@ -5609,6 +5622,29 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5609
5622
|
this.longPressPointerId = null;
|
|
5610
5623
|
this.longPressIndex = null;
|
|
5611
5624
|
}
|
|
5625
|
+
syncVisibleItems(items) {
|
|
5626
|
+
if (items.length > 0) {
|
|
5627
|
+
this.clearEmptyItemsTimer();
|
|
5628
|
+
this.retainedItems.set(items);
|
|
5629
|
+
return;
|
|
5630
|
+
}
|
|
5631
|
+
if (this.retainedItems().length === 0 || this.emptyItemsClearTimerId) {
|
|
5632
|
+
return;
|
|
5633
|
+
}
|
|
5634
|
+
this.emptyItemsClearTimerId = setTimeout(() => {
|
|
5635
|
+
this.emptyItemsClearTimerId = null;
|
|
5636
|
+
if (this.items().length === 0) {
|
|
5637
|
+
this.retainedItems.set([]);
|
|
5638
|
+
this.queueScrollFadeUpdate();
|
|
5639
|
+
}
|
|
5640
|
+
}, EMPTY_ITEMS_CLEAR_DELAY_MS);
|
|
5641
|
+
}
|
|
5642
|
+
clearEmptyItemsTimer() {
|
|
5643
|
+
if (this.emptyItemsClearTimerId) {
|
|
5644
|
+
clearTimeout(this.emptyItemsClearTimerId);
|
|
5645
|
+
this.emptyItemsClearTimerId = null;
|
|
5646
|
+
}
|
|
5647
|
+
}
|
|
5612
5648
|
isLabelOverflowing(index) {
|
|
5613
5649
|
const labelEl = this.labelRefs()[index]?.nativeElement;
|
|
5614
5650
|
return !!labelEl && labelEl.scrollWidth > labelEl.clientWidth + 1;
|
|
@@ -5634,7 +5670,7 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5634
5670
|
};
|
|
5635
5671
|
}
|
|
5636
5672
|
hideTooltip() {
|
|
5637
|
-
this.
|
|
5673
|
+
this.tooltipVisible.set(false);
|
|
5638
5674
|
}
|
|
5639
5675
|
clamp(value, min, max) {
|
|
5640
5676
|
return Math.min(Math.max(value, min), max);
|
|
@@ -5690,11 +5726,11 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5690
5726
|
}
|
|
5691
5727
|
}
|
|
5692
5728
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5693
|
-
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: "navRef", first: true, predicate: ["navEl"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listEl"], descendants: true, isSignal: true }, { propertyName: "labelRefs", predicate: ["labelEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav\n class=\"neo-bc\"\n #navEl\n [class.neo-bc--mobile]=\"isMobile()\"\n aria-label=\"Breadcrumb\"\n [ngStyle]=\"breadcrumbStyle()\"\n [style.--neo-bc-left-fade-opacity]=\"leftFadeOpacity()\"\n [style.--neo-bc-right-fade-opacity]=\"rightFadeOpacity()\"\n>\n <ol\n class=\"neo-bc__list\"\n #listEl\n [class.neo-bc__list--dragging]=\"isDragging()\"\n (mousedown)=\"onListMouseDown($event)\"\n (scroll)=\"onListScroll()\"\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 type=\"button\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onNavigate(item, $index, $event)\"\n (pointerdown)=\"onCrumbPointerDown($index, $event)\"\n (pointermove)=\"onCrumbPointerMove($event)\"\n (pointerup)=\"onCrumbPointerEnd($event)\"\n (pointercancel)=\"onCrumbPointerEnd($event)\"\n (pointerleave)=\"onCrumbPointerEnd($event)\"\n (contextmenu)=\"$event.preventDefault()\"\n (keydown.escape)=\"closeTooltip()\"\n >\n <span class=\"neo-bc__chip\">\n <span class=\"neo-bc__label\" #labelEl>{{ item.label }}</span>\n </span>\n </button>\n } @else {\n <span\n class=\"neo-bc__current\"\n tabindex=\"0\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onCurrentClick($index, $event)\"\n (pointerdown)=\"onCrumbPointerDown($index, $event)\"\n (pointermove)=\"onCrumbPointerMove($event)\"\n (pointerup)=\"onCrumbPointerEnd($event)\"\n (pointercancel)=\"onCrumbPointerEnd($event)\"\n (pointerleave)=\"onCrumbPointerEnd($event)\"\n (contextmenu)=\"$event.preventDefault()\"\n (keydown.enter)=\"onCurrentClick($index, $event)\"\n (keydown.space)=\"$event.preventDefault(); onCurrentClick($index, $event)\"\n (keydown.escape)=\"closeTooltip()\"\n >\n <span class=\"neo-bc__chip neo-bc__chip--active\">\n <span class=\"neo-bc__label\" #labelEl>{{ item.label }}</span>\n </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 <span class=\"neo-bc__scroll-fade neo-bc__scroll-fade--left\" aria-hidden=\"true\"></span>\n <span class=\"neo-bc__scroll-fade neo-bc__scroll-fade--right\" aria-hidden=\"true\"></span>\n <span\n class=\"neo-bc__tooltip\"\n [class.neo-bc__tooltip--visible]=\"tooltipVisible()\"\n [ngStyle]=\"tooltipStyle()\"\n role=\"tooltip\"\n >\n {{ tooltipLabel() }}\n </span>\n</nav>\n", styles: [":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-padding-x: 14px;--neo-bc-padding-y: 10px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-scroll-fade-size: 44px;--neo-bc-left-fade-opacity: 0;--neo-bc-right-fade-opacity: 0;--neo-bc-crumb-max-width: 150px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );position:relative;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:var(--neo-bc-padding-y) var(--neo-bc-padding-x);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{position:relative;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__scroll-fade{position:absolute;top:var(--neo-bc-padding-y);bottom:var(--neo-bc-padding-y);z-index:1;width:var(--neo-bc-scroll-fade-size);pointer-events:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:opacity .12s linear}.neo-bc__scroll-fade--left{left:var(--neo-bc-padding-x);background:linear-gradient(90deg,var(--neo-bc-surface) 0%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 42%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 42%,transparent 100%);opacity:var(--neo-bc-left-fade-opacity)}.neo-bc__scroll-fade--right{right:var(--neo-bc-padding-x);background:linear-gradient(270deg,var(--neo-bc-surface) 0%,transparent 100%);mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.72) 42%,transparent 100%);-webkit-mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.72) 42%,transparent 100%);opacity:var(--neo-bc-right-fade-opacity)}.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:var(--neo-bc-crumb-max-width);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;max-width:var(--neo-bc-crumb-max-width);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(--neo-bc-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;max-width:var(--neo-bc-crumb-max-width);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__tooltip{position:absolute;z-index:3;display:block;max-width:min(320px,100% - 16px);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__tooltip--visible{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-padding-x: 10px;--neo-bc-padding-y: 8px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;--neo-bc-scroll-fade-size: 36px;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;--neo-bc-padding-x: 8px;--neo-bc-padding-y: 8px;--neo-bc-scroll-fade-size: 24px;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__tooltip{max-width:min(260px,100% - 12px);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;--neo-bc-padding-x: 6px;--neo-bc-padding-y: 6px;--neo-bc-scroll-fade-size: 28px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
5729
|
+
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: "navRef", first: true, predicate: ["navEl"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listEl"], descendants: true, isSignal: true }, { propertyName: "labelRefs", predicate: ["labelEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav\n class=\"neo-bc\"\n #navEl\n [class.neo-bc--mobile]=\"isMobile()\"\n aria-label=\"Breadcrumb\"\n [ngStyle]=\"breadcrumbStyle()\"\n [style.--neo-bc-left-fade-opacity]=\"leftFadeOpacity()\"\n [style.--neo-bc-right-fade-opacity]=\"rightFadeOpacity()\"\n>\n <ol\n class=\"neo-bc__list\"\n #listEl\n [class.neo-bc__list--dragging]=\"isDragging()\"\n (mousedown)=\"onListMouseDown($event)\"\n (scroll)=\"onListScroll()\"\n >\n @for (item of visibleItems(); track $index; let last = $last) {\n <li class=\"neo-bc__item\">\n @if (!last && item.url) {\n <button\n class=\"neo-bc__link\"\n type=\"button\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onNavigate(item, $index, $event)\"\n (pointerdown)=\"onCrumbPointerDown($index, $event)\"\n (pointermove)=\"onCrumbPointerMove($event)\"\n (pointerup)=\"onCrumbPointerEnd($event, true)\"\n (pointercancel)=\"onCrumbPointerEnd($event)\"\n (pointerleave)=\"onCrumbPointerEnd($event)\"\n (contextmenu)=\"$event.preventDefault()\"\n (keydown.escape)=\"closeTooltip()\"\n >\n <span class=\"neo-bc__chip\">\n <span class=\"neo-bc__label\" #labelEl>{{ item.label }}</span>\n </span>\n </button>\n } @else {\n <span\n class=\"neo-bc__current\"\n tabindex=\"0\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onCurrentClick($index, $event)\"\n (pointerdown)=\"onCrumbPointerDown($index, $event)\"\n (pointermove)=\"onCrumbPointerMove($event)\"\n (pointerup)=\"onCrumbPointerEnd($event, true)\"\n (pointercancel)=\"onCrumbPointerEnd($event)\"\n (pointerleave)=\"onCrumbPointerEnd($event)\"\n (contextmenu)=\"$event.preventDefault()\"\n (keydown.enter)=\"onCurrentClick($index, $event)\"\n (keydown.space)=\"$event.preventDefault(); onCurrentClick($index, $event)\"\n (keydown.escape)=\"closeTooltip()\"\n >\n <span class=\"neo-bc__chip neo-bc__chip--active\">\n <span class=\"neo-bc__label\" #labelEl>{{ item.label }}</span>\n </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 <span class=\"neo-bc__scroll-fade neo-bc__scroll-fade--left\" aria-hidden=\"true\"></span>\n <span class=\"neo-bc__scroll-fade neo-bc__scroll-fade--right\" aria-hidden=\"true\"></span>\n <span\n class=\"neo-bc__tooltip\"\n [class.neo-bc__tooltip--visible]=\"tooltipVisible()\"\n [ngStyle]=\"tooltipStyle()\"\n role=\"tooltip\"\n >\n {{ tooltipLabel() }}\n </span>\n</nav>\n", styles: [":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-padding-x: 14px;--neo-bc-padding-y: 10px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-scroll-fade-size: 44px;--neo-bc-left-fade-opacity: 0;--neo-bc-right-fade-opacity: 0;--neo-bc-crumb-max-width: 150px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );position:relative;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:var(--neo-bc-padding-y) var(--neo-bc-padding-x);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{position:relative;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__scroll-fade{position:absolute;top:var(--neo-bc-padding-y);bottom:var(--neo-bc-padding-y);z-index:1;width:var(--neo-bc-scroll-fade-size);pointer-events:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:opacity .12s linear}.neo-bc__scroll-fade--left{left:var(--neo-bc-padding-x);background:linear-gradient(90deg,var(--neo-bc-surface) 0%,var(--neo-bc-surface) 48%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 68%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 68%,transparent 100%);opacity:var(--neo-bc-left-fade-opacity)}.neo-bc__scroll-fade--right{right:var(--neo-bc-padding-x);background:linear-gradient(270deg,var(--neo-bc-surface) 0%,var(--neo-bc-surface) 48%,transparent 100%);mask-image:linear-gradient(270deg,#000 0%,#000 68%,transparent 100%);-webkit-mask-image:linear-gradient(270deg,#000 0%,#000 68%,transparent 100%);opacity:var(--neo-bc-right-fade-opacity)}.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:var(--neo-bc-crumb-max-width);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;max-width:var(--neo-bc-crumb-max-width);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(--neo-bc-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;max-width:var(--neo-bc-crumb-max-width);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__tooltip{position:absolute;z-index:3;display:block;max-width:min(320px,100% - 16px);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__tooltip--visible{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-padding-x: 10px;--neo-bc-padding-y: 8px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;--neo-bc-scroll-fade-size: 36px;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;--neo-bc-padding-x: 8px;--neo-bc-padding-y: 8px;--neo-bc-scroll-fade-size: 24px;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__tooltip{max-width:min(260px,100% - 12px);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;--neo-bc-padding-x: 6px;--neo-bc-padding-y: 6px;--neo-bc-scroll-fade-size: 28px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
5694
5730
|
}
|
|
5695
5731
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, decorators: [{
|
|
5696
5732
|
type: Component,
|
|
5697
|
-
args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<nav\n class=\"neo-bc\"\n #navEl\n [class.neo-bc--mobile]=\"isMobile()\"\n aria-label=\"Breadcrumb\"\n [ngStyle]=\"breadcrumbStyle()\"\n [style.--neo-bc-left-fade-opacity]=\"leftFadeOpacity()\"\n [style.--neo-bc-right-fade-opacity]=\"rightFadeOpacity()\"\n>\n <ol\n class=\"neo-bc__list\"\n #listEl\n [class.neo-bc__list--dragging]=\"isDragging()\"\n (mousedown)=\"onListMouseDown($event)\"\n (scroll)=\"onListScroll()\"\n >\n @for (item of visibleItems(); track $index; let last = $last) {\n <li
|
|
5733
|
+
args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<nav\n class=\"neo-bc\"\n #navEl\n [class.neo-bc--mobile]=\"isMobile()\"\n aria-label=\"Breadcrumb\"\n [ngStyle]=\"breadcrumbStyle()\"\n [style.--neo-bc-left-fade-opacity]=\"leftFadeOpacity()\"\n [style.--neo-bc-right-fade-opacity]=\"rightFadeOpacity()\"\n>\n <ol\n class=\"neo-bc__list\"\n #listEl\n [class.neo-bc__list--dragging]=\"isDragging()\"\n (mousedown)=\"onListMouseDown($event)\"\n (scroll)=\"onListScroll()\"\n >\n @for (item of visibleItems(); track $index; let last = $last) {\n <li class=\"neo-bc__item\">\n @if (!last && item.url) {\n <button\n class=\"neo-bc__link\"\n type=\"button\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onNavigate(item, $index, $event)\"\n (pointerdown)=\"onCrumbPointerDown($index, $event)\"\n (pointermove)=\"onCrumbPointerMove($event)\"\n (pointerup)=\"onCrumbPointerEnd($event, true)\"\n (pointercancel)=\"onCrumbPointerEnd($event)\"\n (pointerleave)=\"onCrumbPointerEnd($event)\"\n (contextmenu)=\"$event.preventDefault()\"\n (keydown.escape)=\"closeTooltip()\"\n >\n <span class=\"neo-bc__chip\">\n <span class=\"neo-bc__label\" #labelEl>{{ item.label }}</span>\n </span>\n </button>\n } @else {\n <span\n class=\"neo-bc__current\"\n tabindex=\"0\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.aria-label]=\"item.label\"\n (click)=\"onCurrentClick($index, $event)\"\n (pointerdown)=\"onCrumbPointerDown($index, $event)\"\n (pointermove)=\"onCrumbPointerMove($event)\"\n (pointerup)=\"onCrumbPointerEnd($event, true)\"\n (pointercancel)=\"onCrumbPointerEnd($event)\"\n (pointerleave)=\"onCrumbPointerEnd($event)\"\n (contextmenu)=\"$event.preventDefault()\"\n (keydown.enter)=\"onCurrentClick($index, $event)\"\n (keydown.space)=\"$event.preventDefault(); onCurrentClick($index, $event)\"\n (keydown.escape)=\"closeTooltip()\"\n >\n <span class=\"neo-bc__chip neo-bc__chip--active\">\n <span class=\"neo-bc__label\" #labelEl>{{ item.label }}</span>\n </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 <span class=\"neo-bc__scroll-fade neo-bc__scroll-fade--left\" aria-hidden=\"true\"></span>\n <span class=\"neo-bc__scroll-fade neo-bc__scroll-fade--right\" aria-hidden=\"true\"></span>\n <span\n class=\"neo-bc__tooltip\"\n [class.neo-bc__tooltip--visible]=\"tooltipVisible()\"\n [ngStyle]=\"tooltipStyle()\"\n role=\"tooltip\"\n >\n {{ tooltipLabel() }}\n </span>\n</nav>\n", styles: [":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-padding-x: 14px;--neo-bc-padding-y: 10px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-scroll-fade-size: 44px;--neo-bc-left-fade-opacity: 0;--neo-bc-right-fade-opacity: 0;--neo-bc-crumb-max-width: 150px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );position:relative;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:var(--neo-bc-padding-y) var(--neo-bc-padding-x);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{position:relative;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__scroll-fade{position:absolute;top:var(--neo-bc-padding-y);bottom:var(--neo-bc-padding-y);z-index:1;width:var(--neo-bc-scroll-fade-size);pointer-events:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:opacity .12s linear}.neo-bc__scroll-fade--left{left:var(--neo-bc-padding-x);background:linear-gradient(90deg,var(--neo-bc-surface) 0%,var(--neo-bc-surface) 48%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 68%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 68%,transparent 100%);opacity:var(--neo-bc-left-fade-opacity)}.neo-bc__scroll-fade--right{right:var(--neo-bc-padding-x);background:linear-gradient(270deg,var(--neo-bc-surface) 0%,var(--neo-bc-surface) 48%,transparent 100%);mask-image:linear-gradient(270deg,#000 0%,#000 68%,transparent 100%);-webkit-mask-image:linear-gradient(270deg,#000 0%,#000 68%,transparent 100%);opacity:var(--neo-bc-right-fade-opacity)}.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:var(--neo-bc-crumb-max-width);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;max-width:var(--neo-bc-crumb-max-width);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(--neo-bc-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;max-width:var(--neo-bc-crumb-max-width);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__tooltip{position:absolute;z-index:3;display:block;max-width:min(320px,100% - 16px);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__tooltip--visible{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-padding-x: 10px;--neo-bc-padding-y: 8px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;--neo-bc-scroll-fade-size: 36px;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;--neo-bc-padding-x: 8px;--neo-bc-padding-y: 8px;--neo-bc-scroll-fade-size: 24px;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__tooltip{max-width:min(260px,100% - 12px);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;--neo-bc-padding-x: 6px;--neo-bc-padding-y: 6px;--neo-bc-scroll-fade-size: 28px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"] }]
|
|
5698
5734
|
}], 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"] }], navRef: [{ type: i0.ViewChild, args: ['navEl', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['listEl', { isSignal: true }] }], labelRefs: [{ type: i0.ViewChildren, args: ['labelEl', { isSignal: true }] }] } });
|
|
5699
5735
|
|
|
5700
5736
|
class DuckDevSelectorOption {
|