@rt-tools/ui-kit 0.0.8 → 0.0.13

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

@@ -1,8 +1,6 @@
-import * as i0 from '@angular/core';
-import { Input, Attribute, Optional, Directive, Pipe, Injectable, inject, InjectionToken, HostBinding, ChangeDetectionStrategy, Component, contentChild, TemplateRef, input, booleanAttribute, output, viewChild, signal, computed, numberAttribute, Injector, ViewEncapsulation, model, DestroyRef, effect, HostListener, ElementRef, forwardRef, ChangeDetectorRef, untracked, ViewContainerRef, afterNextRender } from '@angular/core';
-import { PlatformService, WINDOW, checkIsMatchingValues, SanitizePipe, RtIconOutlinedDirective, RtHideTooltipDirective, transformArrayInput, RtScrollToElementDirective, RtNavigationDirective, isString, isNumber, areArraysEqual, EmptyToDashPipe, LIST_SORT_ORDER_ENUM, FILTER_OPERATOR_TYPE_ENUM, FILTER_OPERATORS, isDate, transformStringInput, BreakpointService, DeviceDetectorService, OSTypes, RtScrollDirective, BreakStringPipe, EntityToStringPipe, OVERLAY_POSITIONS, areArraysEqualUnordered, checkIsEntityInArrayByKey, sortByAlphabet, RtEscapeKeyDirective, POSITION_ENUM } from '@rt-tools/utils';
-import { Observable, ReplaySubject, share, Subject, merge, of, noop } from 'rxjs';
 import { NgStyle, NgClass, NgComponentOutlet, NgTemplateOutlet, AsyncPipe, TitleCasePipe, DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, HostBinding, ChangeDetectionStrategy, Component, Injectable, Directive, contentChild, TemplateRef, input, booleanAttribute, output, viewChild, signal, computed, numberAttribute, InjectionToken, Injector, ViewEncapsulation, model, DestroyRef, effect, HostListener, ElementRef, forwardRef, ChangeDetectorRef, untracked, ViewContainerRef, afterNextRender } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, Validators, ReactiveFormsModule, FormBuilder, FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import * as i5 from '@angular/material/button';
@@ -14,6 +12,9 @@ import * as i3 from '@angular/material/input';
 import { MatInputModule, MatInput, MatFormField as MatFormField$1, MatLabel } from '@angular/material/input';
 import * as i4 from '@angular/material/select';
 import { MatSelectModule, MatSelect } from '@angular/material/select';
