@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

package/fesm2022/rt-tools-ui-kit-v2-breadcrumbs.mjs

@@ -0,0 +1,335 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ViewEncapsulation, afterRenderEffect, booleanAttribute, computed, inject, input, signal, viewChild } from "@angular/core";
+import { RouterLink } from "@angular/router";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { BreakpointsService, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
+import { RtMenuComponent, RtMenuItemComponent } from "@rt-tools/ui-kit-v2/menu";
+import { RtTooltipDirective } from "@rt-tools/ui-kit-v2/tooltip";
+const RT_BREADCRUMBS_FOLD_FROM = 3;
+function rtBreadcrumbsFits(room, ancestors, current, floor) {
+	return room - ancestors >= Math.min(current, floor);
+}
+function rtBreadcrumbsFold(ancestors, narrow) {
+	if (!narrow || ancestors.length < 3) return {
+		head: ancestors,
+		hidden: [],
+		tail: []
+	};
+	return {
+		head: ancestors.slice(0, 1),
+		hidden: ancestors.slice(1, -1),
+		tail: ancestors.slice(-1)
+	};
+}
+const BEM_BLOCK = "rt-breadcrumbs";
+var RtBreadcrumbsComponent = class RtBreadcrumbsComponent {
+	#itemsWatch;
+	#narrow;
+	#ancestors;
+	#backParams;
+	constructor() {
+		this.#itemsWatch = null;
+		this.#narrow = inject(BreakpointsService).narrow;
+		this.#ancestors = computed(() => this.crumbs().slice(0, -1), ...ngDevMode ? [{ debugName: "#ancestors" }] : /* istanbul ignore next */ []);
+		this.#backParams = computed(() => ({ name: this.backCrumb()?.label ?? "" }), ...ngDevMode ? [{ debugName: "#backParams" }] : /* istanbul ignore next */ []);
+		this.list = viewChild("list", ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
+		this.clipped = signal(false, ...ngDevMode ? [{ debugName: "clipped" }] : /* istanbul ignore next */ []);
+		this.fitted = signal(false, ...ngDevMode ? [{ debugName: "fitted" }] : /* istanbul ignore next */ []);
+		this.landmarkLabel = rtKitLabel("breadcrumbsLabel");
+		this.foldLabel = rtKitLabel("breadcrumbsHidden");
+		this.backLabel = rtKitLabel("breadcrumbsBack", this.#backParams);
+		this.fold = computed(() => rtBreadcrumbsFold(this.#ancestors(), this.#narrow()), ...ngDevMode ? [{ debugName: "fold" }] : /* istanbul ignore next */ []);
+		this.current = computed(() => this.crumbs().at(-1) ?? null, ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+		this.rowShown = computed(() => this.look() === "inline" || this.#ancestors().length > 0, ...ngDevMode ? [{ debugName: "rowShown" }] : /* istanbul ignore next */ []);
+		this.backCrumb = computed(() => this.back() ? this.#ancestors().at(-1) ?? null : null, ...ngDevMode ? [{ debugName: "backCrumb" }] : /* istanbul ignore next */ []);
+		this.crumbs = input.required(...ngDevMode ? [{ debugName: "crumbs" }] : /* istanbul ignore next */ []);
+		this.look = input("inline", ...ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []);
+		this.back = input(false, {
+			...ngDevMode ? { debugName: "back" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.separator = input("/", ...ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []);
+		afterRenderEffect(() => {
+			this.crumbs();
+			this.fold();
+			this.#watchItems();
+			this.#scrollToEnd();
+		});
+		inject(DestroyRef).onDestroy(() => this.#itemsWatch?.disconnect());
+	}
+	onListScroll() {
+		const list = this.list()?.nativeElement;
+		this.clipped.set(list !== void 0 && list.scrollLeft > 0);
+	}
+	#watchItems() {
+		const list = this.list()?.nativeElement;
+		if (list === void 0 || typeof ResizeObserver === "undefined") return;
+		this.#itemsWatch?.disconnect();
+		this.#itemsWatch = new ResizeObserver(() => this.#scrollToEnd());
+		Array.from(list.children).forEach((item) => this.#itemsWatch?.observe(item));
+	}
+	#scrollToEnd() {
+		const list = this.list()?.nativeElement;
+		if (list !== void 0) {
+			this.fitted.set(this.#measureFit(list));
+			list.scrollLeft = list.scrollWidth;
+			this.clipped.set(list.scrollLeft > 0);
+		}
+	}
+	#measureFit(list) {
+		const items = Array.from(list.children);
+		const current = items.at(-1)?.querySelector(".rt-breadcrumbs__current") ?? null;
+		if (current === null) return false;
+		const listStyle = getComputedStyle(list);
+		const room = list.clientWidth - parseFloat(listStyle.paddingInlineStart) - parseFloat(listStyle.paddingInlineEnd);
+		const ancestors = items.slice(0, -1).reduce((sum, item) => sum + item.getBoundingClientRect().width, 0);
+		const floor = parseFloat(listStyle.getPropertyValue("--rt-breadcrumbs-current-min")) || 0;
+		return rtBreadcrumbsFits(room, ancestors, current.scrollWidth, floor);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtBreadcrumbsComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtBreadcrumbsComponent,
+			isStandalone: true,
+			selector: "rt-breadcrumbs",
+			inputs: {
+				crumbs: {
+					classPropertyName: "crumbs",
+					publicName: "crumbs",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				look: {
+					classPropertyName: "look",
+					publicName: "look",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				back: {
+					classPropertyName: "back",
+					publicName: "back",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				separator: {
+					classPropertyName: "separator",
+					publicName: "separator",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: {
+				attributes: { "role": "navigation" },
+				properties: {
+					"attr.aria-label": "landmarkLabel()",
+					"class.rt-breadcrumbs--heading": "look() === 'heading'"
+				},
+				classAttribute: "rt-breadcrumbs"
+			},
+			viewQueries: [{
+				propertyName: "list",
+				first: true,
+				predicate: ["list"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-breadcrumbs\">\n    @if (rowShown()) {\n        <div rtElem=\"row\">\n            @if (backCrumb(); as backTo) {\n                <a rtElem=\"back\" qa-dataid=\"breadcrumbs-back\" [routerLink]=\"backTo.link\" [attr.aria-label]=\"backLabel()\">\n                    <rt-icon name=\"arrow-left\" size=\"md\" />\n                </a>\n            }\n\n            <ol\n                #list\n                rtElem=\"list\"\n                qa-dataid=\"breadcrumbs-list\"\n                [rtMod]=\"{ clipped: clipped(), fitted: fitted() }\"\n                (scroll)=\"onListScroll()\">\n                @for (crumb of fold().head; track $index) {\n                    <li rtElem=\"item\">\n                        <a rtElem=\"link\" qa-dataid=\"breadcrumbs-link\" [routerLink]=\"crumb.link\">{{ crumb.label }}</a>\n                        <span rtElem=\"separator\" aria-hidden=\"true\">{{ separator() }}</span>\n                    </li>\n                }\n\n                @if (fold().hidden.length) {\n                    <li rtElem=\"item\" qa-dataid=\"breadcrumbs-fold\">\n                        <span rtElem=\"fold\">\n                            <rt-menu size=\"sm\" align=\"start\" [ariaLabel]=\"foldLabel()\">\n                                @for (crumb of fold().hidden; track $index) {\n                                    <rt-menu-item qa-dataid=\"breadcrumbs-fold-item\" [label]=\"crumb.label\" [link]=\"crumb.link ?? null\" />\n                                }\n                            </rt-menu>\n                        </span>\n                        <span rtElem=\"separator\" aria-hidden=\"true\">{{ separator() }}</span>\n                    </li>\n                }\n\n                @for (crumb of fold().tail; track $index) {\n                    <li rtElem=\"item\">\n                        <a rtElem=\"link\" qa-dataid=\"breadcrumbs-link\" [routerLink]=\"crumb.link\">{{ crumb.label }}</a>\n                        <span rtElem=\"separator\" aria-hidden=\"true\">{{ separator() }}</span>\n                    </li>\n                }\n\n                @if (look() === 'inline' && current(); as page) {\n                    <li rtElem=\"item\">\n                        <span\n                            rtElem=\"current\"\n                            qa-dataid=\"breadcrumbs-current\"\n                            aria-current=\"page\"\n                            rtTooltipWhenTruncated\n                            [rtTooltip]=\"page.label\">\n                            {{ page.label }}\n                        </span>\n                    </li>\n                }\n            </ol>\n        </div>\n    }\n\n    @if (look() === 'heading' && current(); as page) {\n        <div rtElem=\"heading\">\n            <h1 rtElem=\"title\" qa-dataid=\"breadcrumbs-current\" aria-current=\"page\" rtTooltipWhenTruncated [rtTooltip]=\"page.label\">\n                {{ page.label }}\n            </h1>\n            <ng-content />\n        </div>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-breadcrumbs{--rt-breadcrumbs-back-radius: var(--rt-radius-full);--rt-breadcrumbs-duration: var(--rt-duration-fast);--rt-breadcrumbs-gap: var(--rt-space-xs);--rt-breadcrumbs-font-size: var(--rt-text-sm);--rt-breadcrumbs-font-weight: var(--rt-font-weight-medium);--rt-breadcrumbs-line-height: var(--rt-leading-snug);--rt-breadcrumbs-link-color: var(--rt-color-text-muted);--rt-breadcrumbs-link-color-hover: var(--rt-color-text-primary);--rt-breadcrumbs-link-radius: var(--rt-radius-xs);--rt-breadcrumbs-separator-color: var(--rt-color-text-disabled);--rt-breadcrumbs-separator-gap: var(--rt-space-xs);--rt-breadcrumbs-current-color: var(--rt-color-text-primary);--rt-breadcrumbs-current-min: var(--rt-size-30);--rt-breadcrumbs-back-size: var(--rt-control-height-sm);--rt-breadcrumbs-back-icon-size: var(--rt-size-5);--rt-breadcrumbs-back-color: var(--rt-color-text-primary);--rt-breadcrumbs-back-bg-hover: var(--rt-color-bg-hover);--rt-breadcrumbs-heading-gap: var(--rt-space-sm);--rt-breadcrumbs-heading-offset: var(--rt-space-xs);--rt-breadcrumbs-title-color: var(--rt-color-text-primary);--rt-breadcrumbs-title-font-size: var(--rt-text-2xl);--rt-breadcrumbs-title-font-weight: var(--rt-font-weight-bold);--rt-breadcrumbs-title-line-height: var(--rt-leading-tight);display:block;min-inline-size:0}@media(pointer:coarse){.rt-breadcrumbs{--rt-breadcrumbs-back-size: var(--rt-control-height-lg)}}:is(.rt-preset-material,[data-preset=material]) .rt-breadcrumbs{--rt-breadcrumbs-gap: var(--rt-size-2);--rt-breadcrumbs-separator-gap: var(--rt-size-2);--rt-breadcrumbs-link-color: var(--mat-sys-on-surface-variant, var(--rt-color-text-muted));--rt-breadcrumbs-separator-color: var(--mat-sys-on-surface-variant, var(--rt-color-text-muted));--rt-breadcrumbs-back-size: var(--rt-size-10);--rt-breadcrumbs-back-icon-size: var(--rt-size-6)}@media(pointer:coarse){:is(.rt-preset-material,[data-preset=material]) .rt-breadcrumbs{--rt-breadcrumbs-back-size: var(--rt-control-height-lg)}}.rt-breadcrumbs__row{display:flex;align-items:center;gap:var(--rt-breadcrumbs-gap);min-inline-size:0}.rt-breadcrumbs__list{display:flex;align-items:center;padding:var(--rt-focus-ring-width);margin:calc(-1 * var(--rt-focus-ring-width));list-style:none;min-inline-size:0;overflow-x:auto;scrollbar-width:none}.rt-breadcrumbs__list--clipped{mask-image:linear-gradient(to right,transparent,black var(--rt-space-lg))}.rt-breadcrumbs__list--fitted>.rt-breadcrumbs__item:last-child{flex:0 1 auto;min-inline-size:0}.rt-breadcrumbs__item{display:flex;flex:none;align-items:center;white-space:nowrap}.rt-breadcrumbs__item:last-child{max-inline-size:100%}.rt-breadcrumbs__link,.rt-breadcrumbs__separator,.rt-breadcrumbs__current{font-size:var(--rt-breadcrumbs-font-size);font-weight:var(--rt-breadcrumbs-font-weight);line-height:var(--rt-breadcrumbs-line-height)}.rt-breadcrumbs__link{border-radius:var(--rt-breadcrumbs-link-radius);color:var(--rt-breadcrumbs-link-color);text-decoration:none;transition:color var(--rt-breadcrumbs-duration) linear}.rt-breadcrumbs__link:hover{color:var(--rt-breadcrumbs-link-color-hover)}.rt-breadcrumbs__link:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-breadcrumbs__fold{display:inline-flex;margin-inline:calc(-1 * var(--rt-space-sm))}.rt-breadcrumbs__separator{color:var(--rt-breadcrumbs-separator-color);margin-inline:var(--rt-breadcrumbs-separator-gap)}.rt-breadcrumbs__current{overflow:hidden;color:var(--rt-breadcrumbs-current-color);min-inline-size:0;text-overflow:ellipsis}.rt-breadcrumbs__back{display:inline-flex;flex:none;align-items:center;justify-content:center;--rt-icon-step-md: var(--rt-breadcrumbs-back-icon-size);border-radius:var(--rt-breadcrumbs-back-radius);block-size:var(--rt-breadcrumbs-back-size);color:var(--rt-breadcrumbs-back-color);inline-size:var(--rt-breadcrumbs-back-size);transition:background-color var(--rt-breadcrumbs-duration) linear}.rt-breadcrumbs__back:hover{background-color:var(--rt-breadcrumbs-back-bg-hover)}.rt-breadcrumbs__back:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-breadcrumbs--heading .rt-breadcrumbs__item:last-child .rt-breadcrumbs__separator{display:none}.rt-breadcrumbs__heading{display:flex;flex-flow:row wrap;align-items:center;gap:var(--rt-breadcrumbs-heading-gap);min-inline-size:0}.rt-breadcrumbs__row+.rt-breadcrumbs__heading{margin-block-start:var(--rt-breadcrumbs-heading-offset)}.rt-breadcrumbs__title{overflow:hidden;margin:0;color:var(--rt-breadcrumbs-title-color);font-size:var(--rt-breadcrumbs-title-font-size);font-weight:var(--rt-breadcrumbs-title-font-weight);line-height:var(--rt-breadcrumbs-title-line-height);max-inline-size:100%;min-inline-size:0;text-overflow:ellipsis;white-space:nowrap}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: RouterLink,
+					selector: "[routerLink]",
+					inputs: [
+						"target",
+						"queryParams",
+						"fragment",
+						"queryParamsHandling",
+						"state",
+						"info",
+						"relativeTo",
+						"preserveFragment",
+						"skipLocationChange",
+						"replaceUrl",
+						"browserUrl",
+						"routerLink"
+					]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "component",
+					type: RtMenuComponent,
+					selector: "rt-menu",
+					inputs: [
+						"icon",
+						"ariaLabel",
+						"align",
+						"panelClass",
+						"triggerSize",
+						"size",
+						"disabled"
+					],
+					outputs: ["openedChange"]
+				},
+				{
+					kind: "component",
+					type: RtMenuItemComponent,
+					selector: "rt-menu-item",
+					inputs: [
+						"icon",
+						"label",
+						"danger",
+						"success",
+						"glyph",
+						"fill",
+						"current",
+						"disabled",
+						"confirmMessage",
+						"confirmTitle",
+						"confirmLabel",
+						"confirmCancelLabel",
+						"confirmTone",
+						"link"
+					],
+					outputs: ["selected"]
+				},
+				{
+					kind: "directive",
+					type: RtTooltipDirective,
+					selector: "[rtTooltip]",
+					inputs: [
+						"rtTooltip",
+						"rtTooltipPlacement",
+						"rtTooltipWhenTruncated",
+						"rtTooltipHideOnClick"
+					],
+					exportAs: ["rtTooltip"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtBreadcrumbsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-breadcrumbs",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RouterLink,
+				BlockDirective,
+				ElemDirective,
+				ModDirective,
+				RtIconComponent,
+				RtMenuComponent,
+				RtMenuItemComponent,
+				RtTooltipDirective
+			],
+			host: {
+				class: BEM_BLOCK,
+				role: "navigation",
+				"[attr.aria-label]": "landmarkLabel()",
+				"[class.rt-breadcrumbs--heading]": "look() === 'heading'"
+			},
+			template: "<ng-container rtBlock=\"rt-breadcrumbs\">\n    @if (rowShown()) {\n        <div rtElem=\"row\">\n            @if (backCrumb(); as backTo) {\n                <a rtElem=\"back\" qa-dataid=\"breadcrumbs-back\" [routerLink]=\"backTo.link\" [attr.aria-label]=\"backLabel()\">\n                    <rt-icon name=\"arrow-left\" size=\"md\" />\n                </a>\n            }\n\n            <ol\n                #list\n                rtElem=\"list\"\n                qa-dataid=\"breadcrumbs-list\"\n                [rtMod]=\"{ clipped: clipped(), fitted: fitted() }\"\n                (scroll)=\"onListScroll()\">\n                @for (crumb of fold().head; track $index) {\n                    <li rtElem=\"item\">\n                        <a rtElem=\"link\" qa-dataid=\"breadcrumbs-link\" [routerLink]=\"crumb.link\">{{ crumb.label }}</a>\n                        <span rtElem=\"separator\" aria-hidden=\"true\">{{ separator() }}</span>\n                    </li>\n                }\n\n                @if (fold().hidden.length) {\n                    <li rtElem=\"item\" qa-dataid=\"breadcrumbs-fold\">\n                        <span rtElem=\"fold\">\n                            <rt-menu size=\"sm\" align=\"start\" [ariaLabel]=\"foldLabel()\">\n                                @for (crumb of fold().hidden; track $index) {\n                                    <rt-menu-item qa-dataid=\"breadcrumbs-fold-item\" [label]=\"crumb.label\" [link]=\"crumb.link ?? null\" />\n                                }\n                            </rt-menu>\n                        </span>\n                        <span rtElem=\"separator\" aria-hidden=\"true\">{{ separator() }}</span>\n                    </li>\n                }\n\n                @for (crumb of fold().tail; track $index) {\n                    <li rtElem=\"item\">\n                        <a rtElem=\"link\" qa-dataid=\"breadcrumbs-link\" [routerLink]=\"crumb.link\">{{ crumb.label }}</a>\n                        <span rtElem=\"separator\" aria-hidden=\"true\">{{ separator() }}</span>\n                    </li>\n                }\n\n                @if (look() === 'inline' && current(); as page) {\n                    <li rtElem=\"item\">\n                        <span\n                            rtElem=\"current\"\n                            qa-dataid=\"breadcrumbs-current\"\n                            aria-current=\"page\"\n                            rtTooltipWhenTruncated\n                            [rtTooltip]=\"page.label\">\n                            {{ page.label }}\n                        </span>\n                    </li>\n                }\n            </ol>\n        </div>\n    }\n\n    @if (look() === 'heading' && current(); as page) {\n        <div rtElem=\"heading\">\n            <h1 rtElem=\"title\" qa-dataid=\"breadcrumbs-current\" aria-current=\"page\" rtTooltipWhenTruncated [rtTooltip]=\"page.label\">\n                {{ page.label }}\n            </h1>\n            <ng-content />\n        </div>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-breadcrumbs{--rt-breadcrumbs-back-radius: var(--rt-radius-full);--rt-breadcrumbs-duration: var(--rt-duration-fast);--rt-breadcrumbs-gap: var(--rt-space-xs);--rt-breadcrumbs-font-size: var(--rt-text-sm);--rt-breadcrumbs-font-weight: var(--rt-font-weight-medium);--rt-breadcrumbs-line-height: var(--rt-leading-snug);--rt-breadcrumbs-link-color: var(--rt-color-text-muted);--rt-breadcrumbs-link-color-hover: var(--rt-color-text-primary);--rt-breadcrumbs-link-radius: var(--rt-radius-xs);--rt-breadcrumbs-separator-color: var(--rt-color-text-disabled);--rt-breadcrumbs-separator-gap: var(--rt-space-xs);--rt-breadcrumbs-current-color: var(--rt-color-text-primary);--rt-breadcrumbs-current-min: var(--rt-size-30);--rt-breadcrumbs-back-size: var(--rt-control-height-sm);--rt-breadcrumbs-back-icon-size: var(--rt-size-5);--rt-breadcrumbs-back-color: var(--rt-color-text-primary);--rt-breadcrumbs-back-bg-hover: var(--rt-color-bg-hover);--rt-breadcrumbs-heading-gap: var(--rt-space-sm);--rt-breadcrumbs-heading-offset: var(--rt-space-xs);--rt-breadcrumbs-title-color: var(--rt-color-text-primary);--rt-breadcrumbs-title-font-size: var(--rt-text-2xl);--rt-breadcrumbs-title-font-weight: var(--rt-font-weight-bold);--rt-breadcrumbs-title-line-height: var(--rt-leading-tight);display:block;min-inline-size:0}@media(pointer:coarse){.rt-breadcrumbs{--rt-breadcrumbs-back-size: var(--rt-control-height-lg)}}:is(.rt-preset-material,[data-preset=material]) .rt-breadcrumbs{--rt-breadcrumbs-gap: var(--rt-size-2);--rt-breadcrumbs-separator-gap: var(--rt-size-2);--rt-breadcrumbs-link-color: var(--mat-sys-on-surface-variant, var(--rt-color-text-muted));--rt-breadcrumbs-separator-color: var(--mat-sys-on-surface-variant, var(--rt-color-text-muted));--rt-breadcrumbs-back-size: var(--rt-size-10);--rt-breadcrumbs-back-icon-size: var(--rt-size-6)}@media(pointer:coarse){:is(.rt-preset-material,[data-preset=material]) .rt-breadcrumbs{--rt-breadcrumbs-back-size: var(--rt-control-height-lg)}}.rt-breadcrumbs__row{display:flex;align-items:center;gap:var(--rt-breadcrumbs-gap);min-inline-size:0}.rt-breadcrumbs__list{display:flex;align-items:center;padding:var(--rt-focus-ring-width);margin:calc(-1 * var(--rt-focus-ring-width));list-style:none;min-inline-size:0;overflow-x:auto;scrollbar-width:none}.rt-breadcrumbs__list--clipped{mask-image:linear-gradient(to right,transparent,black var(--rt-space-lg))}.rt-breadcrumbs__list--fitted>.rt-breadcrumbs__item:last-child{flex:0 1 auto;min-inline-size:0}.rt-breadcrumbs__item{display:flex;flex:none;align-items:center;white-space:nowrap}.rt-breadcrumbs__item:last-child{max-inline-size:100%}.rt-breadcrumbs__link,.rt-breadcrumbs__separator,.rt-breadcrumbs__current{font-size:var(--rt-breadcrumbs-font-size);font-weight:var(--rt-breadcrumbs-font-weight);line-height:var(--rt-breadcrumbs-line-height)}.rt-breadcrumbs__link{border-radius:var(--rt-breadcrumbs-link-radius);color:var(--rt-breadcrumbs-link-color);text-decoration:none;transition:color var(--rt-breadcrumbs-duration) linear}.rt-breadcrumbs__link:hover{color:var(--rt-breadcrumbs-link-color-hover)}.rt-breadcrumbs__link:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-breadcrumbs__fold{display:inline-flex;margin-inline:calc(-1 * var(--rt-space-sm))}.rt-breadcrumbs__separator{color:var(--rt-breadcrumbs-separator-color);margin-inline:var(--rt-breadcrumbs-separator-gap)}.rt-breadcrumbs__current{overflow:hidden;color:var(--rt-breadcrumbs-current-color);min-inline-size:0;text-overflow:ellipsis}.rt-breadcrumbs__back{display:inline-flex;flex:none;align-items:center;justify-content:center;--rt-icon-step-md: var(--rt-breadcrumbs-back-icon-size);border-radius:var(--rt-breadcrumbs-back-radius);block-size:var(--rt-breadcrumbs-back-size);color:var(--rt-breadcrumbs-back-color);inline-size:var(--rt-breadcrumbs-back-size);transition:background-color var(--rt-breadcrumbs-duration) linear}.rt-breadcrumbs__back:hover{background-color:var(--rt-breadcrumbs-back-bg-hover)}.rt-breadcrumbs__back:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:var(--rt-focus-ring-offset)}.rt-breadcrumbs--heading .rt-breadcrumbs__item:last-child .rt-breadcrumbs__separator{display:none}.rt-breadcrumbs__heading{display:flex;flex-flow:row wrap;align-items:center;gap:var(--rt-breadcrumbs-heading-gap);min-inline-size:0}.rt-breadcrumbs__row+.rt-breadcrumbs__heading{margin-block-start:var(--rt-breadcrumbs-heading-offset)}.rt-breadcrumbs__title{overflow:hidden;margin:0;color:var(--rt-breadcrumbs-title-color);font-size:var(--rt-breadcrumbs-title-font-size);font-weight:var(--rt-breadcrumbs-title-font-weight);line-height:var(--rt-breadcrumbs-title-line-height);max-inline-size:100%;min-inline-size:0;text-overflow:ellipsis;white-space:nowrap}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		list: [{
+			type: i0.ViewChild,
+			args: ["list", { isSignal: true }]
+		}],
+		crumbs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "crumbs",
+				required: true
+			}]
+		}],
+		look: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "look",
+				required: false
+			}]
+		}],
+		back: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "back",
+				required: false
+			}]
+		}],
+		separator: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "separator",
+				required: false
+			}]
+		}]
+	}
+});
+export { RT_BREADCRUMBS_FOLD_FROM, RtBreadcrumbsComponent, rtBreadcrumbsFits, rtBreadcrumbsFold };
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-breadcrumbs.mjs.map

