@rt-tools/ui-kit-v2 0.29.1 → 0.31.0

package/fesm2022/rt-tools-ui-kit-v2-service-block.mjs

@@ -0,0 +1,131 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, input } from "@angular/core";
+import { BlockDirective, ElemDirective } from "@rt-tools/core";
+import { RtServiceLogoComponent } from "@rt-tools/ui-kit-v2/service-logo";
+const BEM_BLOCK = "rt-service-block";
+var RtServiceBlockComponent = class RtServiceBlockComponent {
+	constructor() {
+		this.logos = input.required(...ngDevMode ? [{ debugName: "logos" }] : /* istanbul ignore next */ []);
+		this.name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+		this.description = input("", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtServiceBlockComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtServiceBlockComponent,
+			isStandalone: true,
+			selector: "rt-service-block",
+			inputs: {
+				logos: {
+					classPropertyName: "logos",
+					publicName: "logos",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				name: {
+					classPropertyName: "name",
+					publicName: "name",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				description: {
+					classPropertyName: "description",
+					publicName: "description",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: { classAttribute: "rt-service-block" },
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-service-block\">\n    <rt-service-logo rtElem=\"logo\" qa-dataid=\"service-block-logo\" [logos]=\"logos()\" />\n\n    <div rtElem=\"text\">\n        <p rtElem=\"name\" qa-dataid=\"service-block-name\">{{ name() }}</p>\n\n        @if (description(); as text) {\n            <p rtElem=\"description\" qa-dataid=\"service-block-description\">{{ text }}</p>\n        }\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-service-block{--rt-service-block-gap: var(--rt-space-4);--rt-service-block-text-gap: var(--rt-space-0-5);--rt-service-block-padding-bottom: var(--rt-space-5);--rt-service-block-divider: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);--rt-service-block-name-size: var(--rt-text-xl);--rt-service-block-name-weight: var(--rt-font-weight-semibold);--rt-service-block-name-line-height: var(--rt-leading-snug);--rt-service-block-name-color: var(--rt-color-text-primary);--rt-service-block-description-size: var(--rt-text-sm);--rt-service-block-description-weight: var(--rt-font-weight-regular);--rt-service-block-description-line-height: var(--rt-leading-normal);--rt-service-block-description-color: var(--rt-color-text-muted);display:flex;width:100%;align-items:center;padding-bottom:var(--rt-service-block-padding-bottom);border-bottom:var(--rt-service-block-divider);gap:var(--rt-service-block-gap)}.rt-service-block__logo{flex:none}.rt-service-block__text{display:flex;min-width:0;flex:1 1 0;flex-direction:column;gap:var(--rt-service-block-text-gap);overflow-wrap:anywhere}.rt-service-block__name{margin:0;color:var(--rt-service-block-name-color);font-size:var(--rt-service-block-name-size);font-weight:var(--rt-service-block-name-weight);line-height:var(--rt-service-block-name-line-height)}.rt-service-block__description{margin:0;color:var(--rt-service-block-description-color);font-size:var(--rt-service-block-description-size);font-weight:var(--rt-service-block-description-weight);line-height:var(--rt-service-block-description-line-height)}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "component",
+					type: RtServiceLogoComponent,
+					selector: "rt-service-logo",
+					inputs: ["logos", "size"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtServiceBlockComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-service-block",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				BlockDirective,
+				ElemDirective,
+				RtServiceLogoComponent
+			],
+			host: { class: BEM_BLOCK },
+			template: "<ng-container rtBlock=\"rt-service-block\">\n    <rt-service-logo rtElem=\"logo\" qa-dataid=\"service-block-logo\" [logos]=\"logos()\" />\n\n    <div rtElem=\"text\">\n        <p rtElem=\"name\" qa-dataid=\"service-block-name\">{{ name() }}</p>\n\n        @if (description(); as text) {\n            <p rtElem=\"description\" qa-dataid=\"service-block-description\">{{ text }}</p>\n        }\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-service-block{--rt-service-block-gap: var(--rt-space-4);--rt-service-block-text-gap: var(--rt-space-0-5);--rt-service-block-padding-bottom: var(--rt-space-5);--rt-service-block-divider: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);--rt-service-block-name-size: var(--rt-text-xl);--rt-service-block-name-weight: var(--rt-font-weight-semibold);--rt-service-block-name-line-height: var(--rt-leading-snug);--rt-service-block-name-color: var(--rt-color-text-primary);--rt-service-block-description-size: var(--rt-text-sm);--rt-service-block-description-weight: var(--rt-font-weight-regular);--rt-service-block-description-line-height: var(--rt-leading-normal);--rt-service-block-description-color: var(--rt-color-text-muted);display:flex;width:100%;align-items:center;padding-bottom:var(--rt-service-block-padding-bottom);border-bottom:var(--rt-service-block-divider);gap:var(--rt-service-block-gap)}.rt-service-block__logo{flex:none}.rt-service-block__text{display:flex;min-width:0;flex:1 1 0;flex-direction:column;gap:var(--rt-service-block-text-gap);overflow-wrap:anywhere}.rt-service-block__name{margin:0;color:var(--rt-service-block-name-color);font-size:var(--rt-service-block-name-size);font-weight:var(--rt-service-block-name-weight);line-height:var(--rt-service-block-name-line-height)}.rt-service-block__description{margin:0;color:var(--rt-service-block-description-color);font-size:var(--rt-service-block-description-size);font-weight:var(--rt-service-block-description-weight);line-height:var(--rt-service-block-description-line-height)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		logos: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logos",
+				required: true
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: true
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}]
+	}
+});
+export { RtServiceBlockComponent };
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-service-block.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-service-block.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/service-block/rt-service-block.component.ts","../../../projects/ui-kit-v2/src/lib/components/service-block/rt-service-block.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, InputSignal, ViewEncapsulation } from '@angular/core';\n\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\n\nimport { IRtServiceLogo, RtServiceLogoComponent } from '@rt-tools/ui-kit-v2/service-logo';\n\nconst BEM_BLOCK: string = 'rt-service-block';\n\n/**\n * Блок службы — первый блок тела панели настройки подключения: знак службы размера `md`, справа\n * имя службы и строка-описание, под блоком черта. Одна разметка на интеграции, способы оплаты и\n * мессенджеры. Своих текстов блок не несёт: имя, описание и подписи знаков даёт приложение.\n */\n@Component({\n    selector: 'rt-service-block',\n    templateUrl: './rt-service-block.component.html',\n    styleUrl: './rt-service-block.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        BlockDirective,\n        ElemDirective,\n        RtServiceLogoComponent,\n    ],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtServiceBlockComponent {\n    /** Знаки службы — те же, что принимает `rt-service-logo`; несколько ложатся внахлёст. */\n    public readonly logos: InputSignal<readonly IRtServiceLogo.Item[]> = input.required<readonly IRtServiceLogo.Item[]>();\n\n    /** Имя службы — жирная строка справа от знака. */\n    public readonly name: InputSignal<string> = input.required<string>();\n\n    /** Строка-описание под именем. Пустая строка не рисуется. */\n    public readonly description: InputSignal<string> = input<string>('');\n}\n","<ng-container rtBlock=\"rt-service-block\">\n    <rt-service-logo rtElem=\"logo\" qa-dataid=\"service-block-logo\" [logos]=\"logos()\" />\n\n    <div rtElem=\"text\">\n        <p rtElem=\"name\" qa-dataid=\"service-block-name\">{{ name() }}</p>\n\n        @if (description(); as text) {\n            <p rtElem=\"description\" qa-dataid=\"service-block-description\">{{ text }}</p>\n        }\n    </div>\n</ng-container>\n"],"mappings":";;;;AAMA,MAAM,YAAoB;AAuB1B,IAAa,0BAAb,MAAa,wBAAuB;CAhBpC,cAAA;EAkBoB,KAAA,QAAqD,MAAM,SAA0C,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;EAGrG,KAAA,OAA4B,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;EAGpD,KAAA,cAAmC,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CACvE;CATY;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAuB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAvB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAuB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,OAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,MAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,aAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;GAAA;GAAA,MAAA,EAAA,gBAAA,mBAAA;GAAA,UAAA;GAAA,UC7BpC;GAWA,QAAA,CAAA,glDAAA;GAAA,cAAA;IAAA;KAAA,MAAA;KAAA,MDUQ;KAAc,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACd;KAAa,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACb;KAAsB,UAAA;KAAA,QAAA,CAAA,SAAA,MAAA;IAAA;GAAA;GAAA,iBAAA,GAAA,wBAAA;GAAA,eAAA,GAAA,kBAAA;EAAA,CAAA;CAAA;;AAMjB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAuB,YAAA,CAAA;EAhBnC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAkB,iBAGX,wBAAwB;GAAM,eAChC,kBAAkB;GAAI,SAC5B;IAEL;IACA;IACA;GACH;GAAA,MACK,EACF,OAAO,UACV;GAAA,UAAA;GAAA,QAAA,CAAA,glDAAA;EAAA,CAAA"}

package/fesm2022/rt-tools-ui-kit-v2-side-menu.mjs

@@ -6,7 +6,7 @@ import { FormControl, ReactiveFormsModule } from "@angular/forms";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ActivatedRoute, Router, RouterLink } from "@angular/router";
 import { BlockDirective, ElemDirective, LOCAL_STORAGE, ModDirective, PlatformService, WINDOW } from "@rt-tools/core";
-import { BreakpointsService, ERtStorageKeys, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+import { BreakpointsService, ERtStorageKeys, rtKitLabel, rtMatchParts, rtSearchMatches, rtSearchWords } from "@rt-tools/ui-kit-v2/core";
 import { RtIconComponent, isKitIconName, materialPairOf } from "@rt-tools/ui-kit-v2/icon";
 import { RtIconButtonComponent } from "@rt-tools/ui-kit-v2/icon-button";
 import { RtInputComponent } from "@rt-tools/ui-kit-v2/input";
@@ -69,8 +69,7 @@ function isSideMenuDropOutside(panel, point) {
 	return point.x < panel.left || point.x > panel.right || point.y < panel.top || point.y > panel.bottom;
 }
 function filterSideMenuItems(items, query) {
-	const needle = query.trim().toLowerCase();
-	if (needle === "") return [...items];
+	if (rtSearchWords(query).length === 0) return [...items];
 	return items.reduce((kept, item) => {
 		const isFolder = Boolean(item.submenu?.length);
 		const inside = isFolder ? filterSideMenuItems(item.submenu ?? [], query) : [];
@@ -81,7 +80,7 @@ function filterSideMenuItems(items, query) {
 			});
 			return kept;
 		}
-		if (item.name?.toLowerCase().includes(needle)) kept.push(isFolder ? {
+		if (rtSearchMatches(item.name ?? "", query)) kept.push(isFolder ? {
 			...item,
 			submenu: []
 		} : item);
@@ -100,36 +99,6 @@ const RT_SIDE_MENU_WIDTH_STEP = 16;
 function clampSideMenuWidth(width) {
 	return Math.min(480, Math.max(120, width));
 }
-function splitSideMenuTitle(name, query) {
-	if (name === "") return [];
-	const needle = query.trim().toLowerCase();
-	if (needle === "") return [{
-		text: name,
-		matched: false
-	}];
-	const haystack = name.toLowerCase();
-	const parts = [];
-	let from = 0;
-	for (let at = haystack.indexOf(needle, from); at !== -1; at = haystack.indexOf(needle, from)) {
-		if (at > from) parts.push({
-			text: name.slice(from, at),
-			matched: false
-		});
-		parts.push({
-			text: name.slice(at, at + needle.length),
-			matched: true
-		});
-		from = at + needle.length;
-	}
-	if (from < name.length) parts.push({
-		text: name.slice(from),
-		matched: false
-	});
-	return parts;
-}
-function splitTitleByWords(name, query) {
-	return query.split(/\s+/).filter((word) => word !== "").reduce((parts, word) => parts.flatMap((part) => part.matched ? [part] : splitSideMenuTitle(part.text, word)), splitSideMenuTitle(name, ""));
-}
 function walkSideMenuItems(items, expandedIds) {
 	return items.reduce((walk, item) => {
 		walk.push(item);
@@ -506,7 +475,7 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var RtSideMenuTitlePartsPipe = class RtSideMenuTitlePartsPipe {
 	transform(name, query) {
-		return splitSideMenuTitle(name ?? "", query);
+		return rtMatchParts(name ?? "", query);
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -2260,6 +2229,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { RT_SIDE_MENU_DEFAULT_ID, RT_SIDE_MENU_SETTINGS_CONFIG, RT_SIDE_MENU_WIDTH_MAX, RT_SIDE_MENU_WIDTH_MIN, RT_SIDE_MENU_WIDTH_STEP, RtSideMenuComponent, RtSideMenuFooterDirective, RtSideMenuHeaderDirective, RtSideMenuIconDirective, RtSideMenuSettingsService, RtSideMenuSubItemComponent, clampSideMenuWidth, drawnSideMenuWidth, filterSideMenuItems, normalizeSideMenuId, normalizeSideMenuSettings, omitSideMenuSettings, parseSideMenuSettingsRecord, patchSideMenuSettings, pinnedSideMenuItems, provideRtSideMenuSettings, readSideMenuSettings, reportedSideMenuWidth, sideMenuIconName, sideMenuIdsToExpand, sideMenuPressOpensInBrowser, sideMenuWidthByKey, splitSideMenuTitle, splitTitleByWords, startSideMenuWidthDrag, stepSideMenuHighlight, unpairedSideMenuIcons, walkSideMenuItems, warnUnpairedSideMenuIcons };
+export { RT_SIDE_MENU_DEFAULT_ID, RT_SIDE_MENU_SETTINGS_CONFIG, RT_SIDE_MENU_WIDTH_MAX, RT_SIDE_MENU_WIDTH_MIN, RT_SIDE_MENU_WIDTH_STEP, RtSideMenuComponent, RtSideMenuFooterDirective, RtSideMenuHeaderDirective, RtSideMenuIconDirective, RtSideMenuSettingsService, RtSideMenuSubItemComponent, clampSideMenuWidth, drawnSideMenuWidth, filterSideMenuItems, normalizeSideMenuId, normalizeSideMenuSettings, omitSideMenuSettings, parseSideMenuSettingsRecord, patchSideMenuSettings, pinnedSideMenuItems, provideRtSideMenuSettings, readSideMenuSettings, reportedSideMenuWidth, sideMenuIconName, sideMenuIdsToExpand, sideMenuPressOpensInBrowser, sideMenuWidthByKey, startSideMenuWidthDrag, stepSideMenuHighlight, unpairedSideMenuIcons, walkSideMenuItems, warnUnpairedSideMenuIcons };
 
 //# sourceMappingURL=rt-tools-ui-kit-v2-side-menu.mjs.map