+import { BlockDirective, ElemDirective, IDBStorageService, ModDirective } from '@rt-tools/core';
+import { checkIsMatchingValues, SanitizePipe, RtIconOutlinedDirective, RtHideTooltipDirective, transformArrayInput, RtScrollToElementDirective, RtNavigationDirective, isString, WINDOW, isNumber, areArraysEqual, EmptyToDashPipe, LIST_SORT_ORDER_ENUM, FILTER_OPERATOR_TYPE_ENUM, FILTER_OPERATORS, isDate, PlatformService, transformStringInput, BreakpointService, DeviceDetectorService, OSTypes, RtScrollDirective, BreakStringPipe, EntityToStringPipe, OVERLAY_POSITIONS, areArraysEqualUnordered, checkIsEntityInArrayByKey, sortByAlphabet, RtEscapeKeyDirective, POSITION_ENUM } from '@rt-tools/utils';
+import { ReplaySubject, share, Subject, merge, of, noop } from 'rxjs';
 import { filter, map, delay, tap, take, switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { MatListItem, MatNavList, MatListItemIcon, MatListItemTitle } from '@angular/material/list';
 import * as i1$2 from '@angular/material/sidenav';
@@ -27,7 +28,7 @@ import { Overlay, OverlayConfig, CdkOverlayOrigin, CdkConnectedOverlay } from '@
 import * as i1$4 from '@angular/cdk/portal';
 import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { Router, NavigationEnd, RouterLink } from '@angular/router';
-import { trigger, state, transition, style, animate, keyframes, AnimationBuilder } from '@angular/animations';
+import { trigger, state, style, transition, animate, keyframes, AnimationBuilder } from '@angular/animations';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { MatToolbar } from '@angular/material/toolbar';
@@ -46,631 +47,6 @@ import { computePosition, offset, flip, shift } from '@floating-ui/dom';
 import { MAT_SNACK_BAR_DATA, MatSnackBarRef, MatSnackBar } from '@angular/material/snack-bar';
 import { ImageCropperComponent } from 'ngx-image-cropper';
 
-const BEM_MODULE_CONFIG = {
-    separators: {
-        el: '__',
-        mod: '--',
-        val: '--',
-    },
-    ignoreValues: false,
-    modCase: 'kebab',
-};
-
-function modNameHandler(str) {
-    switch (BEM_MODULE_CONFIG.modCase) {
-        case 'kebab':
-            return str
-                ? str
-                    .replace(/[A-Z]/g, function (s) {
-                    return '-' + s.toLowerCase();
-                })
-                    .replace(/$-/, '')
-                : '';
-        case 'snake':
-            return str
-                ? str
-                    .replace(/[A-Z]/g, function (s) {
-                    return '_' + s.toLowerCase();
-                })
-                    .replace(/$-/, '')
-                : '';
-        default:
-            return str;
-    }
-}
-function generateClass(blockName, elemName, modName, modValue) {
-    if (BEM_MODULE_CONFIG.ignoreValues) {
-        modValue = !!modValue;
-    }
-    if (typeof modValue !== 'string' && typeof modValue !== 'boolean') {
-        modValue = !!modValue;
-    }
-    let cls = blockName;
-    if (elemName) {
-        cls += BEM_MODULE_CONFIG.separators.el + elemName;
-    }
-    if (modName) {
-        modName = modNameHandler(modName);
-        cls += BEM_MODULE_CONFIG.separators.mod + modName;
-        if (typeof modValue !== 'boolean' && modValue != null) {
-            cls += BEM_MODULE_CONFIG.separators.val + modValue;
-        }
-    }
-    return cls;
-}
-function parseMods(mods) {
-    if (typeof mods === 'string') {
-        mods = mods.split(/\s+/);
-    }
-    if (Array.isArray(mods)) {
-        const modsObj = {};
-        mods.forEach((key) => {
-            if (key) {
-                modsObj[key] = true;
-            }
-        });
-        mods = modsObj;
-    }
-    else if (typeof mods !== 'object') {
-        return {};
-    }
-    return mods;
-}
-function setMods(blockName, elemName, mods, oldMods, element, renderer) {
-    Object.keys(mods).forEach((key) => {
-        if (oldMods[key]) {
-            if (mods[key] === oldMods[key]) {
-                return;
-            }
-            renderer.removeClass(element.nativeElement, generateClass(blockName, elemName, key, oldMods[key]));
-        }
-        if (mods[key]) {
-            renderer.addClass(element.nativeElement, generateClass(blockName, elemName, key, mods[key]));
-        }
-    });
-    Object.keys(oldMods).forEach((key) => {
-        if (!(key in mods) && oldMods[key]) {
-            renderer.removeClass(element.nativeElement, generateClass(blockName, elemName, key, oldMods[key]));
-        }
-    });
-}
-
-class BlockDirective {
-    #mods = {};
-    #modSerialized = '';
-    constructor(element, renderer, name, elem) {
-        this.element = element;
-        this.renderer = renderer;
-        this.name = name;
-        this.elem = elem;
-        if (!elem && !(element.nativeElement instanceof Comment)) {
-            renderer.addClass(element.nativeElement, generateClass(name));
-        }
-    }
-    ngOnChanges() {
-        if (JSON.stringify(this.rtMod) !== this.#modSerialized && !this.elem) {
-            this.#modSerialized = JSON.stringify(this.rtMod);
-            let mods = this.rtMod;
-            const { renderer, element, name } = this;
-            mods = parseMods(mods);
-            if (!(element.nativeElement instanceof Comment)) {
-                setMods(name, '', mods, this.#mods || {}, element, renderer);
-            }
-            this.#mods = this.#mods === mods ? Object.assign({}, mods) : mods;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BlockDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: 'rtBlock', attribute: true }, { token: 'rtElem', attribute: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: BlockDirective, isStandalone: true, selector: "[rtBlock]", inputs: { rtMod: "rtMod" }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BlockDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtBlock]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['rtBlock']
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Attribute,
-                    args: ['rtElem']
-                }] }], propDecorators: { rtMod: [{
-                type: Input
-            }] } });
-
-class ConcatClassesPipe {
-    transform(classes) {
-        // eslint-disable-next-line
-        const validClassList = classes.flat().filter((className) => typeof className === 'string' && !!className.trim());
-        return validClassList.join(' ');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ConcatClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: ConcatClassesPipe, isStandalone: true, name: "concatClasses" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ConcatClassesPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'concatClasses',
-                }]
-        }] });
-
-class ElemDirective {
-    #mods = {};
-    #modSerialized = '';
-    constructor(element, renderer, name, rtBlock) {
-        this.element = element;
-        this.renderer = renderer;
-        this.name = name;
-        this.rtBlock = rtBlock;
-        this.blockName = rtBlock.name;
-        renderer.addClass(element.nativeElement, generateClass(rtBlock.name, name));
-    }
-    ngOnChanges() {
-        if (JSON.stringify(this.rtMod) !== this.#modSerialized) {
-            this.#modSerialized = JSON.stringify(this.rtMod);
-            let mods = this.rtMod;
-            const { renderer, element, blockName, name } = this;
-            mods = parseMods(mods);
-            setMods(blockName, name, mods, this.#mods || {}, element, renderer);
-            this.#mods = this.#mods === mods ? Object.assign({}, mods) : mods;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ElemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: 'rtElem', attribute: true }, { token: BlockDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: ElemDirective, isStandalone: true, selector: "[rtElem]", inputs: { rtMod: "rtMod" }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ElemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtElem]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['rtElem']
-                }] }, { type: BlockDirective }], propDecorators: { rtMod: [{
-                type: Input
-            }] } });
-
-class ModDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: ModDirective, isStandalone: true, selector: "[rtMod]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtMod]',
-                }]
-        }] });
-
-var STORAGE_TYPES_ENUM;
-(function (STORAGE_TYPES_ENUM) {
-    STORAGE_TYPES_ENUM["LOCAL"] = "local";
-    STORAGE_TYPES_ENUM["SESSION"] = "session";
-    STORAGE_TYPES_ENUM["IN_MEMORY"] = "inMemory";
-    STORAGE_TYPES_ENUM["CUSTOM"] = "custom";
-})(STORAGE_TYPES_ENUM || (STORAGE_TYPES_ENUM = {}));
-
-/**
- * A service that implements the `Storage` interface using an in-memory map.
- * This service provides a fallback storage solution when `localStorage`
- * or `sessionStorage` is not available, such as in server-side rendering (SSR) scenarios.
- *
- * @Injectable
- */
-class InMemoryStorageService {
-    /**
-     * Private in-memory storage map used to store key-value pairs.
-     * The keys are strings, the values are strings.
-     * The map is private and cannot be accessed directly.
-     * Instead, the public methods of the service should be used to interact with the storage.
-     * The map is initialized as an empty map.
-     *
-     * @type {Map<string, string>}
-     * @private
-     * @internal
-     * @readonly
-     */
-    #storage = new Map();
-    /**
-     * Returns the number of key-value pairs currently stored.
-     *
-     * @returns the number of items in storage
-     * @public
-     */
-    get length() {
-        return this.#storage.size;
-    }
-    /**
-     * Retrieves the value associated with the given key.
-     *
-     * @param key - The name of the key to retrieve the value for
-     * @returns the value associated with the key, or `null` if the key does not exist
-     * @public
-     * @returns string | null
-     */
-    getItem(key) {
-        return this.#storage.get(key) || null;
-    }
-    /**
-     * Adds or updates the key-value pair in the storage.
-     *
-     * @param key - The name of the key to create or update
-     * @param data - The value to associate with the key
-     * @public
-     * @returns void
-     */
-    setItem(key, data) {
-        this.#storage.set(key, data);
-    }
-    /**
-     * Retrieves the key at the specified index.
-     *
-     * @param index - The index of the key to retrieve
-     * @returns the key at the specified index, or `null` if the index is out of bounds
-     * @public
-     * @returns string | null
-     */
-    key(index) {
-        return Array.from(this.#storage.keys())[index] || null;
-    }
-    /**
-     * Removes the key-value pair associated with the given key.
-     *
-     * @param key - The name of the key to remove
-     * @public
-     * @returns void
-     */
-    removeItem(key) {
-        this.#storage.delete(key);
-    }
-    /**
-     * Clears all key-value pairs from the storage.
-     *
-     * @public
-     * @returns void
-     */
-    clear() {
-        this.#storage.clear();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InMemoryStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InMemoryStorageService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InMemoryStorageService, decorators: [{
-            type: Injectable
-        }] });
-
-class JsonConverter {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    convertTo(data) {
-        let parsedData;
-        try {
-            parsedData = JSON.stringify(data);
-        }
-        catch (e) {
-            // eslint-disable-next-line no-console
-            console.error(e);
-            parsedData = 'null';
-        }
-        return parsedData;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    convertFrom(data) {
-        if (typeof data === 'string') {
-            try {
-                return JSON.parse(data);
-            }
-            catch (e) {
-                // eslint-disable-next-line no-console
-                console.error(e);
-                return null;
-            }
-        }
-        return null;
-    }
-}
-
-/**
- * Factory for creating or returning `localStorage`.
- * Returns `localStorage` global object if the application is running in a browser,
- * otherwise returns null.
- *
- * @returns localStorage or null
- */
-function localStorageFactory() {
-    return inject(PlatformService).isPlatformBrowser ? localStorage : null;
-}
-/**
- * Factory for creating or returning `sessionStorage`.
- * Returns `sessionStorage` global object if the application is running in a browser,
- * otherwise returns null.
- *
- * @returns sessionStorage or null
- */
-function sessionStorageFactory() {
-    return inject(PlatformService).isPlatformBrowser ? sessionStorage : null;
-}
-/**
- * Factory for creating `InMemoryStorageService`.
- * Returns a new instance of InMemoryStorageService.
- *
- * @returns a new instance of InMemoryStorageService
- */
-function inMemoryStorageFactory() {
-    return new InMemoryStorageService();
-}
-
-const CUSTOM_STORAGE = new InjectionToken('CUSTOM_STORAGE');
-
-const IN_MEMORY_STORAGE = new InjectionToken('IN_MEMORY_STORAGE');
-
-const LOCAL_STORAGE = new InjectionToken('LOCAL_STORAGE');
-
-const SESSION_STORAGE = new InjectionToken('SESSION_STORAGE');
-
-const defaultStorageConfig = {
-    ctx: STORAGE_TYPES_ENUM.LOCAL,
-    storageRef: null,
-    converter: new JsonConverter(),
-};
-/**
- * A service for managing data storage across different storage types,
- * including `localStorage`, `sessionStorage`, and an in-memory storage fallback.
- * The service supports custom storage types and data conversion through configurable converters.
- *
- * @Injectable
- */
-class StorageService {
-    #platformService = inject(PlatformService);
-    #localStorageRef = inject(LOCAL_STORAGE);
-    #sessionStorageRef = inject(SESSION_STORAGE);
-    #inMemoryStorageRef = inject(IN_MEMORY_STORAGE);
-    #customStorageRef = inject(CUSTOM_STORAGE, { optional: true });
-    /**
-     * Retrieves an item from the specified storage context.
-     *
-     * @param key - The key of the item to retrieve.
-     * @param config - Optional configuration for the storage context and data conversion.
-     * @returns The retrieved item, converted from storage if a converter is provided, or `null` if the item does not exist.
-     */
-    getItem(key, config) {
-        const fullConfig = { ...defaultStorageConfig, ...config };
-        const item = this.#storage(fullConfig.ctx)?.getItem(key);
-        return fullConfig.converter?.convertFrom(item) ?? item ?? null;
-    }
-    /**
-     * Stores an item in the specified storage context.
-     *
-     * @param key - The key to associate with the stored item.
-     * @param data - The data to store, which will be converted if a converter is provided.
-     * @param config - Optional configuration for the storage context and data conversion.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    setItem(key, data, config) {
-        const fullConfig = { ...defaultStorageConfig, ...config };
-        const parsedValue = fullConfig.converter?.convertTo(data) ?? data;
-        this.#storage(fullConfig.ctx)?.setItem(key, parsedValue);
-    }
-    /**
-     * Checks if a given key exists in the specified storage context.
-     *
-     * @param key - The key to check for.
-     * @param ctx - The storage context to search in (local, session, or in-memory).
-     * @returns `true` if the key exists, `false` otherwise.
-     */
-    hasKey(key, ctx = defaultStorageConfig.ctx) {
-        return Object.prototype.hasOwnProperty.call(this.#storage(ctx), key);
-    }
-    /**
-     * Executes callback functions based on whether a key exists in the specified storage context.
-     *
-     * @param key - The key to check for.
-     * @param onHas - The callback to execute if the key exists.
-     * @param onHasNot - The optional callback to execute if the key does not exist.
-     * @param config - Optional configuration for the storage context and data conversion.
-     */
-    onHasKey(key, onHas, onHasNot, config) {
-        const fullConfig = { ...defaultStorageConfig, ...config };
-        if (this.hasKey(key, fullConfig.ctx)) {
-            onHas(this.getItem(key, fullConfig));
-        }
-        else if (onHasNot !== void 0) {
-            onHasNot();
-        }
-    }
-    /**
-     * Removes an item from the specified storage context.
-     *
-     * @param key - The key of the item to remove.
-     * @param ctx - The storage context from which to remove the item.
-     */
-    removeItem(key, ctx = defaultStorageConfig.ctx) {
-        this.#storage(ctx)?.removeItem(key);
-    }
-    /**
-     * Clears all items from the specified storage context.
-     *
-     * @param ctx - The storage context to clear.
-     */
-    clear(ctx = defaultStorageConfig.ctx) {
-        this.#storage(ctx)?.clear();
-    }
-    /**
-     * Returns the appropriate storage reference based on the storage context and platform.
-     *
-     * @param ctx - The storage context to use (local, session, custom, or in-memory).
-     * @returns The corresponding `Storage` object, or `null` if not available.
-     */
-    #storage(ctx) {
-        if (this.#platformService.isPlatformBrowser) {
-            switch (ctx) {
-                case 'local':
-                    return this.#localStorageRef;
-                case 'session':
-                    return this.#sessionStorageRef;
-                case 'custom':
-                    return this.#customStorageRef;
-            }
-        }
-        /**
-         * Fallback to in-memory storage when the platform is not a browser (e.g., SSR).
-         */
-        return this.#inMemoryStorageRef;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: StorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: StorageService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: StorageService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * Returns the set of dependency-injection providers
- * required to setup storages in an application.
- *
- * @usageNotes
- *
- * This function sets up the essential storage services needed for
- * working with `localStorage`, `sessionStorage`, and an in-memory storage solution.
- * It includes providers for each type of storage, ensuring that the appropriate
- * storage service is injected based on the platform or specific use case.
- *
- * The function is particularly useful in scenarios where the application may be
- * running on the server-side (SSR). In such cases, instead of using `localStorage`
- * and `sessionStorage`, which are only available in the browser, the `InMemoryStorageService`
- * can be used as a fallback, ensuring that the application still functions correctly.
- *
- * ```typescript
- * bootstrapApplication(RootComponent, {
- *   providers: [
- *     provideRtStorage()
- *   ]
- * });
- * ```
- *
- * @publicApi
- */
-function provideRtStorage() {
-    return [
-        InMemoryStorageService,
-        {
-            provide: LOCAL_STORAGE,
-            useFactory: localStorageFactory,
-        },
-        {
-            provide: SESSION_STORAGE,
-            useFactory: sessionStorageFactory,
-        },
-        {
-            provide: IN_MEMORY_STORAGE,
-            useFactory: inMemoryStorageFactory,
-        },
-        StorageService,
-    ];
-}
-
-class IDBStorageService {
-    #windowRef = inject(WINDOW);
-    #context;
-    constructor() {
-        this.#context = new Observable((observer) => {
-            if ('indexedDB' in this.#windowRef && 'open' in this.#windowRef.indexedDB) {
-                const openRequest = this.#windowRef.indexedDB.open('use-idb', 1);
-                openRequest.onerror = () => observer.error(openRequest.error);
-                openRequest.onsuccess = () => observer.next(openRequest.result);
-                openRequest.onupgradeneeded = () => openRequest.result.createObjectStore('idb');
-            }
-            else {
-                observer.error('IndexedDB not supported');
-            }
-        });
-    }
-    get(key) {
-        return new Observable((observer) => {
-            this.#context.subscribe((db) => {
-                const transaction = db.transaction('idb', 'readonly');
-                const store = transaction.objectStore('idb');
-                const request = store.get(key);
-                request.onsuccess = () => observer.next(request.result);
-                request.onerror = () => observer.error(request.error);
-            });
-        });
-    }
-    set(key, value) {
-        return new Observable((observer) => {
-            this.#context.subscribe((db) => {
-                const transaction = db.transaction('idb', 'readwrite');
-                const store = transaction.objectStore('idb');
-                const request = store.put(value, key);
-                request.onsuccess = () => observer.next();
-                request.onerror = () => observer.error(request.error);
-            });
-        });
-    }
-    remove(key) {
-        return new Observable((observer) => {
-            this.#context.subscribe((db) => {
-                const transaction = db.transaction('idb', 'readwrite');
-                const store = transaction.objectStore('idb');
-                const request = store.delete(key);
-                request.onsuccess = () => observer.next();
-                request.onerror = () => observer.error(request.error);
-            });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: IDBStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: IDBStorageService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: IDBStorageService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-/**
- * Factory for creating `IDBStorageService`.
- * Returns a new instance of IDBStorageService.
- *
- * @returns a new instance of IDBStorageService
- */
-function iDBStorageFactory() {
-    return new IDBStorageService();
-}
-
-/**
- * Injection token for IDBStorageService.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const IDB_STORAGE_SERVICE_TOKEN = new InjectionToken('IDB_STORAGE_SERVICE_TOKEN');
-
-/**
- * Returns the set of dependency-injection providers
- * required to set up storages in an application.
- *
- * @usageNotes
- *
- * This function sets up the essential storage services needed for
- * working with `idb storage` solution.
- * It includes providers for each type of storage, ensuring that the appropriate
- * storage service is injected based on the platform or specific use case.
- *
- * ```typescript
- * bootstrapApplication(RootComponent, {
- *   providers: [
- *     provideRtIDBStorage()
- *   ]
- * });
- * ```
- *
- * @publicApi
- */
-function provideRtIDBStorage() {
-    return [
-        {
-            provide: IDB_STORAGE_SERVICE_TOKEN,
-            useFactory: iDBStorageFactory,
-        },
-        IDBStorageService,
-    ];
-}
-
 class RtuiModalComponent {
     constructor() {
         this.data = inject(MAT_DIALOG_DATA);
@@ -3450,6 +2826,8 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
         this.searchTerm = input('', { ...(ngDevMode ? { debugName: "searchTerm" } : {}) });
         /** Indicates that an additional control has been changed */
         this.additionalControlChanged = input(false, { ...(ngDevMode ? { debugName: "additionalControlChanged" } : {}) });
+        /** Custom sort function for entities list in popup */
+        this.sortFn = input(null, { ...(ngDevMode ? { debugName: "sortFn" } : {}) });
         /** Output search action */
         this.searchAction = output();
         /** Output scroll action, needed for lazy loading */
@@ -3496,7 +2874,7 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
                     entity[this.displayExp()]?.toString().toLowerCase().includes(this.#autocompleteControlValue().toLowerCase()));
             })
                 .sort((a, b) => {
-                return sortByAlphabet(a, b, this.displayExp());
+                return this.sortFn() ? this.sortFn()(a, b) : sortByAlphabet(a, b, this.displayExp());
             });
         }, { ...(ngDevMode ? { debugName: "entitiesToSelect" } : {}) });
         /** Additional control for entity */