package/fesm2022/rt-tools-ui-kit-v2-breadcrumbs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-breadcrumbs.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/breadcrumbs/rt-breadcrumbs.logic.ts","../../../projects/ui-kit-v2/src/lib/components/breadcrumbs/rt-breadcrumbs.component.ts","../../../projects/ui-kit-v2/src/lib/components/breadcrumbs/rt-breadcrumbs.component.html"],"sourcesContent":["import { IRtBreadcrumbs } from './rt-breadcrumbs.model';\n\n/** С какого числа предков середина пути сворачивается на узком экране. */\nexport const RT_BREADCRUMBS_FOLD_FROM: number = 3;\n\n/**\n * Помещаются ли предки рядом с текущим звеном, урезанным до порога или до своей полной подписи,\n * если она короче. Тогда звено сжимается с многоточием и строка не едет; иначе строка встаёт в\n * конец, и предки уезжают влево.\n */\nexport function rtBreadcrumbsFits(room: number, ancestors: number, current: number, floor: number): boolean {\n    return room - ancestors >= Math.min(current, floor);\n}\n\n/**\n * Раскладка предков. На узком экране длинный путь оставляет первого и последнего предка ссылками,\n * а середину отдаёт в меню; на широком и при коротком пути свёртки нет.\n */\nexport function rtBreadcrumbsFold(ancestors: readonly IRtBreadcrumbs.Crumb[], narrow: boolean): IRtBreadcrumbs.Fold {\n    if (!narrow || ancestors.length < RT_BREADCRUMBS_FOLD_FROM) {\n        return { head: ancestors, hidden: [], tail: [] };\n    }\n\n    return {\n        head: ancestors.slice(0, 1),\n        hidden: ancestors.slice(1, -1),\n        tail: ancestors.slice(-1),\n    };\n}\n","import {\n    afterRenderEffect,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    DestroyRef,\n    ElementRef,\n    inject,\n    input,\n    InputSignal,\n    InputSignalWithTransform,\n    Signal,\n    signal,\n    viewChild,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { BreakpointsService, rtKitLabel, TRtKitLabelParams } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { RtMenuComponent, RtMenuItemComponent } from '@rt-tools/ui-kit-v2/menu';\nimport { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';\n\nimport { rtBreadcrumbsFits, rtBreadcrumbsFold } from './rt-breadcrumbs.logic';\nimport { IRtBreadcrumbs } from './rt-breadcrumbs.model';\n\nconst BEM_BLOCK: string = 'rt-breadcrumbs';\n\n/**\n * Путь до открытой страницы: предки ссылками, текущее звено текстом.\n *\n * Цепочку отдаёт приложение: имя открытой записи приходит с ответом сервера, и знает его только\n * страница. Текущее звено рисуется в строке пути или заголовком строкой ниже — тогда рядом с ним\n * встаёт то, что страница спроецировала. На узком экране середина длинного пути уходит в меню.\n */\n@Component({\n    selector: 'rt-breadcrumbs',\n    templateUrl: './rt-breadcrumbs.component.html',\n    styleUrl: './rt-breadcrumbs.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // angular\n        RouterLink,\n\n        // standalone components / directives\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n        RtIconComponent,\n        RtMenuComponent,\n        RtMenuItemComponent,\n        RtTooltipDirective,\n    ],\n    host: {\n        class: BEM_BLOCK,\n        role: 'navigation',\n        '[attr.aria-label]': 'landmarkLabel()',\n        '[class.rt-breadcrumbs--heading]': \"look() === 'heading'\",\n    },\n})\nexport class RtBreadcrumbsComponent {\n    #itemsWatch: ResizeObserver | null = null;\n\n    readonly #narrow: Signal<boolean> = inject(BreakpointsService).narrow;\n\n    readonly #ancestors: Signal<readonly IRtBreadcrumbs.Crumb[]> = computed((): readonly IRtBreadcrumbs.Crumb[] =>\n        this.crumbs().slice(0, -1)\n    );\n\n    readonly #backParams: Signal<TRtKitLabelParams> = computed((): TRtKitLabelParams => ({ name: this.backCrumb()?.label ?? '' }));\n\n    /** Строка звеньев: её прокрутку ставит в конец эффект после отрисовки. `#`-поле `viewChild` не принимает. */\n    protected readonly list: Signal<ElementRef<HTMLElement> | undefined> = viewChild<ElementRef<HTMLElement>>('list');\n\n    /** Начало пути уехало влево за край строки. */\n    protected readonly clipped: WritableSignal<boolean> = signal<boolean>(false);\n\n    /** Предки помещаются рядом с урезанным текущим звеном: звено сжимается, строка не едет. */\n    protected readonly fitted: WritableSignal<boolean> = signal<boolean>(false);\n\n    protected readonly landmarkLabel: Signal<string> = rtKitLabel('breadcrumbsLabel');\n    protected readonly foldLabel: Signal<string> = rtKitLabel('breadcrumbsHidden');\n    protected readonly backLabel: Signal<string> = rtKitLabel('breadcrumbsBack', this.#backParams);\n\n    protected readonly fold: Signal<IRtBreadcrumbs.Fold> = computed((): IRtBreadcrumbs.Fold =>\n        rtBreadcrumbsFold(this.#ancestors(), this.#narrow())\n    );\n\n    protected readonly current: Signal<IRtBreadcrumbs.Crumb | null> = computed(\n        (): IRtBreadcrumbs.Crumb | null => this.crumbs().at(-1) ?? null\n    );\n\n    /** Строка пути нужна, пока в ней есть что рисовать: у одного заголовка её нет. */\n    protected readonly rowShown: Signal<boolean> = computed((): boolean => this.look() === 'inline' || this.#ancestors().length > 0);\n\n    /** Куда ведёт кнопка «назад»: к последнему предку, а без предков кнопки нет. */\n    protected readonly backCrumb: Signal<IRtBreadcrumbs.Crumb | null> = computed((): IRtBreadcrumbs.Crumb | null =>\n        this.back() ? (this.#ancestors().at(-1) ?? null) : null\n    );\n\n    /** Путь от верха до открытой страницы; последнее звено — сама страница. */\n    public readonly crumbs: InputSignal<readonly IRtBreadcrumbs.Crumb[]> = input.required<readonly IRtBreadcrumbs.Crumb[]>();\n\n    /** Как рисуется текущее звено: в строке пути или заголовком строкой ниже. */\n    public readonly look: InputSignal<IRtBreadcrumbs.Look> = input<IRtBreadcrumbs.Look>('inline');\n\n    /** Кнопка «назад» перед путём; ведёт к последнему предку. */\n    public readonly back: InputSignalWithTransform<boolean, unknown> = input<boolean, unknown>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Знак между звеньями. */\n    public readonly separator: InputSignal<string> = input<string>('/');\n\n    constructor() {\n        // Длинный путь едет внутри своей строки, и видна должна быть открытая страница, а не верх\n        // пути. Строка встаёт в конец при смене цепочки и при смене ширины звеньев: шрифт страницы\n        // приходит позже первой отрисовки и раздвигает звенья уже после неё.\n        afterRenderEffect((): void => {\n            this.crumbs();\n            this.fold();\n            this.#watchItems();\n            this.#scrollToEnd();\n        });\n\n        inject(DestroyRef).onDestroy((): void => this.#itemsWatch?.disconnect());\n    }\n\n    protected onListScroll(): void {\n        const list: HTMLElement | undefined = this.list()?.nativeElement;\n        this.clipped.set(list !== undefined && list.scrollLeft > 0);\n    }\n\n    #watchItems(): void {\n        const list: HTMLElement | undefined = this.list()?.nativeElement;\n        if (list === undefined || typeof ResizeObserver === 'undefined') {\n            return;\n        }\n        this.#itemsWatch?.disconnect();\n        this.#itemsWatch = new ResizeObserver((): void => this.#scrollToEnd());\n        Array.from(list.children).forEach((item: Element): void => this.#itemsWatch?.observe(item));\n    }\n\n    #scrollToEnd(): void {\n        const list: HTMLElement | undefined = this.list()?.nativeElement;\n        if (list !== undefined) {\n            this.fitted.set(this.#measureFit(list));\n            list.scrollLeft = list.scrollWidth;\n            this.clipped.set(list.scrollLeft > 0);\n        }\n    }\n\n    /**\n     * Ширина строки без внутренних полей, предки целиком и полная подпись текущего звена против\n     * порога из свойства блока. Без текущего звена в строке сжимать нечего.\n     */\n    #measureFit(list: HTMLElement): boolean {\n        const items: readonly Element[] = Array.from(list.children);\n        const current: Element | null = items.at(-1)?.querySelector('.rt-breadcrumbs__current') ?? null;\n        if (current === null) {\n            return false;\n        }\n        const listStyle: CSSStyleDeclaration = getComputedStyle(list);\n        const room: number = list.clientWidth - parseFloat(listStyle.paddingInlineStart) - parseFloat(listStyle.paddingInlineEnd);\n        const ancestors: number = items\n            .slice(0, -1)\n            .reduce((sum: number, item: Element): number => sum + item.getBoundingClientRect().width, 0);\n        const floor: number = parseFloat(listStyle.getPropertyValue('--rt-breadcrumbs-current-min')) || 0;\n\n        return rtBreadcrumbsFits(room, ancestors, current.scrollWidth, floor);\n    }\n}\n","<ng-container rtBlock=\"rt-breadcrumbs\">\n    @if (rowShown()) {\n        <div rtElem=\"row\">\n            @if (backCrumb(); as backTo) {\n                <a rtElem=\"back\" qa-dataid=\"breadcrumbs-back\" [routerLink]=\"backTo.link\" [attr.aria-label]=\"backLabel()\">\n                    <rt-icon name=\"arrow-left\" size=\"md\" />\n                </a>\n            }\n\n            <ol\n                #list\n                rtElem=\"list\"\n                qa-dataid=\"breadcrumbs-list\"\n                [rtMod]=\"{ clipped: clipped(), fitted: fitted() }\"\n                (scroll)=\"onListScroll()\">\n                @for (crumb of fold().head; track $index) {\n                    <li rtElem=\"item\">\n                        <a rtElem=\"link\" qa-dataid=\"breadcrumbs-link\" [routerLink]=\"crumb.link\">{{ crumb.label }}</a>\n                        <span rtElem=\"separator\" aria-hidden=\"true\">{{ separator() }}</span>\n                    </li>\n                }\n\n                @if (fold().hidden.length) {\n                    <li rtElem=\"item\" qa-dataid=\"breadcrumbs-fold\">\n                        <span rtElem=\"fold\">\n                            <rt-menu size=\"sm\" align=\"start\" [ariaLabel]=\"foldLabel()\">\n                                @for (crumb of fold().hidden; track $index) {\n                                    <rt-menu-item qa-dataid=\"breadcrumbs-fold-item\" [label]=\"crumb.label\" [link]=\"crumb.link ?? null\" />\n                                }\n                            </rt-menu>\n                        </span>\n                        <span rtElem=\"separator\" aria-hidden=\"true\">{{ separator() }}</span>\n                    </li>\n                }\n\n                @for (crumb of fold().tail; track $index) {\n                    <li rtElem=\"item\">\n                        <a rtElem=\"link\" qa-dataid=\"breadcrumbs-link\" [routerLink]=\"crumb.link\">{{ crumb.label }}</a>\n                        <span rtElem=\"separator\" aria-hidden=\"true\">{{ separator() }}</span>\n                    </li>\n                }\n\n                @if (look() === 'inline' && current(); as page) {\n                    <li rtElem=\"item\">\n                        <span\n                            rtElem=\"current\"\n                            qa-dataid=\"breadcrumbs-current\"\n                            aria-current=\"page\"\n                            rtTooltipWhenTruncated\n                            [rtTooltip]=\"page.label\">\n                            {{ page.label }}\n                        </span>\n                    </li>\n                }\n            </ol>\n        </div>\n    }\n\n    @if (look() === 'heading' && current(); as page) {\n        <div rtElem=\"heading\">\n            <h1 rtElem=\"title\" qa-dataid=\"breadcrumbs-current\" aria-current=\"page\" rtTooltipWhenTruncated [rtTooltip]=\"page.label\">\n                {{ page.label }}\n            </h1>\n            <ng-content />\n        </div>\n    }\n</ng-container>\n"],"mappings":"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"}