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

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

@@ -0,0 +1,295 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, computed, inject, input, output } from "@angular/core";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { BlockDirective, ElemDirective } from "@rt-tools/core";
+import { RT_KIT_LABELS, ThemeService } from "@rt-tools/ui-kit-v2/core";
+import { RtMenuItemComponent } from "@rt-tools/ui-kit-v2/menu";
+import { RtSelectComponent } from "@rt-tools/ui-kit-v2/select";
+const BEM_BLOCK = "rt-profile-menu";
+var RtProfileMenuComponent = class RtProfileMenuComponent {
+	constructor() {
+		this.#theme = inject(ThemeService);
+		this.t = inject(RT_KIT_LABELS);
+		this.themeIcon = computed(() => this.#theme.isDark() ? "ico-sun" : "moon", ...ngDevMode ? [{ debugName: "themeIcon" }] : /* istanbul ignore next */ []);
+		this.avatar = computed(() => this.userName().trim().charAt(0).toUpperCase(), ...ngDevMode ? [{ debugName: "avatar" }] : /* istanbul ignore next */ []);
+		this.userName = input("", ...ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []);
+		this.organizationName = input("", ...ngDevMode ? [{ debugName: "organizationName" }] : /* istanbul ignore next */ []);
+		this.organizationChange = input("hidden", ...ngDevMode ? [{ debugName: "organizationChange" }] : /* istanbul ignore next */ []);
+		this.passwordChange = input(false, {
+			...ngDevMode ? { debugName: "passwordChange" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.locales = input([], ...ngDevMode ? [{ debugName: "locales" }] : /* istanbul ignore next */ []);
+		this.locale = input("", ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+		this.signOutDisabled = input(false, {
+			...ngDevMode ? { debugName: "signOutDisabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.changeOrganization = output();
+		this.changePassword = output();
+		this.localeChange = output();
+		this.signOut = output();
+	}
+	#theme;
+	onToggleTheme() {
+		this.#theme.toggle();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtProfileMenuComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtProfileMenuComponent,
+			isStandalone: true,
+			selector: "rt-profile-menu",
+			inputs: {
+				userName: {
+					classPropertyName: "userName",
+					publicName: "userName",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				organizationName: {
+					classPropertyName: "organizationName",
+					publicName: "organizationName",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				organizationChange: {
+					classPropertyName: "organizationChange",
+					publicName: "organizationChange",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				passwordChange: {
+					classPropertyName: "passwordChange",
+					publicName: "passwordChange",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				locales: {
+					classPropertyName: "locales",
+					publicName: "locales",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				locale: {
+					classPropertyName: "locale",
+					publicName: "locale",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				signOutDisabled: {
+					classPropertyName: "signOutDisabled",
+					publicName: "signOutDisabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				changeOrganization: "changeOrganization",
+				changePassword: "changePassword",
+				localeChange: "localeChange",
+				signOut: "signOut"
+			},
+			host: { classAttribute: "rt-profile-menu" },
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-profile-menu\">\n    <div rtElem=\"user\">\n        <span rtElem=\"avatar\" aria-hidden=\"true\">{{ avatar() }}</span>\n        <span rtElem=\"name\" qa-dataid=\"profile-user-name\">{{ userName() }}</span>\n        @if (organizationName()) {\n            <span rtElem=\"organization\" qa-dataid=\"profile-organization\">\n                {{ organizationName() }}\n                <span rtElem=\"organization-label\">{{ t().profileMenuOrganization }}</span>\n            </span>\n        }\n    </div>\n\n    <div rtElem=\"nav\" role=\"menu\">\n        @switch (organizationChange()) {\n            @case ('allowed') {\n                <rt-menu-item\n                    rtElem=\"item\"\n                    qa-dataid=\"profile-change-organization\"\n                    icon=\"refresh\"\n                    [label]=\"t().profileMenuChangeOrganization\"\n                    (selected)=\"changeOrganization.emit()\" />\n            }\n            @case ('denied') {\n                <rt-menu-item\n                    rtElem=\"item\"\n                    qa-dataid=\"profile-change-organization\"\n                    icon=\"refresh\"\n                    disabled\n                    [label]=\"t().profileMenuChangeOrganization\"\n                    [tooltip]=\"t().profileMenuChangeOrganizationDenied\" />\n            }\n        }\n\n        @if (passwordChange()) {\n            <rt-menu-item\n                rtElem=\"item\"\n                qa-dataid=\"profile-password-change\"\n                icon=\"ico-lock\"\n                [label]=\"t().profileMenuChangePassword\"\n                (selected)=\"changePassword.emit()\" />\n        }\n\n        <rt-menu-item\n            rtElem=\"item\"\n            qa-dataid=\"profile-logout\"\n            icon=\"ico-exit\"\n            [disabled]=\"signOutDisabled()\"\n            [label]=\"t().profileMenuSignOut\"\n            (selected)=\"signOut.emit()\" />\n    </div>\n\n    <!-- Своего правила у переключателя языка нет: ширину ему задаёт колонка блока. -->\n    @if (locales().length) {\n        <rt-select\n            qa-dataid=\"profile-locale-select\"\n            name=\"rtProfileMenuLocale\"\n            [options]=\"locales()\"\n            [ngModel]=\"locale()\"\n            (ngModelChange)=\"localeChange.emit($event)\" />\n    }\n\n    <rt-menu-item\n        rtElem=\"theme\"\n        qa-dataid=\"profile-theme-toggle\"\n        [icon]=\"themeIcon()\"\n        [label]=\"t().profileMenuSwitchTheme\"\n        (selected)=\"onToggleTheme()\" />\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-profile-menu{display:flex;min-width:var(--rt-profile-menu-min-width);box-sizing:border-box;flex-direction:column;padding:var(--rt-profile-menu-padding);border:var(--rt-profile-menu-border-width) solid var(--rt-nav-panel-color-border);border-radius:var(--rt-profile-menu-radius);background-color:var(--rt-nav-panel-color-bg);box-shadow:var(--rt-profile-menu-shadow);gap:var(--rt-space-2)}.rt-profile-menu__user{display:flex;flex-direction:column;padding-bottom:var(--rt-space-2);gap:var(--rt-space-2)}.rt-profile-menu__avatar{display:inline-flex;width:var(--rt-profile-avatar-size);height:var(--rt-profile-avatar-size);align-items:center;justify-content:center;border:var(--rt-profile-avatar-border-width) solid var(--rt-nav-header-color-bg);border-radius:var(--rt-profile-avatar-radius);color:var(--rt-color-text-primary);font-size:var(--rt-profile-avatar-font-size);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none)}.rt-profile-menu__name{color:var(--rt-color-text-primary);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-tight)}.rt-profile-menu__organization{color:var(--rt-nav-panel-item-color);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-regular);line-height:var(--rt-leading-tight)}.rt-profile-menu__organization-label{color:var(--rt-nav-panel-group-color)}.rt-profile-menu__nav{display:flex;width:calc(100% + var(--rt-profile-row-inset) + var(--rt-profile-row-inset));flex-direction:column;margin-left:calc(-1 * var(--rt-profile-row-inset))}.rt-profile-menu .rt-profile-menu__item,.rt-profile-menu .rt-profile-menu__theme{border-radius:var(--rt-profile-item-radius);color:var(--rt-nav-panel-item-color);font-size:var(--rt-profile-item-font-size);font-weight:var(--rt-profile-item-font-weight);gap:var(--rt-profile-item-content-gap)}.rt-profile-menu .rt-profile-menu__item{padding:var(--rt-profile-item-padding-y) var(--rt-profile-row-inset)}.rt-profile-menu .rt-profile-menu__theme{width:calc(100% + var(--rt-profile-row-inset) + var(--rt-profile-row-inset));padding:var(--rt-profile-row-inset);margin-left:calc(-1 * var(--rt-profile-row-inset));color:var(--rt-color-action-primary)}.rt-profile-menu .rt-profile-menu__theme .rt-menu-item__icon{box-sizing:content-box;padding:var(--rt-profile-theme-icon-padding);border-radius:var(--rt-profile-theme-icon-radius);background-color:var(--rt-color-action-primary-subtle)}}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					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: "component",
+					type: RtSelectComponent,
+					selector: "rt-select",
+					inputs: [
+						"appearance",
+						"options",
+						"placeholder",
+						"iconLeft",
+						"filter",
+						"filterPlaceholder",
+						"panelWidth",
+						"panelMaxHeight"
+					],
+					outputs: ["selectionChange"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtProfileMenuComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-profile-menu",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				FormsModule,
+				BlockDirective,
+				ElemDirective,
+				RtMenuItemComponent,
+				RtSelectComponent
+			],
+			host: { class: BEM_BLOCK },
+			template: "<ng-container rtBlock=\"rt-profile-menu\">\n    <div rtElem=\"user\">\n        <span rtElem=\"avatar\" aria-hidden=\"true\">{{ avatar() }}</span>\n        <span rtElem=\"name\" qa-dataid=\"profile-user-name\">{{ userName() }}</span>\n        @if (organizationName()) {\n            <span rtElem=\"organization\" qa-dataid=\"profile-organization\">\n                {{ organizationName() }}\n                <span rtElem=\"organization-label\">{{ t().profileMenuOrganization }}</span>\n            </span>\n        }\n    </div>\n\n    <div rtElem=\"nav\" role=\"menu\">\n        @switch (organizationChange()) {\n            @case ('allowed') {\n                <rt-menu-item\n                    rtElem=\"item\"\n                    qa-dataid=\"profile-change-organization\"\n                    icon=\"refresh\"\n                    [label]=\"t().profileMenuChangeOrganization\"\n                    (selected)=\"changeOrganization.emit()\" />\n            }\n            @case ('denied') {\n                <rt-menu-item\n                    rtElem=\"item\"\n                    qa-dataid=\"profile-change-organization\"\n                    icon=\"refresh\"\n                    disabled\n                    [label]=\"t().profileMenuChangeOrganization\"\n                    [tooltip]=\"t().profileMenuChangeOrganizationDenied\" />\n            }\n        }\n\n        @if (passwordChange()) {\n            <rt-menu-item\n                rtElem=\"item\"\n                qa-dataid=\"profile-password-change\"\n                icon=\"ico-lock\"\n                [label]=\"t().profileMenuChangePassword\"\n                (selected)=\"changePassword.emit()\" />\n        }\n\n        <rt-menu-item\n            rtElem=\"item\"\n            qa-dataid=\"profile-logout\"\n            icon=\"ico-exit\"\n            [disabled]=\"signOutDisabled()\"\n            [label]=\"t().profileMenuSignOut\"\n            (selected)=\"signOut.emit()\" />\n    </div>\n\n    <!-- Своего правила у переключателя языка нет: ширину ему задаёт колонка блока. -->\n    @if (locales().length) {\n        <rt-select\n            qa-dataid=\"profile-locale-select\"\n            name=\"rtProfileMenuLocale\"\n            [options]=\"locales()\"\n            [ngModel]=\"locale()\"\n            (ngModelChange)=\"localeChange.emit($event)\" />\n    }\n\n    <rt-menu-item\n        rtElem=\"theme\"\n        qa-dataid=\"profile-theme-toggle\"\n        [icon]=\"themeIcon()\"\n        [label]=\"t().profileMenuSwitchTheme\"\n        (selected)=\"onToggleTheme()\" />\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-profile-menu{display:flex;min-width:var(--rt-profile-menu-min-width);box-sizing:border-box;flex-direction:column;padding:var(--rt-profile-menu-padding);border:var(--rt-profile-menu-border-width) solid var(--rt-nav-panel-color-border);border-radius:var(--rt-profile-menu-radius);background-color:var(--rt-nav-panel-color-bg);box-shadow:var(--rt-profile-menu-shadow);gap:var(--rt-space-2)}.rt-profile-menu__user{display:flex;flex-direction:column;padding-bottom:var(--rt-space-2);gap:var(--rt-space-2)}.rt-profile-menu__avatar{display:inline-flex;width:var(--rt-profile-avatar-size);height:var(--rt-profile-avatar-size);align-items:center;justify-content:center;border:var(--rt-profile-avatar-border-width) solid var(--rt-nav-header-color-bg);border-radius:var(--rt-profile-avatar-radius);color:var(--rt-color-text-primary);font-size:var(--rt-profile-avatar-font-size);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none)}.rt-profile-menu__name{color:var(--rt-color-text-primary);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-tight)}.rt-profile-menu__organization{color:var(--rt-nav-panel-item-color);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-regular);line-height:var(--rt-leading-tight)}.rt-profile-menu__organization-label{color:var(--rt-nav-panel-group-color)}.rt-profile-menu__nav{display:flex;width:calc(100% + var(--rt-profile-row-inset) + var(--rt-profile-row-inset));flex-direction:column;margin-left:calc(-1 * var(--rt-profile-row-inset))}.rt-profile-menu .rt-profile-menu__item,.rt-profile-menu .rt-profile-menu__theme{border-radius:var(--rt-profile-item-radius);color:var(--rt-nav-panel-item-color);font-size:var(--rt-profile-item-font-size);font-weight:var(--rt-profile-item-font-weight);gap:var(--rt-profile-item-content-gap)}.rt-profile-menu .rt-profile-menu__item{padding:var(--rt-profile-item-padding-y) var(--rt-profile-row-inset)}.rt-profile-menu .rt-profile-menu__theme{width:calc(100% + var(--rt-profile-row-inset) + var(--rt-profile-row-inset));padding:var(--rt-profile-row-inset);margin-left:calc(-1 * var(--rt-profile-row-inset));color:var(--rt-color-action-primary)}.rt-profile-menu .rt-profile-menu__theme .rt-menu-item__icon{box-sizing:content-box;padding:var(--rt-profile-theme-icon-padding);border-radius:var(--rt-profile-theme-icon-radius);background-color:var(--rt-color-action-primary-subtle)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		userName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userName",
+				required: false
+			}]
+		}],
+		organizationName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "organizationName",
+				required: false
+			}]
+		}],
+		organizationChange: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "organizationChange",
+				required: false
+			}]
+		}],
+		passwordChange: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "passwordChange",
+				required: false
+			}]
+		}],
+		locales: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locales",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		signOutDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "signOutDisabled",
+				required: false
+			}]
+		}],
+		changeOrganization: [{
+			type: i0.Output,
+			args: ["changeOrganization"]
+		}],
+		changePassword: [{
+			type: i0.Output,
+			args: ["changePassword"]
+		}],
+		localeChange: [{
+			type: i0.Output,
+			args: ["localeChange"]
+		}],
+		signOut: [{
+			type: i0.Output,
+			args: ["signOut"]
+		}]
+	}
+});
+export { RtProfileMenuComponent };
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-profile-menu.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-profile-menu.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/profile-menu/rt-profile-menu.component.ts","../../../projects/ui-kit-v2/src/lib/components/profile-menu/rt-profile-menu.component.html"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    computed,\n    inject,\n    input,\n    output,\n    ChangeDetectionStrategy,\n    Component,\n    InputSignal,\n    InputSignalWithTransform,\n    OutputEmitterRef,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\n\nimport { IRtIcon, RT_KIT_LABELS, ThemeService, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\n\nimport { RtMenuItemComponent } from '@rt-tools/ui-kit-v2/menu';\nimport { RtSelectComponent } from '@rt-tools/ui-kit-v2/select';\nimport { IRtProfileMenu } from './rt-profile-menu.model';\n\nconst BEM_BLOCK: string = 'rt-profile-menu';\n\n/**\n * Содержимое попапа профиля в шапке `rt-page-header`: кто вошёл и в какой организации, действия с\n * учётной записью, язык и тема.\n *\n * Свою панель меню рисует само — фон, рамку, скругление и тень: поповер кита оформления не даёт,\n * и голые пункты в нём легли бы прямо поверх страницы.\n *\n * Тему переключает `ThemeService`, как у `rt-theme-toggle`: служба одна на страницу, и вход\n * только повторял бы её. Куда ведут остальные действия, решает приложение — они уходят выходами.\n *\n * Стили без инкапсуляции: попап рисуется в перекрытии, у конца `<body>`, и правило по классу блока\n * достаёт до него, а до разметки `rt-menu-item` — тоже.\n */\n@Component({\n    selector: 'rt-profile-menu',\n    templateUrl: './rt-profile-menu.component.html',\n    styleUrls: ['./rt-profile-menu.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // angular\n        FormsModule,\n\n        // rt-tools\n        BlockDirective,\n        ElemDirective,\n\n        // standalone components / directives\n        RtMenuItemComponent,\n        RtSelectComponent,\n    ],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtProfileMenuComponent {\n    readonly #theme: ThemeService = inject(ThemeService);\n\n    /** Подписи кита: сигнал, потому что язык может смениться без перезагрузки. */\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    /** Показан значок противоположной темы: нажатие переводит к ней. */\n    protected readonly themeIcon: Signal<IRtIcon.Name> = computed((): IRtIcon.Name => (this.#theme.isDark() ? 'ico-sun' : 'moon'));\n\n    /** Круг над именем несёт его первую букву: картинки профиля у кита нет. */\n    protected readonly avatar: Signal<string> = computed((): string => this.userName().trim().charAt(0).toUpperCase());\n\n    public readonly userName: InputSignal<string> = input<string>('');\n\n    /** Пустое название — строки организации нет. */\n    public readonly organizationName: InputSignal<string> = input<string>('');\n\n    public readonly organizationChange: InputSignal<IRtProfileMenu.OrganizationChange> = input<IRtProfileMenu.OrganizationChange>('hidden');\n\n    public readonly passwordChange: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Пустой список — переключателя языка нет. */\n    public readonly locales: InputSignal<ReadonlyArray<IRtProfileMenu.Locale>> = input<ReadonlyArray<IRtProfileMenu.Locale>>([]);\n\n    public readonly locale: InputSignal<string> = input<string>('');\n\n    /** Выход недоступен, пока приложение его уже ведёт. */\n    public readonly signOutDisabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    public readonly changeOrganization: OutputEmitterRef<void> = output<void>();\n\n    public readonly changePassword: OutputEmitterRef<void> = output<void>();\n\n    public readonly localeChange: OutputEmitterRef<string> = output<string>();\n\n    public readonly signOut: OutputEmitterRef<void> = output<void>();\n\n    public onToggleTheme(): void {\n        this.#theme.toggle();\n    }\n}\n","<ng-container rtBlock=\"rt-profile-menu\">\n    <div rtElem=\"user\">\n        <span rtElem=\"avatar\" aria-hidden=\"true\">{{ avatar() }}</span>\n        <span rtElem=\"name\" qa-dataid=\"profile-user-name\">{{ userName() }}</span>\n        @if (organizationName()) {\n            <span rtElem=\"organization\" qa-dataid=\"profile-organization\">\n                {{ organizationName() }}\n                <span rtElem=\"organization-label\">{{ t().profileMenuOrganization }}</span>\n            </span>\n        }\n    </div>\n\n    <div rtElem=\"nav\" role=\"menu\">\n        @switch (organizationChange()) {\n            @case ('allowed') {\n                <rt-menu-item\n                    rtElem=\"item\"\n                    qa-dataid=\"profile-change-organization\"\n                    icon=\"refresh\"\n                    [label]=\"t().profileMenuChangeOrganization\"\n                    (selected)=\"changeOrganization.emit()\" />\n            }\n            @case ('denied') {\n                <rt-menu-item\n                    rtElem=\"item\"\n                    qa-dataid=\"profile-change-organization\"\n                    icon=\"refresh\"\n                    disabled\n                    [label]=\"t().profileMenuChangeOrganization\"\n                    [tooltip]=\"t().profileMenuChangeOrganizationDenied\" />\n            }\n        }\n\n        @if (passwordChange()) {\n            <rt-menu-item\n                rtElem=\"item\"\n                qa-dataid=\"profile-password-change\"\n                icon=\"ico-lock\"\n                [label]=\"t().profileMenuChangePassword\"\n                (selected)=\"changePassword.emit()\" />\n        }\n\n        <rt-menu-item\n            rtElem=\"item\"\n            qa-dataid=\"profile-logout\"\n            icon=\"ico-exit\"\n            [disabled]=\"signOutDisabled()\"\n            [label]=\"t().profileMenuSignOut\"\n            (selected)=\"signOut.emit()\" />\n    </div>\n\n    <!-- Своего правила у переключателя языка нет: ширину ему задаёт колонка блока. -->\n    @if (locales().length) {\n        <rt-select\n            qa-dataid=\"profile-locale-select\"\n            name=\"rtProfileMenuLocale\"\n            [options]=\"locales()\"\n            [ngModel]=\"locale()\"\n            (ngModelChange)=\"localeChange.emit($event)\" />\n    }\n\n    <rt-menu-item\n        rtElem=\"theme\"\n        qa-dataid=\"profile-theme-toggle\"\n        [icon]=\"themeIcon()\"\n        [label]=\"t().profileMenuSwitchTheme\"\n        (selected)=\"onToggleTheme()\" />\n</ng-container>\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit-v2",
-  "version": "0.23.4",
+  "version": "0.24.0",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",
@@ -321,6 +321,10 @@
       "types": "./types/rt-tools-ui-kit-v2-popover.d.ts",
       "default": "./fesm2022/rt-tools-ui-kit-v2-popover.mjs"
     },