@@ -3685,7 +3063,7 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiDynamicSelectorComponent, isStandalone: true, selector: "rtui-dynamic-selector", inputs: { keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, chosenEntities: { classPropertyName: "chosenEntities", publicName: "chosenEntities", isSignal: true, isRequired: false, transformFunction: null }, isSelectionAvailable: { classPropertyName: "isSelectionAvailable", publicName: "isSelectionAvailable", isSignal: true, isRequired: false, transformFunction: null }, isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, isLazyLoad: { classPropertyName: "isLazyLoad", publicName: "isLazyLoad", isSignal: true, isRequired: false, transformFunction: null }, isLocalSearch: { classPropertyName: "isLocalSearch", publicName: "isLocalSearch", isSignal: true, isRequired: false, transformFunction: null }, isMultiToggleShown: { classPropertyName: "isMultiToggleShown", publicName: "isMultiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllButtonShown: { classPropertyName: "isSelectAllButtonShown", publicName: "isSelectAllButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isOpenPopupButtonShown: { classPropertyName: "isOpenPopupButtonShown", publicName: "isOpenPopupButtonShown", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, additionalControlChanged: { classPropertyName: "additionalControlChanged", publicName: "additionalControlChanged", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chosenEntities: "chosenEntitiesChange", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction", resetAction: "resetAction", selectionChangeAction: "selectionChangeAction" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiDynamicSelectorComponent, isStandalone: true, selector: "rtui-dynamic-selector", inputs: { keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, readonlyEntitiesKeys: { classPropertyName: "readonlyEntitiesKeys", publicName: "readonlyEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null }, chosenEntities: { classPropertyName: "chosenEntities", publicName: "chosenEntities", isSignal: true, isRequired: false, transformFunction: null }, isSelectionAvailable: { classPropertyName: "isSelectionAvailable", publicName: "isSelectionAvailable", isSignal: true, isRequired: false, transformFunction: null }, isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, isLazyLoad: { classPropertyName: "isLazyLoad", publicName: "isLazyLoad", isSignal: true, isRequired: false, transformFunction: null }, isLocalSearch: { classPropertyName: "isLocalSearch", publicName: "isLocalSearch", isSignal: true, isRequired: false, transformFunction: null }, isMultiToggleShown: { classPropertyName: "isMultiToggleShown", publicName: "isMultiToggleShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllButtonShown: { classPropertyName: "isSelectAllButtonShown", publicName: "isSelectAllButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isOpenPopupButtonShown: { classPropertyName: "isOpenPopupButtonShown", publicName: "isOpenPopupButtonShown", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, additionalControlChanged: { classPropertyName: "additionalControlChanged", publicName: "additionalControlChanged", isSignal: true, isRequired: false, transformFunction: null }, sortFn: { classPropertyName: "sortFn", publicName: "sortFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chosenEntities: "chosenEntitiesChange", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction", resetAction: "resetAction", selectionChangeAction: "selectionChangeAction" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RtuiDynamicSelectorComponent),
@@ -3731,7 +3109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                             multi: true,
                         },
                     ], template: "<form [formGroup]=\"form\">\n    <ng-container rtBlock=\"rtui-dynamic-selector\">\n        @if (isNoDataPlaceholderShown()) {\n            <rtui-dynamic-selector-placeholder\n                description=\"There are no available items to choose\"\n                icon=\"warning\"\n                [isButtonShow]=\"false\"\n                [isIconOutlined]=\"true\" />\n        } @else {\n            <rtui-dynamic-selector-selected-list\n                [isMobile]=\"isMobile()\"\n                [keyExp]=\"keyExp()\"\n                [displayExp]=\"displayExp()\"\n                [selectedEntities]=\"selectedEntities()\"\n                [readonlyEntitiesKeys]=\"readonlyEntitiesKeys()\"\n                [isListDraggable]=\"isListDraggable()\"\n                [useNameBreaking]=\"useNameBreaking()\"\n                [useTitleCase]=\"useTitleCase()\"\n                [isDeleteButtonShown]=\"isDeleteButtonShown()\"\n                (dropAction)=\"onDrop($event)\"\n                (deleteFromSelectedAction)=\"toggleEntity($event)\">\n                @if (additionalControlTpl()) {\n                    <ng-container *rtuiDynamicSelectorItemAdditionalControlDirective=\"let entity\">\n                        <ng-template *ngTemplateOutlet=\"additionalControlTpl() || null; context: { $implicit: entity }\" />\n                    </ng-container>\n                }\n            </rtui-dynamic-selector-selected-list>\n\n            @if ((entitiesToSelect()?.length || !isLocalSearch()) && isSelectionAvailable()) {\n                @if (isPlaceholderShown()) {\n                    <rtui-dynamic-selector-placeholder\n                        [icon]=\"placeholderIcon()\"\n                        [description]=\"placeholderDescription()\"\n                        [buttonTitle]=\"buttonTitle()\"\n                        [disabled]=\"disabled()\"\n                        [isIconOutlined]=\"isPlaceholderIconOutlined()\"\n                        (submitAction)=\"showSelectionControl($event)\" />\n                } @else {\n                    <div rtElem=\"actions\">\n                        @if (isOpenPopupButtonShown() && this.entitiesToSelect()?.length) {\n                            <button\n                                #trigger=\"cdkOverlayOrigin\"\n                                cdkOverlayOrigin\n                                type=\"button\"\n                                class=\"c-button c-button--txt-base--size-sm\"\n                                [class.--disabled]=\"disabled()\"\n                                [disabled]=\"disabled()\"\n                                (click)=\"showSelectionControl(trigger)\">\n                                {{ buttonTitle() }}\n                            </button>\n                        }\n\n                        <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                    </div>\n                }\n\n                @if (selectedOverlayTrigger) {\n                    <ng-template\n                        rtEscapeKey\n                        cdkConnectedOverlay\n                        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n                        [cdkConnectedOverlayHasBackdrop]=\"true\"\n                        [cdkConnectedOverlayOpen]=\"isSelectionControlShown()\"\n                        [cdkConnectedOverlayDisableClose]=\"true\"\n                        [cdkConnectedOverlayOrigin]=\"selectedOverlayTrigger\"\n                        [cdkConnectedOverlayPositions]=\"connectedOverlayPositions\"\n                        (backdropClick)=\"hideSelectionControl()\"\n                        (escapeKeyAction)=\"hideSelectionControl()\">\n                        <rtui-multi-selector-popup\n                            [navigateButtonTitle]=\"navigateButtonTitle()\"\n                            [navigateLink]=\"navigateLink()\"\n                            [entitiesToSelect]=\"entitiesToSelect()\"\n                            [appearance]=\"appearance()\"\n                            [keyExp]=\"keyExp()\"\n                            [displayExp]=\"displayExp()\"\n                            [isMobile]=\"isMobile()\"\n                            [isSingleSelection]=\"isSingleSelection()\"\n                            [isSelectAllButtonShown]=\"isSelectAllButtonShown()\"\n                            [loading]=\"loading()\"\n                            [fetching]=\"fetching()\"\n                            [useNameBreaking]=\"useNameBreaking()\"\n                            [searchTerm]=\"searchTerm()\"\n                            [isLazyLoad]=\"isLazyLoad()\"\n                            [isLocalSearch]=\"isLocalSearch()\"\n                            [isMultiToggleShown]=\"isMultiToggleShown()\"\n                            (searchAction)=\"search($event)\"\n                            (scrollAction)=\"scroll()\"\n                            (temporarySelectAction)=\"setTemporarySelection($event)\"\n                            (closeAction)=\"hideSelectionControl()\"\n                            (submitAction)=\"select($event)\" />\n                    </ng-template>\n                }\n            } @else if (isSelectionAvailable()) {\n                <div rtElem=\"actions\">\n                    <ng-template [ngTemplateOutlet]=\"listActionsTpl\" />\n                </div>\n            }\n        }\n    </ng-container>\n</form>\n\n<ng-template #listActionsTpl>\n    <rtui-dynamic-selector-list-actions\n        [isMobile]=\"isMobile()\"\n        [disabled]=\"disabled()\"\n        [isResetButtonDisabled]=\"isResetButtonDisabled()\"\n        [isClearButtonDisabled]=\"isClearButtonDisabled()\"\n        (resetAction)=\"resetList()\"\n        (clearAction)=\"clearList()\" />\n</ng-template>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden}\n"] }]
