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

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

@@ -1,296 +1,635 @@
-import { NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Directive, inject, TemplateRef, Renderer2, ElementRef, DestroyRef, signal, contentChild, input, booleanAttribute, numberAttribute, output, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { StorageService, BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
-import { RT_KIT_LABELS } from '@rt-tools/ui-kit-v2/core';
-import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
-
-class RtWorkspaceDesktopOnlyDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtWorkspaceDesktopOnlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtWorkspaceDesktopOnlyDirective, isStandalone: true, selector: "[rtWorkspaceDesktopOnly]", host: { classAttribute: "rt-workspace__desktop-only" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtWorkspaceDesktopOnlyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtWorkspaceDesktopOnly]',
-                    host: {
-                        class: 'rt-workspace__desktop-only',
-                    },
-                }]
-        }] });
-class RtWorkspaceListDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас
-    static ngTemplateContextGuard(_directive, context) {
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtWorkspaceListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtWorkspaceListDirective, isStandalone: true, selector: "[rtWorkspaceList]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtWorkspaceListDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtWorkspaceList]',
-                }]
-        }] });
-class RtWorkspaceCenterDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас
-    static ngTemplateContextGuard(_directive, context) {
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtWorkspaceCenterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtWorkspaceCenterDirective, isStandalone: true, selector: "[rtWorkspaceCenter]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtWorkspaceCenterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtWorkspaceCenter]',
-                }]
-        }] });
-class RtWorkspaceAsideDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас
-    static ngTemplateContextGuard(_directive, context) {
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtWorkspaceAsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtWorkspaceAsideDirective, isStandalone: true, selector: "[rtWorkspaceAside]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtWorkspaceAsideDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtWorkspaceAside]',
-                }]
-        }] });
-
-const BEM_BLOCK = 'rt-workspace';
-const STORAGE_PREFIX = 'rt-workspace:';
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Renderer2, TemplateRef, ViewEncapsulation, booleanAttribute, computed, contentChild, effect, inject, input, numberAttribute, output, signal, untracked } from "@angular/core";
+import { BlockDirective, ElemDirective, ModDirective, StorageService } from "@rt-tools/core";
+import { RT_KIT_LABELS } from "@rt-tools/ui-kit-v2/core";
+import { RtIconButtonComponent } from "@rt-tools/ui-kit-v2/icon-button";
+var RtWorkspaceDesktopOnlyDirective = class RtWorkspaceDesktopOnlyDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtWorkspaceDesktopOnlyDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtWorkspaceDesktopOnlyDirective,
+			isStandalone: true,
+			selector: "[rtWorkspaceDesktopOnly]",
+			host: { classAttribute: "rt-workspace__desktop-only" },
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtWorkspaceDesktopOnlyDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[rtWorkspaceDesktopOnly]",
+			host: { class: "rt-workspace__desktop-only" }
+		}]
+	}]
+});
+var RtWorkspaceListDirective = class RtWorkspaceListDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static ngTemplateContextGuard(_directive, context) {
+		return true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtWorkspaceListDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtWorkspaceListDirective,
+			isStandalone: true,
+			selector: "[rtWorkspaceList]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtWorkspaceListDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtWorkspaceList]" }]
+	}]
+});
+var RtWorkspaceCenterDirective = class RtWorkspaceCenterDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static ngTemplateContextGuard(_directive, context) {
+		return true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtWorkspaceCenterDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtWorkspaceCenterDirective,
+			isStandalone: true,
+			selector: "[rtWorkspaceCenter]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtWorkspaceCenterDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtWorkspaceCenter]" }]
+	}]
+});
+var RtWorkspaceAsideDirective = class RtWorkspaceAsideDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static ngTemplateContextGuard(_directive, context) {
+		return true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtWorkspaceAsideDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtWorkspaceAsideDirective,
+			isStandalone: true,
+			selector: "[rtWorkspaceAside]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtWorkspaceAsideDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtWorkspaceAside]" }]
+	}]
+});
+const BEM_BLOCK = "rt-workspace";
+const STORAGE_PREFIX = "rt-workspace:";
 const KEYBOARD_STEP = 16;