+    "./profile-menu": {
+      "types": "./types/rt-tools-ui-kit-v2-profile-menu.d.ts",
+      "default": "./fesm2022/rt-tools-ui-kit-v2-profile-menu.mjs"
+    },
     "./prompt-suggestion": {
       "types": "./types/rt-tools-ui-kit-v2-prompt-suggestion.d.ts",
       "default": "./fesm2022/rt-tools-ui-kit-v2-prompt-suggestion.mjs"

package/src/lib/components/bottom-sheet/rt-bottom-sheet.component.scss

@@ -10,6 +10,7 @@
         --rt-bottom-sheet-handle-radius: var(--rt-radius-xs);
         --rt-bottom-sheet-shadow: var(--rt-shadow-card-soft);
         --rt-bottom-sheet-transition-duration: var(--rt-duration-base);
+        --rt-bottom-sheet-footer-border-width: var(--rt-border-width-thin);
 
         position: fixed;
         z-index: 1000;
@@ -91,7 +92,7 @@
             flex-wrap: wrap;
             align-items: center;
             padding: var(--rt-space-4) var(--rt-space-5) calc(var(--rt-space-4) + env(safe-area-inset-bottom));
-            border-top: var(--rt-border-width-thin) solid var(--rt-color-border-default);
+            border-top: var(--rt-bottom-sheet-footer-border-width) solid var(--rt-color-border-default);
             gap: var(--rt-space-2);
 
             &:empty {

package/src/lib/components/profile-menu/CONTEXT.md

@@ -0,0 +1,32 @@
+# `rt-profile-menu`
+
+Содержимое попапа профиля в шапке `rt-page-header`: человек, организация, действия, язык и тема.
+
+```html
+<rt-profile-menu organizationChange="allowed" [userName]="name" [organizationName]="org" (signOut)="signOut()" />
+```
+
+| вход                 | тип                                    | умолчание  |
+| -------------------- | -------------------------------------- | ---------- |
+| `userName`           | `string`                               | `''`       |
+| `organizationName`   | `string`                               | `''`       |
+| `organizationChange` | `'hidden' \| 'denied' \| 'allowed'`    | `'hidden'` |
+| `passwordChange`     | `boolean`                              | `false`    |
+| `locales`            | `ReadonlyArray<IRtProfileMenu.Locale>` | `[]`       |
+| `locale`             | `string`                               | `''`       |
+| `signOutDisabled`    | `boolean`                              | `false`    |
+
+Выходы: `changeOrganization`, `changePassword`, `localeChange` (код языка), `signOut`.
+
+## Главное, что нужно знать
+
+**Панель рисует само меню.** У поповера кита оформления нет, и голые пункты меню в попапе шапки
+легли бы прямо поверх страницы. Стили без инкапсуляции: попап живёт в перекрытии у конца `<body>`.
+
+**Тему переключает `ThemeService`**, как у `rt-theme-toggle`: значок показывает тему, к которой
+переведёт нажатие.
+
+## Края
+
+- Пустое название организации убирает её строку, пустой список языков — переключатель языка.
+- Смена организации в режиме `denied` стоит приглушённой и объясняет причину подсказкой.

package/src/lib/components/profile-menu/rt-profile-menu.component.scss

@@ -0,0 +1,104 @@
+@layer rt-kit.components {
+    /* rt-profile-menu — ViewEncapsulation.None: попап рисуется в перекрытии у конца `<body>`, и
+       правило по классу блока достаёт до него. Отсюда же красится круг под значком темы: он
+       рисуется разметкой `rt-menu-item`, и заскоупленное правило до чужого шаблона не дотянулось бы.
+       Подложку блок берёт у панели навигации кита, а тень своя: узкой панели нужен очерченный край. */
+
+    .rt-profile-menu {
+        display: flex;
+        min-width: var(--rt-profile-menu-min-width);
+        box-sizing: border-box;
+        flex-direction: column;
+        padding: var(--rt-profile-menu-padding);
+        border: var(--rt-profile-menu-border-width) solid var(--rt-nav-panel-color-border);
+        border-radius: var(--rt-profile-menu-radius);
+        background-color: var(--rt-nav-panel-color-bg);
+        box-shadow: var(--rt-profile-menu-shadow);
+        gap: var(--rt-space-2);
+
+        &__user {
+            display: flex;
+            flex-direction: column;
+            padding-bottom: var(--rt-space-2);
+            gap: var(--rt-space-2);
+        }
+
+        &__avatar {
+            display: inline-flex;
+            width: var(--rt-profile-avatar-size);
+            height: var(--rt-profile-avatar-size);
+            align-items: center;
+            justify-content: center;
+            border: var(--rt-profile-avatar-border-width) solid var(--rt-nav-header-color-bg);
+            border-radius: var(--rt-profile-avatar-radius);
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-profile-avatar-font-size);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: var(--rt-leading-none);
+        }
+
+        &__name {
+            color: var(--rt-color-text-primary);
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-semibold);
+            line-height: var(--rt-leading-tight);
+        }
+
+        // Название заведения и слово-пояснение стоят в одной строке: без него непонятно, что это за
+        // вторая строка под именем.
+        &__organization {
+            color: var(--rt-nav-panel-item-color);
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-regular);
+            line-height: var(--rt-leading-tight);
+        }
+
+        &__organization-label {
+            color: var(--rt-nav-panel-group-color);
+        }
+
+        // Строки выступают за содержимое панели на половину её отступа: подсветка на наведении иначе
+        // упирается в рамку. Выступ и горизонтальный отступ строки — одно число, поэтому значок
+        // стоит на краю содержимого панели.
+        &__nav {
+            display: flex;
+            width: calc(100% + var(--rt-profile-row-inset) + var(--rt-profile-row-inset));
+            flex-direction: column;
+            margin-left: calc(-1 * var(--rt-profile-row-inset));
+        }
+
+        // Строки просторнее и крупнее пунктов обычного меню кита: их четыре, и они читаются как
+        // список действий, а не как выпадающее меню.
+        // Правила строк идут потомком блока: свои умолчания кит объявляет одним классом, и без
+        // лишнего веса исход решал бы порядок подключения стилей.
+        & &__item,
+        & &__theme {
+            border-radius: var(--rt-profile-item-radius);
+            color: var(--rt-nav-panel-item-color);
+            font-size: var(--rt-profile-item-font-size);
+            font-weight: var(--rt-profile-item-font-weight);
+            gap: var(--rt-profile-item-content-gap);
+        }
+
+        & &__item {
+            padding: var(--rt-profile-item-padding-y) var(--rt-profile-row-inset);
+        }
+
+        // Переключатель темы выделен из списка акцентом: значок садится в круг на подложке акцента,
+        // подпись красится им же. Круг набирается отступом по content-box — размер самого значка
+        // приходит инлайном от `rt-icon`.
+        & &__theme {
+            width: calc(100% + var(--rt-profile-row-inset) + var(--rt-profile-row-inset));
+            padding: var(--rt-profile-row-inset);
+            margin-left: calc(-1 * var(--rt-profile-row-inset));
+            color: var(--rt-color-action-primary);
+
+            .rt-menu-item__icon {
+                box-sizing: content-box;
+                padding: var(--rt-profile-theme-icon-padding);
+                border-radius: var(--rt-profile-theme-icon-radius);
+                background-color: var(--rt-color-action-primary-subtle);
+            }
+        }
+    }
+}

