npm - @rt-tools/ui-kit - Versions diffs - 0.0.22 → 0.0.24 - Mend

@rt-tools/ui-kit 0.0.22 → 0.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/fesm2022/rt-tools-ui-kit.mjs +92 -22
package/fesm2022/rt-tools-ui-kit.mjs.map +1 -1
package/package.json +1 -1
package/rt-tools-ui-kit-0.0.24.tgz +0 -0
package/src/lib/ui-kit/buttons/unified-button/rtui-button.component.scss +68 -0
package/types/rt-tools-ui-kit.d.ts +124 -49
package/rt-tools-ui-kit-0.0.22.tgz +0 -0

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

@@ -767,6 +767,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                             read: TemplateRef,
                         }, isSignal: true }] }] } });
+/**
+ * Application-wide UI configuration for rt-tools components.
+ *
+ * Resolution order (most specific wins):
+ * 1. the component input on a concrete instance,
+ * 2. `components.<name>` in this config,
+ * 3. `global` in this config,
+ * 4. the library default.
+ *
+ * Provide it via {@link provideRtUi}:
+ * ```typescript
+ * bootstrapApplication(RootComponent, {
+ *     providers: [
+ *         provideRtUi({
+ *             global: { theme: 'auto', design: 'custom' },
+ *             components: { button: { design: 'material' } },
+ *         }),
+ *     ],
+ * });
+ * ```
+ *
+ * @publicApi
+ */
+const RT_UI_CONFIG = new InjectionToken('RT_UI_CONFIG', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
 const MATERIAL_SYMBOLS_FONT = 'Material Symbols Outlined';
 const fontLoaded = signal(false, { ...(ngDevMode ? { debugName: "fontLoaded" } : {}) });
 class RtuiIconComponent {
@@ -830,6 +858,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 class RtuiButtonComponent {
     constructor() {
+        /** App-wide defaults; the resolution order is: instance input → `components.button` → `global` → library default. */
+        this.#config = inject(RT_UI_CONFIG);
+        this.#buttonConfig = this.#config.components?.button;
+        /** Design system the button renders with — see {@link RtUiDesign}. */
+        this.resolvedDesign = computed(() => this.design() ?? this.#buttonConfig?.design ?? this.#config.global?.design ?? 'custom', { ...(ngDevMode ? { debugName: "resolvedDesign" } : {}) });
+        this.resolvedSize = computed(() => this.size() ?? this.#buttonConfig?.size ?? 'md', { ...(ngDevMode ? { debugName: "resolvedSize" } : {}) });
+        this.resolvedRadius = computed(() => this.radius() ?? this.#buttonConfig?.radius ?? 'full', { ...(ngDevMode ? { debugName: "resolvedRadius" } : {}) });
+        this.resolvedAppearance = computed(() => this.appearance() ?? this.#buttonConfig?.appearance, { ...(ngDevMode ? { debugName: "resolvedAppearance" } : {}) });
         this.resolvedIconSize = computed(() => {
             const iconSize = this.iconSize();
             if (iconSize) {
@@ -841,7 +877,7 @@ class RtuiButtonComponent {
                 md: 'sm',
                 lg: 'md',
             };
-            return sizeMap[this.size()];
+            return sizeMap[this.resolvedSize()];
         }, { ...(ngDevMode ? { debugName: "resolvedIconSize" } : {}) });
         this.spinnerSize = computed(() => {
             const sizeMap = {
@@ -850,22 +886,24 @@ class RtuiButtonComponent {
                 md: 20,
                 lg: 24,
             };
-            return this.spinnerDiameter() ?? sizeMap[this.size()];
+            return this.spinnerDiameter() ?? sizeMap[this.resolvedSize()];
         }, { ...(ngDevMode ? { debugName: "spinnerSize" } : {}) });
         this.modifiers = computed(() => ({
             [`type-${this.type()}`]: true,
+            [`design-${this.resolvedDesign()}`]: true,
             [`variant-${this.variant()}`]: true,
-            [`size-${this.size()}`]: true,
-            [`radius-${this.radius()}`]: true,
-            [`appearance-${this.appearance()}`]: !!this.appearance(),
+            [`size-${this.resolvedSize()}`]: true,
+            [`radius-${this.resolvedRadius()}`]: true,
+            [`appearance-${this.resolvedAppearance()}`]: !!this.resolvedAppearance(),
             loading: this.loading(),
             disabled: this.disabled(),
         }), { ...(ngDevMode ? { debugName: "modifiers" } : {}) });
         this.type = input('icon', { ...(ngDevMode ? { debugName: "type" } : {}) });
+        this.design = input(undefined, { ...(ngDevMode ? { debugName: "design" } : {}) });
         this.variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : {}) });
         this.appearance = input(undefined, { ...(ngDevMode ? { debugName: "appearance" } : {}) });
-        this.size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
-        this.radius = input('full', { ...(ngDevMode ? { debugName: "radius" } : {}) });
+        this.size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : {}) });
+        this.radius = input(undefined, { ...(ngDevMode ? { debugName: "radius" } : {}) });
         this.icon = input('', { ...(ngDevMode ? { debugName: "icon" } : {}), transform: transformStringInput });
         this.iconPosition = input('start', { ...(ngDevMode ? { debugName: "iconPosition" } : {}) });
         this.iconSize = input(undefined, { ...(ngDevMode ? { debugName: "iconSize" } : {}) });
@@ -877,13 +915,16 @@ class RtuiButtonComponent {
         this.spinnerDiameter = input(undefined, { ...(ngDevMode ? { debugName: "spinnerDiameter" } : {}) });
         this.clicked = output();
     }
+    /** App-wide defaults; the resolution order is: instance input → `components.button` → `global` → library default. */
+    #config;
+    #buttonConfig;
     onClick() {
         if (!this.loading() && !this.disabled()) {
             this.clicked.emit();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiButtonComponent, isStandalone: true, selector: "rtui-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.rtui-button-full": "fullWidth()" } }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled", "matTooltipClass", "tooltipClass"] }], ngImport: i0, template: "@switch (type()) {\n    @case ('pill') {\n        <button\n            type=\"button\"\n            rtBlock=\"rtui-button\"\n            matRipple\n            [rtMod]=\"modifiers()\"\n            [matRippleDisabled]=\"disabled() || loading()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onClick()\">\n            @if (loading()) {\n                <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n            } @else {\n                @if (icon() && iconPosition() === 'start') {\n                    <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                }\n                @if (text()) {\n                    <span rtElem=\"text\">{{ text() }}</span>\n                }\n                <ng-content />\n                @if (icon() && iconPosition() === 'end') {\n                    <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                }\n            }\n        </button>\n    }\n    @default {\n        <button\n            type=\"button\"\n            rtBlock=\"rtui-button\"\n            matRipple\n            [rtMod]=\"modifiers()\"\n            [matRippleDisabled]=\"disabled() || loading()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onClick()\">\n            @if (loading()) {\n                <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n            } @else {\n                <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n            }\n        </button>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{gap:.375rem;border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}\n"], dependencies: [{ kind: "directive", type:
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiButtonComponent, isStandalone: true, selector: "rtui-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.rtui-button-full": "fullWidth()" } }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled", "matTooltipClass", "tooltipClass"] }], ngImport: i0, template: "@switch (type()) {\n    @case ('pill') {\n        <button\n            type=\"button\"\n            rtBlock=\"rtui-button\"\n            matRipple\n            [rtMod]=\"modifiers()\"\n            [matRippleDisabled]=\"disabled() || loading()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onClick()\">\n            @if (loading()) {\n                <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n            } @else {\n                @if (icon() && iconPosition() === 'start') {\n                    <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                }\n                @if (text()) {\n                    <span rtElem=\"text\">{{ text() }}</span>\n                }\n                <ng-content />\n                @if (icon() && iconPosition() === 'end') {\n                    <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                }\n            }\n        </button>\n    }\n    @default {\n        <button\n            type=\"button\"\n            rtBlock=\"rtui-button\"\n            matRipple\n            [rtMod]=\"modifiers()\"\n            [matRippleDisabled]=\"disabled() || loading()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onClick()\">\n            @if (loading()) {\n                <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n            } @else {\n                <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n            }\n        </button>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{gap:.375rem;border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--design-material{min-height:2.5rem;padding:0 var(--mat-button-filled-horizontal-padding, 1.5rem);border-radius:var(--mat-sys-corner-full, 1.25rem);background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);font-size:var(--mat-sys-label-large-size, .875rem);font-weight:var(--mat-sys-label-large-weight, 500)}.rtui-button--type-pill.rtui-button--design-material:hover:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-primary) 92%,var(--mat-sys-on-primary))}.rtui-button--type-pill.rtui-button--design-material:active:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-primary) 84%,var(--mat-sys-on-primary))}.rtui-button--type-pill.rtui-button--design-material.rtui-button--variant-danger{background-color:var(--mat-sys-error);color:var(--mat-sys-on-error)}.rtui-button--type-pill.rtui-button--design-material.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-error) 92%,var(--mat-sys-on-error))}.rtui-button--type-pill.rtui-button--design-material.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-error) 84%,var(--mat-sys-on-error))}.rtui-button--type-pill.rtui-button--design-material.rtui-button--appearance-text{min-height:2.5rem;padding:0 var(--mat-button-text-horizontal-padding, .75rem);background-color:transparent;color:var(--mat-sys-primary);font-size:var(--mat-sys-label-large-size, .875rem);font-weight:var(--mat-sys-label-large-weight, 500)}.rtui-button--type-pill.rtui-button--design-material.rtui-button--appearance-text:hover:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent)}.rtui-button--type-pill.rtui-button--design-material.rtui-button--appearance-text:active:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.rtui-button--type-pill.rtui-button--design-material.rtui-button--variant-danger.rtui-button--appearance-text{background-color:transparent;color:var(--mat-sys-error)}.rtui-button--type-pill.rtui-button--design-material.rtui-button--variant-danger.rtui-button--appearance-text:hover:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-error) 8%,transparent)}.rtui-button--type-pill.rtui-button--design-material.rtui-button--variant-danger.rtui-button--appearance-text:active:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}\n"], dependencies: [{ kind: "directive", type:
                 // rt-tools
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtuiSpinnerComponent, selector: "rtui-spinner", inputs: ["diameter", "showBox", "showBackground"] }, { kind: "component", type:
                 // components
@@ -915,8 +956,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         },
                     ], host: {
                         '[class.rtui-button-full]': 'fullWidth()',
-                    }, template: "@switch (type()) {\n    @case ('pill') {\n        <button\n            type=\"button\"\n            rtBlock=\"rtui-button\"\n            matRipple\n            [rtMod]=\"modifiers()\"\n            [matRippleDisabled]=\"disabled() || loading()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onClick()\">\n            @if (loading()) {\n                <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n            } @else {\n                @if (icon() && iconPosition() === 'start') {\n                    <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                }\n                @if (text()) {\n                    <span rtElem=\"text\">{{ text() }}</span>\n                }\n                <ng-content />\n                @if (icon() && iconPosition() === 'end') {\n                    <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                }\n            }\n        </button>\n    }\n    @default {\n        <button\n            type=\"button\"\n            rtBlock=\"rtui-button\"\n            matRipple\n            [rtMod]=\"modifiers()\"\n            [matRippleDisabled]=\"disabled() || loading()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onClick()\">\n            @if (loading()) {\n                <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n            } @else {\n                <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n            }\n        </button>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{gap:.375rem;border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}\n"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], spinnerDiameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerDiameter", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+                    }, template: "@switch (type()) {\n    @case ('pill') {\n        <button\n            type=\"button\"\n            rtBlock=\"rtui-button\"\n            matRipple\n            [rtMod]=\"modifiers()\"\n            [matRippleDisabled]=\"disabled() || loading()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onClick()\">\n            @if (loading()) {\n                <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n            } @else {\n                @if (icon() && iconPosition() === 'start') {\n                    <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                }\n                @if (text()) {\n                    <span rtElem=\"text\">{{ text() }}</span>\n                }\n                <ng-content />\n                @if (icon() && iconPosition() === 'end') {\n                    <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n                }\n            }\n        </button>\n    }\n    @default {\n        <button\n            type=\"button\"\n            rtBlock=\"rtui-button\"\n            matRipple\n            [rtMod]=\"modifiers()\"\n            [matRippleDisabled]=\"disabled() || loading()\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"onClick()\">\n            @if (loading()) {\n                <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n            } @else {\n                <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n            }\n        </button>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{gap:.375rem;border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--design-material{min-height:2.5rem;padding:0 var(--mat-button-filled-horizontal-padding, 1.5rem);border-radius:var(--mat-sys-corner-full, 1.25rem);background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);font-size:var(--mat-sys-label-large-size, .875rem);font-weight:var(--mat-sys-label-large-weight, 500)}.rtui-button--type-pill.rtui-button--design-material:hover:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-primary) 92%,var(--mat-sys-on-primary))}.rtui-button--type-pill.rtui-button--design-material:active:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-primary) 84%,var(--mat-sys-on-primary))}.rtui-button--type-pill.rtui-button--design-material.rtui-button--variant-danger{background-color:var(--mat-sys-error);color:var(--mat-sys-on-error)}.rtui-button--type-pill.rtui-button--design-material.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-error) 92%,var(--mat-sys-on-error))}.rtui-button--type-pill.rtui-button--design-material.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-error) 84%,var(--mat-sys-on-error))}.rtui-button--type-pill.rtui-button--design-material.rtui-button--appearance-text{min-height:2.5rem;padding:0 var(--mat-button-text-horizontal-padding, .75rem);background-color:transparent;color:var(--mat-sys-primary);font-size:var(--mat-sys-label-large-size, .875rem);font-weight:var(--mat-sys-label-large-weight, 500)}.rtui-button--type-pill.rtui-button--design-material.rtui-button--appearance-text:hover:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent)}.rtui-button--type-pill.rtui-button--design-material.rtui-button--appearance-text:active:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-primary) 12%,transparent)}.rtui-button--type-pill.rtui-button--design-material.rtui-button--variant-danger.rtui-button--appearance-text{background-color:transparent;color:var(--mat-sys-error)}.rtui-button--type-pill.rtui-button--design-material.rtui-button--variant-danger.rtui-button--appearance-text:hover:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-error) 8%,transparent)}.rtui-button--type-pill.rtui-button--design-material.rtui-button--variant-danger.rtui-button--appearance-text:active:not(:disabled){background-color:color-mix(in srgb,var(--mat-sys-error) 12%,transparent)}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], design: [{ type: i0.Input, args: [{ isSignal: true, alias: "design", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], spinnerDiameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerDiameter", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 class RtuiMultiButtonComponent {
     constructor() {
@@ -2533,6 +2574,8 @@ class RtuiMultiSelectorPopupComponent {
         this.isLazyLoad = input(false, { ...(ngDevMode ? { debugName: "isLazyLoad" } : {}), transform: booleanAttribute });
         /** Indicates local search is used */
         this.isLocalSearch = input(true, { ...(ngDevMode ? { debugName: "isLocalSearch" } : {}), transform: booleanAttribute });
+        /** Keys of a pinned group kept at the top of the list — a trailing divider is drawn after the last visible one */
+        this.pinnedKeys = input([], { ...(ngDevMode ? { debugName: "pinnedKeys" } : {}), transform: (value) => transformArrayInput(value) });
         /** Send output selected entities ids */
         this.submitAction = output();
         /** Close popup action */
@@ -2559,6 +2602,21 @@ class RtuiMultiSelectorPopupComponent {
         this.isMultiSelection = signal(true, { ...(ngDevMode ? { debugName: "isMultiSelection" } : {}) });
         /** Indicates is macOS used */
         this.isMacOS = signal(this.#deviceService.getOS() === this.oSTypes.MAC_OS, { ...(ngDevMode ? { debugName: "isMacOS" } : {}) });
+        /** Key of the last visible pinned option — its row gets a trailing divider */
+        this.lastSeparatedKey = computed(() => {
+            const keys = this.pinnedKeys();
+            if (!keys.length) {
+                return null;
+            }
+            const list = this.filteredEntities();
+            for (let i = list.length - 1; i >= 0; i--) {
+                const key = list[i][this.keyExp()];
+                if (keys.includes(key)) {
+                    return key;
+                }
+            }
+            return null;
+        }, { ...(ngDevMode ? { debugName: "lastSeparatedKey" } : {}) });
     }
     #destroyRef;
     #injector;
@@ -2697,7 +2755,7 @@ class RtuiMultiSelectorPopupComponent {
         this.scrollAction.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiMultiSelectorPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiMultiSelectorPopupComponent, isStandalone: true, selector: "rtui-multi-selector-popup", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, entitiesToSelect: { classPropertyName: "entitiesToSelect", publicName: "entitiesToSelect", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", 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 } }, outputs: { submitAction: "submitAction", closeAction: "closeAction", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction" }, providers: [DeviceDetectorService], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInputTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    rtBlock=\"rtui-multi-selector-header\"\n    [rtMod]=\"{ simple: isSingleSelection() || !filteredEntities().length || filteredEntities().length <= 1 }\">\n    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n        <input #searchInputTpl matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n        <mat-icon matPrefix rtIconOutlined>search</mat-icon>\n\n        <rtui-clear-button matSuffix [isButtonShown]=\"!!searchControl.value\" (clickAction)=\"onClearSearch()\" />\n    </mat-form-field>\n\n    @if (!isSingleSelection() && filteredEntities().length > 1 && !loading()) {\n        <div rtElem=\"controls\">\n            @if (isMultiToggleShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"first\">\n                    <rtui-toggle label=\"Multi selection\" [ngModel]=\"this.isMultiSelection()\" (ngModelChange)=\"toggleMultiSelection()\" />\n\n                    @if (!isMobile()) {\n                        <mat-icon\n                            rtElem=\"controls-item-icon\"\n                            matTooltipPosition=\"above\"\n                            [rtIconOutlined]=\"true\"\n                            [matTooltip]=\"\n                                isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button'\n                            \">\n                            info\n                        </mat-icon>\n                    }\n\n                    @if (isMobile()) {\n                        <div rtElem=\"controls-item-info\">\n                            {{ isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button' }}\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (isSelectAllButtonShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"last\">\n                    <mat-checkbox\n                        [checked]=\"isAllSelected()\"\n                        [indeterminate]=\"!isAllSelected() && selectionControl.value.length > 0\"\n                        (change)=\"toggleSelectAll($event.checked)\">\n                        <div rtElem=\"controls-item-title\">Select all</div>\n                    </mat-checkbox>\n                </div>\n            }\n        </div>\n    }\n</div>\n\n@if ((filteredEntities()?.length || selectedEntities().length) && !loading()) {\n    <div rtBlock=\"rtui-multi-selector-options\" rtScrollDirective [active]=\"!!isLazyLoad() && !fetching()\" (scrollAction)=\"scroll()\">\n        @if (searchControl.value && selectedEntities()) {\n            @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (filteredEntities()) {\n            @for (entity of filteredEntities(); track entity[displayExp()]) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (fetching()) {\n            <div rtElem=\"loader\">\n                <mat-spinner [diameter]=\"20\" />\n            </div>\n        }\n    </div>\n} @else {\n    <div rtBlock=\"rtui-multi-selector-placeholder\">\n        @if (loading()) {\n            <rtui-spinner />\n        } @else {\n            <mat-icon rtElem=\"icon\" rtIconOutlined>search</mat-icon>\n\n            <div rtElem=\"title\">No Results</div>\n        }\n    </div>\n}\n\n<div rtBlock=\"rtui-multi-selector-footer\" [rtMod]=\"{ full: !!navigateLink() && !!navigateButtonTitle() }\">\n    @if (navigateLink() && navigateButtonTitle()) {\n        <a rtElem=\"nav-action\" [routerLink]=\"navigateLink()\">{{ navigateButtonTitle() }}</a>\n    }\n\n    <div rtElem=\"base-actions\">\n        <button mat-button type=\"button\" rtBlock=\"c-button\" (click)=\"onClose()\">Cancel</button>\n\n        <button\n            mat-flat-button\n            type=\"button\"\n            rtBlock=\"c-button\"\n            [disabled]=\"!selectionControl.value?.length || loading()\"\n            (click)=\"onSubmit()\">\n            SUBMIT\n        </button>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--rt-multi-selector-host-width: 20rem;--rt-multi-selector-host-height: 30rem;--rt-multi-selector-host-padding: 1rem 0 1rem 1rem;--rt-multi-selector-host-box-shadow: 0 .5rem 1rem 0 var(--rt-shadow-color);--rt-multi-selector-host-border-radius: .375rem;--rt-multi-selector-host-background-color: var(--rt-bg-base-base);--rt-multi-selector-header-padding: 0 1rem 0 0;--rt-multi-selector-header-simple-padding: 0 1rem 1rem 0;--rt-multi-selector-header-controls-item-icon-margin-left: .5rem;--rt-multi-selector-header-controls-item-icon-color: var(--rt-text-base-disabled);--rt-multi-selector-header-controls-item-info-margin-left: .5rem;--rt-multi-selector-header-controls-item-info-font-size: .875rem;--rt-multi-selector-header-controls-item-info-color: var(--rt-text-base-secondary);--rt-multi-selector-header-controls-item-first-padding: 1rem 0 0 .5rem;--rt-multi-selector-header-controls-item-last-padding: 1rem 0 0 0;--rt-multi-selector-header-controls-item-last-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-item-label-hover-color: var(--rt-text-base-secondary);--rt-multi-selector-options-item-separated-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-options-item-title-max-width: 15rem;--rt-multi-selector-placeholder-gap: 1rem;--rt-multi-selector-placeholder-padding-right: 1rem;--rt-multi-selector-placeholder-icon-size: 3rem;--rt-multi-selector-placeholder-icon-color: var(--rt-text-base-secondary);--rt-multi-selector-placeholder-title-font-size: 1.5rem;--rt-multi-selector-placeholder-title-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-padding: 1rem 1.5rem 0 .5rem;--rt-multi-selector-footer-gap: .5rem;--rt-multi-selector-footer-nav-action-font-size: .875rem;--rt-multi-selector-footer-nav-action-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-nav-action-hover-color: var(--rt-text-base-strong);display:flex;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);flex-direction:column;padding:var(--rt-multi-selector-host-padding);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color);box-shadow:var(--rt-multi-selector-host-box-shadow)}:host::ng-deep mat-radio-button .mdc-form-field .mdc-label{cursor:pointer}:host::ng-deep mat-radio-button .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host::ng-deep mat-checkbox{width:fit-content}:host::ng-deep mat-checkbox .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host .rtui-multi-selector-header{display:flex;flex-direction:column;padding:var(--rt-multi-selector-header-padding)}:host .rtui-multi-selector-header--simple{padding:var(--rt-multi-selector-header-simple-padding)}:host .rtui-multi-selector-header__controls{display:flex;flex-direction:column;align-items:flex-start}:host .rtui-multi-selector-header__controls-item--first{display:flex;flex-direction:row;padding:var(--rt-multi-selector-header-controls-item-first-padding)}:host .rtui-multi-selector-header__controls-item--last{width:100%;padding:var(--rt-multi-selector-header-controls-item-last-padding);border-bottom:var(--rt-multi-selector-header-controls-item-last-border-bottom)}:host .rtui-multi-selector-header__controls-item-icon{margin-left:var(--rt-multi-selector-header-controls-item-icon-margin-left);color:var(--rt-multi-selector-header-controls-item-icon-color)}:host .rtui-multi-selector-header__controls-item-info{margin-left:var(--rt-multi-selector-header-controls-item-info-margin-left);color:var(--rt-multi-selector-header-controls-item-info-color);font-size:var(--rt-multi-selector-header-controls-item-info-font-size)}:host .rtui-multi-selector-options{display:flex;width:100%;height:100%;flex:1 1 100%;flex-direction:column;overflow-y:auto}:host .rtui-multi-selector-options__item-title{overflow:hidden;width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);text-overflow:ellipsis;white-space:nowrap}:host .rtui-multi-selector-options__item--separated{border-bottom:var(--rt-multi-selector-options-item-separated-border-bottom)}:host .rtui-multi-selector-options__loader{display:flex;align-items:center;justify-content:center}:host .rtui-multi-selector-placeholder{display:flex;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;padding-right:var(--rt-multi-selector-placeholder-padding-right);gap:var(--rt-multi-selector-placeholder-gap);overflow-y:auto}:host .rtui-multi-selector-placeholder__icon{width:var(--rt-multi-selector-placeholder-icon-size);height:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color);font-size:var(--rt-multi-selector-placeholder-icon-size)}:host .rtui-multi-selector-placeholder__title{color:var(--rt-multi-selector-placeholder-title-color);font-size:var(--rt-multi-selector-placeholder-title-font-size)}:host .rtui-multi-selector-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-multi-selector-footer-padding);gap:var(--rt-multi-selector-footer-gap)}:host .rtui-multi-selector-footer--full{justify-content:space-between}:host .rtui-multi-selector-footer__nav-action{color:var(--rt-multi-selector-footer-nav-action-color);font-size:var(--rt-multi-selector-footer-nav-action-font-size);text-decoration:none}:host .rtui-multi-selector-footer__nav-action:hover{color:var(--rt-multi-selector-footer-nav-action-hover-color)}:host .rtui-multi-selector-footer__base-actions{display:flex;gap:var(--rt-multi-selector-footer-gap)}\n"], dependencies: [{ kind: "component", type:
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiMultiSelectorPopupComponent, isStandalone: true, selector: "rtui-multi-selector-popup", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, entitiesToSelect: { classPropertyName: "entitiesToSelect", publicName: "entitiesToSelect", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: true, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: true, transformFunction: null }, displayExp: { classPropertyName: "displayExp", publicName: "displayExp", isSignal: true, isRequired: true, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, navigateButtonTitle: { classPropertyName: "navigateButtonTitle", publicName: "navigateButtonTitle", isSignal: true, isRequired: false, transformFunction: null }, navigateLink: { classPropertyName: "navigateLink", publicName: "navigateLink", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, useNameBreaking: { classPropertyName: "useNameBreaking", publicName: "useNameBreaking", 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 }, pinnedKeys: { classPropertyName: "pinnedKeys", publicName: "pinnedKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitAction: "submitAction", closeAction: "closeAction", searchAction: "searchAction", scrollAction: "scrollAction", temporarySelectAction: "temporarySelectAction" }, providers: [DeviceDetectorService], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInputTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    rtBlock=\"rtui-multi-selector-header\"\n    [rtMod]=\"{ simple: isSingleSelection() || !filteredEntities().length || filteredEntities().length <= 1 }\">\n    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n        <input #searchInputTpl matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n        <mat-icon matPrefix rtIconOutlined>search</mat-icon>\n\n        <rtui-clear-button matSuffix [isButtonShown]=\"!!searchControl.value\" (clickAction)=\"onClearSearch()\" />\n    </mat-form-field>\n\n    @if (!isSingleSelection() && filteredEntities().length > 1 && !loading()) {\n        <div rtElem=\"controls\">\n            @if (isMultiToggleShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"first\">\n                    <rtui-toggle label=\"Multi selection\" [ngModel]=\"this.isMultiSelection()\" (ngModelChange)=\"toggleMultiSelection()\" />\n\n                    @if (!isMobile()) {\n                        <mat-icon\n                            rtElem=\"controls-item-icon\"\n                            matTooltipPosition=\"above\"\n                            [rtIconOutlined]=\"true\"\n                            [matTooltip]=\"\n                                isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button'\n                            \">\n                            info\n                        </mat-icon>\n                    }\n\n                    @if (isMobile()) {\n                        <div rtElem=\"controls-item-info\">\n                            {{ isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button' }}\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (isSelectAllButtonShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"last\">\n                    <mat-checkbox\n                        [checked]=\"isAllSelected()\"\n                        [indeterminate]=\"!isAllSelected() && selectionControl.value.length > 0\"\n                        (change)=\"toggleSelectAll($event.checked)\">\n                        <div rtElem=\"controls-item-title\">Select all</div>\n                    </mat-checkbox>\n                </div>\n            }\n        </div>\n    }\n</div>\n\n@if ((filteredEntities()?.length || selectedEntities().length) && !loading()) {\n    <div rtBlock=\"rtui-multi-selector-options\" rtScrollDirective [active]=\"!!isLazyLoad() && !fetching()\" (scrollAction)=\"scroll()\">\n        @if (searchControl.value && selectedEntities()) {\n            @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (filteredEntities()) {\n            @for (entity of filteredEntities(); track entity[displayExp()]) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (fetching()) {\n            <div rtElem=\"loader\">\n                <mat-spinner [diameter]=\"20\" />\n            </div>\n        }\n    </div>\n} @else {\n    <div rtBlock=\"rtui-multi-selector-placeholder\">\n        @if (loading()) {\n            <rtui-spinner />\n        } @else {\n            <mat-icon rtElem=\"icon\" rtIconOutlined>search</mat-icon>\n\n            <div rtElem=\"title\">No Results</div>\n        }\n    </div>\n}\n\n<div rtBlock=\"rtui-multi-selector-footer\" [rtMod]=\"{ full: !!navigateLink() && !!navigateButtonTitle() }\">\n    @if (navigateLink() && navigateButtonTitle()) {\n        <a rtElem=\"nav-action\" [routerLink]=\"navigateLink()\">{{ navigateButtonTitle() }}</a>\n    }\n\n    <div rtElem=\"base-actions\">\n        <button mat-button type=\"button\" rtBlock=\"c-button\" (click)=\"onClose()\">Cancel</button>\n\n        <button\n            mat-flat-button\n            type=\"button\"\n            rtBlock=\"c-button\"\n            [disabled]=\"!selectionControl.value?.length || loading()\"\n            (click)=\"onSubmit()\">\n            SUBMIT\n        </button>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--rt-multi-selector-host-width: 20rem;--rt-multi-selector-host-height: 30rem;--rt-multi-selector-host-padding: 1rem 0 1rem 1rem;--rt-multi-selector-host-box-shadow: 0 .5rem 1rem 0 var(--rt-shadow-color);--rt-multi-selector-host-border-radius: .375rem;--rt-multi-selector-host-background-color: var(--rt-bg-base-base);--rt-multi-selector-header-padding: 0 1rem 0 0;--rt-multi-selector-header-simple-padding: 0 1rem 1rem 0;--rt-multi-selector-header-controls-item-icon-margin-left: .5rem;--rt-multi-selector-header-controls-item-icon-color: var(--rt-text-base-disabled);--rt-multi-selector-header-controls-item-info-margin-left: .5rem;--rt-multi-selector-header-controls-item-info-font-size: .875rem;--rt-multi-selector-header-controls-item-info-color: var(--rt-text-base-secondary);--rt-multi-selector-header-controls-item-first-padding: 1rem 0 0 .5rem;--rt-multi-selector-header-controls-item-last-padding: 1rem 0 0 0;--rt-multi-selector-header-controls-item-last-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-item-label-hover-color: var(--rt-text-base-secondary);--rt-multi-selector-options-item-separated-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-options-item-title-max-width: 15rem;--rt-multi-selector-placeholder-gap: 1rem;--rt-multi-selector-placeholder-padding-right: 1rem;--rt-multi-selector-placeholder-icon-size: 3rem;--rt-multi-selector-placeholder-icon-color: var(--rt-text-base-secondary);--rt-multi-selector-placeholder-title-font-size: 1.5rem;--rt-multi-selector-placeholder-title-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-padding: 1rem 1.5rem 0 .5rem;--rt-multi-selector-footer-gap: .5rem;--rt-multi-selector-footer-nav-action-font-size: .875rem;--rt-multi-selector-footer-nav-action-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-nav-action-hover-color: var(--rt-text-base-strong);display:flex;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);flex-direction:column;padding:var(--rt-multi-selector-host-padding);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color);box-shadow:var(--rt-multi-selector-host-box-shadow)}:host::ng-deep mat-radio-button .mdc-form-field .mdc-label{cursor:pointer}:host::ng-deep mat-radio-button .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host::ng-deep mat-checkbox{width:fit-content}:host::ng-deep mat-checkbox .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host .rtui-multi-selector-header{display:flex;flex-direction:column;padding:var(--rt-multi-selector-header-padding)}:host .rtui-multi-selector-header--simple{padding:var(--rt-multi-selector-header-simple-padding)}:host .rtui-multi-selector-header__controls{display:flex;flex-direction:column;align-items:flex-start}:host .rtui-multi-selector-header__controls-item--first{display:flex;flex-direction:row;padding:var(--rt-multi-selector-header-controls-item-first-padding)}:host .rtui-multi-selector-header__controls-item--last{width:100%;padding:var(--rt-multi-selector-header-controls-item-last-padding);border-bottom:var(--rt-multi-selector-header-controls-item-last-border-bottom)}:host .rtui-multi-selector-header__controls-item-icon{margin-left:var(--rt-multi-selector-header-controls-item-icon-margin-left);color:var(--rt-multi-selector-header-controls-item-icon-color)}:host .rtui-multi-selector-header__controls-item-info{margin-left:var(--rt-multi-selector-header-controls-item-info-margin-left);color:var(--rt-multi-selector-header-controls-item-info-color);font-size:var(--rt-multi-selector-header-controls-item-info-font-size)}:host .rtui-multi-selector-options{display:flex;width:100%;height:100%;flex:1 1 100%;flex-direction:column;overflow-y:auto}:host .rtui-multi-selector-options__item-title{overflow:hidden;width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);text-overflow:ellipsis;white-space:nowrap}:host .rtui-multi-selector-options__item--separated{border-bottom:var(--rt-multi-selector-options-item-separated-border-bottom)}:host .rtui-multi-selector-options__loader{display:flex;align-items:center;justify-content:center}:host .rtui-multi-selector-placeholder{display:flex;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;padding-right:var(--rt-multi-selector-placeholder-padding-right);gap:var(--rt-multi-selector-placeholder-gap);overflow-y:auto}:host .rtui-multi-selector-placeholder__icon{width:var(--rt-multi-selector-placeholder-icon-size);height:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color);font-size:var(--rt-multi-selector-placeholder-icon-size)}:host .rtui-multi-selector-placeholder__title{color:var(--rt-multi-selector-placeholder-title-color);font-size:var(--rt-multi-selector-placeholder-title-font-size)}:host .rtui-multi-selector-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-multi-selector-footer-padding);gap:var(--rt-multi-selector-footer-gap)}:host .rtui-multi-selector-footer--full{justify-content:space-between}:host .rtui-multi-selector-footer__nav-action{color:var(--rt-multi-selector-footer-nav-action-color);font-size:var(--rt-multi-selector-footer-nav-action-font-size);text-decoration:none}:host .rtui-multi-selector-footer__nav-action:hover{color:var(--rt-multi-selector-footer-nav-action-hover-color)}:host .rtui-multi-selector-footer__base-actions{display:flex;gap:var(--rt-multi-selector-footer-gap)}\n"], dependencies: [{ kind: "component", type:
                 // Material
                 MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type:
                 // directives
@@ -2734,8 +2792,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         RtuiToggleComponent,
                         RtuiSpinnerComponent,
                         EntityToStringPipe,
-                    ], providers: [DeviceDetectorService], template: "<div\n    rtBlock=\"rtui-multi-selector-header\"\n    [rtMod]=\"{ simple: isSingleSelection() || !filteredEntities().length || filteredEntities().length <= 1 }\">\n    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n        <input #searchInputTpl matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n        <mat-icon matPrefix rtIconOutlined>search</mat-icon>\n\n        <rtui-clear-button matSuffix [isButtonShown]=\"!!searchControl.value\" (clickAction)=\"onClearSearch()\" />\n    </mat-form-field>\n\n    @if (!isSingleSelection() && filteredEntities().length > 1 && !loading()) {\n        <div rtElem=\"controls\">\n            @if (isMultiToggleShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"first\">\n                    <rtui-toggle label=\"Multi selection\" [ngModel]=\"this.isMultiSelection()\" (ngModelChange)=\"toggleMultiSelection()\" />\n\n                    @if (!isMobile()) {\n                        <mat-icon\n                            rtElem=\"controls-item-icon\"\n                            matTooltipPosition=\"above\"\n                            [rtIconOutlined]=\"true\"\n                            [matTooltip]=\"\n                                isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button'\n                            \">\n                            info\n                        </mat-icon>\n                    }\n\n                    @if (isMobile()) {\n                        <div rtElem=\"controls-item-info\">\n                            {{ isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button' }}\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (isSelectAllButtonShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"last\">\n                    <mat-checkbox\n                        [checked]=\"isAllSelected()\"\n                        [indeterminate]=\"!isAllSelected() && selectionControl.value.length > 0\"\n                        (change)=\"toggleSelectAll($event.checked)\">\n                        <div rtElem=\"controls-item-title\">Select all</div>\n                    </mat-checkbox>\n                </div>\n            }\n        </div>\n    }\n</div>\n\n@if ((filteredEntities()?.length || selectedEntities().length) && !loading()) {\n    <div rtBlock=\"rtui-multi-selector-options\" rtScrollDirective [active]=\"!!isLazyLoad() && !fetching()\" (scrollAction)=\"scroll()\">\n        @if (searchControl.value && selectedEntities()) {\n            @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (filteredEntities()) {\n            @for (entity of filteredEntities(); track entity[displayExp()]) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (fetching()) {\n            <div rtElem=\"loader\">\n                <mat-spinner [diameter]=\"20\" />\n            </div>\n        }\n    </div>\n} @else {\n    <div rtBlock=\"rtui-multi-selector-placeholder\">\n        @if (loading()) {\n            <rtui-spinner />\n        } @else {\n            <mat-icon rtElem=\"icon\" rtIconOutlined>search</mat-icon>\n\n            <div rtElem=\"title\">No Results</div>\n        }\n    </div>\n}\n\n<div rtBlock=\"rtui-multi-selector-footer\" [rtMod]=\"{ full: !!navigateLink() && !!navigateButtonTitle() }\">\n    @if (navigateLink() && navigateButtonTitle()) {\n        <a rtElem=\"nav-action\" [routerLink]=\"navigateLink()\">{{ navigateButtonTitle() }}</a>\n    }\n\n    <div rtElem=\"base-actions\">\n        <button mat-button type=\"button\" rtBlock=\"c-button\" (click)=\"onClose()\">Cancel</button>\n\n        <button\n            mat-flat-button\n            type=\"button\"\n            rtBlock=\"c-button\"\n            [disabled]=\"!selectionControl.value?.length || loading()\"\n            (click)=\"onSubmit()\">\n            SUBMIT\n        </button>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--rt-multi-selector-host-width: 20rem;--rt-multi-selector-host-height: 30rem;--rt-multi-selector-host-padding: 1rem 0 1rem 1rem;--rt-multi-selector-host-box-shadow: 0 .5rem 1rem 0 var(--rt-shadow-color);--rt-multi-selector-host-border-radius: .375rem;--rt-multi-selector-host-background-color: var(--rt-bg-base-base);--rt-multi-selector-header-padding: 0 1rem 0 0;--rt-multi-selector-header-simple-padding: 0 1rem 1rem 0;--rt-multi-selector-header-controls-item-icon-margin-left: .5rem;--rt-multi-selector-header-controls-item-icon-color: var(--rt-text-base-disabled);--rt-multi-selector-header-controls-item-info-margin-left: .5rem;--rt-multi-selector-header-controls-item-info-font-size: .875rem;--rt-multi-selector-header-controls-item-info-color: var(--rt-text-base-secondary);--rt-multi-selector-header-controls-item-first-padding: 1rem 0 0 .5rem;--rt-multi-selector-header-controls-item-last-padding: 1rem 0 0 0;--rt-multi-selector-header-controls-item-last-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-item-label-hover-color: var(--rt-text-base-secondary);--rt-multi-selector-options-item-separated-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-options-item-title-max-width: 15rem;--rt-multi-selector-placeholder-gap: 1rem;--rt-multi-selector-placeholder-padding-right: 1rem;--rt-multi-selector-placeholder-icon-size: 3rem;--rt-multi-selector-placeholder-icon-color: var(--rt-text-base-secondary);--rt-multi-selector-placeholder-title-font-size: 1.5rem;--rt-multi-selector-placeholder-title-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-padding: 1rem 1.5rem 0 .5rem;--rt-multi-selector-footer-gap: .5rem;--rt-multi-selector-footer-nav-action-font-size: .875rem;--rt-multi-selector-footer-nav-action-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-nav-action-hover-color: var(--rt-text-base-strong);display:flex;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);flex-direction:column;padding:var(--rt-multi-selector-host-padding);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color);box-shadow:var(--rt-multi-selector-host-box-shadow)}:host::ng-deep mat-radio-button .mdc-form-field .mdc-label{cursor:pointer}:host::ng-deep mat-radio-button .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host::ng-deep mat-checkbox{width:fit-content}:host::ng-deep mat-checkbox .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host .rtui-multi-selector-header{display:flex;flex-direction:column;padding:var(--rt-multi-selector-header-padding)}:host .rtui-multi-selector-header--simple{padding:var(--rt-multi-selector-header-simple-padding)}:host .rtui-multi-selector-header__controls{display:flex;flex-direction:column;align-items:flex-start}:host .rtui-multi-selector-header__controls-item--first{display:flex;flex-direction:row;padding:var(--rt-multi-selector-header-controls-item-first-padding)}:host .rtui-multi-selector-header__controls-item--last{width:100%;padding:var(--rt-multi-selector-header-controls-item-last-padding);border-bottom:var(--rt-multi-selector-header-controls-item-last-border-bottom)}:host .rtui-multi-selector-header__controls-item-icon{margin-left:var(--rt-multi-selector-header-controls-item-icon-margin-left);color:var(--rt-multi-selector-header-controls-item-icon-color)}:host .rtui-multi-selector-header__controls-item-info{margin-left:var(--rt-multi-selector-header-controls-item-info-margin-left);color:var(--rt-multi-selector-header-controls-item-info-color);font-size:var(--rt-multi-selector-header-controls-item-info-font-size)}:host .rtui-multi-selector-options{display:flex;width:100%;height:100%;flex:1 1 100%;flex-direction:column;overflow-y:auto}:host .rtui-multi-selector-options__item-title{overflow:hidden;width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);text-overflow:ellipsis;white-space:nowrap}:host .rtui-multi-selector-options__item--separated{border-bottom:var(--rt-multi-selector-options-item-separated-border-bottom)}:host .rtui-multi-selector-options__loader{display:flex;align-items:center;justify-content:center}:host .rtui-multi-selector-placeholder{display:flex;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;padding-right:var(--rt-multi-selector-placeholder-padding-right);gap:var(--rt-multi-selector-placeholder-gap);overflow-y:auto}:host .rtui-multi-selector-placeholder__icon{width:var(--rt-multi-selector-placeholder-icon-size);height:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color);font-size:var(--rt-multi-selector-placeholder-icon-size)}:host .rtui-multi-selector-placeholder__title{color:var(--rt-multi-selector-placeholder-title-color);font-size:var(--rt-multi-selector-placeholder-title-font-size)}:host .rtui-multi-selector-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-multi-selector-footer-padding);gap:var(--rt-multi-selector-footer-gap)}:host .rtui-multi-selector-footer--full{justify-content:space-between}:host .rtui-multi-selector-footer__nav-action{color:var(--rt-multi-selector-footer-nav-action-color);font-size:var(--rt-multi-selector-footer-nav-action-font-size);text-decoration:none}:host .rtui-multi-selector-footer__nav-action:hover{color:var(--rt-multi-selector-footer-nav-action-hover-color)}:host .rtui-multi-selector-footer__base-actions{display:flex;gap:var(--rt-multi-selector-footer-gap)}\n"] }]
-        }], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], entitiesToSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "entitiesToSelect", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: true }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], navigateButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateButtonTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], isSingleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSingleSelection", required: false }] }], isMultiToggleShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiToggleShown", required: false }] }], isSelectAllButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectAllButtonShown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], useNameBreaking: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNameBreaking", required: false }] }], isLazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLazyLoad", required: false }] }], isLocalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocalSearch", required: false }] }], submitAction: [{ type: i0.Output, args: ["submitAction"] }], closeAction: [{ type: i0.Output, args: ["closeAction"] }], searchAction: [{ type: i0.Output, args: ["searchAction"] }], scrollAction: [{ type: i0.Output, args: ["scrollAction"] }], temporarySelectAction: [{ type: i0.Output, args: ["temporarySelectAction"] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInputTpl', { isSignal: true }] }] } });
+                    ], providers: [DeviceDetectorService], template: "<div\n    rtBlock=\"rtui-multi-selector-header\"\n    [rtMod]=\"{ simple: isSingleSelection() || !filteredEntities().length || filteredEntities().length <= 1 }\">\n    <mat-form-field subscriptSizing=\"dynamic\" [appearance]=\"appearance()\">\n        <input #searchInputTpl matInput placeholder=\"Search...\" type=\"text\" [formControl]=\"searchControl\" />\n\n        <mat-icon matPrefix rtIconOutlined>search</mat-icon>\n\n        <rtui-clear-button matSuffix [isButtonShown]=\"!!searchControl.value\" (clickAction)=\"onClearSearch()\" />\n    </mat-form-field>\n\n    @if (!isSingleSelection() && filteredEntities().length > 1 && !loading()) {\n        <div rtElem=\"controls\">\n            @if (isMultiToggleShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"first\">\n                    <rtui-toggle label=\"Multi selection\" [ngModel]=\"this.isMultiSelection()\" (ngModelChange)=\"toggleMultiSelection()\" />\n\n                    @if (!isMobile()) {\n                        <mat-icon\n                            rtElem=\"controls-item-icon\"\n                            matTooltipPosition=\"above\"\n                            [rtIconOutlined]=\"true\"\n                            [matTooltip]=\"\n                                isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button'\n                            \">\n                            info\n                        </mat-icon>\n                    }\n\n                    @if (isMobile()) {\n                        <div rtElem=\"controls-item-info\">\n                            {{ isMacOS() ? 'Also for multi selection use COMMAND button' : 'Also for multi selection use CTRL button' }}\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (isSelectAllButtonShown()) {\n                <div rtElem=\"controls-item\" rtMod=\"last\">\n                    <mat-checkbox\n                        [checked]=\"isAllSelected()\"\n                        [indeterminate]=\"!isAllSelected() && selectionControl.value.length > 0\"\n                        (change)=\"toggleSelectAll($event.checked)\">\n                        <div rtElem=\"controls-item-title\">Select all</div>\n                    </mat-checkbox>\n                </div>\n            }\n        </div>\n    }\n</div>\n\n@if ((filteredEntities()?.length || selectedEntities().length) && !loading()) {\n    <div rtBlock=\"rtui-multi-selector-options\" rtScrollDirective [active]=\"!!isLazyLoad() && !fetching()\" (scrollAction)=\"scroll()\">\n        @if (searchControl.value && selectedEntities()) {\n            @for (entity of selectedEntities(); track entity[displayExp()]; let i = $index) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: i === selectedEntities().length - 1 }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (filteredEntities()) {\n            @for (entity of filteredEntities(); track entity[displayExp()]) {\n                @if (isSingleSelection()) {\n                    <mat-radio-button\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (change)=\"onToggleSingleItem(entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-radio-button>\n                } @else {\n                    <mat-checkbox\n                        rtElem=\"item\"\n                        [rtMod]=\"{ separated: entity[keyExp()] === lastSeparatedKey() }\"\n                        [checked]=\"selectionControl.value.includes(entity[keyExp()])\"\n                        (click)=\"onToggleItem($event, entity, !selectionControl.value.includes(entity[keyExp()]))\">\n                        <div rtElem=\"item-title\">\n                            @if (useNameBreaking()) {\n                                {{ entity[displayExp()] | entityToString | breakString }}\n                            } @else {\n                                {{ entity[displayExp()] }}\n                            }\n                        </div>\n                    </mat-checkbox>\n                }\n            }\n        }\n\n        @if (fetching()) {\n            <div rtElem=\"loader\">\n                <mat-spinner [diameter]=\"20\" />\n            </div>\n        }\n    </div>\n} @else {\n    <div rtBlock=\"rtui-multi-selector-placeholder\">\n        @if (loading()) {\n            <rtui-spinner />\n        } @else {\n            <mat-icon rtElem=\"icon\" rtIconOutlined>search</mat-icon>\n\n            <div rtElem=\"title\">No Results</div>\n        }\n    </div>\n}\n\n<div rtBlock=\"rtui-multi-selector-footer\" [rtMod]=\"{ full: !!navigateLink() && !!navigateButtonTitle() }\">\n    @if (navigateLink() && navigateButtonTitle()) {\n        <a rtElem=\"nav-action\" [routerLink]=\"navigateLink()\">{{ navigateButtonTitle() }}</a>\n    }\n\n    <div rtElem=\"base-actions\">\n        <button mat-button type=\"button\" rtBlock=\"c-button\" (click)=\"onClose()\">Cancel</button>\n\n        <button\n            mat-flat-button\n            type=\"button\"\n            rtBlock=\"c-button\"\n            [disabled]=\"!selectionControl.value?.length || loading()\"\n            (click)=\"onSubmit()\">\n            SUBMIT\n        </button>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--rt-multi-selector-host-width: 20rem;--rt-multi-selector-host-height: 30rem;--rt-multi-selector-host-padding: 1rem 0 1rem 1rem;--rt-multi-selector-host-box-shadow: 0 .5rem 1rem 0 var(--rt-shadow-color);--rt-multi-selector-host-border-radius: .375rem;--rt-multi-selector-host-background-color: var(--rt-bg-base-base);--rt-multi-selector-header-padding: 0 1rem 0 0;--rt-multi-selector-header-simple-padding: 0 1rem 1rem 0;--rt-multi-selector-header-controls-item-icon-margin-left: .5rem;--rt-multi-selector-header-controls-item-icon-color: var(--rt-text-base-disabled);--rt-multi-selector-header-controls-item-info-margin-left: .5rem;--rt-multi-selector-header-controls-item-info-font-size: .875rem;--rt-multi-selector-header-controls-item-info-color: var(--rt-text-base-secondary);--rt-multi-selector-header-controls-item-first-padding: 1rem 0 0 .5rem;--rt-multi-selector-header-controls-item-last-padding: 1rem 0 0 0;--rt-multi-selector-header-controls-item-last-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-item-label-hover-color: var(--rt-text-base-secondary);--rt-multi-selector-options-item-separated-border-bottom: solid 1px var(--rt-border-neutral-divider);--rt-multi-selector-options-item-title-max-width: 15rem;--rt-multi-selector-placeholder-gap: 1rem;--rt-multi-selector-placeholder-padding-right: 1rem;--rt-multi-selector-placeholder-icon-size: 3rem;--rt-multi-selector-placeholder-icon-color: var(--rt-text-base-secondary);--rt-multi-selector-placeholder-title-font-size: 1.5rem;--rt-multi-selector-placeholder-title-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-padding: 1rem 1.5rem 0 .5rem;--rt-multi-selector-footer-gap: .5rem;--rt-multi-selector-footer-nav-action-font-size: .875rem;--rt-multi-selector-footer-nav-action-color: var(--rt-text-base-secondary);--rt-multi-selector-footer-nav-action-hover-color: var(--rt-text-base-strong);display:flex;width:var(--rt-multi-selector-host-width);height:var(--rt-multi-selector-host-height);flex-direction:column;padding:var(--rt-multi-selector-host-padding);border-radius:var(--rt-multi-selector-host-border-radius);background-color:var(--rt-multi-selector-host-background-color);box-shadow:var(--rt-multi-selector-host-box-shadow)}:host::ng-deep mat-radio-button .mdc-form-field .mdc-label{cursor:pointer}:host::ng-deep mat-radio-button .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host::ng-deep mat-checkbox{width:fit-content}:host::ng-deep mat-checkbox .mdc-form-field:hover .mdc-label{color:var(--rt-multi-selector-item-label-hover-color)}:host .rtui-multi-selector-header{display:flex;flex-direction:column;padding:var(--rt-multi-selector-header-padding)}:host .rtui-multi-selector-header--simple{padding:var(--rt-multi-selector-header-simple-padding)}:host .rtui-multi-selector-header__controls{display:flex;flex-direction:column;align-items:flex-start}:host .rtui-multi-selector-header__controls-item--first{display:flex;flex-direction:row;padding:var(--rt-multi-selector-header-controls-item-first-padding)}:host .rtui-multi-selector-header__controls-item--last{width:100%;padding:var(--rt-multi-selector-header-controls-item-last-padding);border-bottom:var(--rt-multi-selector-header-controls-item-last-border-bottom)}:host .rtui-multi-selector-header__controls-item-icon{margin-left:var(--rt-multi-selector-header-controls-item-icon-margin-left);color:var(--rt-multi-selector-header-controls-item-icon-color)}:host .rtui-multi-selector-header__controls-item-info{margin-left:var(--rt-multi-selector-header-controls-item-info-margin-left);color:var(--rt-multi-selector-header-controls-item-info-color);font-size:var(--rt-multi-selector-header-controls-item-info-font-size)}:host .rtui-multi-selector-options{display:flex;width:100%;height:100%;flex:1 1 100%;flex-direction:column;overflow-y:auto}:host .rtui-multi-selector-options__item-title{overflow:hidden;width:100%;max-width:var(--rt-multi-selector-options-item-title-max-width);text-overflow:ellipsis;white-space:nowrap}:host .rtui-multi-selector-options__item--separated{border-bottom:var(--rt-multi-selector-options-item-separated-border-bottom)}:host .rtui-multi-selector-options__loader{display:flex;align-items:center;justify-content:center}:host .rtui-multi-selector-placeholder{display:flex;flex:1 1 100%;flex-direction:column;align-items:center;justify-content:center;padding-right:var(--rt-multi-selector-placeholder-padding-right);gap:var(--rt-multi-selector-placeholder-gap);overflow-y:auto}:host .rtui-multi-selector-placeholder__icon{width:var(--rt-multi-selector-placeholder-icon-size);height:var(--rt-multi-selector-placeholder-icon-size);color:var(--rt-multi-selector-placeholder-icon-color);font-size:var(--rt-multi-selector-placeholder-icon-size)}:host .rtui-multi-selector-placeholder__title{color:var(--rt-multi-selector-placeholder-title-color);font-size:var(--rt-multi-selector-placeholder-title-font-size)}:host .rtui-multi-selector-footer{display:flex;align-items:center;justify-content:flex-end;padding:var(--rt-multi-selector-footer-padding);gap:var(--rt-multi-selector-footer-gap)}:host .rtui-multi-selector-footer--full{justify-content:space-between}:host .rtui-multi-selector-footer__nav-action{color:var(--rt-multi-selector-footer-nav-action-color);font-size:var(--rt-multi-selector-footer-nav-action-font-size);text-decoration:none}:host .rtui-multi-selector-footer__nav-action:hover{color:var(--rt-multi-selector-footer-nav-action-hover-color)}:host .rtui-multi-selector-footer__base-actions{display:flex;gap:var(--rt-multi-selector-footer-gap)}\n"] }]
+        }], propDecorators: { isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], entitiesToSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "entitiesToSelect", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: true }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: true }] }], displayExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExp", required: true }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], navigateButtonTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateButtonTitle", required: false }] }], navigateLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateLink", required: false }] }], isSingleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSingleSelection", required: false }] }], isMultiToggleShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiToggleShown", required: false }] }], isSelectAllButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectAllButtonShown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], useNameBreaking: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNameBreaking", required: false }] }], isLazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLazyLoad", required: false }] }], isLocalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocalSearch", required: false }] }], pinnedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedKeys", required: false }] }], submitAction: [{ type: i0.Output, args: ["submitAction"] }], closeAction: [{ type: i0.Output, args: ["closeAction"] }], searchAction: [{ type: i0.Output, args: ["searchAction"] }], scrollAction: [{ type: i0.Output, args: ["scrollAction"] }], temporarySelectAction: [{ type: i0.Output, args: ["temporarySelectAction"] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInputTpl', { isSignal: true }] }] } });
 class RtuiDynamicSelectorPlaceholderComponent {
     constructor() {
@@ -3200,7 +3258,7 @@ class RtuiDynamicSelectorComponent extends RtuiDynamicSelectorsDirective {
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtEscapeKeyDirective, selector: "[rtEscapeKey]", outputs: ["escapeKeyAction"] }, { kind: "directive", type: RtuiDynamicSelectorItemAdditionalControlDirective, selector: "[rtuiDynamicSelectorItemAdditionalControlDirective]" }, { kind: "directive", type: RtuiDynamicSelectorItemTitleDirective, selector: "[rtuiDynamicSelectorItemTitleDirective]" }, { kind: "component", type:
                 // components
-                RtuiMultiSelectorPopupComponent, selector: "rtui-multi-selector-popup", inputs: ["isMobile", "entitiesToSelect", "appearance", "keyExp", "displayExp", "searchTerm", "navigateButtonTitle", "navigateLink", "isSingleSelection", "isMultiToggleShown", "isSelectAllButtonShown", "loading", "fetching", "useNameBreaking", "isLazyLoad", "isLocalSearch"], outputs: ["submitAction", "closeAction", "searchAction", "scrollAction", "temporarySelectAction"] }, { kind: "component", type: RtuiDynamicSelectorPlaceholderComponent, selector: "rtui-dynamic-selector-placeholder", inputs: ["icon", "description", "buttonTitle", "isButtonShow", "disabled", "isIconOutlined"], outputs: ["submitAction"] }, { kind: "component", type: RtuiDynamicSelectorListActionsComponent, selector: "rtui-dynamic-selector-list-actions", inputs: ["isMobile", "isResetButtonDisabled", "isClearButtonDisabled", "disabled"], outputs: ["resetAction", "clearAction"] }, { kind: "component", type: RtuiDynamicSelectorSelectedListComponent, selector: "rtui-dynamic-selector-selected-list", inputs: ["isMobile", "keyExp", "displayExp", "selectedEntities", "readonlyEntitiesKeys", "isListDraggable", "useNameBreaking", "useTitleCase", "isDeleteButtonShown", "isItemsEditable", "appearance"], outputs: ["deleteFromSelectedAction", "dropAction", "changeValueAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                RtuiMultiSelectorPopupComponent, selector: "rtui-multi-selector-popup", inputs: ["isMobile", "entitiesToSelect", "appearance", "keyExp", "displayExp", "searchTerm", "navigateButtonTitle", "navigateLink", "isSingleSelection", "isMultiToggleShown", "isSelectAllButtonShown", "loading", "fetching", "useNameBreaking", "isLazyLoad", "isLocalSearch", "pinnedKeys"], outputs: ["submitAction", "closeAction", "searchAction", "scrollAction", "temporarySelectAction"] }, { kind: "component", type: RtuiDynamicSelectorPlaceholderComponent, selector: "rtui-dynamic-selector-placeholder", inputs: ["icon", "description", "buttonTitle", "isButtonShow", "disabled", "isIconOutlined"], outputs: ["submitAction"] }, { kind: "component", type: RtuiDynamicSelectorListActionsComponent, selector: "rtui-dynamic-selector-list-actions", inputs: ["isMobile", "isResetButtonDisabled", "isClearButtonDisabled", "disabled"], outputs: ["resetAction", "clearAction"] }, { kind: "component", type: RtuiDynamicSelectorSelectedListComponent, selector: "rtui-dynamic-selector-selected-list", inputs: ["isMobile", "keyExp", "displayExp", "selectedEntities", "readonlyEntitiesKeys", "isListDraggable", "useNameBreaking", "useTitleCase", "isDeleteButtonShown", "isItemsEditable", "appearance"], outputs: ["deleteFromSelectedAction", "dropAction", "changeValueAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiDynamicSelectorComponent, decorators: [{
             type: Component,
@@ -4219,18 +4277,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 /**
  * Returns a set of the necessary dependency injection providers for managing the UI.
  *
+ * Optionally accepts an application-wide {@link RT_UI_CONFIG UI configuration} with
+ * global theme/design defaults and per-component settings:
+ *
  * ```typescript
  * bootstrapApplication(RootComponent, {
  *   providers: [
- *     provideRtUi()
+ *     provideRtUi({
+ *       global: { theme: 'auto', design: 'custom' },
+ *       components: { button: { design: 'material' } },
+ *     })
  *   ]
  * });
  * ```
  *
  * @publicApi
  */
-function provideRtUi() {
-    return [RtAsideService, RtActionBarService];
+function provideRtUi(config) {
+    return [RtAsideService, RtActionBarService, { provide: RT_UI_CONFIG, useValue: config ?? {} }];
 }
 class RtuiSnackBarComponent {
@@ -4686,6 +4750,8 @@ class RtThemeService {
     #platformService;
     // falls back to the native localStorage when the app does not call provideRtStorage()
     #storage;
+    // app-wide defaults (provideRtUi(config)); a persisted user choice always wins over them
+    #config;
     #theme;
     #colorScheme;
     constructor() {
@@ -4693,6 +4759,8 @@ class RtThemeService {
         this.#platformService = inject(PlatformService);
         // falls back to the native localStorage when the app does not call provideRtStorage()
         this.#storage = inject(LOCAL_STORAGE, { optional: true }) ?? this.#document.defaultView?.localStorage ?? null;
+        // app-wide defaults (provideRtUi(config)); a persisted user choice always wins over them
+        this.#config = inject(RT_UI_CONFIG);
         this.#theme = signal(this.#restore(), { ...(ngDevMode ? { debugName: "#theme" } : {}) });
         this.#colorScheme = signal(this.#restoreScheme(), { ...(ngDevMode ? { debugName: "#colorScheme" } : {}) });
         this.theme = this.#theme.asReadonly();
@@ -4751,18 +4819,20 @@ class RtThemeService {
         }
     }
     #restore() {
+        const fallback = this.#config.global?.theme ?? RT_THEME_ENUM.LIGHT;
         if (!this.#platformService.isPlatformBrowser || !this.#storage) {
-            return RT_THEME_ENUM.LIGHT;
+            return fallback;
         }
         const stored = this.#storage.getItem(RT_THEME_STORAGE_KEY);
-        return Object.values(RT_THEME_ENUM).includes(stored) ? stored : RT_THEME_ENUM.LIGHT;
+        return Object.values(RT_THEME_ENUM).includes(stored) ? stored : fallback;
     }
     #restoreScheme() {
+        const fallback = this.#config.global?.colorScheme ?? null;
         if (!this.#platformService.isPlatformBrowser || !this.#storage) {
-            return null;
+            return fallback;
         }
         const stored = this.#storage.getItem(RT_COLOR_SCHEME_STORAGE_KEY);
-        return stored && stored !== RT_DEFAULT_SCHEME ? stored : null;
+        return stored && stored !== RT_DEFAULT_SCHEME ? stored : fallback;
     }
     #apply(theme) {
         if (!this.#platformService.isPlatformBrowser) {
@@ -4870,5 +4940,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, 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, RT_ACCENT_ROLE_ENUM, RT_COLOR_SCHEME_STORAGE_KEY, RT_DARK_CLASS, RT_DEFAULT_SCHEME, RT_SCHEME_ATTRIBUTE, RT_THEME_ATTRIBUTE, RT_THEME_AUTO_CLASS, RT_THEME_ENUM, RT_THEME_STORAGE_KEY, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtThemeDirective, RtThemeService, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiIconComponent, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, 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 };
+export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, 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, RT_ACCENT_ROLE_ENUM, RT_COLOR_SCHEME_STORAGE_KEY, RT_DARK_CLASS, RT_DEFAULT_SCHEME, RT_SCHEME_ATTRIBUTE, RT_THEME_ATTRIBUTE, RT_THEME_AUTO_CLASS, RT_THEME_ENUM, RT_THEME_STORAGE_KEY, RT_UI_CONFIG, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtThemeDirective, RtThemeService, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiIconComponent, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, 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