-class RtWorkspaceComponent {
-    #storage;
-    #renderer;
-    #hostRef;
-    #destroyRef;
-    #listWidthOverride;
-    #asideWidthOverride;
-    #asideCollapsed;
-    #asideOpen;
-    #resizing;
-    #restoredKey;
-    #dragState;
-    #detachDragListeners;
-    constructor() {
-        this.#storage = inject(StorageService);
-        this.#renderer = inject(Renderer2);
-        this.#hostRef = inject(ElementRef);
-        this.#destroyRef = inject(DestroyRef);
-        this.#listWidthOverride = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#listWidthOverride" }] : /* istanbul ignore next */ []));
-        this.#asideWidthOverride = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#asideWidthOverride" }] : /* istanbul ignore next */ []));
-        this.#asideCollapsed = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#asideCollapsed" }] : /* istanbul ignore next */ []));
-        this.#asideOpen = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#asideOpen" }] : /* istanbul ignore next */ []));
-        this.#resizing = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#resizing" }] : /* istanbul ignore next */ []));
-        this.#restoredKey = null;
-        this.#dragState = null;
-        this.#detachDragListeners = null;
-        this.t = inject(RT_KIT_LABELS);
-        this.listSlot = contentChild(RtWorkspaceListDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "listSlot" }] : /* istanbul ignore next */ []));
-        this.centerSlot = contentChild(RtWorkspaceCenterDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "centerSlot" }] : /* istanbul ignore next */ []));
-        this.asideSlot = contentChild(RtWorkspaceAsideDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "asideSlot" }] : /* istanbul ignore next */ []));
-        this.resizing = this.#resizing.asReadonly();
-        this.slotContext = { $implicit: this };
-        this.storageKey = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "storageKey" }] : /* istanbul ignore next */ []));
-        this.hasActive = input(false, { ...(ngDevMode ? { debugName: "hasActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.listMinWidth = input(240, { ...(ngDevMode ? { debugName: "listMinWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.listMaxWidth = input(480, { ...(ngDevMode ? { debugName: "listMaxWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.listDefaultWidth = input(320, { ...(ngDevMode ? { debugName: "listDefaultWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.asideMinWidth = input(280, { ...(ngDevMode ? { debugName: "asideMinWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.asideMaxWidth = input(560, { ...(ngDevMode ? { debugName: "asideMaxWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.asideDefaultWidth = input(360, { ...(ngDevMode ? { debugName: "asideDefaultWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.centerMinWidth = input(360, { ...(ngDevMode ? { debugName: "centerMinWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.backClicked = output();
-        this.listWidth = computed(() => this.#listWidthOverride() ?? this.listDefaultWidth(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "listWidth" }] : /* istanbul ignore next */ []));
-        this.asideWidth = computed(() => this.#asideWidthOverride() ?? this.asideDefaultWidth(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "asideWidth" }] : /* istanbul ignore next */ []));
-        this.asideCollapsed = this.#asideCollapsed.asReadonly();
-        this.asideOpen = this.#asideOpen.asReadonly();
-        effect(() => {
-            const key = this.storageKey();
-            if (key === null || key === this.#restoredKey) {
-                return;
-            }
-            this.#restoredKey = key;
-            untracked(() => this.#restoreFromStorage(key));
-        });
-        this.#destroyRef.onDestroy(() => this.#stopDragging());
-    }
-    toggleAsideCollapsed() {
-        this.#asideCollapsed.update((collapsed) => !collapsed);
-        this.#persist();
-    }
-    openAside() {
-        this.#asideOpen.set(true);
-    }
-    closeAside() {
-        this.#asideOpen.set(false);
-    }
-    toggleAside() {
-        this.#asideOpen.update((open) => !open);
-    }
-    onBackClicked() {
-        this.closeAside();
-        this.backClicked.emit();
-    }
-    onHandlePointerDown(event, kind) {
-        if (event.button !== 0) {
-            return;
-        }
-        event.preventDefault();
-        this.#dragState = {
-            kind,
-            startX: event.clientX,
-            startWidth: kind === 'list' ? this.listWidth() : this.asideWidth(),
-        };
-        this.#resizing.set(true);
-        const detachMove = this.#renderer.listen('document', 'pointermove', (moveEvent) => this.#onDragMove(moveEvent));
-        const detachUp = this.#renderer.listen('document', 'pointerup', () => {
-            this.#persist();
-            this.#stopDragging();
-        });
-        this.#detachDragListeners = () => {
-            detachMove();
-            detachUp();
-        };
-    }
-    onHandleKeydown(event, kind) {
-        let delta;
-        if (event.key === 'ArrowRight') {
-            delta = kind === 'list' ? KEYBOARD_STEP : -KEYBOARD_STEP;
-        }
-        else if (event.key === 'ArrowLeft') {
-            delta = kind === 'list' ? -KEYBOARD_STEP : KEYBOARD_STEP;
-        }
-        else {
-            return;
-        }
-        event.preventDefault();
-        const current = kind === 'list' ? this.listWidth() : this.asideWidth();
-        this.#applyWidth(kind, current + delta);
-        this.#persist();
-    }
-    onHandleReset(kind) {
-        const override = kind === 'list' ? this.#listWidthOverride : this.#asideWidthOverride;
-        override.set(null);
-        this.#persist();
-    }
-    #onDragMove(event) {
-        const drag = this.#dragState;
-        if (drag === null) {
-            return;
-        }
-        const dx = event.clientX - drag.startX;
-        const rawWidth = drag.kind === 'list' ? drag.startWidth + dx : drag.startWidth - dx;
-        this.#applyWidth(drag.kind, rawWidth);
-    }
-    #applyWidth(kind, rawWidth) {
-        const override = kind === 'list' ? this.#listWidthOverride : this.#asideWidthOverride;
-        override.set(this.#clampWidth(kind, rawWidth));
-    }
-    #clampWidth(kind, rawWidth) {
-        const min = kind === 'list' ? this.listMinWidth() : this.asideMinWidth();
-        const configMax = kind === 'list' ? this.listMaxWidth() : this.asideMaxWidth();
-        // Место соседней панели вычитается, только когда она объявлена: без её слота ширина
-        // соседки — число из умолчаний, а места она не занимает вовсе.
-        const otherWidth = this.#occupiedWidth(kind === 'list' ? 'aside' : 'list');
-        const hostWidth = this.#hostRef.nativeElement.clientWidth;
-        const available = hostWidth > 0 ? hostWidth - otherWidth - this.centerMinWidth() : Number.POSITIVE_INFINITY;
-        const max = Math.max(min, Math.min(configMax, available));
-        return Math.round(Math.min(max, Math.max(min, rawWidth)));
-    }
-    /** Сколько ширины занимает панель: необъявленная не занимает ничего. */
-    #occupiedWidth(kind) {
-        if (kind === 'list') {
-            return this.listSlot() ? this.listWidth() : 0;
-        }
-        return this.asideSlot() ? this.asideWidth() : 0;
-    }
-    #stopDragging() {
-        this.#detachDragListeners?.();
-        this.#detachDragListeners = null;
-        this.#dragState = null;
-        this.#resizing.set(false);
-    }
-    #restoreFromStorage(key) {
-        const stored = this.#storage.getItem(`${STORAGE_PREFIX}${key}`) ?? null;
-        if (stored === null || typeof stored !== 'object') {
-            return;
-        }
-        if (typeof stored.listWidth === 'number') {
-            this.#listWidthOverride.set(this.#clampWidth('list', stored.listWidth));
-        }
-        if (typeof stored.asideWidth === 'number') {
-            this.#asideWidthOverride.set(this.#clampWidth('aside', stored.asideWidth));
-        }
-        this.#asideCollapsed.set(stored.asideCollapsed === true);
-    }
-    #persist() {
-        const key = this.storageKey();
-        if (key === null) {
-            return;
-        }
-        const state = {
-            listWidth: this.listWidth(),
-            asideWidth: this.asideWidth(),
-            asideCollapsed: this.asideCollapsed(),
-        };
-        this.#storage.setItem(`${STORAGE_PREFIX}${key}`, state);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtWorkspaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtWorkspaceComponent, isStandalone: true, selector: "rt-workspace", inputs: { storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, hasActive: { classPropertyName: "hasActive", publicName: "hasActive", isSignal: true, isRequired: false, transformFunction: null }, listMinWidth: { classPropertyName: "listMinWidth", publicName: "listMinWidth", isSignal: true, isRequired: false, transformFunction: null }, listMaxWidth: { classPropertyName: "listMaxWidth", publicName: "listMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, listDefaultWidth: { classPropertyName: "listDefaultWidth", publicName: "listDefaultWidth", isSignal: true, isRequired: false, transformFunction: null }, asideMinWidth: { classPropertyName: "asideMinWidth", publicName: "asideMinWidth", isSignal: true, isRequired: false, transformFunction: null }, asideMaxWidth: { classPropertyName: "asideMaxWidth", publicName: "asideMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, asideDefaultWidth: { classPropertyName: "asideDefaultWidth", publicName: "asideDefaultWidth", isSignal: true, isRequired: false, transformFunction: null }, centerMinWidth: { classPropertyName: "centerMinWidth", publicName: "centerMinWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backClicked: "backClicked" }, host: { properties: { "class.rt-workspace--has-active": "hasActive()", "class.rt-workspace--aside-collapsed": "asideCollapsed()", "class.rt-workspace--resizing": "resizing()", "style.--rt-workspace-list-size": "listWidth() + 'px'", "style.--rt-workspace-aside-size": "asideWidth() + 'px'" }, classAttribute: "rt-workspace" }, queries: [{ propertyName: "listSlot", first: true, predicate: RtWorkspaceListDirective, descendants: true, isSignal: true }, { propertyName: "centerSlot", first: true, predicate: RtWorkspaceCenterDirective, descendants: true, isSignal: true }, { propertyName: "asideSlot", first: true, predicate: RtWorkspaceAsideDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-workspace\">\n    @if (listSlot()) {\n        <section rtElem=\"list\" qa-dataid=\"workspace-list\">\n            <ng-container [ngTemplateOutlet]=\"listSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-list\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeList\"\n            [rtMod]=\"{ list: true }\"\n            [attr.aria-valuenow]=\"listWidth()\"\n            [attr.aria-valuemin]=\"listMinWidth()\"\n            [attr.aria-valuemax]=\"listMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'list')\"\n            (dblclick)=\"onHandleReset('list')\"\n            (keydown)=\"onHandleKeydown($event, 'list')\"></div>\n    }\n\n    <section rtElem=\"center\" qa-dataid=\"workspace-center\">\n        @if (hasActive()) {\n            <div rtElem=\"mobile-toolbar\">\n                <rt-icon-button\n                    qa-dataid=\"workspace-back\"\n                    icon=\"arrow-left\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiBackToList\"\n                    [tooltip]=\"t().uiToList\"\n                    (clicked)=\"onBackClicked()\" />\n                <rt-icon-button\n                    qa-dataid=\"workspace-open-details\"\n                    icon=\"info-circle\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiShowDetails\"\n                    [tooltip]=\"t().uiDetails\"\n                    (clicked)=\"openAside()\" />\n            </div>\n        }\n        <ng-container [ngTemplateOutlet]=\"centerSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n    </section>\n\n    @if (asideSlot()) {\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-aside\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeDetails\"\n            [rtMod]=\"{ aside: true }\"\n            [attr.aria-valuenow]=\"asideWidth()\"\n            [attr.aria-valuemin]=\"asideMinWidth()\"\n            [attr.aria-valuemax]=\"asideMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'aside')\"\n            (dblclick)=\"onHandleReset('aside')\"\n            (keydown)=\"onHandleKeydown($event, 'aside')\"></div>\n\n        <section rtElem=\"aside\" qa-dataid=\"workspace-aside\" [rtMod]=\"{ open: asideOpen() }\">\n            <ng-container [ngTemplateOutlet]=\"asideSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n    }\n</ng-container>\n", styles: ["@layer rt-kit.components{.rt-workspace{--rt-workspace-border-width: var(--rt-border-width-thin);--rt-workspace-handle-line-width: var(--rt-border-width-medium);--rt-workspace-handle-transition-duration: var(--rt-duration-fast);--rt-workspace-panel-transition-duration: var(--rt-duration-base);--rt-workspace-aside-shadow: var(--rt-shadow-md);position:relative;display:flex;flex-direction:row;block-size:calc(100dvh - var(--rt-header-height, 0px));min-block-size:0}.rt-workspace__list{display:flex;flex:0 0 var(--rt-workspace-list-size, 320px);flex-direction:column;border-inline-end:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__center{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;min-inline-size:0;padding-inline:var(--rt-space-4)}.rt-workspace__mobile-toolbar{display:none}.rt-workspace__aside{display:flex;flex:0 0 var(--rt-workspace-aside-size, 360px);flex-direction:column;border-inline-start:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__handle{position:relative;z-index:1;flex:0 0 auto;background:transparent;cursor:col-resize;inline-size:var(--rt-space-2);margin-inline:calc(-1 * var(--rt-space-1));touch-action:none}.rt-workspace__handle:before{position:absolute;background:transparent;content:\"\";inline-size:var(--rt-workspace-handle-line-width);inset-block:0;inset-inline-start:50%;transform:translate(-50%);transition:background var(--rt-workspace-handle-transition-duration) ease}.rt-workspace__handle:hover:before,.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-strong)}.rt-workspace__handle:focus-visible{outline:none}.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-focus)}@media(width<=1080px){.rt-workspace__desktop-only{display:none}}@media(width<=1080px){.rt-workspace__mobile-toolbar{display:flex;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4) 0}.rt-workspace__handle{display:none}.rt-workspace__aside{position:absolute;z-index:2;flex-basis:360px;background:var(--rt-color-bg-surface);box-shadow:var(--rt-workspace-aside-shadow);inset-block:0;inset-inline-end:0;max-inline-size:90%;transform:translate(100%);transition:transform var(--rt-workspace-panel-transition-duration) ease}.rt-workspace__aside--open{transform:translate(0)}}@media(width<=768px){.rt-workspace__list{flex-basis:100%}}@media(width>1080px){.rt-workspace__aside{overflow:hidden;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease;will-change:flex-basis}}@media(width<=768px){.rt-workspace--has-active .rt-workspace__list{display:none}.rt-workspace--has-active .rt-workspace__center{flex-basis:100%}}@media(width>1080px){.rt-workspace--aside-collapsed .rt-workspace__aside{flex-basis:0;border-inline-start-width:0;min-inline-size:0;opacity:0;pointer-events:none;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease,visibility 0s linear var(--rt-workspace-panel-transition-duration);visibility:hidden}.rt-workspace--aside-collapsed .rt-workspace__handle--aside{display:none}}.rt-workspace--resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.rt-workspace--resizing .rt-workspace__list,.rt-workspace--resizing .rt-workspace__aside{transition:none}@media(prefers-reduced-motion:reduce){.rt-workspace__aside{transition:none}}}\n"], dependencies: [{ kind: "directive", type: 
-                // Angular
-                NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
-                // standalone components / directives
-                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtWorkspaceComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-workspace', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // Angular
-                        NgTemplateOutlet,
-                        // standalone components / directives
-                        RtIconButtonComponent,
-                        BlockDirective,
-                        ElemDirective,
-                        ModDirective,
-                    ], host: {
-                        class: BEM_BLOCK,
-                        '[class.rt-workspace--has-active]': 'hasActive()',
-                        '[class.rt-workspace--aside-collapsed]': 'asideCollapsed()',
-                        '[class.rt-workspace--resizing]': 'resizing()',
-                        '[style.--rt-workspace-list-size]': "listWidth() + 'px'",
-                        '[style.--rt-workspace-aside-size]': "asideWidth() + 'px'",
-                    }, template: "<ng-container rtBlock=\"rt-workspace\">\n    @if (listSlot()) {\n        <section rtElem=\"list\" qa-dataid=\"workspace-list\">\n            <ng-container [ngTemplateOutlet]=\"listSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-list\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeList\"\n            [rtMod]=\"{ list: true }\"\n            [attr.aria-valuenow]=\"listWidth()\"\n            [attr.aria-valuemin]=\"listMinWidth()\"\n            [attr.aria-valuemax]=\"listMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'list')\"\n            (dblclick)=\"onHandleReset('list')\"\n            (keydown)=\"onHandleKeydown($event, 'list')\"></div>\n    }\n\n    <section rtElem=\"center\" qa-dataid=\"workspace-center\">\n        @if (hasActive()) {\n            <div rtElem=\"mobile-toolbar\">\n                <rt-icon-button\n                    qa-dataid=\"workspace-back\"\n                    icon=\"arrow-left\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiBackToList\"\n                    [tooltip]=\"t().uiToList\"\n                    (clicked)=\"onBackClicked()\" />\n                <rt-icon-button\n                    qa-dataid=\"workspace-open-details\"\n                    icon=\"info-circle\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiShowDetails\"\n                    [tooltip]=\"t().uiDetails\"\n                    (clicked)=\"openAside()\" />\n            </div>\n        }\n        <ng-container [ngTemplateOutlet]=\"centerSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n    </section>\n\n    @if (asideSlot()) {\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-aside\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeDetails\"\n            [rtMod]=\"{ aside: true }\"\n            [attr.aria-valuenow]=\"asideWidth()\"\n            [attr.aria-valuemin]=\"asideMinWidth()\"\n            [attr.aria-valuemax]=\"asideMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'aside')\"\n            (dblclick)=\"onHandleReset('aside')\"\n            (keydown)=\"onHandleKeydown($event, 'aside')\"></div>\n\n        <section rtElem=\"aside\" qa-dataid=\"workspace-aside\" [rtMod]=\"{ open: asideOpen() }\">\n            <ng-container [ngTemplateOutlet]=\"asideSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n    }\n</ng-container>\n", styles: ["@layer rt-kit.components{.rt-workspace{--rt-workspace-border-width: var(--rt-border-width-thin);--rt-workspace-handle-line-width: var(--rt-border-width-medium);--rt-workspace-handle-transition-duration: var(--rt-duration-fast);--rt-workspace-panel-transition-duration: var(--rt-duration-base);--rt-workspace-aside-shadow: var(--rt-shadow-md);position:relative;display:flex;flex-direction:row;block-size:calc(100dvh - var(--rt-header-height, 0px));min-block-size:0}.rt-workspace__list{display:flex;flex:0 0 var(--rt-workspace-list-size, 320px);flex-direction:column;border-inline-end:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__center{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;min-inline-size:0;padding-inline:var(--rt-space-4)}.rt-workspace__mobile-toolbar{display:none}.rt-workspace__aside{display:flex;flex:0 0 var(--rt-workspace-aside-size, 360px);flex-direction:column;border-inline-start:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__handle{position:relative;z-index:1;flex:0 0 auto;background:transparent;cursor:col-resize;inline-size:var(--rt-space-2);margin-inline:calc(-1 * var(--rt-space-1));touch-action:none}.rt-workspace__handle:before{position:absolute;background:transparent;content:\"\";inline-size:var(--rt-workspace-handle-line-width);inset-block:0;inset-inline-start:50%;transform:translate(-50%);transition:background var(--rt-workspace-handle-transition-duration) ease}.rt-workspace__handle:hover:before,.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-strong)}.rt-workspace__handle:focus-visible{outline:none}.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-focus)}@media(width<=1080px){.rt-workspace__desktop-only{display:none}}@media(width<=1080px){.rt-workspace__mobile-toolbar{display:flex;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4) 0}.rt-workspace__handle{display:none}.rt-workspace__aside{position:absolute;z-index:2;flex-basis:360px;background:var(--rt-color-bg-surface);box-shadow:var(--rt-workspace-aside-shadow);inset-block:0;inset-inline-end:0;max-inline-size:90%;transform:translate(100%);transition:transform var(--rt-workspace-panel-transition-duration) ease}.rt-workspace__aside--open{transform:translate(0)}}@media(width<=768px){.rt-workspace__list{flex-basis:100%}}@media(width>1080px){.rt-workspace__aside{overflow:hidden;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease;will-change:flex-basis}}@media(width<=768px){.rt-workspace--has-active .rt-workspace__list{display:none}.rt-workspace--has-active .rt-workspace__center{flex-basis:100%}}@media(width>1080px){.rt-workspace--aside-collapsed .rt-workspace__aside{flex-basis:0;border-inline-start-width:0;min-inline-size:0;opacity:0;pointer-events:none;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease,visibility 0s linear var(--rt-workspace-panel-transition-duration);visibility:hidden}.rt-workspace--aside-collapsed .rt-workspace__handle--aside{display:none}}.rt-workspace--resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.rt-workspace--resizing .rt-workspace__list,.rt-workspace--resizing .rt-workspace__aside{transition:none}@media(prefers-reduced-motion:reduce){.rt-workspace__aside{transition:none}}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { listSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtWorkspaceListDirective), { isSignal: true }] }], centerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtWorkspaceCenterDirective), { isSignal: true }] }], asideSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtWorkspaceAsideDirective), { isSignal: true }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], hasActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActive", required: false }] }], listMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "listMinWidth", required: false }] }], listMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "listMaxWidth", required: false }] }], listDefaultWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "listDefaultWidth", required: false }] }], asideMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideMinWidth", required: false }] }], asideMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideMaxWidth", required: false }] }], asideDefaultWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideDefaultWidth", required: false }] }], centerMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerMinWidth", required: false }] }], backClicked: [{ type: i0.Output, args: ["backClicked"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var RtWorkspaceComponent = class RtWorkspaceComponent {
+	#storage;
+	#renderer;
+	#hostRef;
+	#destroyRef;
+	#listWidthOverride;
+	#asideWidthOverride;
+	#asideCollapsed;
+	#asideOpen;
+	#resizing;
+	#restoredKey;
+	#dragState;
+	#detachDragListeners;
+	constructor() {
+		this.#storage = inject(StorageService);
+		this.#renderer = inject(Renderer2);
+		this.#hostRef = inject(ElementRef);
+		this.#destroyRef = inject(DestroyRef);
+		this.#listWidthOverride = signal(null, ...ngDevMode ? [{ debugName: "#listWidthOverride" }] : /* istanbul ignore next */ []);
+		this.#asideWidthOverride = signal(null, ...ngDevMode ? [{ debugName: "#asideWidthOverride" }] : /* istanbul ignore next */ []);
+		this.#asideCollapsed = signal(false, ...ngDevMode ? [{ debugName: "#asideCollapsed" }] : /* istanbul ignore next */ []);
+		this.#asideOpen = signal(false, ...ngDevMode ? [{ debugName: "#asideOpen" }] : /* istanbul ignore next */ []);
+		this.#resizing = signal(false, ...ngDevMode ? [{ debugName: "#resizing" }] : /* istanbul ignore next */ []);
+		this.#restoredKey = null;
+		this.#dragState = null;
+		this.#detachDragListeners = null;
+		this.t = inject(RT_KIT_LABELS);
+		this.listSlot = contentChild(RtWorkspaceListDirective, ...ngDevMode ? [{ debugName: "listSlot" }] : /* istanbul ignore next */ []);
+		this.centerSlot = contentChild(RtWorkspaceCenterDirective, ...ngDevMode ? [{ debugName: "centerSlot" }] : /* istanbul ignore next */ []);
+		this.asideSlot = contentChild(RtWorkspaceAsideDirective, ...ngDevMode ? [{ debugName: "asideSlot" }] : /* istanbul ignore next */ []);
+		this.resizing = this.#resizing.asReadonly();
+		this.slotContext = { $implicit: this };
+		this.storageKey = input(null, ...ngDevMode ? [{ debugName: "storageKey" }] : /* istanbul ignore next */ []);
+		this.hasActive = input(false, {
+			...ngDevMode ? { debugName: "hasActive" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.listMinWidth = input(240, {
+			...ngDevMode ? { debugName: "listMinWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.listMaxWidth = input(480, {
+			...ngDevMode ? { debugName: "listMaxWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.listDefaultWidth = input(320, {
+			...ngDevMode ? { debugName: "listDefaultWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.asideMinWidth = input(280, {
+			...ngDevMode ? { debugName: "asideMinWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.asideMaxWidth = input(560, {
+			...ngDevMode ? { debugName: "asideMaxWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.asideDefaultWidth = input(360, {
+			...ngDevMode ? { debugName: "asideDefaultWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.centerMinWidth = input(360, {
+			...ngDevMode ? { debugName: "centerMinWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.backClicked = output();
+		this.listWidth = computed(() => this.#listWidthOverride() ?? this.listDefaultWidth(), ...ngDevMode ? [{ debugName: "listWidth" }] : /* istanbul ignore next */ []);
+		this.asideWidth = computed(() => this.#asideWidthOverride() ?? this.asideDefaultWidth(), ...ngDevMode ? [{ debugName: "asideWidth" }] : /* istanbul ignore next */ []);
+		this.asideCollapsed = this.#asideCollapsed.asReadonly();
+		this.asideOpen = this.#asideOpen.asReadonly();
+		effect(() => {
+			const key = this.storageKey();
+			if (key === null || key === this.#restoredKey) return;
+			this.#restoredKey = key;
+			untracked(() => this.#restoreFromStorage(key));
+		});
+		this.#destroyRef.onDestroy(() => this.#stopDragging());
+	}
+	toggleAsideCollapsed() {
+		this.#asideCollapsed.update((collapsed) => !collapsed);
+		this.#persist();
+	}
+	openAside() {
+		this.#asideOpen.set(true);
+	}
+	closeAside() {
+		this.#asideOpen.set(false);
+	}
+	toggleAside() {
+		this.#asideOpen.update((open) => !open);
+	}
+	onBackClicked() {
+		this.closeAside();
+		this.backClicked.emit();
+	}
+	onHandlePointerDown(event, kind) {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		this.#dragState = {
+			kind,
+			startX: event.clientX,
+			startWidth: kind === "list" ? this.listWidth() : this.asideWidth()
+		};
+		this.#resizing.set(true);
+		const detachMove = this.#renderer.listen("document", "pointermove", (moveEvent) => this.#onDragMove(moveEvent));
+		const detachUp = this.#renderer.listen("document", "pointerup", () => {
+			this.#persist();
+			this.#stopDragging();
+		});
+		this.#detachDragListeners = () => {
+			detachMove();
+			detachUp();
+		};
+	}
+	onHandleKeydown(event, kind) {
+		let delta;
+		if (event.key === "ArrowRight") delta = kind === "list" ? KEYBOARD_STEP : -16;
+		else if (event.key === "ArrowLeft") delta = kind === "list" ? -16 : KEYBOARD_STEP;
+		else return;
+		event.preventDefault();
+		const current = kind === "list" ? this.listWidth() : this.asideWidth();
+		this.#applyWidth(kind, current + delta);
+		this.#persist();
+	}
+	onHandleReset(kind) {
+		(kind === "list" ? this.#listWidthOverride : this.#asideWidthOverride).set(null);
+		this.#persist();
+	}
+	#onDragMove(event) {
+		const drag = this.#dragState;
+		if (drag === null) return;
+		const dx = event.clientX - drag.startX;
+		const rawWidth = drag.kind === "list" ? drag.startWidth + dx : drag.startWidth - dx;
+		this.#applyWidth(drag.kind, rawWidth);
+	}
+	#applyWidth(kind, rawWidth) {
+		(kind === "list" ? this.#listWidthOverride : this.#asideWidthOverride).set(this.#clampWidth(kind, rawWidth));
+	}
+	#clampWidth(kind, rawWidth) {
+		const min = kind === "list" ? this.listMinWidth() : this.asideMinWidth();
+		const configMax = kind === "list" ? this.listMaxWidth() : this.asideMaxWidth();
+		const otherWidth = this.#occupiedWidth(kind === "list" ? "aside" : "list");
+		const hostWidth = this.#hostRef.nativeElement.clientWidth;
+		const available = hostWidth > 0 ? hostWidth - otherWidth - this.centerMinWidth() : Number.POSITIVE_INFINITY;
+		return Math.round(Math.min(Math.max(min, Math.min(configMax, available)), Math.max(min, rawWidth)));
+	}
+	#occupiedWidth(kind) {
+		if (kind === "list") return this.listSlot() ? this.listWidth() : 0;
+		return this.asideSlot() ? this.asideWidth() : 0;
+	}
+	#stopDragging() {
+		this.#detachDragListeners?.();
+		this.#detachDragListeners = null;
+		this.#dragState = null;
+		this.#resizing.set(false);
+	}
+	#restoreFromStorage(key) {
+		const stored = this.#storage.getItem(`${STORAGE_PREFIX}${key}`) ?? null;
+		if (stored === null || typeof stored !== "object") return;
+		if (typeof stored.listWidth === "number") this.#listWidthOverride.set(this.#clampWidth("list", stored.listWidth));
+		if (typeof stored.asideWidth === "number") this.#asideWidthOverride.set(this.#clampWidth("aside", stored.asideWidth));
+		this.#asideCollapsed.set(stored.asideCollapsed === true);
+	}
+	#persist() {
+		const key = this.storageKey();
+		if (key === null) return;
+		const state = {
+			listWidth: this.listWidth(),
+			asideWidth: this.asideWidth(),
+			asideCollapsed: this.asideCollapsed()
+		};
+		this.#storage.setItem(`${STORAGE_PREFIX}${key}`, state);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtWorkspaceComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtWorkspaceComponent,
+			isStandalone: true,
+			selector: "rt-workspace",
+			inputs: {
+				storageKey: {
+					classPropertyName: "storageKey",
+					publicName: "storageKey",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hasActive: {
+					classPropertyName: "hasActive",
+					publicName: "hasActive",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				listMinWidth: {
+					classPropertyName: "listMinWidth",
+					publicName: "listMinWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				listMaxWidth: {
+					classPropertyName: "listMaxWidth",
+					publicName: "listMaxWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				listDefaultWidth: {
+					classPropertyName: "listDefaultWidth",
+					publicName: "listDefaultWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				asideMinWidth: {
+					classPropertyName: "asideMinWidth",
+					publicName: "asideMinWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				asideMaxWidth: {
+					classPropertyName: "asideMaxWidth",
+					publicName: "asideMaxWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				asideDefaultWidth: {
+					classPropertyName: "asideDefaultWidth",
+					publicName: "asideDefaultWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				centerMinWidth: {
+					classPropertyName: "centerMinWidth",
+					publicName: "centerMinWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { backClicked: "backClicked" },
+			host: {
+				properties: {
+					"class.rt-workspace--has-active": "hasActive()",
+					"class.rt-workspace--aside-collapsed": "asideCollapsed()",
+					"class.rt-workspace--resizing": "resizing()",
+					"style.--rt-workspace-list-size": "listWidth() + 'px'",
+					"style.--rt-workspace-aside-size": "asideWidth() + 'px'"
+				},
+				classAttribute: "rt-workspace"
+			},
+			queries: [
+				{
+					propertyName: "listSlot",
+					first: true,
+					predicate: RtWorkspaceListDirective,
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "centerSlot",
+					first: true,
+					predicate: RtWorkspaceCenterDirective,
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "asideSlot",
+					first: true,
+					predicate: RtWorkspaceAsideDirective,
+					descendants: true,
+					isSignal: true
+				}
+			],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-workspace\">\n    @if (listSlot()) {\n        <section rtElem=\"list\" qa-dataid=\"workspace-list\">\n            <ng-container [ngTemplateOutlet]=\"listSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-list\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeList\"\n            [rtMod]=\"{ list: true }\"\n            [attr.aria-valuenow]=\"listWidth()\"\n            [attr.aria-valuemin]=\"listMinWidth()\"\n            [attr.aria-valuemax]=\"listMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'list')\"\n            (dblclick)=\"onHandleReset('list')\"\n            (keydown)=\"onHandleKeydown($event, 'list')\"></div>\n    }\n\n    <section rtElem=\"center\" qa-dataid=\"workspace-center\">\n        @if (hasActive()) {\n            <div rtElem=\"mobile-toolbar\">\n                <rt-icon-button\n                    qa-dataid=\"workspace-back\"\n                    icon=\"arrow-left\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiBackToList\"\n                    [tooltip]=\"t().uiToList\"\n                    (clicked)=\"onBackClicked()\" />\n                <rt-icon-button\n                    qa-dataid=\"workspace-open-details\"\n                    icon=\"info-circle\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiShowDetails\"\n                    [tooltip]=\"t().uiDetails\"\n                    (clicked)=\"openAside()\" />\n            </div>\n        }\n        <ng-container [ngTemplateOutlet]=\"centerSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n    </section>\n\n    @if (asideSlot()) {\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-aside\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeDetails\"\n            [rtMod]=\"{ aside: true }\"\n            [attr.aria-valuenow]=\"asideWidth()\"\n            [attr.aria-valuemin]=\"asideMinWidth()\"\n            [attr.aria-valuemax]=\"asideMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'aside')\"\n            (dblclick)=\"onHandleReset('aside')\"\n            (keydown)=\"onHandleKeydown($event, 'aside')\"></div>\n\n        <section rtElem=\"aside\" qa-dataid=\"workspace-aside\" [rtMod]=\"{ open: asideOpen() }\">\n            <ng-container [ngTemplateOutlet]=\"asideSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n    }\n</ng-container>\n",
+			styles: ["@layer rt-kit.components{.rt-workspace{--rt-workspace-border-width: var(--rt-border-width-thin);--rt-workspace-handle-line-width: var(--rt-border-width-medium);--rt-workspace-handle-transition-duration: var(--rt-duration-fast);--rt-workspace-panel-transition-duration: var(--rt-duration-base);--rt-workspace-aside-shadow: var(--rt-shadow-md);position:relative;display:flex;flex-direction:row;block-size:calc(100dvh - var(--rt-header-height, 0px));min-block-size:0}.rt-workspace__list{display:flex;flex:0 0 var(--rt-workspace-list-size, 320px);flex-direction:column;border-inline-end:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__center{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;min-inline-size:0;padding-inline:var(--rt-space-4)}.rt-workspace__mobile-toolbar{display:none}.rt-workspace__aside{display:flex;flex:0 0 var(--rt-workspace-aside-size, 360px);flex-direction:column;border-inline-start:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__handle{position:relative;z-index:1;flex:0 0 auto;background:transparent;cursor:col-resize;inline-size:var(--rt-space-2);margin-inline:calc(-1 * var(--rt-space-1));touch-action:none}.rt-workspace__handle:before{position:absolute;background:transparent;content:\"\";inline-size:var(--rt-workspace-handle-line-width);inset-block:0;inset-inline-start:50%;transform:translate(-50%);transition:background var(--rt-workspace-handle-transition-duration) ease}.rt-workspace__handle:hover:before,.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-strong)}.rt-workspace__handle:focus-visible{outline:none}.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-focus)}@media(width<=1080px){.rt-workspace__desktop-only{display:none}}@media(width<=1080px){.rt-workspace__mobile-toolbar{display:flex;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4) 0}.rt-workspace__handle{display:none}.rt-workspace__aside{position:absolute;z-index:2;flex-basis:360px;background:var(--rt-color-bg-surface);box-shadow:var(--rt-workspace-aside-shadow);inset-block:0;inset-inline-end:0;max-inline-size:90%;transform:translate(100%);transition:transform var(--rt-workspace-panel-transition-duration) ease}.rt-workspace__aside--open{transform:translate(0)}}@media(width<=768px){.rt-workspace__list{flex-basis:100%}}@media(width>1080px){.rt-workspace__aside{overflow:hidden;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease;will-change:flex-basis}}@media(width<=768px){.rt-workspace--has-active .rt-workspace__list{display:none}.rt-workspace--has-active .rt-workspace__center{flex-basis:100%}}@media(width>1080px){.rt-workspace--aside-collapsed .rt-workspace__aside{flex-basis:0;border-inline-start-width:0;min-inline-size:0;opacity:0;pointer-events:none;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease,visibility 0s linear var(--rt-workspace-panel-transition-duration);visibility:hidden}.rt-workspace--aside-collapsed .rt-workspace__handle--aside{display:none}}.rt-workspace--resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.rt-workspace--resizing .rt-workspace__list,.rt-workspace--resizing .rt-workspace__aside{transition:none}@media(prefers-reduced-motion:reduce){.rt-workspace__aside{transition:none}}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconButtonComponent,
+					selector: "rt-icon-button",
+					inputs: [
+						"icon",
+						"glyph",
+						"ariaLabel",
+						"variant",
+						"iconColor",
+						"iconFill",
+						"size",
+						"iconSize",
+						"type",
+						"tooltip",
+						"tooltipHideOnClick",
+						"tabIndex",
+						"loading",
+						"disabled",
+						"active",
+						"expanded",
+						"indicator"
+					],
+					outputs: ["clicked"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtWorkspaceComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-workspace",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				RtIconButtonComponent,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-workspace--has-active]": "hasActive()",
+				"[class.rt-workspace--aside-collapsed]": "asideCollapsed()",
+				"[class.rt-workspace--resizing]": "resizing()",
+				"[style.--rt-workspace-list-size]": "listWidth() + 'px'",
+				"[style.--rt-workspace-aside-size]": "asideWidth() + 'px'"
+			},
+			template: "<ng-container rtBlock=\"rt-workspace\">\n    @if (listSlot()) {\n        <section rtElem=\"list\" qa-dataid=\"workspace-list\">\n            <ng-container [ngTemplateOutlet]=\"listSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-list\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeList\"\n            [rtMod]=\"{ list: true }\"\n            [attr.aria-valuenow]=\"listWidth()\"\n            [attr.aria-valuemin]=\"listMinWidth()\"\n            [attr.aria-valuemax]=\"listMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'list')\"\n            (dblclick)=\"onHandleReset('list')\"\n            (keydown)=\"onHandleKeydown($event, 'list')\"></div>\n    }\n\n    <section rtElem=\"center\" qa-dataid=\"workspace-center\">\n        @if (hasActive()) {\n            <div rtElem=\"mobile-toolbar\">\n                <rt-icon-button\n                    qa-dataid=\"workspace-back\"\n                    icon=\"arrow-left\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiBackToList\"\n                    [tooltip]=\"t().uiToList\"\n                    (clicked)=\"onBackClicked()\" />\n                <rt-icon-button\n                    qa-dataid=\"workspace-open-details\"\n                    icon=\"info-circle\"\n                    variant=\"secondary\"\n                    [ariaLabel]=\"t().uiShowDetails\"\n                    [tooltip]=\"t().uiDetails\"\n                    (clicked)=\"openAside()\" />\n            </div>\n        }\n        <ng-container [ngTemplateOutlet]=\"centerSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n    </section>\n\n    @if (asideSlot()) {\n        <div\n            rtElem=\"handle\"\n            qa-dataid=\"workspace-handle-aside\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"t().uiResizeDetails\"\n            [rtMod]=\"{ aside: true }\"\n            [attr.aria-valuenow]=\"asideWidth()\"\n            [attr.aria-valuemin]=\"asideMinWidth()\"\n            [attr.aria-valuemax]=\"asideMaxWidth()\"\n            (pointerdown)=\"onHandlePointerDown($event, 'aside')\"\n            (dblclick)=\"onHandleReset('aside')\"\n            (keydown)=\"onHandleKeydown($event, 'aside')\"></div>\n\n        <section rtElem=\"aside\" qa-dataid=\"workspace-aside\" [rtMod]=\"{ open: asideOpen() }\">\n            <ng-container [ngTemplateOutlet]=\"asideSlot()?.templateRef ?? null\" [ngTemplateOutletContext]=\"slotContext\" />\n        </section>\n    }\n</ng-container>\n",
+			styles: ["@layer rt-kit.components{.rt-workspace{--rt-workspace-border-width: var(--rt-border-width-thin);--rt-workspace-handle-line-width: var(--rt-border-width-medium);--rt-workspace-handle-transition-duration: var(--rt-duration-fast);--rt-workspace-panel-transition-duration: var(--rt-duration-base);--rt-workspace-aside-shadow: var(--rt-shadow-md);position:relative;display:flex;flex-direction:row;block-size:calc(100dvh - var(--rt-header-height, 0px));min-block-size:0}.rt-workspace__list{display:flex;flex:0 0 var(--rt-workspace-list-size, 320px);flex-direction:column;border-inline-end:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__center{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0;min-inline-size:0;padding-inline:var(--rt-space-4)}.rt-workspace__mobile-toolbar{display:none}.rt-workspace__aside{display:flex;flex:0 0 var(--rt-workspace-aside-size, 360px);flex-direction:column;border-inline-start:var(--rt-workspace-border-width) solid var(--rt-color-border-strong);min-inline-size:0}.rt-workspace__handle{position:relative;z-index:1;flex:0 0 auto;background:transparent;cursor:col-resize;inline-size:var(--rt-space-2);margin-inline:calc(-1 * var(--rt-space-1));touch-action:none}.rt-workspace__handle:before{position:absolute;background:transparent;content:\"\";inline-size:var(--rt-workspace-handle-line-width);inset-block:0;inset-inline-start:50%;transform:translate(-50%);transition:background var(--rt-workspace-handle-transition-duration) ease}.rt-workspace__handle:hover:before,.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-strong)}.rt-workspace__handle:focus-visible{outline:none}.rt-workspace__handle:focus-visible:before{background:var(--rt-color-border-focus)}@media(width<=1080px){.rt-workspace__desktop-only{display:none}}@media(width<=1080px){.rt-workspace__mobile-toolbar{display:flex;justify-content:space-between;padding:var(--rt-space-2) var(--rt-space-4) 0}.rt-workspace__handle{display:none}.rt-workspace__aside{position:absolute;z-index:2;flex-basis:360px;background:var(--rt-color-bg-surface);box-shadow:var(--rt-workspace-aside-shadow);inset-block:0;inset-inline-end:0;max-inline-size:90%;transform:translate(100%);transition:transform var(--rt-workspace-panel-transition-duration) ease}.rt-workspace__aside--open{transform:translate(0)}}@media(width<=768px){.rt-workspace__list{flex-basis:100%}}@media(width>1080px){.rt-workspace__aside{overflow:hidden;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease;will-change:flex-basis}}@media(width<=768px){.rt-workspace--has-active .rt-workspace__list{display:none}.rt-workspace--has-active .rt-workspace__center{flex-basis:100%}}@media(width>1080px){.rt-workspace--aside-collapsed .rt-workspace__aside{flex-basis:0;border-inline-start-width:0;min-inline-size:0;opacity:0;pointer-events:none;transition:flex-basis var(--rt-workspace-panel-transition-duration) ease,border-inline-start-width var(--rt-workspace-panel-transition-duration) ease,opacity var(--rt-workspace-panel-transition-duration) ease,visibility 0s linear var(--rt-workspace-panel-transition-duration);visibility:hidden}.rt-workspace--aside-collapsed .rt-workspace__handle--aside{display:none}}.rt-workspace--resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}.rt-workspace--resizing .rt-workspace__list,.rt-workspace--resizing .rt-workspace__aside{transition:none}@media(prefers-reduced-motion:reduce){.rt-workspace__aside{transition:none}}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		listSlot: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtWorkspaceListDirective), { isSignal: true }]
+		}],
+		centerSlot: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtWorkspaceCenterDirective), { isSignal: true }]
+		}],
+		asideSlot: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtWorkspaceAsideDirective), { isSignal: true }]
+		}],
+		storageKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "storageKey",
+				required: false
+			}]
+		}],
+		hasActive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hasActive",
+				required: false
+			}]
+		}],
+		listMinWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "listMinWidth",
+				required: false
+			}]
+		}],
+		listMaxWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "listMaxWidth",
+				required: false
+			}]
+		}],
+		listDefaultWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "listDefaultWidth",
+				required: false
+			}]
+		}],
+		asideMinWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "asideMinWidth",
+				required: false
+			}]
+		}],
+		asideMaxWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "asideMaxWidth",
+				required: false
+			}]
+		}],
+		asideDefaultWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "asideDefaultWidth",
+				required: false
+			}]
+		}],
+		centerMinWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "centerMinWidth",
+				required: false
+			}]
+		}],
+		backClicked: [{
+			type: i0.Output,
+			args: ["backClicked"]
+		}]
+	}
+});
 export { RtWorkspaceAsideDirective, RtWorkspaceCenterDirective, RtWorkspaceComponent, RtWorkspaceDesktopOnlyDirective, RtWorkspaceListDirective };
-//# sourceMappingURL=rt-tools-ui-kit-v2-workspace.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-workspace.mjs.map