-        }], propDecorators: { keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], navigateButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateButtonTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], readonlyEntitiesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyEntitiesKeys", required: false }] }], chosenEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "chosenEntities", required: false }] }, { type: i0.Output, args: ["chosenEntitiesChange"] }], isSelectionAvailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectionAvailable", required: false }] }], isPlaceholderShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderShown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], isLazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLazyLoad", required: false }] }], isLocalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocalSearch", required: false }] }], isMultiToggleShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiToggleShown", required: false }] }], isSelectAllButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectAllButtonShown", required: false }] }], isOpenPopupButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpenPopupButtonShown", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], additionalControlChanged: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalControlChanged", required: false }] }], searchAction: [{ type: i0.Output, args: ["searchAction"] }], scrollAction: [{ type: i0.Output, args: ["scrollAction"] }], temporarySelectAction: [{ type: i0.Output, args: ["temporarySelectAction"] }], resetAction: [{ type: i0.Output, args: ["resetAction"] }], selectionChangeAction: [{ type: i0.Output, args: ["selectionChangeAction"] }], additionalControlTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicSelectorAdditionalControlDirective), { ...{
+        }], propDecorators: { keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], navigateButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateButtonTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], readonlyEntitiesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyEntitiesKeys", required: false }] }], chosenEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "chosenEntities", required: false }] }, { type: i0.Output, args: ["chosenEntitiesChange"] }], isSelectionAvailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectionAvailable", required: false }] }], isPlaceholderShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderShown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], isLazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLazyLoad", required: false }] }], isLocalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocalSearch", required: false }] }], isMultiToggleShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiToggleShown", required: false }] }], isSelectAllButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectAllButtonShown", required: false }] }], isOpenPopupButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpenPopupButtonShown", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], additionalControlChanged: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalControlChanged", required: false }] }], sortFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFn", required: false }] }], searchAction: [{ type: i0.Output, args: ["searchAction"] }], scrollAction: [{ type: i0.Output, args: ["scrollAction"] }], temporarySelectAction: [{ type: i0.Output, args: ["temporarySelectAction"] }], resetAction: [{ type: i0.Output, args: ["resetAction"] }], selectionChangeAction: [{ type: i0.Output, args: ["selectionChangeAction"] }], additionalControlTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiDynamicSelectorAdditionalControlDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }] } });
 
