duck-dev-lib 0.0.86 → 0.0.88
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.
|
@@ -5334,27 +5334,58 @@ class DuckDevBreadcrumbClassic {
|
|
|
5334
5334
|
separator = input('/', { ...(ngDevMode ? { debugName: "separator" } : {}) });
|
|
5335
5335
|
navigate = output();
|
|
5336
5336
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5337
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbClassic, isStandalone: true, selector: "dd-breadcrumb-classic", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, 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:
|
|
5337
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbClassic, isStandalone: true, selector: "dd-breadcrumb-classic", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, 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"] });
|
|
5338
5338
|
}
|
|
5339
5339
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbClassic, decorators: [{
|
|
5340
5340
|
type: Component,
|
|
5341
|
-
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:
|
|
5341
|
+
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"] }]
|
|
5342
5342
|
}], 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"] }] } });
|
|
5343
5343
|
|
|
5344
|
+
const SCROLL_FADE_RANGE_PX = 32;
|
|
5345
|
+
const SCROLL_FADE_MAX_OPACITY = 0.76;
|
|
5346
|
+
const SCROLL_EDGE_EPSILON_PX = 1;
|
|
5347
|
+
const LONG_PRESS_TOOLTIP_DELAY_MS = 500;
|
|
5348
|
+
const LONG_PRESS_MOVE_TOLERANCE_PX = 6;
|
|
5349
|
+
const TOOLTIP_HORIZONTAL_GAP_PX = 8;
|
|
5350
|
+
const TOOLTIP_MAX_WIDTH_PX = 320;
|
|
5344
5351
|
class DuckDevBreadcrumbNeobrutal {
|
|
5345
5352
|
items = input.required({ ...(ngDevMode ? { debugName: "items" } : {}) });
|
|
5346
5353
|
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
5347
5354
|
isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
|
|
5348
5355
|
navigate = output();
|
|
5356
|
+
navRef = viewChild('navEl', { ...(ngDevMode ? { debugName: "navRef" } : {}) });
|
|
5349
5357
|
listRef = viewChild('listEl', { ...(ngDevMode ? { debugName: "listRef" } : {}) });
|
|
5358
|
+
labelRefs = viewChildren('labelEl', { ...(ngDevMode ? { debugName: "labelRefs" } : {}) });
|
|
5350
5359
|
visibleItems = computed(() => this.items(), { ...(ngDevMode ? { debugName: "visibleItems" } : {}) });
|
|
5351
5360
|
breadcrumbStyle = computed(() => this.getPalette(this.color()), { ...(ngDevMode ? { debugName: "breadcrumbStyle" } : {}) });
|
|
5352
|
-
|
|
5361
|
+
tooltipState = signal(null, { ...(ngDevMode ? { debugName: "tooltipState" } : {}) });
|
|
5362
|
+
tooltipLabel = computed(() => this.tooltipState()?.label ?? '', { ...(ngDevMode ? { debugName: "tooltipLabel" } : {}) });
|
|
5363
|
+
tooltipVisible = computed(() => this.tooltipState() !== null, { ...(ngDevMode ? { debugName: "tooltipVisible" } : {}) });
|
|
5364
|
+
tooltipStyle = computed(() => {
|
|
5365
|
+
const tooltipState = this.tooltipState();
|
|
5366
|
+
if (!tooltipState) {
|
|
5367
|
+
return {};
|
|
5368
|
+
}
|
|
5369
|
+
return {
|
|
5370
|
+
left: `${tooltipState.left}px`,
|
|
5371
|
+
top: `${tooltipState.top}px`,
|
|
5372
|
+
};
|
|
5373
|
+
}, { ...(ngDevMode ? { debugName: "tooltipStyle" } : {}) });
|
|
5353
5374
|
isDragging = signal(false, { ...(ngDevMode ? { debugName: "isDragging" } : {}) });
|
|
5375
|
+
leftFadeOpacity = signal(0, { ...(ngDevMode ? { debugName: "leftFadeOpacity" } : {}) });
|
|
5376
|
+
rightFadeOpacity = signal(0, { ...(ngDevMode ? { debugName: "rightFadeOpacity" } : {}) });
|
|
5354
5377
|
dragStartX = 0;
|
|
5355
5378
|
scrollStartX = 0;
|
|
5356
5379
|
hasDragged = false;
|
|
5357
5380
|
destroyRef = inject(DestroyRef);
|
|
5381
|
+
resizeObserver = null;
|
|
5382
|
+
scrollFadeFrameId = 0;
|
|
5383
|
+
longPressTimerId = null;
|
|
5384
|
+
longPressPointerId = null;
|
|
5385
|
+
longPressIndex = null;
|
|
5386
|
+
longPressStartX = 0;
|
|
5387
|
+
longPressStartY = 0;
|
|
5388
|
+
longPressActivatedIndex = null;
|
|
5358
5389
|
onMouseMove = (e) => {
|
|
5359
5390
|
const el = this.listRef()?.nativeElement;
|
|
5360
5391
|
if (!el)
|
|
@@ -5362,6 +5393,7 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5362
5393
|
e.preventDefault();
|
|
5363
5394
|
const dx = e.clientX - this.dragStartX;
|
|
5364
5395
|
el.scrollLeft = this.scrollStartX - dx;
|
|
5396
|
+
this.updateScrollFades();
|
|
5365
5397
|
if (Math.abs(dx) > 3) {
|
|
5366
5398
|
this.hasDragged = true;
|
|
5367
5399
|
}
|
|
@@ -5383,38 +5415,169 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5383
5415
|
document.addEventListener('mouseup', this.onMouseUp);
|
|
5384
5416
|
}
|
|
5385
5417
|
constructor() {
|
|
5418
|
+
effect(() => {
|
|
5419
|
+
this.items();
|
|
5420
|
+
this.queueScrollFadeUpdate();
|
|
5421
|
+
});
|
|
5386
5422
|
this.destroyRef.onDestroy(() => {
|
|
5387
5423
|
document.removeEventListener('mousemove', this.onMouseMove);
|
|
5388
5424
|
document.removeEventListener('mouseup', this.onMouseUp);
|
|
5425
|
+
this.resizeObserver?.disconnect();
|
|
5426
|
+
if (this.scrollFadeFrameId && typeof cancelAnimationFrame !== 'undefined') {
|
|
5427
|
+
cancelAnimationFrame(this.scrollFadeFrameId);
|
|
5428
|
+
}
|
|
5429
|
+
this.clearLongPressTimer();
|
|
5389
5430
|
});
|
|
5390
5431
|
}
|
|
5391
|
-
|
|
5432
|
+
ngAfterViewInit() {
|
|
5433
|
+
this.observeScrollContainer();
|
|
5434
|
+
this.queueScrollFadeUpdate();
|
|
5435
|
+
}
|
|
5436
|
+
onListScroll() {
|
|
5437
|
+
this.hideTooltip();
|
|
5438
|
+
this.updateScrollFades();
|
|
5439
|
+
}
|
|
5440
|
+
onNavigate(item, index, event) {
|
|
5392
5441
|
if (this.hasDragged) {
|
|
5393
5442
|
this.hasDragged = false;
|
|
5394
5443
|
return;
|
|
5395
5444
|
}
|
|
5396
|
-
if (
|
|
5397
|
-
|
|
5445
|
+
if (this.longPressActivatedIndex === index) {
|
|
5446
|
+
event.preventDefault();
|
|
5447
|
+
event.stopPropagation();
|
|
5448
|
+
this.longPressActivatedIndex = null;
|
|
5449
|
+
return;
|
|
5450
|
+
}
|
|
5451
|
+
this.hideTooltip();
|
|
5452
|
+
this.navigate.emit(item);
|
|
5453
|
+
}
|
|
5454
|
+
onCurrentClick(index, event) {
|
|
5455
|
+
if (this.longPressActivatedIndex === index) {
|
|
5456
|
+
event.preventDefault();
|
|
5457
|
+
event.stopPropagation();
|
|
5458
|
+
this.longPressActivatedIndex = null;
|
|
5459
|
+
return;
|
|
5460
|
+
}
|
|
5461
|
+
this.hideTooltip();
|
|
5462
|
+
}
|
|
5463
|
+
closeTooltip() {
|
|
5464
|
+
this.hideTooltip();
|
|
5465
|
+
}
|
|
5466
|
+
onCrumbPointerDown(index, event) {
|
|
5467
|
+
if (event.pointerType === 'mouse' && event.button !== 0) {
|
|
5468
|
+
return;
|
|
5469
|
+
}
|
|
5470
|
+
this.clearLongPressTimer();
|
|
5471
|
+
this.longPressPointerId = event.pointerId;
|
|
5472
|
+
this.longPressIndex = index;
|
|
5473
|
+
this.longPressStartX = event.clientX;
|
|
5474
|
+
this.longPressStartY = event.clientY;
|
|
5475
|
+
this.longPressActivatedIndex = null;
|
|
5476
|
+
this.hideTooltip();
|
|
5477
|
+
this.longPressTimerId = setTimeout(() => {
|
|
5478
|
+
this.longPressTimerId = null;
|
|
5479
|
+
const tooltipState = this.getTooltipState(index);
|
|
5480
|
+
if (this.longPressIndex !== index || !tooltipState) {
|
|
5481
|
+
return;
|
|
5482
|
+
}
|
|
5483
|
+
this.longPressActivatedIndex = index;
|
|
5484
|
+
this.tooltipState.set(tooltipState);
|
|
5485
|
+
}, LONG_PRESS_TOOLTIP_DELAY_MS);
|
|
5486
|
+
}
|
|
5487
|
+
onCrumbPointerMove(event) {
|
|
5488
|
+
if (this.longPressPointerId !== event.pointerId) {
|
|
5489
|
+
return;
|
|
5490
|
+
}
|
|
5491
|
+
const dx = Math.abs(event.clientX - this.longPressStartX);
|
|
5492
|
+
const dy = Math.abs(event.clientY - this.longPressStartY);
|
|
5493
|
+
if (dx > LONG_PRESS_MOVE_TOLERANCE_PX || dy > LONG_PRESS_MOVE_TOLERANCE_PX) {
|
|
5494
|
+
this.clearLongPressTimer();
|
|
5495
|
+
this.hideTooltip();
|
|
5496
|
+
this.longPressActivatedIndex = null;
|
|
5497
|
+
}
|
|
5498
|
+
}
|
|
5499
|
+
onCrumbPointerEnd(event) {
|
|
5500
|
+
if (this.longPressPointerId === event.pointerId) {
|
|
5501
|
+
this.clearLongPressTimer();
|
|
5502
|
+
}
|
|
5503
|
+
}
|
|
5504
|
+
observeScrollContainer() {
|
|
5505
|
+
const el = this.listRef()?.nativeElement;
|
|
5506
|
+
if (!el || typeof ResizeObserver === 'undefined') {
|
|
5398
5507
|
return;
|
|
5399
5508
|
}
|
|
5400
|
-
|
|
5401
|
-
|
|
5402
|
-
|
|
5509
|
+
this.resizeObserver = new ResizeObserver(() => this.queueScrollFadeUpdate());
|
|
5510
|
+
this.resizeObserver.observe(el);
|
|
5511
|
+
}
|
|
5512
|
+
queueScrollFadeUpdate() {
|
|
5513
|
+
if (typeof requestAnimationFrame === 'undefined') {
|
|
5514
|
+
this.updateScrollFades();
|
|
5403
5515
|
return;
|
|
5404
5516
|
}
|
|
5405
|
-
this.
|
|
5517
|
+
if (this.scrollFadeFrameId) {
|
|
5518
|
+
cancelAnimationFrame(this.scrollFadeFrameId);
|
|
5519
|
+
}
|
|
5520
|
+
this.scrollFadeFrameId = requestAnimationFrame(() => {
|
|
5521
|
+
this.scrollFadeFrameId = 0;
|
|
5522
|
+
this.updateScrollFades();
|
|
5523
|
+
});
|
|
5406
5524
|
}
|
|
5407
|
-
|
|
5408
|
-
|
|
5525
|
+
updateScrollFades() {
|
|
5526
|
+
const el = this.listRef()?.nativeElement;
|
|
5527
|
+
if (!el) {
|
|
5528
|
+
this.leftFadeOpacity.set(0);
|
|
5529
|
+
this.rightFadeOpacity.set(0);
|
|
5409
5530
|
return;
|
|
5410
5531
|
}
|
|
5411
|
-
|
|
5532
|
+
const maxScrollLeft = Math.max(0, el.scrollWidth - el.clientWidth);
|
|
5533
|
+
const scrollLeft = Math.min(Math.max(el.scrollLeft, 0), maxScrollLeft);
|
|
5534
|
+
const rightScrollDistance = Math.max(0, maxScrollLeft - scrollLeft);
|
|
5535
|
+
this.leftFadeOpacity.set(this.getScrollFadeOpacity(scrollLeft));
|
|
5536
|
+
this.rightFadeOpacity.set(this.getScrollFadeOpacity(rightScrollDistance));
|
|
5537
|
+
}
|
|
5538
|
+
getScrollFadeOpacity(distanceFromEdge) {
|
|
5539
|
+
if (distanceFromEdge <= SCROLL_EDGE_EPSILON_PX) {
|
|
5540
|
+
return 0;
|
|
5541
|
+
}
|
|
5542
|
+
return Math.min(distanceFromEdge / SCROLL_FADE_RANGE_PX, 1) * SCROLL_FADE_MAX_OPACITY;
|
|
5543
|
+
}
|
|
5544
|
+
clearLongPressTimer() {
|
|
5545
|
+
if (this.longPressTimerId) {
|
|
5546
|
+
clearTimeout(this.longPressTimerId);
|
|
5547
|
+
this.longPressTimerId = null;
|
|
5548
|
+
}
|
|
5549
|
+
this.longPressPointerId = null;
|
|
5550
|
+
this.longPressIndex = null;
|
|
5551
|
+
}
|
|
5552
|
+
isLabelOverflowing(index) {
|
|
5553
|
+
const labelEl = this.labelRefs()[index]?.nativeElement;
|
|
5554
|
+
return !!labelEl && labelEl.scrollWidth > labelEl.clientWidth + 1;
|
|
5555
|
+
}
|
|
5556
|
+
getTooltipState(index) {
|
|
5557
|
+
const item = this.visibleItems()[index];
|
|
5558
|
+
const navEl = this.navRef()?.nativeElement;
|
|
5559
|
+
const labelEl = this.labelRefs()[index]?.nativeElement;
|
|
5560
|
+
if (!item || !navEl || !labelEl || !this.isLabelOverflowing(index)) {
|
|
5561
|
+
return null;
|
|
5562
|
+
}
|
|
5563
|
+
const navRect = navEl.getBoundingClientRect();
|
|
5564
|
+
const labelRect = labelEl.getBoundingClientRect();
|
|
5565
|
+
const maxTooltipWidth = Math.min(TOOLTIP_MAX_WIDTH_PX, Math.max(0, navRect.width - TOOLTIP_HORIZONTAL_GAP_PX * 2));
|
|
5566
|
+
const minLeft = TOOLTIP_HORIZONTAL_GAP_PX;
|
|
5567
|
+
const maxLeft = Math.max(minLeft, navRect.width - maxTooltipWidth - TOOLTIP_HORIZONTAL_GAP_PX);
|
|
5568
|
+
const centeredLeft = labelRect.left - navRect.left + labelRect.width / 2 - maxTooltipWidth / 2;
|
|
5569
|
+
return {
|
|
5570
|
+
index,
|
|
5571
|
+
label: item.label,
|
|
5572
|
+
left: this.clamp(centeredLeft, minLeft, maxLeft),
|
|
5573
|
+
top: labelRect.bottom - navRect.top + 8,
|
|
5574
|
+
};
|
|
5412
5575
|
}
|
|
5413
|
-
|
|
5414
|
-
|
|
5576
|
+
hideTooltip() {
|
|
5577
|
+
this.tooltipState.set(null);
|
|
5415
5578
|
}
|
|
5416
|
-
|
|
5417
|
-
|
|
5579
|
+
clamp(value, min, max) {
|
|
5580
|
+
return Math.min(Math.max(value, min), max);
|
|
5418
5581
|
}
|
|
5419
5582
|
getPalette(color) {
|
|
5420
5583
|
switch (color) {
|
|
@@ -5467,12 +5630,12 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5467
5630
|
}
|
|
5468
5631
|
}
|
|
5469
5632
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5470
|
-
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: [":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(--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;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"] }] });
|
|
5633
|
+
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"] }] });
|
|
5471
5634
|
}
|
|
5472
5635
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, decorators: [{
|
|
5473
5636
|
type: Component,
|
|
5474
|
-
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
|
|
5475
|
-
}], 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 }] }] } });
|
|
5637
|
+
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\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"] }]
|
|
5638
|
+
}], 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 }] }] } });
|
|
5476
5639
|
|
|
5477
5640
|
class DuckDevSelectorOption {
|
|
5478
5641
|
value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
|