package/src/styles/_semantic.scss

@@ -399,8 +399,12 @@
     --rt-profile-menu-min-width: var(--rt-size-60);
     --rt-profile-menu-padding: var(--rt-space-5);
     --rt-profile-menu-shadow: var(--rt-shadow-profile-menu);
+    --rt-profile-menu-border-width: var(--rt-border-width-thin);
+    --rt-profile-menu-radius: var(--rt-radius-md);
     --rt-profile-avatar-size: var(--rt-size-10);
     --rt-profile-avatar-font-size: var(--rt-text-2xl);
+    --rt-profile-avatar-border-width: var(--rt-border-width-medium);
+    --rt-profile-avatar-radius: var(--rt-radius-full);
     --rt-profile-item-padding-y: var(--rt-space-4);
     --rt-profile-item-content-gap: var(--rt-space-2);
     --rt-profile-item-font-size: var(--rt-text-md);
@@ -412,6 +416,7 @@
        вертикали с содержимым. Это же число — горизонтальный отступ строки. */
     --rt-profile-row-inset: var(--rt-space-2);
     --rt-profile-theme-icon-padding: var(--rt-space-2);
+    --rt-profile-theme-icon-radius: var(--rt-radius-full);
 
     /* Габариты панели второго уровня: ширина считается числом колонок, поэтому
        колонка, промежуток и внутренний отступ — токены, из которых панель