@@ -4011,7 +3389,7 @@ class RtTableConfigAsideComponent {
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtuiAsideContainerHeaderDirective, selector: "[rtuiAsideHeader]" }, { kind: "directive", type: RtuiDynamicSelectorAdditionalControlDirective, selector: "[rtuiDynamicSelectorAdditionalControlDirective]" }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "component", type: 
                 // standalone components
-                RtuiAsideContainerComponent, selector: "rtui-aside-container", inputs: ["title", "isMobile", "isSubmitButtonDisabled", "isFooterShown", "pending", "isRequestErrorShown", "headerActionsButtons", "requestError", "submitButtonTitle", "cancelButtonTitle", "submitButtonTooltip"], outputs: ["submitAction", "cancelAction", "headerAction"] }, { kind: "component", type: RtuiDynamicSelectorComponent, selector: "rtui-dynamic-selector", inputs: ["keyExp", "displayExp", "entities", "navigateButtonTitle", "navigateLink", "readonlyEntitiesKeys", "chosenEntities", "isSelectionAvailable", "isPlaceholderShown", "loading", "pending", "fetching", "isLazyLoad", "isLocalSearch", "isMultiToggleShown", "isSelectAllButtonShown", "isOpenPopupButtonShown", "searchTerm", "additionalControlChanged"], outputs: ["chosenEntitiesChange", "searchAction", "scrollAction", "temporarySelectAction", "resetAction", "selectionChangeAction"] }, { kind: "component", type: RtuiToggleComponent, selector: "rtui-toggle", inputs: ["label", "tooltip", "size", "tooltipPosition", "isDisabled", "tooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtuiAsideContainerComponent, selector: "rtui-aside-container", inputs: ["title", "isMobile", "isSubmitButtonDisabled", "isFooterShown", "pending", "isRequestErrorShown", "headerActionsButtons", "requestError", "submitButtonTitle", "cancelButtonTitle", "submitButtonTooltip"], outputs: ["submitAction", "cancelAction", "headerAction"] }, { kind: "component", type: RtuiDynamicSelectorComponent, selector: "rtui-dynamic-selector", inputs: ["keyExp", "displayExp", "entities", "navigateButtonTitle", "navigateLink", "readonlyEntitiesKeys", "chosenEntities", "isSelectionAvailable", "isPlaceholderShown", "loading", "pending", "fetching", "isLazyLoad", "isLocalSearch", "isMultiToggleShown", "isSelectAllButtonShown", "isOpenPopupButtonShown", "searchTerm", "additionalControlChanged", "sortFn"], outputs: ["chosenEntitiesChange", "searchAction", "scrollAction", "temporarySelectAction", "resetAction", "selectionChangeAction"] }, { kind: "component", type: RtuiToggleComponent, selector: "rtui-toggle", inputs: ["label", "tooltip", "size", "tooltipPosition", "isDisabled", "tooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtTableConfigAsideComponent, decorators: [{
             type: Component,
@@ -5137,11 +4515,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 /**
  * Public API Surface of rt-tools
  */
-// tools
+// ui-kit
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, BUTTON_APPEARANCE, BUTTON_COLOR, BUTTON_SIZE, BlockDirective, CUSTOM_STORAGE, ConcatClassesPipe, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, ElemDirective, IDBStorageService, IDB_STORAGE_SERVICE_TOKEN, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, IN_MEMORY_STORAGE, InMemoryStorageService, JsonConverter, LOCAL_STORAGE, MODAL_WINDOW_SIZE_ENUM, ModDirective, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiRoundIconButtonComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, SESSION_STORAGE, STORAGE_TYPES_ENUM, StorageService, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, iDBStorageFactory, inMemoryStorageFactory, localStorageFactory, progressDecreaseAnimation, progressIncreaseAnimation, provideRtIDBStorage, provideRtStorage, provideRtUi, sessionStorageFactory };
+export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, BUTTON_APPEARANCE, BUTTON_COLOR, BUTTON_SIZE, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, MODAL_WINDOW_SIZE_ENUM, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiRoundIconButtonComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, progressDecreaseAnimation, progressIncreaseAnimation, provideRtUi };
 //# sourceMappingURL=rt-tools-ui-kit.mjs.map