@magmonium/one 0.0.27 → 0.0.28

package/fesm2022/{magmonium-one-magmonium-one-CLtPcbRY.mjs → magmonium-one-magmonium-one-Cdqj0dfV.mjs}

@@ -2492,15 +2492,18 @@ const isLoadingComputed = computed(() => loadingSignal().requestCount > 0, ...(n
 const hasErrorComputed = computed(() => !!loadingSignal().error, ...(ngDevMode ? [{ debugName: "hasErrorComputed" }] : /* istanbul ignore next */ []));
 const isCancelledComputed = computed(() => !!loadingSignal().cancelled, ...(ngDevMode ? [{ debugName: "isCancelledComputed" }] : /* istanbul ignore next */ []));
 const loadingActions = {
+    // Synchronous, where stopLoading is deferred. Deferring both collapsed a fast
+    // or cached response into one microtask batch — the count went 0 → 1 → 0 with
+    // no change detection in between, so the overlay never rendered a frame. The
+    // increment lands before the request is even sent; only the decrement needs to
+    // wait for the response it belongs to.
     startLoading: () => {
-        queueMicrotask(() => {
-            loadingSignal.update((state) => ({
-                ...state,
-                requestCount: state.requestCount + 1,
-                error: undefined,
-                cancelled: undefined,
-            }));
-        });
+        loadingSignal.update((state) => ({
+            ...state,
+            requestCount: state.requestCount + 1,
+            error: undefined,
+            cancelled: undefined,
+        }));
     },
     stopLoading: () => {
         queueMicrotask(() => {
@@ -2510,12 +2513,17 @@ const loadingActions = {
             }));
         });
     },
+    // Flags the failure and nothing else. It used to decrement too, which was
+    // harmless only while the failing request had never incremented — now that
+    // every in-flight request starts loading, a decrement here plus the one in
+    // `finalize` would take the count down twice for one request and hide an
+    // overlay another request still needs. start and stop are the only two things
+    // that move the counter.
     setError: () => {
         queueMicrotask(() => {
             loadingSignal.update((state) => ({
                 ...state,
                 error: true,
-                requestCount: Math.max(0, state.requestCount - 1),
             }));
         });
     },
@@ -8554,6 +8562,14 @@ class TextOutputComponent extends ConfigComponent {
     // is what lets it ride on the tag at all.
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     noTranslate = input(undefined, ...(ngDevMode ? [{ debugName: "noTranslate" }] : /* istanbul ignore next */ []));
+    // Values for the message's `<name>` / `<$name>` placeholders. An input and
+    // deliberately not a TextOutputConfig key: an asset is resolved by name and
+    // shared across every Control that names it, and these differ per render
+    // (ADR 0020). The query-string form (`min_length?len=6`) still works and
+    // still loses to this on a shared placeholder, that being the precedence
+    // TranslateService already had. Bind a named member — an object literal in a
+    // template is refused by `no-inline-config` (ADR 0010).
+    params = input(undefined, ...(ngDevMode ? [{ debugName: "params" }] : /* istanbul ignore next */ []));
     resolvedAlign = computed(() => this.align() ?? this.config()?.align ?? 'left', ...(ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []));
     resolvedVariant = computed(() => this.variant() ?? this.config()?.variant, ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
     resolvedColor = computed(() => {
@@ -8586,11 +8602,11 @@ class TextOutputComponent extends ConfigComponent {
     html = computed(() => {
         const label = this.resolvedLabel();
         return this.shouldTranslate()
-            ? this.translateService.translateToHtml(label)
+            ? this.translateService.translateToHtml(label, this.params())
             : this.translateService.toSafeHtml(label);
     }, ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextOutputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: TextOutputComponent, isStandalone: true, selector: "m-text-output", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, noTranslate: { classPropertyName: "noTranslate", publicName: "noTranslate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, host: { properties: { "class.is-design-mode": "isDesignMode", "class.align-left": "resolvedAlign() === \"left\"", "class.align-right": "resolvedAlign() === \"right\"", "class.align-center": "resolvedAlign() === \"center\"", "class.variant-footer": "resolvedVariant() === \"footer\"", "style.--m-text-output-color": "resolvedColor()" }, classAttribute: "m-text-output-host" }, usesInheritance: true, ngImport: i0, template: ` <div class="m-text-output" [innerHTML]="html()"></div> `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host(.is-design-mode){display:block;min-width:1em;min-height:1em}:host(.align-left) .m-text-output{text-align:left}:host(.align-center) .m-text-output{text-align:center}:host(.align-right) .m-text-output{text-align:right}:host{font-size:inherit}:host(.variant-footer){display:block;font-size:.8em;margin-top:.25rem}:host(.variant-footer) .m-text-output{line-height:1.35}.m-text-output{color:var(--m-text-output-color, var(--m-text));font-size:inherit;line-height:1.5}.m-text-output>:first-child{margin-top:0}.m-text-output>:last-child{margin-bottom:0}.m-text-output p,.m-text-output ul,.m-text-output blockquote,.m-text-output h1,.m-text-output h2,.m-text-output h3,.m-text-output h4,.m-text-output h5,.m-text-output h6{margin:0 0 1rem}.m-text-output ul{padding-left:1.5rem;list-style-type:disc;list-style-position:outside}.m-text-output li{margin-bottom:.25rem}.m-text-output li:last-child{margin-bottom:0}.m-text-output a{color:var(--m-text-output-link-color, var(--m-mm));text-decoration:underline}.m-text-output a:hover{text-decoration:none}.m-text-output blockquote{padding-left:1rem;border-left:1px solid var(--m-border);color:var(--m-text-output-color, var(--m-text-secondary))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: TextOutputComponent, isStandalone: true, selector: "m-text-output", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, noTranslate: { classPropertyName: "noTranslate", publicName: "noTranslate", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, host: { properties: { "class.is-design-mode": "isDesignMode", "class.align-left": "resolvedAlign() === \"left\"", "class.align-right": "resolvedAlign() === \"right\"", "class.align-center": "resolvedAlign() === \"center\"", "class.variant-footer": "resolvedVariant() === \"footer\"", "style.--m-text-output-color": "resolvedColor()" }, classAttribute: "m-text-output-host" }, usesInheritance: true, ngImport: i0, template: ` <div class="m-text-output" [innerHTML]="html()"></div> `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host(.is-design-mode){display:block;min-width:1em;min-height:1em}:host(.align-left) .m-text-output{text-align:left}:host(.align-center) .m-text-output{text-align:center}:host(.align-right) .m-text-output{text-align:right}:host{font-size:inherit}:host(.variant-footer){display:block;font-size:.8em;margin-top:.25rem}:host(.variant-footer) .m-text-output{line-height:1.35}.m-text-output{color:var(--m-text-output-color, var(--m-text));font-size:inherit;line-height:1.5}.m-text-output>:first-child{margin-top:0}.m-text-output>:last-child{margin-bottom:0}.m-text-output p,.m-text-output ul,.m-text-output blockquote,.m-text-output h1,.m-text-output h2,.m-text-output h3,.m-text-output h4,.m-text-output h5,.m-text-output h6{margin:0 0 1rem}.m-text-output ul{padding-left:1.5rem;list-style-type:disc;list-style-position:outside}.m-text-output li{margin-bottom:.25rem}.m-text-output li:last-child{margin-bottom:0}.m-text-output a{color:var(--m-text-output-link-color, var(--m-mm));text-decoration:underline}.m-text-output a:hover{text-decoration:none}.m-text-output blockquote{padding-left:1rem;border-left:1px solid var(--m-border);color:var(--m-text-output-color, var(--m-text-secondary))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextOutputComponent, decorators: [{
             type: Component,
@@ -8603,7 +8619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[class.variant-footer]': 'resolvedVariant() === "footer"',
                         '[style.--m-text-output-color]': 'resolvedColor()',
                     }, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host(.is-design-mode){display:block;min-width:1em;min-height:1em}:host(.align-left) .m-text-output{text-align:left}:host(.align-center) .m-text-output{text-align:center}:host(.align-right) .m-text-output{text-align:right}:host{font-size:inherit}:host(.variant-footer){display:block;font-size:.8em;margin-top:.25rem}:host(.variant-footer) .m-text-output{line-height:1.35}.m-text-output{color:var(--m-text-output-color, var(--m-text));font-size:inherit;line-height:1.5}.m-text-output>:first-child{margin-top:0}.m-text-output>:last-child{margin-bottom:0}.m-text-output p,.m-text-output ul,.m-text-output blockquote,.m-text-output h1,.m-text-output h2,.m-text-output h3,.m-text-output h4,.m-text-output h5,.m-text-output h6{margin:0 0 1rem}.m-text-output ul{padding-left:1.5rem;list-style-type:disc;list-style-position:outside}.m-text-output li{margin-bottom:.25rem}.m-text-output li:last-child{margin-bottom:0}.m-text-output a{color:var(--m-text-output-link-color, var(--m-mm));text-decoration:underline}.m-text-output a:hover{text-decoration:none}.m-text-output blockquote{padding-left:1rem;border-left:1px solid var(--m-border);color:var(--m-text-output-color, var(--m-text-secondary))}\n"] }]
-        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], noTranslate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noTranslate", required: false }] }] } });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], noTranslate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noTranslate", required: false }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }] } });
 
 class ClearableInputComponent extends BaseTextInputComponent {
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -8681,7 +8697,7 @@ class ClearableInputComponent extends BaseTextInputComponent {
         />
       }
     }
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){box-shadow:0 0 0 2px color-mix(in srgb,var(--m-input-color, var(--m-mm)) 20%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;padding:var(--m-input-clear-padding, var(--m-text-input-padding, .625em 1.25em ));padding-right:var(--m-input-clear-padding-right, var(--m-text-input-padding-right, 1.25em ))}.input-wrapper.has-value{padding-right:0}.input-wrapper{background:var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)));border-color:var(--m-input-clear-border, var(--m-text-input-border, var(--m-input-color, var(--m-mm))));border-radius:var(--m-input-clear-radius, var(--m-text-input-radius, .4em ));transition:var(--m-input-clear-transition, var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease));min-height:var(--m-input-clear-min-height, var(--m-text-input-min-height, 2.25em ));height:var(--m-input-clear-height, var(--m-text-input-height, 2.25em ))}.input-wrapper:hover{border-color:var(--m-input-clear-hover-border, var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12))));background:var(--m-input-clear-hover-background, var(--m-text-input-hover-background, var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)))))}.input-wrapper:focus-within{border-color:var(--m-input-clear-focus-border, var(--m-text-input-focus-border, var(--m-focus)));box-shadow:var(--m-input-clear-shadow, var(--m-text-input-shadow, none));background:var(--m-input-clear-focus-background, var(--m-text-input-focus-background, var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)))))}.input-wrapper .m-icon{--m-icon-size: var(--m-input-clear-icon-size, var(--m-input-clear-size, 1.1em )) !important;color:var(--m-input-clear-icon-color, var(--m-text-input-icon-color, inherit));opacity:var(--m-input-clear-icon-opacity, var(--m-text-input-icon-opacity, 1));flex-shrink:0;transition:opacity .2s ease}.input-wrapper:focus-within .m-icon{opacity:var(--m-input-clear-icon-focus-opacity, var(--m-text-input-icon-focus-opacity, 1))}.input-wrapper .m-one-button{height:100%;display:inline-flex;align-items:center;justify-content:center;--m-button-size: var(--m-input-clear-size, 1rem) !important;opacity:.5;transition:opacity .2s ease}.input-wrapper .m-one-button:hover{opacity:.8}.input-wrapper input{appearance:none;border:none;outline:none;flex:1;background:transparent;color:var(--m-input-clear-color, var(--m-text-input-color, var(--m-text)));font-family:inherit;font-weight:var(--m-input-clear-font-weight, var(--m-text-input-font-weight, inherit));font-size:var(--m-input-clear-size, 1em);padding:0;caret-color:var(--m-input-clear-caret-color, var(--m-text-input-caret-color, auto))}.input-wrapper input::placeholder{font-weight:var(--m-input-clear-placeholder-weight, var(--m-text-input-placeholder-weight, inherit));opacity:var(--m-input-clear-placeholder-opacity, var(--m-text-input-placeholder-opacity, inherit))}:host(.m-input--underlined) .input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--m-backdrop-border);border-radius:0;min-height:auto;height:auto;transition:border-color .3s ease}:host(.m-input--underlined) .input-wrapper:focus-within{border-bottom-color:var(--m-mm);box-shadow:none}:host(.m-input--underlined) input{font-size:var(--m-input-clear-size, 1.125rem);font-weight:var(--m-input-clear-font-weight, var(--m-text-input-font-weight, 700));color:var(--m-input-clear-color, var(--m-text-input-color, var(--m-text)))}:host(.m-input--underlined) .m-icon{--m-icon-size: var(--m-input-clear-size, 1.125rem) !important}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate"], outputs: ["configChange"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){box-shadow:0 0 0 2px color-mix(in srgb,var(--m-input-color, var(--m-mm)) 20%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;padding:var(--m-input-clear-padding, var(--m-text-input-padding, .625em 1.25em ));padding-right:var(--m-input-clear-padding-right, var(--m-text-input-padding-right, 1.25em ))}.input-wrapper.has-value{padding-right:0}.input-wrapper{background:var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)));border-color:var(--m-input-clear-border, var(--m-text-input-border, var(--m-input-color, var(--m-mm))));border-radius:var(--m-input-clear-radius, var(--m-text-input-radius, .4em ));transition:var(--m-input-clear-transition, var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease));min-height:var(--m-input-clear-min-height, var(--m-text-input-min-height, 2.25em ));height:var(--m-input-clear-height, var(--m-text-input-height, 2.25em ))}.input-wrapper:hover{border-color:var(--m-input-clear-hover-border, var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12))));background:var(--m-input-clear-hover-background, var(--m-text-input-hover-background, var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)))))}.input-wrapper:focus-within{border-color:var(--m-input-clear-focus-border, var(--m-text-input-focus-border, var(--m-focus)));box-shadow:var(--m-input-clear-shadow, var(--m-text-input-shadow, none));background:var(--m-input-clear-focus-background, var(--m-text-input-focus-background, var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)))))}.input-wrapper .m-icon{--m-icon-size: var(--m-input-clear-icon-size, var(--m-input-clear-size, 1.1em )) !important;color:var(--m-input-clear-icon-color, var(--m-text-input-icon-color, inherit));opacity:var(--m-input-clear-icon-opacity, var(--m-text-input-icon-opacity, 1));flex-shrink:0;transition:opacity .2s ease}.input-wrapper:focus-within .m-icon{opacity:var(--m-input-clear-icon-focus-opacity, var(--m-text-input-icon-focus-opacity, 1))}.input-wrapper .m-one-button{height:100%;display:inline-flex;align-items:center;justify-content:center;--m-button-size: var(--m-input-clear-size, 1rem) !important;opacity:.5;transition:opacity .2s ease}.input-wrapper .m-one-button:hover{opacity:.8}.input-wrapper input{appearance:none;border:none;outline:none;flex:1;background:transparent;color:var(--m-input-clear-color, var(--m-text-input-color, var(--m-text)));font-family:inherit;font-weight:var(--m-input-clear-font-weight, var(--m-text-input-font-weight, inherit));font-size:var(--m-input-clear-size, 1em);padding:0;caret-color:var(--m-input-clear-caret-color, var(--m-text-input-caret-color, auto))}.input-wrapper input::placeholder{font-weight:var(--m-input-clear-placeholder-weight, var(--m-text-input-placeholder-weight, inherit));opacity:var(--m-input-clear-placeholder-opacity, var(--m-text-input-placeholder-opacity, inherit))}:host(.m-input--underlined) .input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--m-backdrop-border);border-radius:0;min-height:auto;height:auto;transition:border-color .3s ease}:host(.m-input--underlined) .input-wrapper:focus-within{border-bottom-color:var(--m-mm);box-shadow:none}:host(.m-input--underlined) input{font-size:var(--m-input-clear-size, 1.125rem);font-weight:var(--m-input-clear-font-weight, var(--m-text-input-font-weight, 700));color:var(--m-input-clear-color, var(--m-text-input-color, var(--m-text)))}:host(.m-input--underlined) .m-icon{--m-icon-size: var(--m-input-clear-size, 1.125rem) !important}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], outputs: ["configChange"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClearableInputComponent, decorators: [{
             type: Component,
@@ -12191,7 +12207,7 @@ class TextInputComponent extends BaseTextInputComponent {
         }
       }
     }
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){box-shadow:0 0 0 2px color-mix(in srgb,var(--m-input-color, var(--m-mm)) 20%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;padding-left:var(--m-text-input-padding-left, calc(var(--input-size, 1em) * .5 * .7));padding-right:var(--m-text-input-padding-right, calc(var(--input-size, 1em) * .5 * .7));background:var(--m-text-input-background, var(--m-background));border-color:var(--m-text-input-border, var(--m-input-color, var(--m-mm)));transition:var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease)}.input-wrapper:hover{border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)));background:var(--m-text-input-hover-background, var(--m-text-input-background, var(--m-background)))}.input-wrapper:focus-within{border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none);background:var(--m-text-input-focus-background, var(--m-text-input-background, var(--m-background)))}.input-wrapper .m-icon{--m-icon-size: 1.1em !important;opacity:var(--m-text-input-icon-opacity, 1);transition:opacity .2s ease}.input-wrapper:focus-within .m-icon{opacity:var(--m-text-input-icon-focus-opacity, var(--m-text-input-icon-opacity, 1))}.input-wrapper input{appearance:none;color:var(--m-text-input-color, var(--m-text));font-weight:var(--m-text-input-font-weight, inherit);font-size:var(--input-size, 1em)}.input-wrapper input::placeholder{font-weight:var(--m-text-input-placeholder-weight, inherit);opacity:var(--m-text-input-placeholder-opacity, inherit)}.input-wrapper .input-prefix,.input-wrapper .input-suffix{font-size:.9rem;font-weight:700;color:var(--m-text-tertiary);-webkit-user-select:none;user-select:none;display:flex;align-items:center;flex-shrink:0}.input-wrapper .input-prefix{margin-right:.25rem}.input-wrapper .input-suffix{margin-left:.25rem}:host(.m-input--underlined) .input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--m-backdrop-border);border-radius:0;padding:.5rem 0;min-height:auto;height:auto;transition:border-color .3s ease}:host(.m-input--underlined) .input-wrapper:focus-within{border-bottom-color:var(--m-mm);box-shadow:none}:host(.m-input--underlined) input{font-size:1.125rem;font-weight:700;color:var(--m-text)}:host(.m-input--underlined) .input-prefix,:host(.m-input--underlined) .input-suffix{color:var(--m-mm);font-weight:800;font-size:1rem}:host(.m-input--underlined) .input-indicator{display:flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;margin-left:.375em}:host(.m-input--underlined) .input-indicator--available{color:var(--m-success, #10b981)}:host(.m-input--underlined) .input-indicator .spinner{width:.875rem;height:.875rem;border:2px solid var(--m-border, rgba(255, 255, 255, .1));border-top-color:var(--m-focus, #14b8a6);border-radius:50%;animation:m-spin .8s linear infinite}@keyframes m-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate"], outputs: ["configChange"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){box-shadow:0 0 0 2px color-mix(in srgb,var(--m-input-color, var(--m-mm)) 20%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;padding-left:var(--m-text-input-padding-left, calc(var(--input-size, 1em) * .5 * .7));padding-right:var(--m-text-input-padding-right, calc(var(--input-size, 1em) * .5 * .7));background:var(--m-text-input-background, var(--m-background));border-color:var(--m-text-input-border, var(--m-input-color, var(--m-mm)));transition:var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease)}.input-wrapper:hover{border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)));background:var(--m-text-input-hover-background, var(--m-text-input-background, var(--m-background)))}.input-wrapper:focus-within{border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none);background:var(--m-text-input-focus-background, var(--m-text-input-background, var(--m-background)))}.input-wrapper .m-icon{--m-icon-size: 1.1em !important;opacity:var(--m-text-input-icon-opacity, 1);transition:opacity .2s ease}.input-wrapper:focus-within .m-icon{opacity:var(--m-text-input-icon-focus-opacity, var(--m-text-input-icon-opacity, 1))}.input-wrapper input{appearance:none;color:var(--m-text-input-color, var(--m-text));font-weight:var(--m-text-input-font-weight, inherit);font-size:var(--input-size, 1em)}.input-wrapper input::placeholder{font-weight:var(--m-text-input-placeholder-weight, inherit);opacity:var(--m-text-input-placeholder-opacity, inherit)}.input-wrapper .input-prefix,.input-wrapper .input-suffix{font-size:.9rem;font-weight:700;color:var(--m-text-tertiary);-webkit-user-select:none;user-select:none;display:flex;align-items:center;flex-shrink:0}.input-wrapper .input-prefix{margin-right:.25rem}.input-wrapper .input-suffix{margin-left:.25rem}:host(.m-input--underlined) .input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--m-backdrop-border);border-radius:0;padding:.5rem 0;min-height:auto;height:auto;transition:border-color .3s ease}:host(.m-input--underlined) .input-wrapper:focus-within{border-bottom-color:var(--m-mm);box-shadow:none}:host(.m-input--underlined) input{font-size:1.125rem;font-weight:700;color:var(--m-text)}:host(.m-input--underlined) .input-prefix,:host(.m-input--underlined) .input-suffix{color:var(--m-mm);font-weight:800;font-size:1rem}:host(.m-input--underlined) .input-indicator{display:flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;margin-left:.375em}:host(.m-input--underlined) .input-indicator--available{color:var(--m-success, #10b981)}:host(.m-input--underlined) .input-indicator .spinner{width:.875rem;height:.875rem;border:2px solid var(--m-border, rgba(255, 255, 255, .1));border-top-color:var(--m-focus, #14b8a6);border-radius:50%;animation:m-spin .8s linear infinite}@keyframes m-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], outputs: ["configChange"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
@@ -12317,7 +12333,7 @@ class TextareaInputComponent extends BaseTextInputComponent {
         }
       }
     }
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;--m-textarea-background: var(--m-textarea-input-background, var(--m-background));--m-textarea-padding: var(--m-textarea-input-padding, .375em 1.25em );--m-textarea-shadow: var(--m-textarea-input-shadow, none)}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){box-shadow:0 0 0 2px color-mix(in srgb,var(--m-input-color, var(--m-mm)) 20%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;align-items:flex-start;position:relative;min-height:2em;height:auto;padding:var(--m-textarea-padding);gap:.375em;background:var(--m-textarea-background);border:var(--m-textarea-input-border, 2px solid var(--m-input-color, var(--m-mm)));box-shadow:var(--m-textarea-shadow)}.input-wrapper textarea{appearance:none;border:none;outline:none;flex:1;resize:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:1em;padding:0;line-height:1.5}.input-wrapper textarea:focus{box-shadow:none;background:transparent}.input-wrapper .m-icon{margin-top:.125rem;display:flex;align-items:center;justify-content:center;--m-icon-size: 1.1em !important}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate"], outputs: ["configChange"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "directive", type: AutosizeDirective, selector: "[mAutosize]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;--m-textarea-background: var(--m-textarea-input-background, var(--m-background));--m-textarea-padding: var(--m-textarea-input-padding, .375em 1.25em );--m-textarea-shadow: var(--m-textarea-input-shadow, none)}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){box-shadow:0 0 0 2px color-mix(in srgb,var(--m-input-color, var(--m-mm)) 20%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;align-items:flex-start;position:relative;min-height:2em;height:auto;padding:var(--m-textarea-padding);gap:.375em;background:var(--m-textarea-background);border:var(--m-textarea-input-border, 2px solid var(--m-input-color, var(--m-mm)));box-shadow:var(--m-textarea-shadow)}.input-wrapper textarea{appearance:none;border:none;outline:none;flex:1;resize:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:1em;padding:0;line-height:1.5}.input-wrapper textarea:focus{box-shadow:none;background:transparent}.input-wrapper .m-icon{margin-top:.125rem;display:flex;align-items:center;justify-content:center;--m-icon-size: 1.1em !important}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], outputs: ["configChange"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "directive", type: AutosizeDirective, selector: "[mAutosize]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextareaInputComponent, decorators: [{
             type: Component,
@@ -13269,7 +13285,7 @@ class DateInputComponent extends BaseTextInputComponent {
         }
       }
     }
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){box-shadow:0 0 0 2px color-mix(in srgb,var(--m-input-color, var(--m-mm)) 20%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;background:var(--m-date-input-background, var(--m-background));border-color:var(--m-date-input-border, var(--m-input-color, var(--m-mm)))}.input-wrapper:hover{border-color:var(--m-date-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)))}.input-wrapper input{appearance:none;font-size:1em}.input-wrapper input::placeholder{opacity:.5;font-style:italic}.input-wrapper>m-button,.input-wrapper>m-one-button{height:100%;display:flex;align-items:center;justify-content:center;--m-button-size: 1em !important}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate"], outputs: ["configChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "directive", type: SelectorDirective, selector: "[mSelector]", inputs: ["mSelector", "disabled"], outputs: ["opened", "closed"], exportAs: ["mSelector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){box-shadow:0 0 0 2px color-mix(in srgb,var(--m-input-color, var(--m-mm)) 20%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;background:var(--m-date-input-background, var(--m-background));border-color:var(--m-date-input-border, var(--m-input-color, var(--m-mm)))}.input-wrapper:hover{border-color:var(--m-date-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)))}.input-wrapper input{appearance:none;font-size:1em}.input-wrapper input::placeholder{opacity:.5;font-style:italic}.input-wrapper>m-button,.input-wrapper>m-one-button{height:100%;display:flex;align-items:center;justify-content:center;--m-button-size: 1em !important}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], outputs: ["configChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "directive", type: SelectorDirective, selector: "[mSelector]", inputs: ["mSelector", "disabled"], outputs: ["opened", "closed"], exportAs: ["mSelector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
@@ -13450,7 +13466,7 @@ class CheckboxInputComponent extends BaseCheckboxInputComponent {
         }
       }
     }
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:inline-block}.checkbox{--m-checkbox-input-color: var(--m-input-color, var(--m-mm));display:inline-flex;align-items:center;gap:calc(var(--input-size, 1em) * .375);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding:2px}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;width:var(--input-size, 1em);height:var(--input-size, 1em);background-color:rgba(var(--m-checkbox-bg-rgb, 255, 255, 255),.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:calc(var(--input-size, 1em) * .4);border:max(1px,var(--input-size, 1em) * .0625) solid color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 70%,transparent 30%);cursor:pointer;outline:none;box-sizing:border-box;flex-shrink:0;margin:2px;box-shadow:0 0 0 1px color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 15%,transparent 85%),0 2px 12px -3px #0000001a;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .2s ease,transform .2s ease;will-change:background-color,box-shadow}.checkbox input[type=checkbox]:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0) rotate(-45deg);width:calc(var(--input-size, 1em) * .5);height:calc(var(--input-size, 1em) * .25);border-left:calc(var(--input-size, 1em) * .12) solid var(--m-checkbox-input-color, var(--m-mm));border-bottom:calc(var(--input-size, 1em) * .12) solid var(--m-checkbox-input-color, var(--m-mm));transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .15s ease;will-change:transform;box-shadow:0 calc(var(--input-size, 1em) / 10) calc(var(--input-size, 1em) / 6) #0003,0 calc(var(--input-size, 1em) / 20) calc(var(--input-size, 1em) / 12) #0000001a}.checkbox{--m-label-margin: 0}.checkbox input[type=checkbox]:hover:not(:disabled){border-color:color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 80%,transparent 20%);transform:translateY(-1px);box-shadow:0 4px 15px -3px #00000026,0 0 0 1px color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 25%,transparent 75%)}.checkbox input[type=checkbox]:focus{box-shadow:0 0 0 calc(var(--input-size, 1em) / 5) color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 25%,transparent 75%),0 2px 12px -3px #0000001a;outline:none}.checkbox input[type=checkbox]:active:not(:disabled):after{transform:translate(-50%,-50%) scale(.85) rotate(-45deg)}.checkbox input[type=checkbox]:checked{border-color:var(--m-checkbox-input-color, var(--m-mm));background-color:var(--m-checkbox-input-color, var(--m-mm));box-shadow:0 4px 15px -3px color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 40%,transparent 60%);transform:scale(1.05)}.checkbox input[type=checkbox]:checked:after{transform:translate(-50%,-60%) scale(1) rotate(-45deg);border-color:#fff}.checkbox input[type=checkbox]:checked:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 90%,black 10%);border-color:color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 90%,black 10%)}.checkbox input[type=checkbox]:checked:active:not(:disabled):after{transform:translate(-50%,-60%) scale(.85) rotate(-45deg)}.checkbox input[type=checkbox]:checked:focus{box-shadow:0 0 0 calc(var(--input-size, 1em) / 5) color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 25%,transparent 75%)}.checkbox input[type=checkbox]:indeterminate{border-color:var(--m-checkbox-input-color, var(--m-mm));background-color:var(--m-checkbox-input-color, var(--m-mm))}.checkbox input[type=checkbox]:indeterminate:after{transform:translate(-50%,-50%) scale(1) rotate(0);width:calc(var(--input-size, 1em) * .5);height:0;border-left:none;border-bottom:calc(var(--input-size, 1em) * .12) solid white}.checkbox input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed;border-color:color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 20%,transparent 80%)}.checkbox input[type=checkbox]:disabled:checked:after{opacity:.5}.checkbox{min-height:var(--input-size, 1em)}.radio{display:inline-flex;align-items:center;gap:.375em;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.radio input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;margin:0;padding:0;position:relative;width:1em;height:1em;flex-shrink:0;box-sizing:border-box;background-color:transparent;border-radius:50%;border:max(1px,1em * .0625) solid color-mix(in srgb,var(--m-input-wrapper-color, #4169e1) 40%,transparent 60%);cursor:pointer;outline:none;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .2s ease;will-change:background-color,box-shadow,border-color}.radio input[type=radio]:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:.5em;height:.5em;background-color:var(--m-input-wrapper-color, #4169e1);border-radius:50%;transition:transform .25s cubic-bezier(.4,0,.2,1),background-color .2s ease;will-change:transform}.radio{--m-label-margin: 0}.radio input[type=radio]:hover:not(:disabled){border-color:color-mix(in srgb,var(--m-input-wrapper-color, #4169e1) 60%,transparent 40%)}.radio input[type=radio]:focus{box-shadow:0 0 0 .2em color-mix(in srgb,var(--m-input-wrapper-color, #4169e1) 20%,transparent 80%);outline:none}.radio input[type=radio]:active:not(:disabled):after{transform:translate(-50%,-50%) scale(.85)}.radio input[type=radio]:checked{border-color:var(--m-input-wrapper-color, #4169e1)}.radio input[type=radio]:checked:after{transform:translate(-50%,-50%) scale(1)}.radio input[type=radio]:checked:hover:not(:disabled){border-color:color-mix(in srgb,var(--m-input-wrapper-color, #4169e1) 90%,black 10%)}.radio input[type=radio]:checked:hover:not(:disabled):after{background-color:color-mix(in srgb,var(--m-input-wrapper-color, #4169e1) 90%,black 10%)}.radio input[type=radio]:checked:active:not(:disabled):after{transform:translate(-50%,-50%) scale(.85)}.radio input[type=radio]:checked:focus{box-shadow:0 0 0 .2em color-mix(in srgb,var(--m-input-wrapper-color, #4169e1) 25%,transparent 75%)}.radio input[type=radio]:disabled{opacity:.5;cursor:not-allowed;border-color:color-mix(in srgb,var(--m-input-wrapper-color, #4169e1) 20%,transparent 80%)}.radio input[type=radio]:disabled:checked:after{opacity:.5}.radio{min-height:var(--input-size, 1em)}:host-context(.section-form-item__input),:host-context(.m-dynamic-input){display:contents}:host-context(.section-form-item__input) .checkbox,:host-context(.m-dynamic-input) .checkbox{display:flex;align-items:center;width:100%;height:calc(var(--input-size, 1em) * 1.5);min-height:calc(var(--input-size, 1em) * 1.5);padding-block:calc(var(--input-size, 1em) * .125);padding-inline:0;background:transparent;border:none;box-shadow:none;--m-label-margin: 0;--m-label-font-size: var(--input-size, 1em);gap:var(--m-checkbox-input-gap, .5em )}:host-context(.section-form-item__input) .checkbox input[type=checkbox],:host-context(.m-dynamic-input) .checkbox input[type=checkbox]{flex:0 0 auto;margin:0;transform:none;width:var(--input-size, 1em);height:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-style:solid;border-color:var(--m-text-input-border, var(--m-input-color, var(--m-mm)));border-radius:var(--m-input-radius, 4px);background:var(--m-checkbox-square-background, var(--m-background));box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:after,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:after{width:calc(var(--input-size, 1em) * .5);height:calc(var(--input-size, 1em) * .25);border-color:var(--m-input-color, var(--m-mm))}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:hover:not(:disabled),:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:hover:not(:disabled){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)));box-shadow:none;transform:none}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:checked,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:checked{border-color:var(--m-input-color, var(--m-mm));background-color:var(--m-input-color, var(--m-mm));box-shadow:none;transform:none}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:checked:after,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:checked:after{border-color:var(--m-background)}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate"], outputs: ["configChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:inline-block}.checkbox{--m-checkbox-input-color: var(--m-input-color, var(--m-mm));display:inline-flex;align-items:center;gap:calc(var(--input-size, 1em) * .375);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding:2px}.checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;width:var(--input-size, 1em);height:var(--input-size, 1em);background-color:rgba(var(--m-checkbox-bg-rgb, 255, 255, 255),.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:calc(var(--input-size, 1em) * .4);border:max(1px,var(--input-size, 1em) * .0625) solid color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 70%,transparent 30%);cursor:pointer;outline:none;box-sizing:border-box;flex-shrink:0;margin:2px;box-shadow:0 0 0 1px color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 15%,transparent 85%),0 2px 12px -3px #0000001a;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .2s ease,transform .2s ease;will-change:background-color,box-shadow}.checkbox input[type=checkbox]:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0) rotate(-45deg);width:calc(var(--input-size, 1em) * .5);height:calc(var(--input-size, 1em) * .25);border-left:calc(var(--input-size, 1em) * .12) solid var(--m-checkbox-input-color, var(--m-mm));border-bottom:calc(var(--input-size, 1em) * .12) solid var(--m-checkbox-input-color, var(--m-mm));transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .15s ease;will-change:transform;box-shadow:0 calc(var(--input-size, 1em) / 10) calc(var(--input-size, 1em) / 6) #0003,0 calc(var(--input-size, 1em) / 20) calc(var(--input-size, 1em) / 12) #0000001a}.checkbox{--m-label-margin: 0}.checkbox input[type=checkbox]:hover:not(:disabled){border-color:color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 80%,transparent 20%);transform:translateY(-1px);box-shadow:0 4px 15px -3px #00000026,0 0 0 1px color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 25%,transparent 75%)}.checkbox input[type=checkbox]:focus{box-shadow:0 0 0 calc(var(--input-size, 1em) / 5) color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 25%,transparent 75%),0 2px 12px -3px #0000001a;outline:none}.checkbox input[type=checkbox]:active:not(:disabled):after{transform:translate(-50%,-50%) scale(.85) rotate(-45deg)}.checkbox input[type=checkbox]:checked{border-color:var(--m-checkbox-input-color, var(--m-mm));background-color:var(--m-checkbox-input-color, var(--m-mm));box-shadow:0 4px 15px -3px color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 40%,transparent 60%);transform:scale(1.05)}.checkbox input[type=checkbox]:checked:after{transform:translate(-50%,-60%) scale(1) rotate(-45deg);border-color:#fff}.checkbox input[type=checkbox]:checked:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 90%,black 10%);border-color:color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 90%,black 10%)}.checkbox input[type=checkbox]:checked:active:not(:disabled):after{transform:translate(-50%,-60%) scale(.85) rotate(-45deg)}.checkbox input[type=checkbox]:checked:focus{box-shadow:0 0 0 calc(var(--input-size, 1em) / 5) color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 25%,transparent 75%)}.checkbox input[type=checkbox]:indeterminate{border-color:var(--m-checkbox-input-color, var(--m-mm));background-color:var(--m-checkbox-input-color, var(--m-mm))}.checkbox input[type=checkbox]:indeterminate:after{transform:translate(-50%,-50%) scale(1) rotate(0);width:calc(var(--input-size, 1em) * .5);height:0;border-left:none;border-bottom:calc(var(--input-size, 1em) * .12) solid white}.checkbox input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed;border-color:color-mix(in srgb,var(--m-checkbox-input-color, var(--m-mm)) 20%,transparent 80%)}.checkbox input[type=checkbox]:disabled:checked:after{opacity:.5}.checkbox{min-height:var(--input-size, 1em)}.radio{display:inline-flex;align-items:center;gap:.375em;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.radio input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;margin:0;padding:0;position:relative;width:1em;height:1em;flex-shrink:0;box-sizing:border-box;background-color:transparent;border-radius:50%;border:max(1px,1em * .0625) solid color-mix(in srgb,var(--m-input-wrapper-color, #4169e1) 40%,transparent 60%);cursor:pointer;outline:none;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .2s ease;will-change:background-color,box-shadow,border-color}.radio input[type=radio]:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:.5em;height:.5em;background-color:var(--m-input-wrapper-color, #4169e1);border-radius:50%;transition:transform .25s cubic-bezier(.4,0,.2,1),background-color .2s ease;will-change:transform}.radio{--m-label-margin: 0}.radio input[type=radio]:hover:not(:disabled){border-color:color-mix(in srgb,var(--m-input-wrapper-color, #4169e1) 60%,transparent 40%)}.radio input[type=radio]:focus{box-shadow:0 0 0 .2em color-mix(in srgb,var(--m-input-wrapper-color, #4169e1) 20%,transparent 80%);outline:none}.radio input[type=radio]:active:not(:disabled):after{transform:translate(-50%,-50%) scale(.85)}.radio input[type=radio]:checked{border-color:var(--m-input-wrapper-color, #4169e1)}.radio input[type=radio]:checked:after{transform:translate(-50%,-50%) scale(1)}.radio input[type=radio]:checked:hover:not(:disabled){border-color:color-mix(in srgb,var(--m-input-wrapper-color, #4169e1) 90%,black 10%)}.radio input[type=radio]:checked:hover:not(:disabled):after{background-color:color-mix(in srgb,var(--m-input-wrapper-color, #4169e1) 90%,black 10%)}.radio input[type=radio]:checked:active:not(:disabled):after{transform:translate(-50%,-50%) scale(.85)}.radio input[type=radio]:checked:focus{box-shadow:0 0 0 .2em color-mix(in srgb,var(--m-input-wrapper-color, #4169e1) 25%,transparent 75%)}.radio input[type=radio]:disabled{opacity:.5;cursor:not-allowed;border-color:color-mix(in srgb,var(--m-input-wrapper-color, #4169e1) 20%,transparent 80%)}.radio input[type=radio]:disabled:checked:after{opacity:.5}.radio{min-height:var(--input-size, 1em)}:host-context(.section-form-item__input),:host-context(.m-dynamic-input){display:contents}:host-context(.section-form-item__input) .checkbox,:host-context(.m-dynamic-input) .checkbox{display:flex;align-items:center;width:100%;height:calc(var(--input-size, 1em) * 1.5);min-height:calc(var(--input-size, 1em) * 1.5);padding-block:calc(var(--input-size, 1em) * .125);padding-inline:0;background:transparent;border:none;box-shadow:none;--m-label-margin: 0;--m-label-font-size: var(--input-size, 1em);gap:var(--m-checkbox-input-gap, .5em )}:host-context(.section-form-item__input) .checkbox input[type=checkbox],:host-context(.m-dynamic-input) .checkbox input[type=checkbox]{flex:0 0 auto;margin:0;transform:none;width:var(--input-size, 1em);height:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-style:solid;border-color:var(--m-text-input-border, var(--m-input-color, var(--m-mm)));border-radius:var(--m-input-radius, 4px);background:var(--m-checkbox-square-background, var(--m-background));box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:after,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:after{width:calc(var(--input-size, 1em) * .5);height:calc(var(--input-size, 1em) * .25);border-color:var(--m-input-color, var(--m-mm))}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:hover:not(:disabled),:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:hover:not(:disabled){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)));box-shadow:none;transform:none}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:checked,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:checked{border-color:var(--m-input-color, var(--m-mm));background-color:var(--m-input-color, var(--m-mm));box-shadow:none;transform:none}:host-context(.section-form-item__input) .checkbox input[type=checkbox]:checked:after,:host-context(.m-dynamic-input) .checkbox input[type=checkbox]:checked:after{border-color:var(--m-background)}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], outputs: ["configChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxInputComponent, decorators: [{
             type: Component,
@@ -13597,7 +13613,11 @@ class DropdownBoxComponent {
               (click)="$event.preventDefault()"
             />
           }
-          {{ option.label | translate }}
+          @if (option.noTranslate) {
+            {{ option.label }}
+          } @else {
+            {{ option.label | translate }}
+          }
         </li>
       } @empty {
         <li class="dropdown-box__empty">
@@ -13633,7 +13653,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
               (click)="$event.preventDefault()"
             />
           }
-          {{ option.label | translate }}
+          @if (option.noTranslate) {
+            {{ option.label }}
+          } @else {
+            {{ option.label | translate }}
+          }
         </li>
       } @empty {
         <li class="dropdown-box__empty">
@@ -13806,12 +13830,20 @@ class DropdownInputComponent extends BaseInputComponent {
     }, ...(ngDevMode ? [{ debugName: "dropdownOptions" }] : /* istanbul ignore next */ []));
     translateService = inject(TranslateService);
     assetOptions = assetOptions(() => this.config()?.optionsAsset);
+    /** An option's text: authored as it stands, a key translated. */
+    optionLabel = (option) => {
+        if (!option?.label)
+            return '';
+        return option.noTranslate
+            ? option.label
+            : this.translateService.translate(option.label);
+    };
     filteredOptions = computed(() => {
         const search = this.searchTerm().toLowerCase();
         if (!search)
             return this.dropdownOptions();
         return this.dropdownOptions().filter((o) => {
-            const label = this.translateService.translate(o.label).toLowerCase();
+            const label = this.optionLabel(o).toLowerCase();
             return label.includes(search) || o.value.toLowerCase().includes(search);
         });
     }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
@@ -13824,8 +13856,7 @@ class DropdownInputComponent extends BaseInputComponent {
                 if (val.length === 0)
                     return '';
                 if (val.length === 1) {
-                    const option = this.dropdownOptions().find((o) => o.value === val[0]);
-                    return option?.label ? this.translateService.translate(option.label) : '';
+                    return this.optionLabel(this.dropdownOptions().find((o) => o.value === val[0]));
                 }
                 const translation = this.translateService.translate(`selected?count=${val.length}`);
                 return translation.includes('selected') ? `${val.length} Selected` : translation;
@@ -13833,8 +13864,7 @@ class DropdownInputComponent extends BaseInputComponent {
             return '';
         }
         else {
-            const option = this.dropdownOptions().find((o) => o.value === val);
-            return option?.label ? this.translateService.translate(option.label) : '';
+            return this.optionLabel(this.dropdownOptions().find((o) => o.value === val));
         }
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     placeholderText = computed(() => {
@@ -13844,17 +13874,16 @@ class DropdownInputComponent extends BaseInputComponent {
             if (this.isMultiselect()) {
                 if (Array.isArray(val) && val.length > 0) {
                     if (val.length === 1) {
-                        const option = this.dropdownOptions().find((o) => o.value === val[0]);
-                        return option?.label ? this.translateService.translate(option.label) : '';
+                        return this.optionLabel(this.dropdownOptions().find((o) => o.value === val[0]));
                     }
                     const translation = this.translateService.translate(`selected?count=${val.length}`);
                     return translation.includes('selected') ? `${val.length} Selected` : translation;
                 }
             }
             else {
-                const option = this.dropdownOptions().find((o) => o.value === val);
-                if (option?.label)
-                    return this.translateService.translate(option.label);
+                const label = this.optionLabel(this.dropdownOptions().find((o) => o.value === val));
+                if (label)
+                    return label;
             }
         }
         return config?.placeholder
@@ -13960,7 +13989,7 @@ class DropdownInputComponent extends BaseInputComponent {
         }
       }
     }
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.trigger-wrap{position:relative;--m-text-input-padding-right: 2.25em }.trigger-wrap m-button{position:absolute;right:0;top:0;bottom:0;--m-button-size: 1em !important}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate"], outputs: ["configChange"] }, { kind: "component", type: TextInputComponent, selector: "m-text-input", inputs: ["value", "config", "required", "disabled", "invalid", "touched", "focused", "errors", "hideErrors"], outputs: ["valueChange", "touchedChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "directive", type: SelectorDirective, selector: "[mSelector]", inputs: ["mSelector", "disabled"], outputs: ["opened", "closed"], exportAs: ["mSelector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.trigger-wrap{position:relative;--m-text-input-padding-right: 2.25em }.trigger-wrap m-button{position:absolute;right:0;top:0;bottom:0;--m-button-size: 1em !important}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], outputs: ["configChange"] }, { kind: "component", type: TextInputComponent, selector: "m-text-input", inputs: ["value", "config", "required", "disabled", "invalid", "touched", "focused", "errors", "hideErrors"], outputs: ["valueChange", "touchedChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "directive", type: SelectorDirective, selector: "[mSelector]", inputs: ["mSelector", "disabled"], outputs: ["opened", "closed"], exportAs: ["mSelector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DropdownInputComponent, decorators: [{
             type: Component,
@@ -14922,7 +14951,7 @@ class ColorPickerInputComponent extends BaseTextInputComponent {
         }
       }
     }
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){box-shadow:0 0 0 2px color-mix(in srgb,var(--m-input-color, var(--m-mm)) 20%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;gap:.5rem;height:2.5rem;min-height:2.5rem;padding:0 .75rem}.input-wrapper .m-icon{--m-icon-size: 1rem !important}.input-wrapper .m-button{--m-button-size: 1rem !important}.color-picker-trigger{appearance:none;border:none;outline:none;flex:1;height:100%;background:transparent;color:var(--m-text);font-family:inherit;font-size:1rem;padding:0}.color-picker-trigger:focus{border-color:transparent;box-shadow:none}.color-picker-trigger.has-icon{padding-left:0}.color-picker-trigger.error{color:var(--m-error)}.color-picker-trigger--open{color:var(--m-focus)}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate"], outputs: ["configChange"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "directive", type: SelectorDirective, selector: "[mSelector]", inputs: ["mSelector", "disabled"], outputs: ["opened", "closed"], exportAs: ["mSelector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.input-wrapper{display:flex;align-items:center;background:var(--m-background);height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 2px);border-radius:var(--m-input-radius, 4px);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){box-shadow:0 0 0 2px color-mix(in srgb,var(--m-input-color, var(--m-mm)) 20%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(.error){border-color:var(--m-error);box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);box-shadow:none}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;gap:.5rem;height:2.5rem;min-height:2.5rem;padding:0 .75rem}.input-wrapper .m-icon{--m-icon-size: 1rem !important}.input-wrapper .m-button{--m-button-size: 1rem !important}.color-picker-trigger{appearance:none;border:none;outline:none;flex:1;height:100%;background:transparent;color:var(--m-text);font-family:inherit;font-size:1rem;padding:0}.color-picker-trigger:focus{border-color:transparent;box-shadow:none}.color-picker-trigger.has-icon{padding-left:0}.color-picker-trigger.error{color:var(--m-error)}.color-picker-trigger--open{color:var(--m-focus)}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], outputs: ["configChange"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "directive", type: SelectorDirective, selector: "[mSelector]", inputs: ["mSelector", "disabled"], outputs: ["opened", "closed"], exportAs: ["mSelector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ColorPickerInputComponent, decorators: [{
             type: Component,
@@ -15047,6 +15076,15 @@ class WrapperInputComponent extends ConfigComponent {
     dir = input(...(ngDevMode ? [undefined, { debugName: "dir" }] : /* istanbul ignore next */ []));
     element = input(...(ngDevMode ? [undefined, { debugName: "element" }] : /* istanbul ignore next */ []));
     data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : /* istanbul ignore next */ []));
+    // A card body written as an `ng-template` rather than mounted as a class.
+    // Rides as an input because this Field is created dynamically — a
+    // ViewContainerRef mounts a component, so there are no tags to project
+    // between and the host hands its `#ref` across instead.
+    template = input(...(ngDevMode ? [undefined, { debugName: "template" }] : /* istanbul ignore next */ []));
+    // …and an `ng-template` written between this tag's own is the same body, so
+    // it is picked up here and handed down as that input.
+    projectedTemplate = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "projectedTemplate" }] : /* istanbul ignore next */ []));
+    cardTemplate = computed(() => this.template() ?? this.projectedTemplate(), ...(ngDevMode ? [{ debugName: "cardTemplate" }] : /* istanbul ignore next */ []));
     aclResolver = input(undefined, ...(ngDevMode ? [{ debugName: "aclResolver" }] : /* istanbul ignore next */ []));
     formValues = input(undefined, ...(ngDevMode ? [{ debugName: "formValues" }] : /* istanbul ignore next */ []));
     act = output();
@@ -15244,7 +15282,7 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.TOGGLE: {
-                const { ToggleInputComponent } = await import('./magmonium-one-toggle-x8W-rkDZ.mjs');
+                const { ToggleInputComponent } = await import('./magmonium-one-toggle-CnomBrUJ.mjs');
                 this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                 break;
             }
@@ -15256,12 +15294,12 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.PASSWORD: {
-                const { PasswordInputComponent } = await import('./magmonium-one-password-_GRSnhns.mjs');
+                const { PasswordInputComponent } = await import('./magmonium-one-password-Bkg2rz6j.mjs');
                 this.createDynamicComponent(seq, PasswordInputComponent);
                 break;
             }
             case InputType.OTP: {
-                const { OtpInputComponent } = await import('./magmonium-one-otp-WercZBii.mjs');
+                const { OtpInputComponent } = await import('./magmonium-one-otp-D78eK88b.mjs');
                 this.createDynamicComponent(seq, OtpInputComponent);
                 break;
             }
@@ -15320,6 +15358,7 @@ class WrapperInputComponent extends ConfigComponent {
                 const { SelectableCardInputComponent } = await Promise.resolve().then(function () { return selectableCard; });
                 this.createDynamicComponent(seq, SelectableCardInputComponent, [
                     inputBinding('element', this.element),
+                    inputBinding('template', this.cardTemplate),
                     inputBinding('data', this.data),
                     inputBinding('options', this.options),
                 ]);
@@ -15346,7 +15385,7 @@ class WrapperInputComponent extends ConfigComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: WrapperInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: WrapperInputComponent, isStandalone: true, selector: "m-input-wrapper", inputs: { remote: { classPropertyName: "remote", publicName: "remote", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, aclResolver: { classPropertyName: "aclResolver", publicName: "aclResolver", isSignal: true, isRequired: false, transformFunction: null }, formValues: { classPropertyName: "formValues", publicName: "formValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", state: "stateChange", act: "act", fieldKey: "fieldKey" }, host: { properties: { "style.display": "isVisible() ? null : \"none\"" } }, viewQueries: [{ propertyName: "dynamicInput", first: true, predicate: ["dynamicInput"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: WrapperInputComponent, isStandalone: true, selector: "m-input-wrapper", inputs: { remote: { classPropertyName: "remote", publicName: "remote", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, aclResolver: { classPropertyName: "aclResolver", publicName: "aclResolver", isSignal: true, isRequired: false, transformFunction: null }, formValues: { classPropertyName: "formValues", publicName: "formValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", state: "stateChange", act: "act", fieldKey: "fieldKey" }, host: { properties: { "style.display": "isVisible() ? null : \"none\"" } }, queries: [{ propertyName: "projectedTemplate", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dynamicInput", first: true, predicate: ["dynamicInput"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     @if (isVisible()) {
       <div
         class="m-input-wrapper"
@@ -15409,7 +15448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       </div>
     }
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.m-input-wrapper{display:flex;align-items:flex-end;gap:calc(var(--input-size, 1em) * .375);width:100%}.m-input-wrapper--has-label{padding-top:var(--m-input-wrapper-label-padding-top, .5em )}.m-input-wrapper--inline{align-items:center;padding-top:0;min-height:0}.m-input-wrapper--readonly .m-dynamic-input{opacity:.6;filter:grayscale(.5);pointer-events:none;cursor:not-allowed}.m-input-wrapper--readonly .m-dynamic-input,.m-input-wrapper--readonly .m-dynamic-input *{animation:none!important;transition:none!important;box-shadow:none!important}.m-input-wrapper .m-button{flex-shrink:0;--m-button-size: var(--input-size, 1em);--m-icon-size: calc(var(--input-size, 1em) * 1.1)}.m-dynamic-input{flex:1;min-width:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { remote: [{ type: i0.Input, args: [{ isSignal: true, alias: "remote", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], aclResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "aclResolver", required: false }] }], formValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "formValues", required: false }] }], act: [{ type: i0.Output, args: ["act"] }], fieldKey: [{ type: i0.Output, args: ["fieldKey"] }], dynamicInput: [{ type: i0.ViewChild, args: ['dynamicInput', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { remote: [{ type: i0.Input, args: [{ isSignal: true, alias: "remote", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], projectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], aclResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "aclResolver", required: false }] }], formValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "formValues", required: false }] }], act: [{ type: i0.Output, args: ["act"] }], fieldKey: [{ type: i0.Output, args: ["fieldKey"] }], dynamicInput: [{ type: i0.ViewChild, args: ['dynamicInput', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class RangeInputComponent extends BaseTextInputComponent {
     _track = viewChild('track', ...(ngDevMode ? [{ debugName: "_track" }] : /* istanbul ignore next */ []));
@@ -15856,7 +15895,7 @@ class RadioGroupComponent extends BaseTextInputComponent {
         }
       }
     }
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.radio-group{display:flex;gap:1em}.radio-group.radio-group--vertical{flex-direction:column}\n"], dependencies: [{ kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate"], outputs: ["configChange"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.radio-group{display:flex;gap:1em}.radio-group.radio-group--vertical{flex-direction:column}\n"], dependencies: [{ kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], outputs: ["configChange"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadioGroupComponent, decorators: [{
             type: Component,
@@ -16240,9 +16279,19 @@ var toggleRadio = /*#__PURE__*/Object.freeze({
     ToggleRadioInputComponent: ToggleRadioInputComponent
 });
 
+// Stand-ins for a card list that has no options yet — DesignMode only. They
+// carry no label: nothing is mapped to them yet, and a name shown here would
+// read as a choice the Field offers. Bare boxes say the shape and no more.
+const DESIGN_STUB_IDS = ['stub-1', 'stub-2', 'stub-3'];
 class SelectableCardInputComponent extends BaseInputComponent {
     element = input(...(ngDevMode ? [undefined, { debugName: "element" }] : /* istanbul ignore next */ []));
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    // A card body written inline instead of mounted as a component. `element`
+    // takes a class because a card is instantiated per row and the markup has
+    // nowhere to write its selector; an `ng-template` has the same reach without
+    // a class, and `ng-content` has none at all — it projects once, so inside the
+    // `@for` it would land in one card and leave the rest empty.
+    template = input(...(ngDevMode ? [undefined, { debugName: "template" }] : /* istanbul ignore next */ []));
     options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
     value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
     assetOptions = assetOptions(() => this.config()?.optionsAsset);
@@ -16257,11 +16306,20 @@ class SelectableCardInputComponent extends BaseInputComponent {
             return source;
         return this.assetOptions();
     }, ...(ngDevMode ? [{ debugName: "cardOptions" }] : /* istanbul ignore next */ []));
+    // A SelectableCard is its cards and nothing else — no label of its own, no
+    // box around them — so with no options it draws nothing at all. Shipped that
+    // is right; on a Canvas it leaves a Control the User cannot see, select or
+    // move, because control-layer measures its overlay off the rendered rect.
+    isDesignMode = !!inject(IS_DESIGN_MODE, { optional: true });
     items = computed(() => {
         const data = this.data() ?? [];
         if (data.length)
             return data;
-        return this.cardOptions().map((option) => ({
+        const options = this.cardOptions();
+        if (!options.length && this.isDesignMode) {
+            return DESIGN_STUB_IDS.map((id) => ({ id }));
+        }
+        return options.map((option) => ({
             id: option.value,
             disabled: option.disabled,
         }));
@@ -16283,6 +16341,22 @@ class SelectableCardInputComponent extends BaseInputComponent {
         disabled,
         ...(item.inputs ?? {}),
     });
+    // The body written between the tags. A bound `template` wins over it the way
+    // `data` wins over `options`: what a caller passes at runtime is the more
+    // deliberate of the two, and a projected template is the default a host
+    // writes once.
+    projectedTemplate = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "projectedTemplate" }] : /* istanbul ignore next */ []));
+    cardTemplate = computed(() => this.template() ?? this.projectedTemplate(), ...(ngDevMode ? [{ debugName: "cardTemplate" }] : /* istanbul ignore next */ []));
+    cardContext = (item, selected, disabled, index, first, last) => ({
+        $implicit: item,
+        item,
+        row: item.row,
+        selected,
+        disabled,
+        index,
+        first,
+        last,
+    });
     onCardClick = (id) => {
         if (this.readonly() || this.disabled())
             return;
@@ -16304,8 +16378,15 @@ class SelectableCardInputComponent extends BaseInputComponent {
         this.onCardClick(id);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectableCardInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SelectableCardInputComponent, isStandalone: true, selector: "m-selectable-card", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SelectableCardInputComponent, isStandalone: true, selector: "m-selectable-card", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, queries: [{ propertyName: "projectedTemplate", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     @if (config(); as cfg) {
+      @if (cfg.label) {
+        <m-label
+          [placeholder]="cfg.label"
+          [required]="required()"
+          [disabled]="disabled()"
+        />
+      }
       <div
         class="selectable-card"
         [class.selectable-card--vertical]="cfg.vertical"
@@ -16333,6 +16414,10 @@ class SelectableCardInputComponent extends BaseInputComponent {
                   <ng-container
                     *ngComponentOutlet="element()!; inputs: cardInputs(item, selected, effectiveDisabled)"
                   />
+                } @else if (cardTemplate(); as tpl) {
+                  <ng-container
+                    *ngTemplateOutlet="tpl; context: cardContext(item, selected, effectiveDisabled, $index, $first, $last)"
+                  />
                 } @else if (labels()[item.id]; as label) {
                   @if (icons()[item.id]; as icon) {
                     <m-icon class="selectable-card__icon" [name]="icon" />
@@ -16358,12 +16443,19 @@ class SelectableCardInputComponent extends BaseInputComponent {
         }
       </div>
     }
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;max-width:100%;min-width:0}.selectable-card{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;width:100%;max-width:100%;min-width:0;box-sizing:border-box}.selectable-card--vertical{flex-direction:column;flex-wrap:nowrap}.selectable-card--vertical .selectable-card__item{width:100%;max-width:100%;min-width:0;align-items:flex-start}.selectable-card--vertical .selectable-card__indicator{padding-top:.125rem}.selectable-card--vertical .selectable-card__content{align-items:flex-start}.selectable-card__item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border:2px solid var(--border, var(--m-border));border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--background, var(--m-background));transition:border-color .2s ease,box-shadow .2s ease,background .15s ease;box-sizing:border-box;max-width:100%;min-width:0}.selectable-card__item:hover:not(.selectable-card__item--disabled){border-color:var(--mm-color, var(--m-mm));box-shadow:0 0 0 1px color-mix(in srgb,var(--mm-color, var(--m-mm)) 20%,transparent 80%)}.selectable-card__item--selected{border-color:var(--mm-color, var(--m-mm));box-shadow:0 0 0 1px var(--mm-color, var(--m-mm));background:color-mix(in srgb,var(--mm-color, var(--m-mm)) 5%,var(--background, var(--m-background)) 95%)}.selectable-card__item--selected:hover:not(.selectable-card__item--disabled){box-shadow:0 0 0 2px var(--mm-color, var(--m-mm))}.selectable-card__item:focus-visible{outline:2px solid var(--mm-color, var(--m-mm));outline-offset:2px}.selectable-card__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.selectable-card__content{flex:1;min-width:0;max-width:100%;display:flex;align-items:center;gap:.5rem}.selectable-card__content>*{flex:1;min-width:0;max-width:100%}.selectable-card__icon{flex-shrink:0;display:flex}.selectable-card__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selectable-card__indicator{flex-shrink:0;display:flex;align-items:center}.selectable-card__indicator input[type=checkbox],.selectable-card__indicator input[type=radio]{appearance:none;-webkit-appearance:none;width:1.125rem;height:1.125rem;border:2px solid color-mix(in srgb,var(--mm-color, var(--m-mm)) 50%,transparent 50%);border-radius:.25rem;background:transparent;cursor:pointer;box-sizing:border-box;transition:background .2s ease,border-color .2s ease;position:relative;flex-shrink:0}.selectable-card__indicator input[type=checkbox][type=radio],.selectable-card__indicator input[type=radio][type=radio]{border-radius:50%}.selectable-card__indicator input[type=checkbox]:checked,.selectable-card__indicator input[type=radio]:checked{background:var(--mm-color, var(--m-mm));border-color:var(--mm-color, var(--m-mm))}.selectable-card__indicator input[type=checkbox]:checked:after,.selectable-card__indicator input[type=radio]:checked:after{content:\"\";position:absolute;top:50%;left:50%}.selectable-card__indicator input[type=checkbox][type=checkbox]:checked:after,.selectable-card__indicator input[type=radio][type=checkbox]:checked:after{width:.35rem;height:.2rem;border-left:2px solid white;border-bottom:2px solid white;transform:translate(-50%,-65%) rotate(-45deg)}.selectable-card__indicator input[type=checkbox][type=radio]:checked:after,.selectable-card__indicator input[type=radio][type=radio]:checked:after{width:.4rem;height:.4rem;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}.selectable-card__indicator input[type=checkbox]:disabled,.selectable-card__indicator input[type=radio]:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;max-width:100%;min-width:0}.selectable-card{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;width:100%;max-width:100%;min-width:0;box-sizing:border-box}.selectable-card--vertical{flex-direction:column;flex-wrap:nowrap}.selectable-card--vertical .selectable-card__item{width:100%;max-width:100%;min-width:0;align-items:flex-start}.selectable-card--vertical .selectable-card__indicator{padding-top:.125rem}.selectable-card--vertical .selectable-card__content{align-items:flex-start}.selectable-card__item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border:2px solid var(--border, var(--m-border));border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--background, var(--m-background));transition:border-color .2s ease,box-shadow .2s ease,background .15s ease;box-sizing:border-box;max-width:100%;min-width:0}.selectable-card__item:hover:not(.selectable-card__item--disabled){border-color:var(--mm-color, var(--m-mm));box-shadow:0 0 0 1px color-mix(in srgb,var(--mm-color, var(--m-mm)) 20%,transparent 80%)}.selectable-card__item--selected{border-color:var(--mm-color, var(--m-mm));box-shadow:0 0 0 1px var(--mm-color, var(--m-mm));background:color-mix(in srgb,var(--mm-color, var(--m-mm)) 5%,var(--background, var(--m-background)) 95%)}.selectable-card__item--selected:hover:not(.selectable-card__item--disabled){box-shadow:0 0 0 2px var(--mm-color, var(--m-mm))}.selectable-card__item:focus-visible{outline:2px solid var(--mm-color, var(--m-mm));outline-offset:2px}.selectable-card__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.selectable-card__content{flex:1;min-width:0;max-width:100%;display:flex;align-items:center;gap:.5rem}.selectable-card__content>*{flex:1;min-width:0;max-width:100%}.selectable-card__icon{flex-shrink:0;display:flex}.selectable-card__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selectable-card__indicator{flex-shrink:0;display:flex;align-items:center}.selectable-card__indicator input[type=checkbox],.selectable-card__indicator input[type=radio]{appearance:none;-webkit-appearance:none;width:1.125rem;height:1.125rem;border:2px solid color-mix(in srgb,var(--mm-color, var(--m-mm)) 50%,transparent 50%);border-radius:.25rem;background:transparent;cursor:pointer;box-sizing:border-box;transition:background .2s ease,border-color .2s ease;position:relative;flex-shrink:0}.selectable-card__indicator input[type=checkbox][type=radio],.selectable-card__indicator input[type=radio][type=radio]{border-radius:50%}.selectable-card__indicator input[type=checkbox]:checked,.selectable-card__indicator input[type=radio]:checked{background:var(--mm-color, var(--m-mm));border-color:var(--mm-color, var(--m-mm))}.selectable-card__indicator input[type=checkbox]:checked:after,.selectable-card__indicator input[type=radio]:checked:after{content:\"\";position:absolute;top:50%;left:50%}.selectable-card__indicator input[type=checkbox][type=checkbox]:checked:after,.selectable-card__indicator input[type=radio][type=checkbox]:checked:after{width:.35rem;height:.2rem;border-left:2px solid white;border-bottom:2px solid white;transform:translate(-50%,-65%) rotate(-45deg)}.selectable-card__indicator input[type=checkbox][type=radio]:checked:after,.selectable-card__indicator input[type=radio][type=radio]:checked:after{width:.4rem;height:.4rem;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}.selectable-card__indicator input[type=checkbox]:disabled,.selectable-card__indicator input[type=radio]:disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectableCardInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'm-selectable-card', template: `
     @if (config(); as cfg) {
+      @if (cfg.label) {
+        <m-label
+          [placeholder]="cfg.label"
+          [required]="required()"
+          [disabled]="disabled()"
+        />
+      }
       <div
         class="selectable-card"
         [class.selectable-card--vertical]="cfg.vertical"
@@ -16391,6 +16483,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                   <ng-container
                     *ngComponentOutlet="element()!; inputs: cardInputs(item, selected, effectiveDisabled)"
                   />
+                } @else if (cardTemplate(); as tpl) {
+                  <ng-container
+                    *ngTemplateOutlet="tpl; context: cardContext(item, selected, effectiveDisabled, $index, $first, $last)"
+                  />
                 } @else if (labels()[item.id]; as label) {
                   @if (icons()[item.id]; as icon) {
                     <m-icon class="selectable-card__icon" [name]="icon" />
@@ -16416,8 +16512,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }
       </div>
     }
-  `, imports: [NgComponentOutlet, TranslatePipe, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;max-width:100%;min-width:0}.selectable-card{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;width:100%;max-width:100%;min-width:0;box-sizing:border-box}.selectable-card--vertical{flex-direction:column;flex-wrap:nowrap}.selectable-card--vertical .selectable-card__item{width:100%;max-width:100%;min-width:0;align-items:flex-start}.selectable-card--vertical .selectable-card__indicator{padding-top:.125rem}.selectable-card--vertical .selectable-card__content{align-items:flex-start}.selectable-card__item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border:2px solid var(--border, var(--m-border));border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--background, var(--m-background));transition:border-color .2s ease,box-shadow .2s ease,background .15s ease;box-sizing:border-box;max-width:100%;min-width:0}.selectable-card__item:hover:not(.selectable-card__item--disabled){border-color:var(--mm-color, var(--m-mm));box-shadow:0 0 0 1px color-mix(in srgb,var(--mm-color, var(--m-mm)) 20%,transparent 80%)}.selectable-card__item--selected{border-color:var(--mm-color, var(--m-mm));box-shadow:0 0 0 1px var(--mm-color, var(--m-mm));background:color-mix(in srgb,var(--mm-color, var(--m-mm)) 5%,var(--background, var(--m-background)) 95%)}.selectable-card__item--selected:hover:not(.selectable-card__item--disabled){box-shadow:0 0 0 2px var(--mm-color, var(--m-mm))}.selectable-card__item:focus-visible{outline:2px solid var(--mm-color, var(--m-mm));outline-offset:2px}.selectable-card__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.selectable-card__content{flex:1;min-width:0;max-width:100%;display:flex;align-items:center;gap:.5rem}.selectable-card__content>*{flex:1;min-width:0;max-width:100%}.selectable-card__icon{flex-shrink:0;display:flex}.selectable-card__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selectable-card__indicator{flex-shrink:0;display:flex;align-items:center}.selectable-card__indicator input[type=checkbox],.selectable-card__indicator input[type=radio]{appearance:none;-webkit-appearance:none;width:1.125rem;height:1.125rem;border:2px solid color-mix(in srgb,var(--mm-color, var(--m-mm)) 50%,transparent 50%);border-radius:.25rem;background:transparent;cursor:pointer;box-sizing:border-box;transition:background .2s ease,border-color .2s ease;position:relative;flex-shrink:0}.selectable-card__indicator input[type=checkbox][type=radio],.selectable-card__indicator input[type=radio][type=radio]{border-radius:50%}.selectable-card__indicator input[type=checkbox]:checked,.selectable-card__indicator input[type=radio]:checked{background:var(--mm-color, var(--m-mm));border-color:var(--mm-color, var(--m-mm))}.selectable-card__indicator input[type=checkbox]:checked:after,.selectable-card__indicator input[type=radio]:checked:after{content:\"\";position:absolute;top:50%;left:50%}.selectable-card__indicator input[type=checkbox][type=checkbox]:checked:after,.selectable-card__indicator input[type=radio][type=checkbox]:checked:after{width:.35rem;height:.2rem;border-left:2px solid white;border-bottom:2px solid white;transform:translate(-50%,-65%) rotate(-45deg)}.selectable-card__indicator input[type=checkbox][type=radio]:checked:after,.selectable-card__indicator input[type=radio][type=radio]:checked:after{width:.4rem;height:.4rem;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}.selectable-card__indicator input[type=checkbox]:disabled,.selectable-card__indicator input[type=radio]:disabled{opacity:.5;cursor:not-allowed}\n"] }]
-        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+  `, imports: [
+                        NgComponentOutlet,
+                        NgTemplateOutlet,
+                        TranslatePipe,
+                        IconComponent,
+                        LabelComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;max-width:100%;min-width:0}.selectable-card{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;width:100%;max-width:100%;min-width:0;box-sizing:border-box}.selectable-card--vertical{flex-direction:column;flex-wrap:nowrap}.selectable-card--vertical .selectable-card__item{width:100%;max-width:100%;min-width:0;align-items:flex-start}.selectable-card--vertical .selectable-card__indicator{padding-top:.125rem}.selectable-card--vertical .selectable-card__content{align-items:flex-start}.selectable-card__item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border:2px solid var(--border, var(--m-border));border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--background, var(--m-background));transition:border-color .2s ease,box-shadow .2s ease,background .15s ease;box-sizing:border-box;max-width:100%;min-width:0}.selectable-card__item:hover:not(.selectable-card__item--disabled){border-color:var(--mm-color, var(--m-mm));box-shadow:0 0 0 1px color-mix(in srgb,var(--mm-color, var(--m-mm)) 20%,transparent 80%)}.selectable-card__item--selected{border-color:var(--mm-color, var(--m-mm));box-shadow:0 0 0 1px var(--mm-color, var(--m-mm));background:color-mix(in srgb,var(--mm-color, var(--m-mm)) 5%,var(--background, var(--m-background)) 95%)}.selectable-card__item--selected:hover:not(.selectable-card__item--disabled){box-shadow:0 0 0 2px var(--mm-color, var(--m-mm))}.selectable-card__item:focus-visible{outline:2px solid var(--mm-color, var(--m-mm));outline-offset:2px}.selectable-card__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.selectable-card__content{flex:1;min-width:0;max-width:100%;display:flex;align-items:center;gap:.5rem}.selectable-card__content>*{flex:1;min-width:0;max-width:100%}.selectable-card__icon{flex-shrink:0;display:flex}.selectable-card__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selectable-card__indicator{flex-shrink:0;display:flex;align-items:center}.selectable-card__indicator input[type=checkbox],.selectable-card__indicator input[type=radio]{appearance:none;-webkit-appearance:none;width:1.125rem;height:1.125rem;border:2px solid color-mix(in srgb,var(--mm-color, var(--m-mm)) 50%,transparent 50%);border-radius:.25rem;background:transparent;cursor:pointer;box-sizing:border-box;transition:background .2s ease,border-color .2s ease;position:relative;flex-shrink:0}.selectable-card__indicator input[type=checkbox][type=radio],.selectable-card__indicator input[type=radio][type=radio]{border-radius:50%}.selectable-card__indicator input[type=checkbox]:checked,.selectable-card__indicator input[type=radio]:checked{background:var(--mm-color, var(--m-mm));border-color:var(--mm-color, var(--m-mm))}.selectable-card__indicator input[type=checkbox]:checked:after,.selectable-card__indicator input[type=radio]:checked:after{content:\"\";position:absolute;top:50%;left:50%}.selectable-card__indicator input[type=checkbox][type=checkbox]:checked:after,.selectable-card__indicator input[type=radio][type=checkbox]:checked:after{width:.35rem;height:.2rem;border-left:2px solid white;border-bottom:2px solid white;transform:translate(-50%,-65%) rotate(-45deg)}.selectable-card__indicator input[type=checkbox][type=radio]:checked:after,.selectable-card__indicator input[type=radio][type=radio]:checked:after{width:.4rem;height:.4rem;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}.selectable-card__indicator input[type=checkbox]:disabled,.selectable-card__indicator input[type=radio]:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], projectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 var selectableCard = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -16474,7 +16576,7 @@ class RatingInputComponent extends BaseInputComponent {
         this.hoverValue.set(null);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RatingInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RatingInputComponent, isStandalone: true, selector: "m-rating-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, usesInheritance: true, ngImport: i0, template: "@if (config(); as rating) {\n  @if (rating.label) {\n    <m-label\n      [for]=\"rating.name ?? ''\"\n      [placeholder]=\"rating.label\"\n      [required]=\"required()\"\n      [disabled]=\"disabled()\"\n    />\n  }\n\n  <div class=\"rating\" [class.rating--error]=\"showErrors()\">\n    <div\n      class=\"rating__stars\"\n      [class.rating__stars--interactive]=\"interactive()\"\n      [class.rating__stars--disabled]=\"disabled()\"\n      (mouseleave)=\"onLeave()\"\n    >\n      <!-- Hidden SVG for per-star gradient defs -->\n      <svg width=\"0\" height=\"0\" aria-hidden=\"true\" class=\"rating__defs\">\n        <defs>\n          @for (star of stars; track star) {\n            <linearGradient [id]=\"'star-grad-' + star\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n              <stop [attr.offset]=\"starFill(star) + '%'\" class=\"rating__stop--filled\" />\n              <stop [attr.offset]=\"starFill(star) + '%'\" class=\"rating__stop--empty\" />\n            </linearGradient>\n          }\n        </defs>\n      </svg>\n\n      @for (star of stars; track star) {\n        <button\n          class=\"rating__star\"\n          type=\"button\"\n          [attr.aria-label]=\"'rate-star-out-of-5' | translate: { star: star.toString() }\"\n          [attr.aria-pressed]=\"(value() ?? 0) >= star\"\n          [attr.disabled]=\"(!interactive()) ? true : null\"\n          (click)=\"rate(star)\"\n          (mouseenter)=\"onHover(star)\"\n        >\n          <svg\n            class=\"rating__star-svg\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n          >\n            <polygon\n              class=\"rating__star-shape\"\n              [attr.fill]=\"'url(#star-grad-' + star + ')'\"\n              points=\"12,2.5 15.27,9.14 22.6,10.13 17.3,15.26 18.54,22.56 12,19.13 5.46,22.56 6.7,15.26 1.4,10.13 8.73,9.14\"\n            />\n          </svg>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (showErrors()) {\n    @for (error of errors(); track $index) {\n      <m-text-output\n        variant=\"footer\"\n        color=\"error\"\n        [label]=\"error.message\"\n      />\n    }\n  }\n}\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.rating{display:inline-flex;flex-direction:column;gap:6px}.rating__defs{display:block;width:0;height:0;overflow:hidden;pointer-events:none;flex-shrink:0}.rating__stop--filled{stop-color:#ffb800;stop-opacity:1}.rating__stop--empty{stop-color:#e0e0e0;stop-opacity:1}.rating__stars{position:relative;display:inline-flex;align-items:center;gap:4px}.rating__star{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:none;border:none;cursor:default;outline:none;flex-shrink:0}.rating__star-svg{width:28px;height:28px;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.08));transition:opacity .15s ease,transform .12s ease}.rating__star-shape{stroke:#0000000f;stroke-width:.5px}.rating__stars--interactive .rating__star{cursor:pointer;border-radius:4px}.rating__stars--interactive .rating__star:focus-visible{outline:2px solid var(--m-mm);outline-offset:2px;border-radius:4px}.rating__stars--interactive .rating__star:hover .rating__star-svg,.rating__stars--interactive .rating__star:focus-visible .rating__star-svg{transform:scale(1.15);filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}.rating__stars--disabled{opacity:.5;pointer-events:none}.rating__stars--disabled .rating__stop--filled{stop-color:#bdbdbd}.rating--error .rating__stop--filled{stop-color:var(--m-error)}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate"], outputs: ["configChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RatingInputComponent, isStandalone: true, selector: "m-rating-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, usesInheritance: true, ngImport: i0, template: "@if (config(); as rating) {\n  @if (rating.label) {\n    <m-label\n      [for]=\"rating.name ?? ''\"\n      [placeholder]=\"rating.label\"\n      [required]=\"required()\"\n      [disabled]=\"disabled()\"\n    />\n  }\n\n  <div class=\"rating\" [class.rating--error]=\"showErrors()\">\n    <div\n      class=\"rating__stars\"\n      [class.rating__stars--interactive]=\"interactive()\"\n      [class.rating__stars--disabled]=\"disabled()\"\n      (mouseleave)=\"onLeave()\"\n    >\n      <!-- Hidden SVG for per-star gradient defs -->\n      <svg width=\"0\" height=\"0\" aria-hidden=\"true\" class=\"rating__defs\">\n        <defs>\n          @for (star of stars; track star) {\n            <linearGradient [id]=\"'star-grad-' + star\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n              <stop [attr.offset]=\"starFill(star) + '%'\" class=\"rating__stop--filled\" />\n              <stop [attr.offset]=\"starFill(star) + '%'\" class=\"rating__stop--empty\" />\n            </linearGradient>\n          }\n        </defs>\n      </svg>\n\n      @for (star of stars; track star) {\n        <button\n          class=\"rating__star\"\n          type=\"button\"\n          [attr.aria-label]=\"'rate-star-out-of-5' | translate: { star: star.toString() }\"\n          [attr.aria-pressed]=\"(value() ?? 0) >= star\"\n          [attr.disabled]=\"(!interactive()) ? true : null\"\n          (click)=\"rate(star)\"\n          (mouseenter)=\"onHover(star)\"\n        >\n          <svg\n            class=\"rating__star-svg\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n          >\n            <polygon\n              class=\"rating__star-shape\"\n              [attr.fill]=\"'url(#star-grad-' + star + ')'\"\n              points=\"12,2.5 15.27,9.14 22.6,10.13 17.3,15.26 18.54,22.56 12,19.13 5.46,22.56 6.7,15.26 1.4,10.13 8.73,9.14\"\n            />\n          </svg>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (showErrors()) {\n    @for (error of errors(); track $index) {\n      <m-text-output\n        variant=\"footer\"\n        color=\"error\"\n        [label]=\"error.message\"\n      />\n    }\n  }\n}\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.rating{display:inline-flex;flex-direction:column;gap:6px}.rating__defs{display:block;width:0;height:0;overflow:hidden;pointer-events:none;flex-shrink:0}.rating__stop--filled{stop-color:#ffb800;stop-opacity:1}.rating__stop--empty{stop-color:#e0e0e0;stop-opacity:1}.rating__stars{position:relative;display:inline-flex;align-items:center;gap:4px}.rating__star{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:none;border:none;cursor:default;outline:none;flex-shrink:0}.rating__star-svg{width:28px;height:28px;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.08));transition:opacity .15s ease,transform .12s ease}.rating__star-shape{stroke:#0000000f;stroke-width:.5px}.rating__stars--interactive .rating__star{cursor:pointer;border-radius:4px}.rating__stars--interactive .rating__star:focus-visible{outline:2px solid var(--m-mm);outline-offset:2px;border-radius:4px}.rating__stars--interactive .rating__star:hover .rating__star-svg,.rating__stars--interactive .rating__star:focus-visible .rating__star-svg{transform:scale(1.15);filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}.rating__stars--disabled{opacity:.5;pointer-events:none}.rating__stars--disabled .rating__stop--filled{stop-color:#bdbdbd}.rating--error .rating__stop--filled{stop-color:var(--m-error)}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], outputs: ["configChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RatingInputComponent, decorators: [{
             type: Component,
@@ -16588,7 +16690,7 @@ class ComponentInputComponent extends BaseTextInputComponent {
         }
       }
     }
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate"], outputs: ["configChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], outputs: ["configChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ComponentInputComponent, decorators: [{
             type: Component,
@@ -16761,7 +16863,7 @@ class FileUploadInputComponent extends BaseTextInputComponent {
         }
       }
     }
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate"], outputs: ["configChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], outputs: ["configChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileUploadInputComponent, decorators: [{
             type: Component,
@@ -17009,6 +17111,10 @@ class FormGroupComponent extends ConfigComponent {
             return result;
         } });
     elements = input(undefined, ...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
+    // A card body per field, written inline. Keyed like `elements` because it is
+    // the same seat filled a second way — a `#ref` from the host's own template
+    // instead of a class.
+    templates = input(undefined, ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
     datas = input(undefined, ...(ngDevMode ? [{ debugName: "datas" }] : /* istanbul ignore next */ []));
     label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     subtitle = input(undefined, ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
@@ -17182,7 +17288,7 @@ class FormGroupComponent extends ConfigComponent {
         this.act.emit(this.previousValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FormGroupComponent, isStandalone: true, selector: "m-form, m-one-form", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, fieldConfigs: { classPropertyName: "fieldConfigs", publicName: "fieldConfigs", isSignal: true, isRequired: false, transformFunction: null }, aclResolver: { classPropertyName: "aclResolver", publicName: "aclResolver", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, fieldRenderIds: { classPropertyName: "fieldRenderIds", publicName: "fieldRenderIds", isSignal: true, isRequired: false, transformFunction: null }, elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: false, transformFunction: null }, datas: { classPropertyName: "datas", publicName: "datas", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataChange: "dataChange", act: "act", state: "stateChange" }, host: { properties: { "class": "config()?.variant ? 'm-form--' + config()?.variant : ''", "style.min-height": "resolvedMinHeight()", "style.min-width": "resolvedMinWidth()", "style.max-height": "resolvedMaxHeight()", "style.max-width": "resolvedMaxWidth()" } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FormGroupComponent, isStandalone: true, selector: "m-form, m-one-form", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, fieldConfigs: { classPropertyName: "fieldConfigs", publicName: "fieldConfigs", isSignal: true, isRequired: false, transformFunction: null }, aclResolver: { classPropertyName: "aclResolver", publicName: "aclResolver", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, fieldRenderIds: { classPropertyName: "fieldRenderIds", publicName: "fieldRenderIds", isSignal: true, isRequired: false, transformFunction: null }, elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null }, datas: { classPropertyName: "datas", publicName: "datas", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataChange: "dataChange", act: "act", state: "stateChange" }, host: { properties: { "class": "config()?.variant ? 'm-form--' + config()?.variant : ''", "style.min-height": "resolvedMinHeight()", "style.min-width": "resolvedMinWidth()", "style.max-height": "resolvedMaxHeight()", "style.max-width": "resolvedMaxWidth()" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="form-group">
       @if (resolvedLabel() || resolvedSubtitle()) {
         <div class="form-group__header">
@@ -17213,6 +17319,7 @@ class FormGroupComponent extends ConfigComponent {
                 [options]="options()?.[input.name]"
                 [config]="namedFieldConfigs()[input.name]"
                 [element]="elements()?.[input.name]"
+                [template]="templates()?.[input.name]"
                 [data]="datas()?.[input.name]"
                 [aclResolver]="aclResolver()"
                 [formValues]="formValues()"
@@ -17225,7 +17332,7 @@ class FormGroupComponent extends ConfigComponent {
         }
       }
     </div>
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.form-group{display:flex;flex-direction:column;gap:var(--m-form-group-gap, 1.5rem)}.form-group__header{display:flex;flex-direction:column;gap:4px;margin-bottom:.5rem}.form-group__subtitle{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;opacity:.5;color:var(--mm-color, #ffd700)}.form-group__title{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;opacity:.9}.form-group__content{display:flex;flex-wrap:wrap;gap:var(--m-form-group-content-gap, 1rem 1.25rem)}.form-group__content>*{flex:1 1 100%;min-width:0}.form-group__content>.col-1{flex:1 1 calc(1 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-2{flex:2 1 calc(2 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-3{flex:3 1 calc(.25*(100% + 1.25rem) - 1.25rem)}.form-group__content>.col-4{flex:4 1 calc(4 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-5{flex:5 1 calc(5 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-6{flex:6 1 calc(.5*(100% + 1.25rem) - 1.25rem)}.form-group__content>.col-7{flex:7 1 calc(7 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-8{flex:8 1 calc(8 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-9{flex:9 1 calc(.75*(100% + 1.25rem) - 1.25rem)}.form-group__content>.col-10{flex:10 1 calc(10 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-11{flex:11 1 calc(11 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-12{flex:12 1 calc(1*(100% + 1.25rem) - 1.25rem)}@media(max-width:480px){.form-group__content>*{flex-basis:100%}}:host(.m-form--compact) .form-group{gap:.5rem}:host(.m-form--compact) .form-group__content{display:block;gap:0}\n"], dependencies: [{ kind: "component", type: WrapperInputComponent, selector: "m-input-wrapper", inputs: ["remote", "value", "readonly", "state", "focused", "form", "options", "dir", "element", "data", "aclResolver", "formValues"], outputs: ["valueChange", "stateChange", "act", "fieldKey"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate"], outputs: ["actionClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.form-group{display:flex;flex-direction:column;gap:var(--m-form-group-gap, 1.5rem)}.form-group__header{display:flex;flex-direction:column;gap:4px;margin-bottom:.5rem}.form-group__subtitle{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;opacity:.5;color:var(--mm-color, #ffd700)}.form-group__title{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;opacity:.9}.form-group__content{display:flex;flex-wrap:wrap;gap:var(--m-form-group-content-gap, 1rem 1.25rem)}.form-group__content>*{flex:1 1 100%;min-width:0}.form-group__content>.col-1{flex:1 1 calc(1 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-2{flex:2 1 calc(2 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-3{flex:3 1 calc(.25*(100% + 1.25rem) - 1.25rem)}.form-group__content>.col-4{flex:4 1 calc(4 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-5{flex:5 1 calc(5 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-6{flex:6 1 calc(.5*(100% + 1.25rem) - 1.25rem)}.form-group__content>.col-7{flex:7 1 calc(7 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-8{flex:8 1 calc(8 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-9{flex:9 1 calc(.75*(100% + 1.25rem) - 1.25rem)}.form-group__content>.col-10{flex:10 1 calc(10 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-11{flex:11 1 calc(11 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-12{flex:12 1 calc(1*(100% + 1.25rem) - 1.25rem)}@media(max-width:480px){.form-group__content>*{flex-basis:100%}}:host(.m-form--compact) .form-group{gap:.5rem}:host(.m-form--compact) .form-group__content{display:block;gap:0}\n"], dependencies: [{ kind: "component", type: WrapperInputComponent, selector: "m-input-wrapper", inputs: ["remote", "value", "readonly", "state", "focused", "form", "options", "dir", "element", "data", "template", "aclResolver", "formValues"], outputs: ["valueChange", "stateChange", "act", "fieldKey"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate"], outputs: ["actionClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormGroupComponent, decorators: [{
             type: Component,
@@ -17266,6 +17373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 [options]="options()?.[input.name]"
                 [config]="namedFieldConfigs()[input.name]"
                 [element]="elements()?.[input.name]"
+                [template]="templates()?.[input.name]"
                 [data]="datas()?.[input.name]"
                 [aclResolver]="aclResolver()"
                 [formValues]="formValues()"
@@ -17279,7 +17387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       }
     </div>
   `, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.form-group{display:flex;flex-direction:column;gap:var(--m-form-group-gap, 1.5rem)}.form-group__header{display:flex;flex-direction:column;gap:4px;margin-bottom:.5rem}.form-group__subtitle{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;opacity:.5;color:var(--mm-color, #ffd700)}.form-group__title{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;opacity:.9}.form-group__content{display:flex;flex-wrap:wrap;gap:var(--m-form-group-content-gap, 1rem 1.25rem)}.form-group__content>*{flex:1 1 100%;min-width:0}.form-group__content>.col-1{flex:1 1 calc(1 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-2{flex:2 1 calc(2 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-3{flex:3 1 calc(.25*(100% + 1.25rem) - 1.25rem)}.form-group__content>.col-4{flex:4 1 calc(4 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-5{flex:5 1 calc(5 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-6{flex:6 1 calc(.5*(100% + 1.25rem) - 1.25rem)}.form-group__content>.col-7{flex:7 1 calc(7 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-8{flex:8 1 calc(8 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-9{flex:9 1 calc(.75*(100% + 1.25rem) - 1.25rem)}.form-group__content>.col-10{flex:10 1 calc(10 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-11{flex:11 1 calc(11 * (100% + 1.25rem) / 12 - 1.25rem)}.form-group__content>.col-12{flex:12 1 calc(1*(100% + 1.25rem) - 1.25rem)}@media(max-width:480px){.form-group__content>*{flex-basis:100%}}:host(.m-form--compact) .form-group{gap:.5rem}:host(.m-form--compact) .form-group__content{display:block;gap:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], act: [{ type: i0.Output, args: ["act"] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], fieldConfigs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldConfigs", required: false }] }], aclResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "aclResolver", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], fieldRenderIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldRenderIds", required: false }] }], elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: false }] }], datas: [{ type: i0.Input, args: [{ isSignal: true, alias: "datas", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], act: [{ type: i0.Output, args: ["act"] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], fieldConfigs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldConfigs", required: false }] }], aclResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "aclResolver", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], fieldRenderIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldRenderIds", required: false }] }], elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: false }] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }], datas: [{ type: i0.Input, args: [{ isSignal: true, alias: "datas", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }] } });
 
 const emailValidation = (schemaPath) => email(schemaPath, {
     message: 'not-a-valid-email',
@@ -17847,6 +17955,14 @@ class SectionFormItemComponent extends ConfigComponent {
     dir = input(...(ngDevMode ? [undefined, { debugName: "dir" }] : /* istanbul ignore next */ []));
     element = input(...(ngDevMode ? [undefined, { debugName: "element" }] : /* istanbul ignore next */ []));
     data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : /* istanbul ignore next */ []));
+    // Same reason the wrapper carries one: this Field is mounted through a
+    // ViewContainerRef, so an inline card body reaches it as a TemplateRef and
+    // not as projected content.
+    template = input(...(ngDevMode ? [undefined, { debugName: "template" }] : /* istanbul ignore next */ []));
+    // An `ng-template` written between this tag's own says the same thing
+    // without a member to name, so it is picked up here and handed down.
+    projectedTemplate = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "projectedTemplate" }] : /* istanbul ignore next */ []));
+    cardTemplate = computed(() => this.template() ?? this.projectedTemplate(), ...(ngDevMode ? [{ debugName: "cardTemplate" }] : /* istanbul ignore next */ []));
     aclResolver = input(undefined, ...(ngDevMode ? [{ debugName: "aclResolver" }] : /* istanbul ignore next */ []));
     formValues = input(undefined, ...(ngDevMode ? [{ debugName: "formValues" }] : /* istanbul ignore next */ []));
     // The Field's own description, written on the tag rather than in
@@ -18144,7 +18260,7 @@ class SectionFormItemComponent extends ConfigComponent {
                 break;
             }
             case InputType.TOGGLE: {
-                const { ToggleInputComponent } = await import('./magmonium-one-toggle-x8W-rkDZ.mjs');
+                const { ToggleInputComponent } = await import('./magmonium-one-toggle-CnomBrUJ.mjs');
                 this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                 break;
             }
@@ -18156,12 +18272,12 @@ class SectionFormItemComponent extends ConfigComponent {
                 break;
             }
             case InputType.PASSWORD: {
-                const { PasswordInputComponent } = await import('./magmonium-one-password-_GRSnhns.mjs');
+                const { PasswordInputComponent } = await import('./magmonium-one-password-Bkg2rz6j.mjs');
                 this.createDynamicComponent(seq, PasswordInputComponent);
                 break;
             }
             case InputType.OTP: {
-                const { OtpInputComponent } = await import('./magmonium-one-otp-WercZBii.mjs');
+                const { OtpInputComponent } = await import('./magmonium-one-otp-D78eK88b.mjs');
                 this.createDynamicComponent(seq, OtpInputComponent);
                 break;
             }
@@ -18220,6 +18336,7 @@ class SectionFormItemComponent extends ConfigComponent {
                 const { SelectableCardInputComponent } = await Promise.resolve().then(function () { return selectableCard; });
                 this.createDynamicComponent(seq, SelectableCardInputComponent, [
                     inputBinding('element', this.element),
+                    inputBinding('template', this.cardTemplate),
                     inputBinding('data', this.data),
                     inputBinding('options', this.options),
                 ]);
@@ -18240,7 +18357,7 @@ class SectionFormItemComponent extends ConfigComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionFormItemComponent, isStandalone: true, selector: "m-section-form-item, m-one-section-form-item", inputs: { span: { classPropertyName: "span", publicName: "span", isSignal: true, isRequired: false, transformFunction: null }, labelOrientation: { classPropertyName: "labelOrientation", publicName: "labelOrientation", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, aclResolver: { classPropertyName: "aclResolver", publicName: "aclResolver", isSignal: true, isRequired: false, transformFunction: null }, formValues: { classPropertyName: "formValues", publicName: "formValues", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null }, buttonAction: { classPropertyName: "buttonAction", publicName: "buttonAction", isSignal: true, isRequired: false, transformFunction: null }, buttonAcl: { classPropertyName: "buttonAcl", publicName: "buttonAcl", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, acl: { classPropertyName: "acl", publicName: "acl", isSignal: true, isRequired: false, transformFunction: null }, testid: { classPropertyName: "testid", publicName: "testid", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, equalWidth: { classPropertyName: "equalWidth", publicName: "equalWidth", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, isCheckboxVisible: { classPropertyName: "isCheckboxVisible", publicName: "isCheckboxVisible", isSignal: true, isRequired: false, transformFunction: null }, optionsAsset: { classPropertyName: "optionsAsset", publicName: "optionsAsset", isSignal: true, isRequired: false, transformFunction: null }, patterns: { classPropertyName: "patterns", publicName: "patterns", isSignal: true, isRequired: false, transformFunction: null }, patternMessage: { classPropertyName: "patternMessage", publicName: "patternMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", act: "act", fieldKey: "fieldKey" }, host: { properties: { "class": "spanClass()", "style.display": "isVisible() ? null : \"none\"" } }, viewQueries: [{ propertyName: "dynamicInput", first: true, predicate: ["dynamicInput"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionFormItemComponent, isStandalone: true, selector: "m-section-form-item, m-one-section-form-item", inputs: { span: { classPropertyName: "span", publicName: "span", isSignal: true, isRequired: false, transformFunction: null }, labelOrientation: { classPropertyName: "labelOrientation", publicName: "labelOrientation", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, aclResolver: { classPropertyName: "aclResolver", publicName: "aclResolver", isSignal: true, isRequired: false, transformFunction: null }, formValues: { classPropertyName: "formValues", publicName: "formValues", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null }, buttonAction: { classPropertyName: "buttonAction", publicName: "buttonAction", isSignal: true, isRequired: false, transformFunction: null }, buttonAcl: { classPropertyName: "buttonAcl", publicName: "buttonAcl", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, acl: { classPropertyName: "acl", publicName: "acl", isSignal: true, isRequired: false, transformFunction: null }, testid: { classPropertyName: "testid", publicName: "testid", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, equalWidth: { classPropertyName: "equalWidth", publicName: "equalWidth", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, isCheckboxVisible: { classPropertyName: "isCheckboxVisible", publicName: "isCheckboxVisible", isSignal: true, isRequired: false, transformFunction: null }, optionsAsset: { classPropertyName: "optionsAsset", publicName: "optionsAsset", isSignal: true, isRequired: false, transformFunction: null }, patterns: { classPropertyName: "patterns", publicName: "patterns", isSignal: true, isRequired: false, transformFunction: null }, patternMessage: { classPropertyName: "patternMessage", publicName: "patternMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", act: "act", fieldKey: "fieldKey" }, host: { properties: { "class": "spanClass()", "style.display": "isVisible() ? null : \"none\"" } }, queries: [{ propertyName: "projectedTemplate", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dynamicInput", first: true, predicate: ["dynamicInput"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <div
       [class]="itemClass()"
       [style.--sfi-gap.px]="gap()"
@@ -18273,7 +18390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[class]': 'spanClass()',
                         '[style.display]': 'isVisible() ? null : "none"',
                     }, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;flex:1 1 100%;min-width:0}.section-form-item{display:flex;flex-direction:column;gap:var(--sfi-gap, .5em );min-width:0;width:100%}.section-form-item.--horizontal{flex-direction:row;align-items:center}.section-form-item.--horizontal .section-form-item__input{flex:1;min-width:0}.section-form-item.--vertical{flex-direction:column}.section-form-item.--vertical .section-form-item__input{width:100%}.section-form-item__input{display:flex;flex-direction:column;min-width:0;width:100%}.section-form-item__input>*{width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { span: [{ type: i0.Input, args: [{ isSignal: true, alias: "span", required: false }] }], labelOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelOrientation", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], aclResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "aclResolver", required: false }] }], formValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "formValues", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: false }] }], buttonAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonAction", required: false }] }], buttonAcl: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonAcl", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], acl: [{ type: i0.Input, args: [{ isSignal: true, alias: "acl", required: false }] }], testid: [{ type: i0.Input, args: [{ isSignal: true, alias: "testid", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], multiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelect", required: false }] }], equalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "equalWidth", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], isCheckboxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCheckboxVisible", required: false }] }], optionsAsset: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsAsset", required: false }] }], patterns: [{ type: i0.Input, args: [{ isSignal: true, alias: "patterns", required: false }] }], patternMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "patternMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], act: [{ type: i0.Output, args: ["act"] }], fieldKey: [{ type: i0.Output, args: ["fieldKey"] }], dynamicInput: [{ type: i0.ViewChild, args: ['dynamicInput', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { span: [{ type: i0.Input, args: [{ isSignal: true, alias: "span", required: false }] }], labelOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelOrientation", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], projectedTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], aclResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "aclResolver", required: false }] }], formValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "formValues", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: false }] }], buttonAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonAction", required: false }] }], buttonAcl: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonAcl", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], acl: [{ type: i0.Input, args: [{ isSignal: true, alias: "acl", required: false }] }], testid: [{ type: i0.Input, args: [{ isSignal: true, alias: "testid", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], multiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelect", required: false }] }], equalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "equalWidth", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], isCheckboxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCheckboxVisible", required: false }] }], optionsAsset: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsAsset", required: false }] }], patterns: [{ type: i0.Input, args: [{ isSignal: true, alias: "patterns", required: false }] }], patternMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "patternMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], act: [{ type: i0.Output, args: ["act"] }], fieldKey: [{ type: i0.Output, args: ["fieldKey"] }], dynamicInput: [{ type: i0.ViewChild, args: ['dynamicInput', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class StepComponent {
     index = input.required(...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
@@ -21802,7 +21919,7 @@ class TableComponent extends ConfigComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-table{display:flex;flex-direction:column;border:1px solid var(--m-backdrop-border);border-radius:12px;overflow:clip;background:#ffffffe6;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);position:relative;transition:background-color .3s ease}.m-table--flat{border:none;box-shadow:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}.m-table__toolbar{display:flex;align-items:center;justify-content:space-between;padding:1.5rem var(--m-table-toolbar-padding-x, 1.25rem);border-bottom:1px solid var(--m-backdrop-border);gap:1.5rem;background:color-mix(in srgb,var(--m-background) 45%,transparent)}.m-table--flat .m-table__toolbar{background:transparent;padding-left:0;padding-right:0}.m-table__title{margin:0;font-size:1.25rem;font-weight:800;color:var(--m-text);letter-spacing:-.02em;flex:1}.m-table__search{flex:0 1 auto;display:flex;align-items:center}.m-table__search .m-input-wrapper{width:100%}.m-table__mobile-view{display:flex;flex-direction:column;gap:1rem;padding:1.25rem;flex:1;overflow:auto}.m-table__empty-mobile{padding:3rem 1.5rem;text-align:center;color:var(--m-text-tertiary);font-size:.9375rem;font-weight:500;font-style:italic;opacity:.8;background:color-mix(in srgb,var(--m-background) 20%,transparent);border-radius:12px;border:1px dashed var(--m-backdrop-border)}.m-table__wrapper{overflow:auto;flex:1}.m-table__wrapper::-webkit-scrollbar{width:6px;height:6px}.m-table__wrapper::-webkit-scrollbar-track{background:transparent}.m-table__wrapper::-webkit-scrollbar-thumb{background:var(--m-backdrop-border);border-radius:10px}.m-table__wrapper::-webkit-scrollbar-thumb:hover{background:var(--m-text-tertiary)}.m-table__table{width:100%;min-width:100%;border-collapse:separate;border-spacing:0}mark.m-table__highlight{background:var(--m-highlight);color:#000;border-radius:2px;padding:0 2px;font-weight:700;box-shadow:0 1px 4px #0003}mark.m-table__highlight .m-one-pagination{margin-left:auto;--m-button-size: 2.25rem;--m-pagination-gap: .375rem}.m-table-pagination{display:flex;align-items:center;gap:1.5rem;padding:1.25rem var(--m-table-pagination-padding-x, 1.25rem);border-top:1px solid var(--m-backdrop-border);font-size:.8125rem;flex-wrap:wrap;background:color-mix(in srgb,var(--m-background) 40%,transparent)}.m-table--flat .m-table-pagination{background:transparent;padding-left:0;padding-right:0}.m-table-pagination__size{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;color:var(--m-text-secondary);font-weight:500}.m-table-pagination__select{border:1px solid var(--m-backdrop-border);border-radius:8px;background:var(--m-backdrop-surface);color:var(--m-text);padding:.375rem .625rem;font-size:.8125rem;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none}.m-table-pagination__select:hover{background:var(--m-backdrop-glass);border-color:var(--m-mm);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-mm) 10%,transparent)}.m-table-pagination__select:focus{border-color:var(--m-mm);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-mm) 20%,transparent)}.m-table-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:1rem 1.25rem;background:color-mix(in srgb,var(--m-background-lite) 60%,transparent);border-bottom:1px solid var(--m-backdrop-border);box-shadow:inset 0 2px 4px #00000005;overflow-x:auto;scrollbar-width:none}.m-table-filter::-webkit-scrollbar{display:none}.m-table--flat .m-table-filter{background:transparent;padding-left:0;padding-right:0;border-bottom:none}.m-table-filter__item{display:flex;align-items:center;gap:10px;padding:.4375rem 1rem;border-radius:12px;background:var(--m-background);border:1px solid var(--m-backdrop-border);color:var(--m-text-secondary);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none;font-weight:500}.m-table-filter__item:hover{border-color:var(--m-mm);color:var(--m-mm);background:var(--m-background);transform:translateY(-1px);box-shadow:0 4px 12px #0000000d}.m-table-filter__item--active{background:var(--m-mm);border-color:var(--m-mm);color:var(--m-inverse-text);font-weight:600;box-shadow:0 8px 16px color-mix(in srgb,var(--m-mm) 25%,transparent)}.m-table-filter__item--active:hover{background:var(--m-mm);border-color:var(--m-mm);color:var(--m-inverse-text);transform:translateY(-1px)}.m-table-filter__item--active .m-table-filter__badge{background:#fff3;color:var(--m-inverse-text);border-color:#ffffff1a}.m-table-filter__item--primary{background:var(--m-mm);border-color:var(--m-mm);color:var(--m-inverse-text);font-weight:600;box-shadow:0 8px 16px color-mix(in srgb,var(--m-mm) 25%,transparent)}.m-table-filter__item--primary:hover{background:var(--m-mm);border-color:var(--m-mm);color:var(--m-inverse-text);transform:translateY(-1px);box-shadow:0 10px 20px color-mix(in srgb,var(--m-mm) 30%,transparent)}.m-table-filter__item--primary .m-table-filter__badge{background:#fff3;color:var(--m-inverse-text);border-color:#ffffff1a}.m-table-filter__item--danger{border-color:var(--m-error);color:var(--m-error)}.m-table-filter__item--danger:hover{border-color:var(--m-error);color:var(--m-error);background:var(--m-backdrop-error);transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--m-error) 12%,transparent)}.m-table-filter__item--danger .m-table-filter__badge{background:var(--m-backdrop-error);color:var(--m-error);border-color:color-mix(in srgb,var(--m-error) 20%,transparent)}.m-table-filter__label{font-size:.8125rem;font-weight:600;letter-spacing:.01em}.m-table-filter__badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:100px;background:var(--m-backdrop-surface);color:var(--m-text-secondary);font-size:.6875rem;font-weight:700;border:1px solid var(--m-backdrop-border);transition:all .2s ease}\n"], dependencies: [{ kind: "component", type: TableHeaderComponent, selector: "m-table-header", inputs: ["visibleColumns", "fixedCount", "fixedOffset", "sortState", "selectable", "allSelected", "someSelected"], outputs: ["sortClick", "selectAll"] }, { kind: "component", type: TableBodyComponent, selector: "m-table-body", inputs: ["rows", "visibleColumns", "fixedCount", "fixedOffset", "searchQuery", "currency", "rowClass", "emptyMessage", "rowTestId", "actionVisibilityRule", "actionDisableRule", "selectable", "selectedRows", "selectDisableExpression", "expressionContext"], outputs: ["rowSelect", "cellChanged", "rowMenuClick", "cellClick"] }, { kind: "component", type: PaginationComponent, selector: "m-pagination, m-one-pagination", inputs: ["config", "totalPages", "totalItems", "pageSize", "page"], outputs: ["configChange", "pageChange"] }, { kind: "component", type: FreezeComponent, selector: "m-freeze", inputs: ["config"] }, { kind: "component", type: WrapperInputComponent, selector: "m-input-wrapper", inputs: ["remote", "value", "readonly", "state", "focused", "form", "options", "dir", "element", "data", "aclResolver", "formValues"], outputs: ["valueChange", "stateChange", "act", "fieldKey"] }, { kind: "component", type: TableFilterComponent, selector: "m-table-filter", inputs: ["filters", "data", "activeFilterIndices", "expressionContext"], outputs: ["filterClick"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-table{display:flex;flex-direction:column;border:1px solid var(--m-backdrop-border);border-radius:12px;overflow:clip;background:#ffffffe6;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);position:relative;transition:background-color .3s ease}.m-table--flat{border:none;box-shadow:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}.m-table__toolbar{display:flex;align-items:center;justify-content:space-between;padding:1.5rem var(--m-table-toolbar-padding-x, 1.25rem);border-bottom:1px solid var(--m-backdrop-border);gap:1.5rem;background:color-mix(in srgb,var(--m-background) 45%,transparent)}.m-table--flat .m-table__toolbar{background:transparent;padding-left:0;padding-right:0}.m-table__title{margin:0;font-size:1.25rem;font-weight:800;color:var(--m-text);letter-spacing:-.02em;flex:1}.m-table__search{flex:0 1 auto;display:flex;align-items:center}.m-table__search .m-input-wrapper{width:100%}.m-table__mobile-view{display:flex;flex-direction:column;gap:1rem;padding:1.25rem;flex:1;overflow:auto}.m-table__empty-mobile{padding:3rem 1.5rem;text-align:center;color:var(--m-text-tertiary);font-size:.9375rem;font-weight:500;font-style:italic;opacity:.8;background:color-mix(in srgb,var(--m-background) 20%,transparent);border-radius:12px;border:1px dashed var(--m-backdrop-border)}.m-table__wrapper{overflow:auto;flex:1}.m-table__wrapper::-webkit-scrollbar{width:6px;height:6px}.m-table__wrapper::-webkit-scrollbar-track{background:transparent}.m-table__wrapper::-webkit-scrollbar-thumb{background:var(--m-backdrop-border);border-radius:10px}.m-table__wrapper::-webkit-scrollbar-thumb:hover{background:var(--m-text-tertiary)}.m-table__table{width:100%;min-width:100%;border-collapse:separate;border-spacing:0}mark.m-table__highlight{background:var(--m-highlight);color:#000;border-radius:2px;padding:0 2px;font-weight:700;box-shadow:0 1px 4px #0003}mark.m-table__highlight .m-one-pagination{margin-left:auto;--m-button-size: 2.25rem;--m-pagination-gap: .375rem}.m-table-pagination{display:flex;align-items:center;gap:1.5rem;padding:1.25rem var(--m-table-pagination-padding-x, 1.25rem);border-top:1px solid var(--m-backdrop-border);font-size:.8125rem;flex-wrap:wrap;background:color-mix(in srgb,var(--m-background) 40%,transparent)}.m-table--flat .m-table-pagination{background:transparent;padding-left:0;padding-right:0}.m-table-pagination__size{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;color:var(--m-text-secondary);font-weight:500}.m-table-pagination__select{border:1px solid var(--m-backdrop-border);border-radius:8px;background:var(--m-backdrop-surface);color:var(--m-text);padding:.375rem .625rem;font-size:.8125rem;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none}.m-table-pagination__select:hover{background:var(--m-backdrop-glass);border-color:var(--m-mm);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-mm) 10%,transparent)}.m-table-pagination__select:focus{border-color:var(--m-mm);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-mm) 20%,transparent)}.m-table-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:1rem 1.25rem;background:color-mix(in srgb,var(--m-background-lite) 60%,transparent);border-bottom:1px solid var(--m-backdrop-border);box-shadow:inset 0 2px 4px #00000005;overflow-x:auto;scrollbar-width:none}.m-table-filter::-webkit-scrollbar{display:none}.m-table--flat .m-table-filter{background:transparent;padding-left:0;padding-right:0;border-bottom:none}.m-table-filter__item{display:flex;align-items:center;gap:10px;padding:.4375rem 1rem;border-radius:12px;background:var(--m-background);border:1px solid var(--m-backdrop-border);color:var(--m-text-secondary);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none;font-weight:500}.m-table-filter__item:hover{border-color:var(--m-mm);color:var(--m-mm);background:var(--m-background);transform:translateY(-1px);box-shadow:0 4px 12px #0000000d}.m-table-filter__item--active{background:var(--m-mm);border-color:var(--m-mm);color:var(--m-inverse-text);font-weight:600;box-shadow:0 8px 16px color-mix(in srgb,var(--m-mm) 25%,transparent)}.m-table-filter__item--active:hover{background:var(--m-mm);border-color:var(--m-mm);color:var(--m-inverse-text);transform:translateY(-1px)}.m-table-filter__item--active .m-table-filter__badge{background:#fff3;color:var(--m-inverse-text);border-color:#ffffff1a}.m-table-filter__item--primary{background:var(--m-mm);border-color:var(--m-mm);color:var(--m-inverse-text);font-weight:600;box-shadow:0 8px 16px color-mix(in srgb,var(--m-mm) 25%,transparent)}.m-table-filter__item--primary:hover{background:var(--m-mm);border-color:var(--m-mm);color:var(--m-inverse-text);transform:translateY(-1px);box-shadow:0 10px 20px color-mix(in srgb,var(--m-mm) 30%,transparent)}.m-table-filter__item--primary .m-table-filter__badge{background:#fff3;color:var(--m-inverse-text);border-color:#ffffff1a}.m-table-filter__item--danger{border-color:var(--m-error);color:var(--m-error)}.m-table-filter__item--danger:hover{border-color:var(--m-error);color:var(--m-error);background:var(--m-backdrop-error);transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--m-error) 12%,transparent)}.m-table-filter__item--danger .m-table-filter__badge{background:var(--m-backdrop-error);color:var(--m-error);border-color:color-mix(in srgb,var(--m-error) 20%,transparent)}.m-table-filter__label{font-size:.8125rem;font-weight:600;letter-spacing:.01em}.m-table-filter__badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:100px;background:var(--m-backdrop-surface);color:var(--m-text-secondary);font-size:.6875rem;font-weight:700;border:1px solid var(--m-backdrop-border);transition:all .2s ease}\n"], dependencies: [{ kind: "component", type: TableHeaderComponent, selector: "m-table-header", inputs: ["visibleColumns", "fixedCount", "fixedOffset", "sortState", "selectable", "allSelected", "someSelected"], outputs: ["sortClick", "selectAll"] }, { kind: "component", type: TableBodyComponent, selector: "m-table-body", inputs: ["rows", "visibleColumns", "fixedCount", "fixedOffset", "searchQuery", "currency", "rowClass", "emptyMessage", "rowTestId", "actionVisibilityRule", "actionDisableRule", "selectable", "selectedRows", "selectDisableExpression", "expressionContext"], outputs: ["rowSelect", "cellChanged", "rowMenuClick", "cellClick"] }, { kind: "component", type: PaginationComponent, selector: "m-pagination, m-one-pagination", inputs: ["config", "totalPages", "totalItems", "pageSize", "page"], outputs: ["configChange", "pageChange"] }, { kind: "component", type: FreezeComponent, selector: "m-freeze", inputs: ["config"] }, { kind: "component", type: WrapperInputComponent, selector: "m-input-wrapper", inputs: ["remote", "value", "readonly", "state", "focused", "form", "options", "dir", "element", "data", "template", "aclResolver", "formValues"], outputs: ["valueChange", "stateChange", "act", "fieldKey"] }, { kind: "component", type: TableFilterComponent, selector: "m-table-filter", inputs: ["filters", "data", "activeFilterIndices", "expressionContext"], outputs: ["filterClick"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -23950,7 +24067,10 @@ class UserAvatarComponent {
             return null;
         if (u.profilePic)
             return 'transparent';
-        return deriveAvatarGradient(u.id, u.sex, u.dob);
+        const seed = u.id || fullName(u);
+        if (!seed)
+            return null;
+        return deriveAvatarGradient(seed, u.sex, u.dob);
     }, ...(ngDevMode ? [{ debugName: "gradient" }] : /* istanbul ignore next */ []));
     hostClass = computed(() => {
         const classes = [
@@ -23992,24 +24112,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class UserComponent {
     id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
     user = input(undefined, ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
-    slotRef = viewChild('slot', ...(ngDevMode ? [{ debugName: "slotRef" }] : /* istanbul ignore next */ []));
-    hasContent = signal(false, ...(ngDevMode ? [{ debugName: "hasContent" }] : /* istanbul ignore next */ []));
+    firstName = input('', ...(ngDevMode ? [{ debugName: "firstName" }] : /* istanbul ignore next */ []));
+    lastName = input('', ...(ngDevMode ? [{ debugName: "lastName" }] : /* istanbul ignore next */ []));
+    profilePic = input('', ...(ngDevMode ? [{ debugName: "profilePic" }] : /* istanbul ignore next */ []));
     #userStore = inject(UserStore);
     resolvedUser = computed(() => {
-        const directUser = this.user();
-        if (directUser)
-            return directUser;
         const id = this.id();
-        if (!id)
+        const base = this.user() ?? (id ? this.#userStore.get(id)() : undefined);
+        const firstName = this.firstName();
+        const lastName = this.lastName();
+        const profilePic = this.profilePic();
+        if (!base && !firstName && !lastName && !profilePic)
             return undefined;
-        return this.#userStore.get(id)();
+        return {
+            ...base,
+            id: base?.id ?? id,
+            firstName: firstName || base?.firstName,
+            lastName: lastName || base?.lastName,
+            profilePic: profilePic || base?.profilePic,
+        };
     }, ...(ngDevMode ? [{ debugName: "resolvedUser" }] : /* istanbul ignore next */ []));
-    constructor() {
-        afterNextRender(() => {
-            const el = this.slotRef()?.nativeElement;
-            this.hasContent.set(!!el && el.childElementCount > 0);
-        });
-    }
     displayName = computed(() => fullName(this.resolvedUser()), ...(ngDevMode ? [{ debugName: "displayName" }] : /* istanbul ignore next */ []));
     identityName = computed(() => {
         const id = this.resolvedUser()?.id ?? this.id();
@@ -24024,7 +24146,7 @@ class UserComponent {
         return undefined;
     }, ...(ngDevMode ? [{ debugName: "gender" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UserComponent, isStandalone: true, selector: "m-user", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "slotRef", first: true, predicate: ["slot"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UserComponent, isStandalone: true, selector: "m-user", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, firstName: { classPropertyName: "firstName", publicName: "firstName", isSignal: true, isRequired: false, transformFunction: null }, lastName: { classPropertyName: "lastName", publicName: "lastName", isSignal: true, isRequired: false, transformFunction: null }, profilePic: { classPropertyName: "profilePic", publicName: "profilePic", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="user-profile" [class.user-profile--loading]="!resolvedUser()">
       <div class="user-avatar" [class.user-avatar--loading]="!resolvedUser()">
         <m-user-avatar [user]="resolvedUser()" />
@@ -24036,30 +24158,28 @@ class UserComponent {
           <div class="user-name-loading"></div>
         }
 
-        <div #slot class="user-content">
+        <div class="user-content">
           <ng-content></ng-content>
         </div>
 
-        @if (!hasContent()) {
-          @if (resolvedUser()) {
-            <div class="user-meta">
-              @if (identityName(); as n) {
-                <span class="user-meta-item">{{ n }}</span>
-              }
-              @if (identityName() && gender()) {
-                <span class="user-meta-divider"></span>
-              }
-              @if (gender(); as g) {
-                <span class="user-meta-item">{{ g | translate }}</span>
-              }
-            </div>
-          } @else {
-            <div class="user-meta-loading"></div>
-          }
+        @if (resolvedUser()) {
+          <div class="user-meta">
+            @if (identityName(); as n) {
+              <span class="user-meta-item">{{ n }}</span>
+            }
+            @if (identityName() && gender()) {
+              <span class="user-meta-divider"></span>
+            }
+            @if (gender(); as g) {
+              <span class="user-meta-item">{{ g | translate }}</span>
+            }
+          </div>
+        } @else {
+          <div class="user-meta-loading"></div>
         }
       </div>
     </div>
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.user-profile{display:flex;align-items:flex-start;gap:1.25rem;padding:.25rem;border-radius:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.user-info{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;flex:1;min-width:0}.user-header{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.user-content{display:contents}.user-name{font-size:1.25rem;font-weight:800;color:var(--m-text);margin:0;letter-spacing:-.03em;line-height:1.2;text-transform:capitalize}.user-meta{display:flex;align-items:center;gap:.5rem;color:var(--m-text-secondary);font-size:.875rem;font-weight:600;opacity:.8}.user-meta-item{display:flex;align-items:center}.user-meta-divider{width:3px;height:3px;border-radius:50%;background:var(--m-text-tertiary);opacity:.4}\n"], dependencies: [{ kind: "component", type: UserAvatarComponent, selector: "m-user-avatar", inputs: ["user", "variant"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate"], outputs: ["actionClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.user-profile{display:flex;align-items:flex-start;gap:1.25rem;padding:.25rem;border-radius:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.user-info{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;flex:1;min-width:0}.user-header{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.user-content{display:contents}.user-info:has(.user-content>*) .user-meta,.user-info:has(.user-content>*) .user-meta-loading{display:none}.user-name{font-size:1.25rem;font-weight:800;color:var(--m-text);margin:0;letter-spacing:-.03em;line-height:1.2;text-transform:capitalize}.user-meta{display:flex;align-items:center;gap:.5rem;color:var(--m-text-secondary);font-size:.875rem;font-weight:600;opacity:.8}.user-meta-item{display:flex;align-items:center}.user-meta-divider{width:3px;height:3px;border-radius:50%;background:var(--m-text-tertiary);opacity:.4}\n"], dependencies: [{ kind: "component", type: UserAvatarComponent, selector: "m-user-avatar", inputs: ["user", "variant"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate"], outputs: ["actionClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserComponent, decorators: [{
             type: Component,
@@ -24075,31 +24195,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           <div class="user-name-loading"></div>
         }
 
-        <div #slot class="user-content">
+        <div class="user-content">
           <ng-content></ng-content>
         </div>
 
-        @if (!hasContent()) {
-          @if (resolvedUser()) {
-            <div class="user-meta">
-              @if (identityName(); as n) {
-                <span class="user-meta-item">{{ n }}</span>
-              }
-              @if (identityName() && gender()) {
-                <span class="user-meta-divider"></span>
-              }
-              @if (gender(); as g) {
-                <span class="user-meta-item">{{ g | translate }}</span>
-              }
-            </div>
-          } @else {
-            <div class="user-meta-loading"></div>
-          }
+        @if (resolvedUser()) {
+          <div class="user-meta">
+            @if (identityName(); as n) {
+              <span class="user-meta-item">{{ n }}</span>
+            }
+            @if (identityName() && gender()) {
+              <span class="user-meta-divider"></span>
+            }
+            @if (gender(); as g) {
+              <span class="user-meta-item">{{ g | translate }}</span>
+            }
+          </div>
+        } @else {
+          <div class="user-meta-loading"></div>
         }
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.user-profile{display:flex;align-items:flex-start;gap:1.25rem;padding:.25rem;border-radius:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.user-info{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;flex:1;min-width:0}.user-header{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.user-content{display:contents}.user-name{font-size:1.25rem;font-weight:800;color:var(--m-text);margin:0;letter-spacing:-.03em;line-height:1.2;text-transform:capitalize}.user-meta{display:flex;align-items:center;gap:.5rem;color:var(--m-text-secondary);font-size:.875rem;font-weight:600;opacity:.8}.user-meta-item{display:flex;align-items:center}.user-meta-divider{width:3px;height:3px;border-radius:50%;background:var(--m-text-tertiary);opacity:.4}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], slotRef: [{ type: i0.ViewChild, args: ['slot', { isSignal: true }] }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.user-profile{display:flex;align-items:flex-start;gap:1.25rem;padding:.25rem;border-radius:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.user-info{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;flex:1;min-width:0}.user-header{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.user-content{display:contents}.user-info:has(.user-content>*) .user-meta,.user-info:has(.user-content>*) .user-meta-loading{display:none}.user-name{font-size:1.25rem;font-weight:800;color:var(--m-text);margin:0;letter-spacing:-.03em;line-height:1.2;text-transform:capitalize}.user-meta{display:flex;align-items:center;gap:.5rem;color:var(--m-text-secondary);font-size:.875rem;font-weight:600;opacity:.8}.user-meta-item{display:flex;align-items:center}.user-meta-divider{width:3px;height:3px;border-radius:50%;background:var(--m-text-tertiary);opacity:.4}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], firstName: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstName", required: false }] }], lastName: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastName", required: false }] }], profilePic: [{ type: i0.Input, args: [{ isSignal: true, alias: "profilePic", required: false }] }] } });
 
 class IdentityCardContentComponent {
     loginStore = inject(LoginStore);
@@ -24108,17 +24226,15 @@ class IdentityCardContentComponent {
     firstName = input('', ...(ngDevMode ? [{ debugName: "firstName" }] : /* istanbul ignore next */ []));
     lastName = input('', ...(ngDevMode ? [{ debugName: "lastName" }] : /* istanbul ignore next */ []));
     email = input('', ...(ngDevMode ? [{ debugName: "email" }] : /* istanbul ignore next */ []));
-    profilePic = input(undefined, ...(ngDevMode ? [{ debugName: "profilePic" }] : /* istanbul ignore next */ []));
-    identityUser = computed(() => ({
-        id: this.email(),
-        firstName: this.firstName(),
-        lastName: this.lastName(),
-        profilePic: this.profilePic(),
-    }), ...(ngDevMode ? [{ debugName: "identityUser" }] : /* istanbul ignore next */ []));
+    profilePic = input('', ...(ngDevMode ? [{ debugName: "profilePic" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IdentityCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: IdentityCardContentComponent, isStandalone: true, selector: "m-identity-card-content", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, firstName: { classPropertyName: "firstName", publicName: "firstName", isSignal: true, isRequired: false, transformFunction: null }, lastName: { classPropertyName: "lastName", publicName: "lastName", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, profilePic: { classPropertyName: "profilePic", publicName: "profilePic", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="identity-card-content">
-      <m-user [user]="identityUser()">
+      <m-user
+        [firstName]="firstName()"
+        [lastName]="lastName()"
+        [profilePic]="profilePic()"
+      >
         <span class="identity-card-content__email">{{ email() }}</span>
       </m-user>
       <div
@@ -24130,13 +24246,17 @@ class IdentityCardContentComponent {
         <m-one-button name="x" (clicked)="loginStore.removeIdentity(email())" />
       </div>
     </div>
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.identity-card-content{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.identity-card-content m-user{flex:1;min-width:0}.identity-card-content__email{font-size:.8125rem;color:var(--m-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.identity-card-content__remove{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.identity-card-content{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.identity-card-content m-user{flex:1;min-width:0}.identity-card-content__email{font-size:.8125rem;color:var(--m-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.identity-card-content__remove{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user", "firstName", "lastName", "profilePic"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IdentityCardContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'm-identity-card-content', template: `
     <div class="identity-card-content">
-      <m-user [user]="identityUser()">
+      <m-user
+        [firstName]="firstName()"
+        [lastName]="lastName()"
+        [profilePic]="profilePic()"
+      >
         <span class="identity-card-content__email">{{ email() }}</span>
       </m-user>
       <div
@@ -24179,7 +24299,7 @@ class LoginOneComponent {
                         email,
                         firstName: info?.firstName ?? '',
                         lastName: info?.lastName ?? '',
-                        profilePic: info?.profilePic,
+                        profilePic: info?.profilePic ?? '',
                     },
                 };
             }),
@@ -24235,7 +24355,7 @@ class LoginOneComponent {
         return (s) => validateLoginForm(s, form, this.#loginStore.invalidPassword, this.#loginStore.invalidOTP);
     }, ...(ngDevMode ? [{ debugName: "validation" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LoginOneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LoginOneComponent, isStandalone: true, selector: "m-login", host: { classAttribute: "m-login" }, ngImport: i0, template: "<m-section variant=\"noBorder\">\n  <m-section-back\n    [padding]=\"true\"\n    [back]=\"loginStore.hasBack()\"\n    [html]=\"loginStore.help() | translate: helpText()\"\n    (navigate)=\"loginStore.back()\"\n  />\n  <m-col [fullHeight]=\"true\">\n    <m-watermark [config]=\"watermarkConfig()\" />\n  </m-col>\n  <m-col [padding]=\"true\">\n    @if (loginStore.form() === LOGIN_FORM_GROUP.SELECT_IDENTITY) {\n      <m-one-form\n        name=\"select_identity\"\n        [(data)]=\"loginData\"\n        [(state)]=\"loginState\"\n        [elements]=\"identityElements\"\n        [datas]=\"identityDatas()\"\n        (dataChange)=\"onIdentityFormChange($event)\"\n      />\n    } @else if (loginStore.form(); as loginForm) {\n      @for (_form of [loginForm]; track _form) {\n        <m-one-form\n          [name]=\"loginForm\"\n          [(data)]=\"loginData\"\n          [(state)]=\"loginState\"\n          [validation]=\"validation()\"\n          (act)=\"loginStore.act($event)\"\n        />\n      }\n    }\n  </m-col>\n\n  @if (loginStore.form() && loginStore.form() !== LOGIN_FORM_GROUP.SELECT_IDENTITY) {\n    <m-section-footer [sticky]=\"true\">\n      @if (toReset() || toResend()) {\n        <m-one-button\n          [name]=\"toResend() ? 'resend' : 'reset'\"\n          [disabled]=\"loginState()?.disabled\"\n          (clicked)=\"loginStore.reset({})\"\n        />\n      }\n      <m-one-button\n        name=\"next\"\n        [fullWidth]=\"true\"\n        [disabled]=\"loginState()?.disabled || loginState()?.invalid\"\n        (clicked)=\"loginStore.act(loginData())\"\n      />\n    </m-section-footer>\n  }\n</m-section>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-login{position:relative;display:block;height:100%;width:480px;max-width:100vw;overflow:hidden}@media(max-width:767px){.m-login{width:100vw}}.m-login m-section{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;overflow:auto;background:transparent}.m-login m-section .m-section__body{position:relative;z-index:2;flex:1}.m-login m-col{position:relative;z-index:2}.m-login m-col:first-of-type{display:flex;align-items:center;justify-content:center;min-height:200px}.m-login m-col m-watermark{display:block;width:100%;--m-watermark-opacity: 1}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "component", type: FormGroupComponent, selector: "m-form, m-one-form", inputs: ["data", "state", "validation", "options", "fieldConfigs", "aclResolver", "autofocus", "readonly", "fieldRenderIds", "elements", "datas", "label", "subtitle"], outputs: ["dataChange", "act", "stateChange"] }, { kind: "component", type: SectionBackComponent, selector: "m-section-back", inputs: ["back", "label", "html", "padding", "paddingX", "paddingY"], outputs: ["navigate"] }, { kind: "component", type: SectionFooterComponent, selector: "m-section-footer", inputs: ["sticky", "align"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY"] }, { kind: "component", type: WatermarkComponent, selector: "m-watermark" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LoginOneComponent, isStandalone: true, selector: "m-login", host: { classAttribute: "m-login" }, ngImport: i0, template: "<m-section variant=\"noBorder\">\n  <m-section-back\n    [padding]=\"true\"\n    [back]=\"loginStore.hasBack()\"\n    [html]=\"loginStore.help() | translate: helpText()\"\n    (navigate)=\"loginStore.back()\"\n  />\n  <m-col [fullHeight]=\"true\">\n    <m-watermark [config]=\"watermarkConfig()\" />\n  </m-col>\n  <m-col [padding]=\"true\">\n    @if (loginStore.form() === LOGIN_FORM_GROUP.SELECT_IDENTITY) {\n      <m-one-form\n        name=\"select_identity\"\n        [(data)]=\"loginData\"\n        [(state)]=\"loginState\"\n        [elements]=\"identityElements\"\n        [datas]=\"identityDatas()\"\n        (dataChange)=\"onIdentityFormChange($event)\"\n      />\n    } @else if (loginStore.form(); as loginForm) {\n      @for (_form of [loginForm]; track _form) {\n        <m-one-form\n          [name]=\"loginForm\"\n          [(data)]=\"loginData\"\n          [(state)]=\"loginState\"\n          [validation]=\"validation()\"\n          (act)=\"loginStore.act($event)\"\n        />\n      }\n    }\n  </m-col>\n\n  @if (loginStore.form() && loginStore.form() !== LOGIN_FORM_GROUP.SELECT_IDENTITY) {\n    <m-section-footer [sticky]=\"true\">\n      @if (toReset() || toResend()) {\n        <m-one-button\n          [name]=\"toResend() ? 'resend' : 'reset'\"\n          [disabled]=\"loginState()?.disabled\"\n          (clicked)=\"loginStore.reset({})\"\n        />\n      }\n      <m-one-button\n        name=\"next\"\n        [fullWidth]=\"true\"\n        [disabled]=\"loginState()?.disabled || loginState()?.invalid\"\n        (clicked)=\"loginStore.act(loginData())\"\n      />\n    </m-section-footer>\n  }\n</m-section>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-login{position:relative;display:block;height:100%;width:480px;max-width:100vw;overflow:hidden}@media(max-width:767px){.m-login{width:100vw}}.m-login m-section{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;overflow:auto;background:transparent}.m-login m-section .m-section__body{position:relative;z-index:2;flex:1}.m-login m-col{position:relative;z-index:2}.m-login m-col:first-of-type{display:flex;align-items:center;justify-content:center;min-height:200px}.m-login m-col m-watermark{display:block;width:100%;--m-watermark-opacity: 1}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "component", type: FormGroupComponent, selector: "m-form, m-one-form", inputs: ["data", "state", "validation", "options", "fieldConfigs", "aclResolver", "autofocus", "readonly", "fieldRenderIds", "elements", "templates", "datas", "label", "subtitle"], outputs: ["dataChange", "act", "stateChange"] }, { kind: "component", type: SectionBackComponent, selector: "m-section-back", inputs: ["back", "label", "html", "padding", "paddingX", "paddingY"], outputs: ["navigate"] }, { kind: "component", type: SectionFooterComponent, selector: "m-section-footer", inputs: ["sticky", "align"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY"] }, { kind: "component", type: WatermarkComponent, selector: "m-watermark" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LoginOneComponent, decorators: [{
             type: Component,
@@ -24546,6 +24666,26 @@ const mInterceptor = (request, next) => {
     const isRefreshCall = request.url === httpService.buildUrl('auth', ['refresh']);
     const actions = SharedStoreRegistry.getLoadingActions() ?? loadingActions;
     const notificationService = inject(NotificationService);
+    /**
+     * Counts one request in flight and reports its failure. Applied at the point
+     * a request is actually sent rather than at the point the interceptor is
+     * entered, so a request parked waiting for tokens shows the overlay when it
+     * goes out and not while a login modal is up.
+     *
+     * The start is eager — it runs when this is called, matching the pre-existing
+     * `startLoading()` call site — and the stop rides `finalize`, so the pair is
+     * balanced on success, on error and on unsubscribe alike.
+     */
+    const withLoading = (source) => {
+        actions.startLoading();
+        return source.pipe(tap({
+            error: (e) => {
+                actions.setError();
+                if (e.status !== 403)
+                    notificationService.notifyHttpError(e.status, e.error, e.message);
+            },
+        }), finalize(() => actions.stopLoading()));
+    };
     const sendWithToken = () => {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const t = store.tokens();
@@ -24613,19 +24753,37 @@ const mInterceptor = (request, next) => {
         }
         return waitForToken();
     };
-    const waitForBoth = () => race(authObs.userId$.pipe(filter((id) => !!id), take(1), switchMap$1(() => authObs.tokens$.pipe(filter((t) => !!t), take(1), switchMap$1(() => sendWithToken())))), authFailed$.pipe(take(1), switchMap$1((err) => throwError(() => err))));
+    // Loading starts inside, at the moment the parked request is finally sent —
+    // not when it was parked. A request waiting on a login modal is not work the
+    // User is waiting on, and an overlay over that modal is a spinner they cannot
+    // dismiss. Which is also why this branch no longer calls `cancelLoading()`:
+    // there is nothing of its own to cancel, and the reset was zeroing the count
+    // of every *other* request genuinely in flight.
+    const waitForBoth = () => race(authObs.userId$.pipe(filter((id) => !!id), take(1), switchMap$1(() => authObs.tokens$.pipe(filter((t) => !!t), take(1), switchMap$1(() => withLoading(sendWithToken()))))), 
+    // The parked request never went out, so there is no count to unwind —
+    // but the failure is still this request's failure, and it used to be
+    // reported by the outer pipe this branch no longer has.
+    authFailed$.pipe(take(1), switchMap$1((err) => {
+        actions.setError();
+        if (err.status !== 403)
+            notificationService.notifyHttpError(err.status, err.error, err.message);
+        return throwError(() => err);
+    })));
+    // The first request every app makes. It showed nothing at all before, so a
+    // scaffold's whole boot was silent.
     if (isInitCall) {
         if (tokens) {
-            return sendWithToken();
-        }
-        else {
-            actions.cancelLoading();
-            return from(authenticate()).pipe(switchMap$1(({ tokens }) => {
-                store.setTokens(tokens);
-                tokenRefreshed$.next();
-                return sendWithToken();
-            }));
+            return withLoading(sendWithToken());
         }
+        // No tokens: `authenticate()` puts the login modal up, and the overlay is
+        // cancelled for its duration rather than covering it. The send that follows
+        // the login is real work and counts.
+        actions.cancelLoading();
+        return from(authenticate()).pipe(switchMap$1(({ tokens }) => {
+            store.setTokens(tokens);
+            tokenRefreshed$.next();
+            return withLoading(sendWithToken());
+        }));
     }
     if (isAuth) {
         if (isRefreshCall && pendingRefreshToken) {
@@ -24638,24 +24796,13 @@ const mInterceptor = (request, next) => {
         }
         return sendWithToken();
     }
+    // `waitForBoth` carries its own loading — it starts when the parked request
+    // is sent, and the error the race rejects with reaches the same handler
+    // through it.
     if (!tokens || !userId || pendingRefreshToken) {
-        actions.cancelLoading();
-        return waitForBoth().pipe(tap({
-            error: (e) => {
-                actions.setError();
-                if (e.status !== 403)
-                    notificationService.notifyHttpError(e.status, e.error, e.message);
-            },
-        }), finalize(() => actions.stopLoading()));
+        return waitForBoth();
     }
-    actions.startLoading();
-    return sendWithToken().pipe(tap({
-        error: (e) => {
-            actions.setError();
-            if (e.status !== 403)
-                notificationService.notifyHttpError(e.status, e.error, e.message);
-        },
-    }), finalize(() => actions.stopLoading()));
+    return withLoading(sendWithToken());
 };
 
 class BaseWebComponent {
@@ -25329,7 +25476,7 @@ class OverlayBodyComponent {
     } @else if (tag(); as t) {
       <m-ce-outlet [tag]="t" />
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: FormGroupComponent, selector: "m-form, m-one-form", inputs: ["data", "state", "validation", "options", "fieldConfigs", "aclResolver", "autofocus", "readonly", "fieldRenderIds", "elements", "datas", "label", "subtitle"], outputs: ["dataChange", "act", "stateChange"] }, { kind: "component", type: CeOutletComponent, selector: "m-ce-outlet", inputs: ["tag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: FormGroupComponent, selector: "m-form, m-one-form", inputs: ["data", "state", "validation", "options", "fieldConfigs", "aclResolver", "autofocus", "readonly", "fieldRenderIds", "elements", "templates", "datas", "label", "subtitle"], outputs: ["dataChange", "act", "stateChange"] }, { kind: "component", type: CeOutletComponent, selector: "m-ce-outlet", inputs: ["tag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OverlayBodyComponent, decorators: [{
             type: Component,
@@ -27201,7 +27348,7 @@ class UserNavComponent {
         this.activeTabId.set(tab.name);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UserNavComponent, isStandalone: true, selector: "m-user-nav", ngImport: i0, template: "<m-section maxHeight=\"full\">\n  @if (currentUser(); as user) {\n    <m-row>\n      <m-col [sm]=\"11\" [padding]=\"true\">\n        <m-user [id]=\"user.id\" mRef=\"root_user\">\n          <span class=\"user-nav__username\">&#64;{{ user.username }}</span>\n        </m-user>\n      </m-col>\n      <m-col [sm]=\"1\">\n        <m-context-menu name=\"user_header\" [config]=\"{ one: true }\" (action)=\"onUserMenuAction($event)\" />\n      </m-col>\n    </m-row>\n  }\n  <m-col>\n    @if (activeTabEntry(); as entry) {\n      @if (entry.ceSelector) {\n        <m-ce-outlet [tag]=\"entry.ceSelector\" />\n      } @else if (entry.component) {\n        <ng-container [ngComponentOutlet]=\"entry.component\" />\n      } @else {\n        <m-nothing icon=\"clock\" title=\"soon-available\" />\n      }\n    }\n  </m-col>\n</m-section>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.user-nav__username{font-size:.6875rem;font-weight:600;color:var(--m-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.profile-dashboard{display:flex;flex-direction:column;width:100%;margin:0 auto;overflow:visible;box-sizing:border-box;background:var(--m-background-lite)}.profile-banner{position:relative;height:160px;width:100%;overflow:hidden;background:linear-gradient(135deg,var(--m-mm-dark) 0%,color-mix(in oklch,var(--m-mm-dark),#000 20%) 100%);transition:all .5s cubic-bezier(.16,1,.3,1);cursor:pointer}.profile-banner:hover .profile-banner__blob--1{transform:translate(15%,10%) scale(1.1)}.profile-banner:hover .profile-banner__blob--2{transform:translate(-15%,-10%) scale(1.1)}.profile-banner:hover .profile-banner__blob--3{transform:translate(10%,-15%) scale(1.1)}.profile-banner__animate{position:absolute;inset:0;overflow:hidden;opacity:.85}.profile-banner__blob{position:absolute;border-radius:50%;filter:blur(50px);will-change:transform;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}.profile-banner__blob--1{width:240px;height:240px;background:radial-gradient(circle,color-mix(in oklch,var(--m-mm) 85%,transparent) 0%,transparent 70%);top:-85px;left:-40px;animation:float-1 14s infinite alternate ease-in-out}.profile-banner__blob--2{width:200px;height:200px;background:radial-gradient(circle,color-mix(in oklch,#e65c00 75%,transparent) 0%,transparent 70%);bottom:-65px;right:-30px;animation:float-2 18s infinite alternate ease-in-out}.profile-banner__blob--3{width:160px;height:160px;background:radial-gradient(circle,color-mix(in oklch,#ffcc00 65%,transparent) 0%,transparent 70%);top:15px;left:35%;animation:float-3 12s infinite alternate ease-in-out}.profile-banner__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#00000003,#00000014);-webkit-backdrop-filter:saturate(1.3);backdrop-filter:saturate(1.3)}@keyframes float-1{0%{transform:translate(-10%,-10%) scale(1)}50%{transform:translate(20%,12%) scale(1.1)}to{transform:translate(-5%,15%) scale(.95)}}@keyframes float-2{0%{transform:translate(20%,12%) scale(1.05)}50%{transform:translate(-12%,-12%) scale(.92)}to{transform:translate(12%,5%) scale(1.1)}}@keyframes float-3{0%{transform:translate(8%,20%) scale(.92)}50%{transform:translate(25%,-8%) scale(1.08)}to{transform:translate(5%,12%) scale(1)}}.profile-container{display:flex;flex-direction:column;padding:0 1.5rem 2rem;box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto}.profile-nav-card{background:transparent;border:none;overflow:hidden;box-sizing:border-box;width:100%;transition:all .3s cubic-bezier(.16,1,.3,1);margin-left:-1.75rem;margin-right:-1.75rem;width:calc(100% + 3.5rem)}.profile-nav-card.is-sticky{position:sticky;top:-1px;z-index:100;background:#ffffffe6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--m-backdrop-border);box-shadow:0 4px 20px #0000000a;transition:all .3s cubic-bezier(.16,1,.3,1);animation:slide-down-fade .28s cubic-bezier(.16,1,.3,1)}.profile-content{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box;margin-left:-1.75rem;margin-right:-1.75rem;width:calc(100% + 3.5rem)}.soon-card{background:#ffffff8c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--m-backdrop-border);border-radius:20px;padding:4.5rem 2rem;text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px #00000004;box-sizing:border-box;width:100%}.soon-text{font-size:.875rem;color:var(--m-text-secondary);font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(135deg,var(--m-mm),var(--m-mm-lite));-webkit-background-clip:text;-webkit-text-fill-color:transparent}@keyframes slide-down-fade{0%{transform:translateY(-10px);opacity:.75}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: CeOutletComponent, selector: "m-ce-outlet", inputs: ["tag"] }, { kind: "component", type: NothingComponent, selector: "m-nothing", inputs: ["icon", "title", "description", "buttonName", "button"], outputs: ["actionClick"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY"] }, { kind: "component", type: RowComponent, selector: "m-row", inputs: ["padding", "paddingX", "paddingY", "maxWidth", "center"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user"] }, { kind: "directive", type: MRefDirective, selector: "[mRef]", inputs: ["mRef", "mRefLinkActive", "mRefToggle", "mRefParams"] }, { kind: "component", type: ContextMenuComponent, selector: "m-context-menu, m-one-context-menu", inputs: ["toggle", "remote", "exclude", "visibilityRule", "disableRule", "extraData", "inverted"], outputs: ["toggleChange", "action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UserNavComponent, isStandalone: true, selector: "m-user-nav", ngImport: i0, template: "<m-section maxHeight=\"full\">\n  @if (currentUser(); as user) {\n    <m-row>\n      <m-col [sm]=\"11\" [padding]=\"true\">\n        <m-user [id]=\"user.id\" mRef=\"root_user\">\n          <span class=\"user-nav__username\">&#64;{{ user.username }}</span>\n        </m-user>\n      </m-col>\n      <m-col [sm]=\"1\">\n        <m-context-menu name=\"user_header\" [config]=\"{ one: true }\" (action)=\"onUserMenuAction($event)\" />\n      </m-col>\n    </m-row>\n  }\n  <m-col>\n    @if (activeTabEntry(); as entry) {\n      @if (entry.ceSelector) {\n        <m-ce-outlet [tag]=\"entry.ceSelector\" />\n      } @else if (entry.component) {\n        <ng-container [ngComponentOutlet]=\"entry.component\" />\n      } @else {\n        <m-nothing icon=\"clock\" title=\"soon-available\" />\n      }\n    }\n  </m-col>\n</m-section>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.user-nav__username{font-size:.6875rem;font-weight:600;color:var(--m-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.profile-dashboard{display:flex;flex-direction:column;width:100%;margin:0 auto;overflow:visible;box-sizing:border-box;background:var(--m-background-lite)}.profile-banner{position:relative;height:160px;width:100%;overflow:hidden;background:linear-gradient(135deg,var(--m-mm-dark) 0%,color-mix(in oklch,var(--m-mm-dark),#000 20%) 100%);transition:all .5s cubic-bezier(.16,1,.3,1);cursor:pointer}.profile-banner:hover .profile-banner__blob--1{transform:translate(15%,10%) scale(1.1)}.profile-banner:hover .profile-banner__blob--2{transform:translate(-15%,-10%) scale(1.1)}.profile-banner:hover .profile-banner__blob--3{transform:translate(10%,-15%) scale(1.1)}.profile-banner__animate{position:absolute;inset:0;overflow:hidden;opacity:.85}.profile-banner__blob{position:absolute;border-radius:50%;filter:blur(50px);will-change:transform;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}.profile-banner__blob--1{width:240px;height:240px;background:radial-gradient(circle,color-mix(in oklch,var(--m-mm) 85%,transparent) 0%,transparent 70%);top:-85px;left:-40px;animation:float-1 14s infinite alternate ease-in-out}.profile-banner__blob--2{width:200px;height:200px;background:radial-gradient(circle,color-mix(in oklch,#e65c00 75%,transparent) 0%,transparent 70%);bottom:-65px;right:-30px;animation:float-2 18s infinite alternate ease-in-out}.profile-banner__blob--3{width:160px;height:160px;background:radial-gradient(circle,color-mix(in oklch,#ffcc00 65%,transparent) 0%,transparent 70%);top:15px;left:35%;animation:float-3 12s infinite alternate ease-in-out}.profile-banner__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#00000003,#00000014);-webkit-backdrop-filter:saturate(1.3);backdrop-filter:saturate(1.3)}@keyframes float-1{0%{transform:translate(-10%,-10%) scale(1)}50%{transform:translate(20%,12%) scale(1.1)}to{transform:translate(-5%,15%) scale(.95)}}@keyframes float-2{0%{transform:translate(20%,12%) scale(1.05)}50%{transform:translate(-12%,-12%) scale(.92)}to{transform:translate(12%,5%) scale(1.1)}}@keyframes float-3{0%{transform:translate(8%,20%) scale(.92)}50%{transform:translate(25%,-8%) scale(1.08)}to{transform:translate(5%,12%) scale(1)}}.profile-container{display:flex;flex-direction:column;padding:0 1.5rem 2rem;box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto}.profile-nav-card{background:transparent;border:none;overflow:hidden;box-sizing:border-box;width:100%;transition:all .3s cubic-bezier(.16,1,.3,1);margin-left:-1.75rem;margin-right:-1.75rem;width:calc(100% + 3.5rem)}.profile-nav-card.is-sticky{position:sticky;top:-1px;z-index:100;background:#ffffffe6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--m-backdrop-border);box-shadow:0 4px 20px #0000000a;transition:all .3s cubic-bezier(.16,1,.3,1);animation:slide-down-fade .28s cubic-bezier(.16,1,.3,1)}.profile-content{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box;margin-left:-1.75rem;margin-right:-1.75rem;width:calc(100% + 3.5rem)}.soon-card{background:#ffffff8c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--m-backdrop-border);border-radius:20px;padding:4.5rem 2rem;text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px #00000004;box-sizing:border-box;width:100%}.soon-text{font-size:.875rem;color:var(--m-text-secondary);font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(135deg,var(--m-mm),var(--m-mm-lite));-webkit-background-clip:text;-webkit-text-fill-color:transparent}@keyframes slide-down-fade{0%{transform:translateY(-10px);opacity:.75}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: CeOutletComponent, selector: "m-ce-outlet", inputs: ["tag"] }, { kind: "component", type: NothingComponent, selector: "m-nothing", inputs: ["icon", "title", "description", "buttonName", "button"], outputs: ["actionClick"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY"] }, { kind: "component", type: RowComponent, selector: "m-row", inputs: ["padding", "paddingX", "paddingY", "maxWidth", "center"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user", "firstName", "lastName", "profilePic"] }, { kind: "directive", type: MRefDirective, selector: "[mRef]", inputs: ["mRef", "mRefLinkActive", "mRefToggle", "mRefParams"] }, { kind: "component", type: ContextMenuComponent, selector: "m-context-menu, m-one-context-menu", inputs: ["toggle", "remote", "exclude", "visibilityRule", "disableRule", "extraData", "inverted"], outputs: ["toggleChange", "action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserNavComponent, decorators: [{
             type: Component,
@@ -27836,7 +27983,7 @@ class ThemeComponent extends BaseWebComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-theme{display:flex;flex-direction:column;width:100%;padding:1.5rem;box-sizing:border-box;background:transparent;font-family:Outfit,Inter,system-ui,sans-serif}.m-theme__mode-selector{display:flex;justify-content:center;margin-bottom:2rem;width:100%}.m-theme__list-container{display:flex;flex-direction:column;gap:1.5rem}.m-theme .selectable-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;width:100%}.m-theme .theme-card-content{display:flex;flex-direction:column;gap:1.25rem;width:100%;box-sizing:border-box}.m-theme .theme-card-content__preview-window{width:100%;height:120px;border-radius:.75rem;border:1px solid;overflow:hidden;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px #ffffff1a,0 4px 12px #00000008;transition:border-color .2s ease}.m-theme .theme-card-content__mini-header{height:24px;display:flex;align-items:center;padding:0 .75rem;justify-content:space-between;border-bottom:1px solid;flex-shrink:0}.m-theme .theme-card-content__dot-group{display:flex;gap:4px}.m-theme .theme-card-content__dot{width:6px;height:6px;border-radius:50%;display:inline-block}.m-theme .theme-card-content__dot--red{background:#ff5f56}.m-theme .theme-card-content__dot--yellow{background:#ffbd2e}.m-theme .theme-card-content__dot--green{background:#27c93f}.m-theme .theme-card-content__mini-title{font-size:.65rem;font-weight:600;letter-spacing:.02em;text-transform:capitalize}.m-theme .theme-card-content__mini-body{display:flex;flex:1;min-height:0}.m-theme .theme-card-content__mini-sidebar{width:38px;border-right:1px solid;display:flex;flex-direction:column;gap:5px;padding:.625rem .375rem;box-sizing:border-box}.m-theme .theme-card-content__mini-main{flex:1;padding:.625rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.m-theme .theme-card-content__mini-card{width:100%;height:100%;border-radius:.375rem;border:1px solid;padding:.5rem;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;box-shadow:0 1px 3px #00000005}.m-theme .theme-card-content__line{height:3px;border-radius:2px}.m-theme .theme-card-content__line--short{width:14px}.m-theme .theme-card-content__line--heading{width:28px;height:4px;margin-bottom:3px}.m-theme .theme-card-content__line--body{width:85%}.m-theme .theme-card-content__footer{display:flex;align-items:center;justify-content:space-between;margin-top:.25rem}.m-theme .theme-card-content__info{display:flex;align-items:center;gap:.625rem}.m-theme .theme-card-content__icon-wrapper{font-size:1.25rem;display:inline-flex;align-items:center;justify-content:center}.m-theme .theme-card-content__name{font-size:.95rem;font-weight:700}.m-theme .theme-card-content__palette{display:flex;gap:5px}.m-theme .theme-card-content__swatch{width:.875rem;height:.875rem;border-radius:50%;border:1px solid rgba(0,0,0,.1);display:inline-block;box-shadow:0 1px 2px #0000000d;transition:transform .2s ease}.m-theme .theme-card-content__swatch:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "component", type: ToggleRadioInputComponent, selector: "m-toggle-radio", inputs: ["one"] }, { kind: "component", type: SelectableCardInputComponent, selector: "m-selectable-card", inputs: ["element", "data", "options", "value"], outputs: ["valueChange"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate"], outputs: ["actionClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-theme{display:flex;flex-direction:column;width:100%;padding:1.5rem;box-sizing:border-box;background:transparent;font-family:Outfit,Inter,system-ui,sans-serif}.m-theme__mode-selector{display:flex;justify-content:center;margin-bottom:2rem;width:100%}.m-theme__list-container{display:flex;flex-direction:column;gap:1.5rem}.m-theme .selectable-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;width:100%}.m-theme .theme-card-content{display:flex;flex-direction:column;gap:1.25rem;width:100%;box-sizing:border-box}.m-theme .theme-card-content__preview-window{width:100%;height:120px;border-radius:.75rem;border:1px solid;overflow:hidden;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px #ffffff1a,0 4px 12px #00000008;transition:border-color .2s ease}.m-theme .theme-card-content__mini-header{height:24px;display:flex;align-items:center;padding:0 .75rem;justify-content:space-between;border-bottom:1px solid;flex-shrink:0}.m-theme .theme-card-content__dot-group{display:flex;gap:4px}.m-theme .theme-card-content__dot{width:6px;height:6px;border-radius:50%;display:inline-block}.m-theme .theme-card-content__dot--red{background:#ff5f56}.m-theme .theme-card-content__dot--yellow{background:#ffbd2e}.m-theme .theme-card-content__dot--green{background:#27c93f}.m-theme .theme-card-content__mini-title{font-size:.65rem;font-weight:600;letter-spacing:.02em;text-transform:capitalize}.m-theme .theme-card-content__mini-body{display:flex;flex:1;min-height:0}.m-theme .theme-card-content__mini-sidebar{width:38px;border-right:1px solid;display:flex;flex-direction:column;gap:5px;padding:.625rem .375rem;box-sizing:border-box}.m-theme .theme-card-content__mini-main{flex:1;padding:.625rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.m-theme .theme-card-content__mini-card{width:100%;height:100%;border-radius:.375rem;border:1px solid;padding:.5rem;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;box-shadow:0 1px 3px #00000005}.m-theme .theme-card-content__line{height:3px;border-radius:2px}.m-theme .theme-card-content__line--short{width:14px}.m-theme .theme-card-content__line--heading{width:28px;height:4px;margin-bottom:3px}.m-theme .theme-card-content__line--body{width:85%}.m-theme .theme-card-content__footer{display:flex;align-items:center;justify-content:space-between;margin-top:.25rem}.m-theme .theme-card-content__info{display:flex;align-items:center;gap:.625rem}.m-theme .theme-card-content__icon-wrapper{font-size:1.25rem;display:inline-flex;align-items:center;justify-content:center}.m-theme .theme-card-content__name{font-size:.95rem;font-weight:700}.m-theme .theme-card-content__palette{display:flex;gap:5px}.m-theme .theme-card-content__swatch{width:.875rem;height:.875rem;border-radius:50%;border:1px solid rgba(0,0,0,.1);display:inline-block;box-shadow:0 1px 2px #0000000d;transition:transform .2s ease}.m-theme .theme-card-content__swatch:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "component", type: ToggleRadioInputComponent, selector: "m-toggle-radio", inputs: ["one"] }, { kind: "component", type: SelectableCardInputComponent, selector: "m-selectable-card", inputs: ["element", "data", "template", "options", "value"], outputs: ["valueChange"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate"], outputs: ["actionClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ThemeComponent, decorators: [{
             type: Component,
@@ -28156,7 +28303,7 @@ class LanguageComponent extends BaseWebComponent {
         }
       </div>
     </div>
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-language{display:flex;flex-direction:column;width:100%;padding:1.5rem;box-sizing:border-box;background:transparent;font-family:Outfit,Inter,system-ui,sans-serif}.m-language__list-container{display:flex;flex-direction:column;gap:2rem}.m-language__section{display:flex;flex-direction:column;gap:.875rem}.m-language__section m-header h4{margin:0;font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8}.m-language__empty{display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem;background:#fff6;border:1px dashed rgba(0,0,0,.08);border-radius:1rem}.m-language__empty m-header h4{margin:0;font-size:1rem;font-weight:500;color:#64748b}.m-language .selectable-card__item{background:#fff9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.06);border-radius:1rem;padding:.875rem 1.125rem;margin-bottom:.25rem;box-shadow:0 4px 6px -1px #00000005,0 2px 4px -1px #00000003}.m-language .selectable-card__item--selected{border-color:var(--mm-color, var(--m-mm));background:color-mix(in srgb,var(--mm-color, var(--m-mm)) 6%,#ffffff);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--mm-color, var(--m-mm)) 8%,transparent),0 4px 6px -2px color-mix(in srgb,var(--mm-color, var(--m-mm)) 8%,transparent)}.m-language .selectable-card__item--selected .language-card-content__avatar{background:var(--mm-color, var(--m-mm));color:#fff}.m-language .selectable-card__item:hover:not(.selectable-card__item--disabled){border-color:var(--mm-color, var(--m-mm));background:color-mix(in srgb,var(--mm-color, var(--m-mm)) 3%,rgba(255,255,255,.9))}.m-language .language-card-content{display:flex;align-items:center;gap:1.125rem}.m-language .language-card-content__avatar{width:2.75rem;height:2.75rem;border-radius:.75rem;background:color-mix(in srgb,var(--mm-color, var(--m-mm)) 10%,rgba(255,255,255,.8));color:var(--mm-color, var(--m-mm));display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;transition:all .2s ease;flex-shrink:0;box-shadow:inset 0 2px 4px #00000005}.m-language .language-card-content__info{display:flex;flex-direction:column;gap:.125rem;min-width:0}.m-language .language-card-content__native{font-size:.95rem;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-language .language-card-content__english{font-size:.8125rem;font-weight:400;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-language .selectable-card__indicator input[type=radio]{width:1.25rem;height:1.25rem;border:2px solid #cbd5e1;border-radius:50%;transition:all .2s ease}.m-language .selectable-card__indicator input[type=radio]:checked{border-color:var(--mm-color, var(--m-mm));background:var(--mm-color, var(--m-mm))}.m-language .selectable-card__indicator input[type=radio]:checked:after{background:#fff;width:.45rem;height:.45rem}\n"], dependencies: [{ kind: "component", type: SelectableCardInputComponent, selector: "m-selectable-card", inputs: ["element", "data", "options", "value"], outputs: ["valueChange"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate"], outputs: ["actionClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-language{display:flex;flex-direction:column;width:100%;padding:1.5rem;box-sizing:border-box;background:transparent;font-family:Outfit,Inter,system-ui,sans-serif}.m-language__list-container{display:flex;flex-direction:column;gap:2rem}.m-language__section{display:flex;flex-direction:column;gap:.875rem}.m-language__section m-header h4{margin:0;font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8}.m-language__empty{display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem;background:#fff6;border:1px dashed rgba(0,0,0,.08);border-radius:1rem}.m-language__empty m-header h4{margin:0;font-size:1rem;font-weight:500;color:#64748b}.m-language .selectable-card__item{background:#fff9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.06);border-radius:1rem;padding:.875rem 1.125rem;margin-bottom:.25rem;box-shadow:0 4px 6px -1px #00000005,0 2px 4px -1px #00000003}.m-language .selectable-card__item--selected{border-color:var(--mm-color, var(--m-mm));background:color-mix(in srgb,var(--mm-color, var(--m-mm)) 6%,#ffffff);box-shadow:0 10px 15px -3px color-mix(in srgb,var(--mm-color, var(--m-mm)) 8%,transparent),0 4px 6px -2px color-mix(in srgb,var(--mm-color, var(--m-mm)) 8%,transparent)}.m-language .selectable-card__item--selected .language-card-content__avatar{background:var(--mm-color, var(--m-mm));color:#fff}.m-language .selectable-card__item:hover:not(.selectable-card__item--disabled){border-color:var(--mm-color, var(--m-mm));background:color-mix(in srgb,var(--mm-color, var(--m-mm)) 3%,rgba(255,255,255,.9))}.m-language .language-card-content{display:flex;align-items:center;gap:1.125rem}.m-language .language-card-content__avatar{width:2.75rem;height:2.75rem;border-radius:.75rem;background:color-mix(in srgb,var(--mm-color, var(--m-mm)) 10%,rgba(255,255,255,.8));color:var(--mm-color, var(--m-mm));display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;transition:all .2s ease;flex-shrink:0;box-shadow:inset 0 2px 4px #00000005}.m-language .language-card-content__info{display:flex;flex-direction:column;gap:.125rem;min-width:0}.m-language .language-card-content__native{font-size:.95rem;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-language .language-card-content__english{font-size:.8125rem;font-weight:400;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-language .selectable-card__indicator input[type=radio]{width:1.25rem;height:1.25rem;border:2px solid #cbd5e1;border-radius:50%;transition:all .2s ease}.m-language .selectable-card__indicator input[type=radio]:checked{border-color:var(--mm-color, var(--m-mm));background:var(--mm-color, var(--m-mm))}.m-language .selectable-card__indicator input[type=radio]:checked:after{background:#fff;width:.45rem;height:.45rem}\n"], dependencies: [{ kind: "component", type: SelectableCardInputComponent, selector: "m-selectable-card", inputs: ["element", "data", "template", "options", "value"], outputs: ["valueChange"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate"], outputs: ["actionClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LanguageComponent, decorators: [{
             type: Component,
@@ -28413,7 +28560,7 @@ class UserSettingsComponent {
         }
       </m-accordion-group>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AccordionGroupComponent, selector: "m-accordion-group, m-one-accordion-group" }, { kind: "component", type: AccordionComponent, selector: "m-accordion", inputs: ["variant", "open", "label", "subtitle", "icon"], outputs: ["toggled"] }, { kind: "directive", type: AccordionBodyDirective, selector: "ng-template[mAccordionBody]" }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AccordionGroupComponent, selector: "m-accordion-group, m-one-accordion-group" }, { kind: "component", type: AccordionComponent, selector: "m-accordion", inputs: ["variant", "open", "label", "subtitle", "icon"], outputs: ["toggled"] }, { kind: "directive", type: AccordionBodyDirective, selector: "ng-template[mAccordionBody]" }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user", "firstName", "lastName", "profilePic"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserSettingsComponent, decorators: [{
             type: Component,
@@ -28594,10 +28741,16 @@ function provideMagWcConfig(options) {
                     new LoginStore(),
             },
             {
+                // Falls back to the local LoginStore rather than to `null`, matching
+                // `provideMagAppConfig`. A WC bundle mounted with no host had no login
+                // store at all, so `mm-interceptor` read `store?.tokens()` and
+                // `store?.userId()` as undefined forever, took the wait-for-auth branch
+                // on every request, and never counted one as loading.
                 provide: LOGIN_STORE,
-                useFactory: () => SharedStoreRegistry.getLoginStore() ||
+                useFactory: (localStore) => SharedStoreRegistry.getLoginStore() ||
                     SharedStoreRegistry.getHostInjector()?.get(LOGIN_STORE, null) ||
-                    null,
+                    localStore,
+                deps: [LoginStore],
             },
             {
                 provide: APP_CONTEXT_REF,
@@ -29959,7 +30112,7 @@ class SvgGeneratorToolBoxComponent {
         }
       </div>
     </m-section>
-  </div>`, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.svg-generator-tool-box{width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:1rem;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background-color:var(--m-backdrop-standard);border:1px solid var(--m-backdrop-border);border-radius:.5rem;overflow:hidden;max-height:300px;overflow-y:auto}.svg-generator-tool-box .svg-generator-tool-box-header{border-bottom:1px solid var(--border-color);top:0;position:sticky;z-index:5260;background:var(--background, #ffffff);padding:.5em 1em;display:flex;align-items:center;gap:.5em;justify-content:flex-start;width:100%;box-sizing:border-box}.svg-generator-tool-box .svg-generator-tool-box-header .m-header{display:block;width:100%;height:100%}.svg-generator-tool-box .svg-generator-tool-box-header h2{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:.8em;color:var(--mm-color)}.svg-generator-tool-box .svg-generator-tool-box-header .icon-container{display:flex;width:1em;height:1em}.svg-generator-tool-box .svg-generator-tool-box-content{display:flex;flex-direction:column;box-sizing:border-box}.svg-generator-tool-box .svg-generator-tool-box-content .options{display:flex;flex-direction:column;padding:0 1em;box-sizing:border-box;gap:.5em}.svg-generator-tool-box .svg-generator-tool-box-content .options h3{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:.8em}.svg-generator-tool-box .svg-generator-tool-box-content .form-radio{display:flex;flex-direction:column;gap:4px;padding:4px 0}.svg-generator-tool-box .svg-generator-tool-box-content .form-radio .form-radio__label{font-size:.75em;opacity:.7}.svg-generator-tool-box .svg-generator-tool-box-content .form-radio .form-radio__options{display:flex;gap:8px;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { kind: "component", type: FormGroupComponent, selector: "m-form, m-one-form", inputs: ["data", "state", "validation", "options", "fieldConfigs", "aclResolver", "autofocus", "readonly", "fieldRenderIds", "elements", "datas", "label", "subtitle"], outputs: ["dataChange", "act", "stateChange"] }, { kind: "component", type: MenuComponent, selector: "m-menu", inputs: ["config", "file", "root", "url", "extra", "hide", "hideLink", "isAdmin", "visibilityRule", "disableRule", "extraData"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  </div>`, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.svg-generator-tool-box{width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:1rem;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background-color:var(--m-backdrop-standard);border:1px solid var(--m-backdrop-border);border-radius:.5rem;overflow:hidden;max-height:300px;overflow-y:auto}.svg-generator-tool-box .svg-generator-tool-box-header{border-bottom:1px solid var(--border-color);top:0;position:sticky;z-index:5260;background:var(--background, #ffffff);padding:.5em 1em;display:flex;align-items:center;gap:.5em;justify-content:flex-start;width:100%;box-sizing:border-box}.svg-generator-tool-box .svg-generator-tool-box-header .m-header{display:block;width:100%;height:100%}.svg-generator-tool-box .svg-generator-tool-box-header h2{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:.8em;color:var(--mm-color)}.svg-generator-tool-box .svg-generator-tool-box-header .icon-container{display:flex;width:1em;height:1em}.svg-generator-tool-box .svg-generator-tool-box-content{display:flex;flex-direction:column;box-sizing:border-box}.svg-generator-tool-box .svg-generator-tool-box-content .options{display:flex;flex-direction:column;padding:0 1em;box-sizing:border-box;gap:.5em}.svg-generator-tool-box .svg-generator-tool-box-content .options h3{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:.8em}.svg-generator-tool-box .svg-generator-tool-box-content .form-radio{display:flex;flex-direction:column;gap:4px;padding:4px 0}.svg-generator-tool-box .svg-generator-tool-box-content .form-radio .form-radio__label{font-size:.75em;opacity:.7}.svg-generator-tool-box .svg-generator-tool-box-content .form-radio .form-radio__options{display:flex;gap:8px;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { kind: "component", type: FormGroupComponent, selector: "m-form, m-one-form", inputs: ["data", "state", "validation", "options", "fieldConfigs", "aclResolver", "autofocus", "readonly", "fieldRenderIds", "elements", "templates", "datas", "label", "subtitle"], outputs: ["dataChange", "act", "stateChange"] }, { kind: "component", type: MenuComponent, selector: "m-menu", inputs: ["config", "file", "root", "url", "extra", "hide", "hideLink", "isAdmin", "visibilityRule", "disableRule", "extraData"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SvgGeneratorToolBoxComponent, decorators: [{
             type: Component,
@@ -30641,7 +30794,7 @@ class SearchUserPanelComponent {
         this.modalStore.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SearchUserPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SearchUserPanelComponent, isStandalone: true, selector: "m-search-user-panel", inputs: { onUserSelected: { classPropertyName: "onUserSelected", publicName: "onUserSelected", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<m-section>\n  <m-col>\n    <div class=\"search-user-panel__form\">\n      <m-form name=\"user_search\" [one]=\"true\" (dataChange)=\"onSearchChange($event)\" (act)=\"onAct($event)\" />\n    </div>\n  </m-col>\n\n  @if (searched()) {\n    <div class=\"search-user-panel__results\">\n      @for (user of userStore.searchResults(); track user.id) {\n        <m-section-card\n          [margin]=\"true\"\n          [padding]=\"true\"\n          [attr.data-testid]=\"'user-result-' + user.id\"\n        >\n          <m-user [id]=\"user.id\">\n            <span class=\"search-user-panel__result-name\">{{ userName(user.id) }}</span>\n            <m-one-button name=\"select_user\" (clicked)=\"selectUser(user)\" />\n          </m-user>\n        </m-section-card>\n      } @empty {\n        <div class=\"search-user-panel__empty\">\n          <div class=\"search-user-panel__empty-icon\">\n            <m-icon name=\"user\" />\n          </div>\n          <p>{{ 'user-not-found' | translate }}</p>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"search-user-panel__prompt\">\n      <div class=\"search-user-panel__prompt-icon\">\n        <m-icon name=\"search\" />\n      </div>\n      <p>{{ 'search-user-prompt' | translate }}</p>\n    </div>\n  }\n</m-section>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.search-user-panel__form{padding:var(--section-header-py, .75rem) var(--section-px, 1rem);border-bottom:1px solid var(--m-backdrop-border)}.search-user-panel__results{grid-column:1/-1;overflow-y:auto;display:flex;flex-direction:column}.search-user-panel__results::-webkit-scrollbar{width:6px}.search-user-panel__results::-webkit-scrollbar-track{background:transparent}.search-user-panel__results::-webkit-scrollbar-thumb{background:var(--m-backdrop-border);border-radius:10px}.search-user-panel__results::-webkit-scrollbar-thumb:hover{background:var(--m-backdrop-glass)}.search-user-panel__empty,.search-user-panel__prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;color:var(--m-text-secondary);gap:1.5rem;animation:fadeIn .6s ease-out}.search-user-panel__empty p,.search-user-panel__prompt p{font-size:1.125rem;font-weight:600;margin:0;max-width:300px;line-height:1.5}.search-user-panel__prompt{grid-column:1/-1}.search-user-panel__result-name{font-size:.75rem;color:var(--m-text-secondary)}.search-user-panel__empty-icon,.search-user-panel__prompt-icon{opacity:.15;color:var(--m-mm);filter:drop-shadow(0 8px 16px var(--m-backdrop-mm))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: FormGroupComponent, selector: "m-form, m-one-form", inputs: ["data", "state", "validation", "options", "fieldConfigs", "aclResolver", "autofocus", "readonly", "fieldRenderIds", "elements", "datas", "label", "subtitle"], outputs: ["dataChange", "act", "stateChange"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: SectionCardComponent, selector: "m-section-card", inputs: ["margin", "icon", "actionName", "menu", "menuName"], outputs: ["action"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SearchUserPanelComponent, isStandalone: true, selector: "m-search-user-panel", inputs: { onUserSelected: { classPropertyName: "onUserSelected", publicName: "onUserSelected", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<m-section>\n  <m-col>\n    <div class=\"search-user-panel__form\">\n      <m-form name=\"user_search\" [one]=\"true\" (dataChange)=\"onSearchChange($event)\" (act)=\"onAct($event)\" />\n    </div>\n  </m-col>\n\n  @if (searched()) {\n    <div class=\"search-user-panel__results\">\n      @for (user of userStore.searchResults(); track user.id) {\n        <m-section-card\n          [margin]=\"true\"\n          [padding]=\"true\"\n          [attr.data-testid]=\"'user-result-' + user.id\"\n        >\n          <m-user [id]=\"user.id\">\n            <span class=\"search-user-panel__result-name\">{{ userName(user.id) }}</span>\n            <m-one-button name=\"select_user\" (clicked)=\"selectUser(user)\" />\n          </m-user>\n        </m-section-card>\n      } @empty {\n        <div class=\"search-user-panel__empty\">\n          <div class=\"search-user-panel__empty-icon\">\n            <m-icon name=\"user\" />\n          </div>\n          <p>{{ 'user-not-found' | translate }}</p>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"search-user-panel__prompt\">\n      <div class=\"search-user-panel__prompt-icon\">\n        <m-icon name=\"search\" />\n      </div>\n      <p>{{ 'search-user-prompt' | translate }}</p>\n    </div>\n  }\n</m-section>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.search-user-panel__form{padding:var(--section-header-py, .75rem) var(--section-px, 1rem);border-bottom:1px solid var(--m-backdrop-border)}.search-user-panel__results{grid-column:1/-1;overflow-y:auto;display:flex;flex-direction:column}.search-user-panel__results::-webkit-scrollbar{width:6px}.search-user-panel__results::-webkit-scrollbar-track{background:transparent}.search-user-panel__results::-webkit-scrollbar-thumb{background:var(--m-backdrop-border);border-radius:10px}.search-user-panel__results::-webkit-scrollbar-thumb:hover{background:var(--m-backdrop-glass)}.search-user-panel__empty,.search-user-panel__prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;color:var(--m-text-secondary);gap:1.5rem;animation:fadeIn .6s ease-out}.search-user-panel__empty p,.search-user-panel__prompt p{font-size:1.125rem;font-weight:600;margin:0;max-width:300px;line-height:1.5}.search-user-panel__prompt{grid-column:1/-1}.search-user-panel__result-name{font-size:.75rem;color:var(--m-text-secondary)}.search-user-panel__empty-icon,.search-user-panel__prompt-icon{opacity:.15;color:var(--m-mm);filter:drop-shadow(0 8px 16px var(--m-backdrop-mm))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: FormGroupComponent, selector: "m-form, m-one-form", inputs: ["data", "state", "validation", "options", "fieldConfigs", "aclResolver", "autofocus", "readonly", "fieldRenderIds", "elements", "templates", "datas", "label", "subtitle"], outputs: ["dataChange", "act", "stateChange"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user", "firstName", "lastName", "profilePic"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: SectionCardComponent, selector: "m-section-card", inputs: ["margin", "icon", "actionName", "menu", "menuName"], outputs: ["action"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SearchUserPanelComponent, decorators: [{
             type: Component,
@@ -30985,7 +31138,7 @@ class CommentItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CommentItemComponent, isStandalone: true, selector: "m-comment-item", inputs: { comment: { classPropertyName: "comment", publicName: "comment", isSignal: true, isRequired: true, transformFunction: null }, showReplies: { classPropertyName: "showReplies", publicName: "showReplies", isSignal: true, isRequired: false, transformFunction: null }, isReplying: { classPropertyName: "isReplying", publicName: "isReplying", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reply: "reply", cancelReply: "cancelReply", toggleReplies: "toggleReplies", deleted: "deleted" }, ngImport: i0, template: "<m-user [id]=\"comment().uid\">\n  <p class=\"comment-item__text\">{{ comment().text }}</p>\n\n  <div class=\"comment-item__actions\">\n    <span class=\"comment-item__date\">{{ comment().date | date: 'shortTime' }}</span>\n\n    <m-button name=\"reply\" (clicked)=\"reply.emit(comment().id)\" />\n\n    <div class=\"comment-item__menu-container\">\n      @if (isAuthor()) {\n        <m-one-context-menu name=\"comment_actions\" (action)=\"onMenuAction($event)\" />\n      }\n    </div>\n  </div>\n\n  @if (comment().replyCount > 0) {\n    <m-button\n      [name]=\"showReplies() ? 'hide-replies' : 'view-replies'\"\n      (clicked)=\"toggleReplies.emit()\"\n    />\n  }\n\n  @if (isReplying()) {\n    <div class=\"comment-item__reply-compose\">\n      <m-textarea-input [config]=\"replyConfig\" [(value)]=\"replyDraft\" [disabled]=\"submitting\" />\n      <div class=\"comment-item__reply-actions-wrapper\">\n        <m-one-button-group\n          name=\"reply_actions\"\n          [buttons]=\"{\n            post: { disabled: !replyDraft().trim() || submitting },\n          }\"\n          (clicked)=\"onReplyAction($event)\"\n        />\n      </div>\n    </div>\n  }\n\n  @if (showReplies()) {\n    <div class=\"comment-item__nested\">\n      <m-comments [id]=\"comment().id\" [isNested]=\"true\" />\n    </div>\n  }\n</m-user>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-right{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.comment-item{position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);animation:fade-in .5s cubic-bezier(.16,1,.3,1)}.comment-item__text{margin:.25rem 0 .5rem;font-size:.95rem;line-height:1.6;color:var(--m-text);font-weight:400;word-break:break-word;animation:slide-right .6s cubic-bezier(.16,1,.3,1)}.comment-item__actions{display:flex;align-items:center;gap:1.5rem;margin-top:.25rem}.comment-item__date{color:var(--m-text-tertiary);font-size:.75rem;font-weight:500;letter-spacing:.01em}.comment-item__reply-compose{margin-top:1rem;margin-bottom:.5rem;display:flex;flex-direction:column;gap:1rem;background:color-mix(in srgb,var(--m-border) 15%,transparent);border:1px solid color-mix(in srgb,var(--m-border) 30%,transparent);border-radius:20px;padding:1rem;box-shadow:0 8px 32px #00000005,0 2px 8px #00000003;transition:all .4s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;animation:slide-up .6s cubic-bezier(.16,1,.3,1)}.comment-item__reply-compose:focus-within{border-color:color-mix(in srgb,var(--m-mm) 50%,transparent);background:color-mix(in srgb,var(--m-border) 10%,transparent);box-shadow:0 12px 40px #0000000a}.comment-item__reply-compose .m-textarea-input{--m-textarea-input-background: transparent;--m-textarea-input-border: none;--m-textarea-input-padding: 0;--m-textarea-input-shadow: none;width:100%}.comment-item__reply-compose .m-textarea-input textarea{width:100%;font-size:.9rem;color:var(--m-text);min-height:60px;resize:none;line-height:1.5}.comment-item__reply-compose .m-textarea-input textarea::placeholder{color:var(--m-text-tertiary)}.comment-item__reply-actions-wrapper{display:flex;align-items:center;justify-content:flex-end;align-self:flex-end;width:100%;transition:all .3s ease}.comment-item__nested{margin-top:.25rem;margin-left:1rem;padding:0;border-left:2px solid color-mix(in srgb,var(--m-mm) 10%,transparent);transition:border-color .3s;animation:fade-in .5s ease-out}.comment-item__nested:hover{border-left-color:color-mix(in srgb,var(--m-mm) 30%,transparent)}.comment-item__nested .comments{padding:0;background:transparent;box-shadow:none;border-radius:0;gap:1rem}.comment-item__nested .comments .comments__compose{margin-top:.5rem;padding:1rem;border-radius:.375rem}.comment-item__menu-container{position:relative;display:inline-flex;margin-left:auto}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => UserComponent), selector: "m-user", inputs: ["id", "user"] }, { kind: "component", type: i0.forwardRef(() => TextareaInputComponent), selector: "m-textarea-input" }, { kind: "component", type: i0.forwardRef(() => ButtonGroupComponent), selector: "m-button-group, m-one-button-group", inputs: ["buttons", "names", "exclude", "vertical", "size"], outputs: ["clicked"] }, { kind: "component", type: i0.forwardRef(() => ButtonComponent), selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "component", type: i0.forwardRef(() => ContextMenuComponent), selector: "m-context-menu, m-one-context-menu", inputs: ["toggle", "remote", "exclude", "visibilityRule", "disableRule", "extraData", "inverted"], outputs: ["toggleChange", "action"] }, { kind: "component", type: i0.forwardRef(() => CommentsComponent), selector: "m-comments", inputs: ["id", "isNested"] }, { kind: "pipe", type: i0.forwardRef(() => DatePipe), name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CommentItemComponent, isStandalone: true, selector: "m-comment-item", inputs: { comment: { classPropertyName: "comment", publicName: "comment", isSignal: true, isRequired: true, transformFunction: null }, showReplies: { classPropertyName: "showReplies", publicName: "showReplies", isSignal: true, isRequired: false, transformFunction: null }, isReplying: { classPropertyName: "isReplying", publicName: "isReplying", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reply: "reply", cancelReply: "cancelReply", toggleReplies: "toggleReplies", deleted: "deleted" }, ngImport: i0, template: "<m-user [id]=\"comment().uid\">\n  <p class=\"comment-item__text\">{{ comment().text }}</p>\n\n  <div class=\"comment-item__actions\">\n    <span class=\"comment-item__date\">{{ comment().date | date: 'shortTime' }}</span>\n\n    <m-button name=\"reply\" (clicked)=\"reply.emit(comment().id)\" />\n\n    <div class=\"comment-item__menu-container\">\n      @if (isAuthor()) {\n        <m-one-context-menu name=\"comment_actions\" (action)=\"onMenuAction($event)\" />\n      }\n    </div>\n  </div>\n\n  @if (comment().replyCount > 0) {\n    <m-button\n      [name]=\"showReplies() ? 'hide-replies' : 'view-replies'\"\n      (clicked)=\"toggleReplies.emit()\"\n    />\n  }\n\n  @if (isReplying()) {\n    <div class=\"comment-item__reply-compose\">\n      <m-textarea-input [config]=\"replyConfig\" [(value)]=\"replyDraft\" [disabled]=\"submitting\" />\n      <div class=\"comment-item__reply-actions-wrapper\">\n        <m-one-button-group\n          name=\"reply_actions\"\n          [buttons]=\"{\n            post: { disabled: !replyDraft().trim() || submitting },\n          }\"\n          (clicked)=\"onReplyAction($event)\"\n        />\n      </div>\n    </div>\n  }\n\n  @if (showReplies()) {\n    <div class=\"comment-item__nested\">\n      <m-comments [id]=\"comment().id\" [isNested]=\"true\" />\n    </div>\n  }\n</m-user>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-right{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.comment-item{position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);animation:fade-in .5s cubic-bezier(.16,1,.3,1)}.comment-item__text{margin:.25rem 0 .5rem;font-size:.95rem;line-height:1.6;color:var(--m-text);font-weight:400;word-break:break-word;animation:slide-right .6s cubic-bezier(.16,1,.3,1)}.comment-item__actions{display:flex;align-items:center;gap:1.5rem;margin-top:.25rem}.comment-item__date{color:var(--m-text-tertiary);font-size:.75rem;font-weight:500;letter-spacing:.01em}.comment-item__reply-compose{margin-top:1rem;margin-bottom:.5rem;display:flex;flex-direction:column;gap:1rem;background:color-mix(in srgb,var(--m-border) 15%,transparent);border:1px solid color-mix(in srgb,var(--m-border) 30%,transparent);border-radius:20px;padding:1rem;box-shadow:0 8px 32px #00000005,0 2px 8px #00000003;transition:all .4s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;animation:slide-up .6s cubic-bezier(.16,1,.3,1)}.comment-item__reply-compose:focus-within{border-color:color-mix(in srgb,var(--m-mm) 50%,transparent);background:color-mix(in srgb,var(--m-border) 10%,transparent);box-shadow:0 12px 40px #0000000a}.comment-item__reply-compose .m-textarea-input{--m-textarea-input-background: transparent;--m-textarea-input-border: none;--m-textarea-input-padding: 0;--m-textarea-input-shadow: none;width:100%}.comment-item__reply-compose .m-textarea-input textarea{width:100%;font-size:.9rem;color:var(--m-text);min-height:60px;resize:none;line-height:1.5}.comment-item__reply-compose .m-textarea-input textarea::placeholder{color:var(--m-text-tertiary)}.comment-item__reply-actions-wrapper{display:flex;align-items:center;justify-content:flex-end;align-self:flex-end;width:100%;transition:all .3s ease}.comment-item__nested{margin-top:.25rem;margin-left:1rem;padding:0;border-left:2px solid color-mix(in srgb,var(--m-mm) 10%,transparent);transition:border-color .3s;animation:fade-in .5s ease-out}.comment-item__nested:hover{border-left-color:color-mix(in srgb,var(--m-mm) 30%,transparent)}.comment-item__nested .comments{padding:0;background:transparent;box-shadow:none;border-radius:0;gap:1rem}.comment-item__nested .comments .comments__compose{margin-top:.5rem;padding:1rem;border-radius:.375rem}.comment-item__menu-container{position:relative;display:inline-flex;margin-left:auto}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => UserComponent), selector: "m-user", inputs: ["id", "user", "firstName", "lastName", "profilePic"] }, { kind: "component", type: i0.forwardRef(() => TextareaInputComponent), selector: "m-textarea-input" }, { kind: "component", type: i0.forwardRef(() => ButtonGroupComponent), selector: "m-button-group, m-one-button-group", inputs: ["buttons", "names", "exclude", "vertical", "size"], outputs: ["clicked"] }, { kind: "component", type: i0.forwardRef(() => ButtonComponent), selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "type"], outputs: ["configChange", "clicked"] }, { kind: "component", type: i0.forwardRef(() => ContextMenuComponent), selector: "m-context-menu, m-one-context-menu", inputs: ["toggle", "remote", "exclude", "visibilityRule", "disableRule", "extraData", "inverted"], outputs: ["toggleChange", "action"] }, { kind: "component", type: i0.forwardRef(() => CommentsComponent), selector: "m-comments", inputs: ["id", "isNested"] }, { kind: "pipe", type: i0.forwardRef(() => DatePipe), name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CommentItemComponent, decorators: [{
             type: Component,
@@ -31226,4 +31379,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 
 export { DeviceService as $, ACCESS_DOMAINS as A, BaseInputComponent as B, COLOR_SCHEMES$1 as C, CarouselComponent as D, ChartComponent as E, CheckboxInputComponent as F, ClearableInputComponent as G, ColComponent as H, IS_DESIGN_MODE as I, ColorPickerInputComponent as J, CommentItemComponent as K, LabelComponent as L, CommentsApiService as M, CommentsComponent as N, CommentsStore as O, ComponentInputComponent as P, ComponentStepperComponent as Q, ConfigComponent as R, ConfirmComponent as S, TranslatePipe as T, ContextMenuComponent as U, CustomIconClass as V, CustomIconEditComponent as W, DEFAULT_SIZE as X, DashboardCardComponent as Y, DateInputComponent as Z, DatePickerComponent as _, BaseTextInputComponent as a, NAV_MAIN_BUTTONS as a$, DomService as a0, Domain as a1, DotGridComponent as a2, DragListDirective as a3, DragListItemDirective as a4, DraggableDirective as a5, DropdownInputComponent as a6, FLEX_VARIANTS as a7, FOLDER_PICK_LISTENER as a8, FORM_ASSET_FOLDER as a9, LOGIN_PROCESS as aA, LOGIN_STORE as aB, LanguageComponent as aC, LoginDataService as aD, LoginOneComponent as aE, LoginStore as aF, LogoComponent as aG, MAG_SOCKET_EVENT as aH, MHeroColorDirective as aI, MHeroComponent as aJ, MODAL_REF as aK, MODAL_STORE_REF as aL, MRefDirective as aM, MStepComponent as aN, MURL_PARAM as aO, MURL_SEP as aP, ManifestEnrichmentService as aQ, MenuComponent as aR, ModalDirective as aS, ModalRef as aT, ModalStore as aU, MoneyPipe as aV, MultiRangeInputComponent as aW, MurlUrlSerializer as aX, NAV_DEFAULT_MURL as aY, NAV_DISPLAY_ORDER as aZ, NAV_ID_SEP as a_, FileService as aa, FileUploadDirective as ab, FileUploadInputComponent as ac, FlexComponent as ad, FlexItemComponent as ae, FormGroupComponent as af, FrameComponent as ag, FreezeService as ah, GEN_NAV_DISPLAY_ORDER as ai, GRID_BREAKPOINTS as aj, GetNavService as ak, HeaderComponent$1 as al, HighlightDirective as am, HttpService as an, ICON_SOURCE as ao, IS_SIDE_PANEL as ap, IconComponent as aq, ImgComponent as ar, InputType as as, InstrumentScoreComponent as at, InterceptorObservables as au, JumbotronComponent as av, KeyValueComponent as aw, LAYOUT_ASSET_FOLDER as ax, LOGIN_COMPONENT as ay, LOGIN_FORM_GROUP as az, TextOutputComponent as b, SectionFilterComponent as b$, NAV_SEGMENT_RE as b0, NAV_STORE_REF as b1, NAV_WC_COMPONENTS as b2, NAV_WIDGET_MAP as b3, NavComponent as b4, NavDetailsComponent as b5, NavMenuComponent as b6, NavStore as b7, NavTrailComponent as b8, NothingComponent as b9, RangeInputComponent as bA, RatingInputComponent as bB, ReactiveElementComponent as bC, RemoteComponent as bD, RemoteLoaderService as bE, ResizeElementComponent as bF, RouteContainer as bG, RowComponent as bH, SEARCH_QUERY as bI, SEARCH_RESULTS_EVENT as bJ, SECTION_ACCORDION_GROUP as bK, SECTION_FORM_CONTEXT as bL, SHARED_ICONS as bM, SIZE_CONTEXT as bN, ScoreComponent as bO, ScrollComponent as bP, ScrollService as bQ, SearchPanelComponent as bR, SearchStore as bS, SearchUserPanelComponent as bT, SectionAccordionDirective as bU, SectionAccordionGroupDirective as bV, SectionBackComponent as bW, SectionBadgesComponent as bX, SectionButtonGroupComponent as bY, SectionCardComponent as bZ, SectionComponent as b_, NotificationElementComponent as ba, NotificationGroupComponent as bb, NotificationPopupComponent as bc, NotificationService as bd, NotificationStore as be, NotificationType as bf, NotificationWidgetComponent as bg, ONE_ASSET_BASE_URL as bh, OPTIONS_SOURCE as bi, OneApp as bj, OptionsSourceDirective as bk, OverlayBodyComponent as bl, OverlayRef as bm, OverlayService as bn, PLATFORM_BUTTON_NAV_IDS as bo, PLATFORM_EXTENSIBLE_NAV_IDS as bp, PLATFORM_NAV_MAP as bq, PLATFORM_ROOT_CHILDREN as br, PaginationComponent as bs, PanelComponent as bt, PlaygroundComponent as bu, PositionDirective as bv, PwaInstallComponent as bw, ROOT_NAV$1 as bx, RadioGroupComponent as by, RadioInputComponent as bz, ButtonComponent as c, WatermarkComponent as c$, SectionFooterComponent as c0, SectionFormComponent as c1, SectionFormItemComponent as c2, SectionHeaderComponent as c3, SectionSearchComponent as c4, SectionStepperComponent as c5, SectionTabsComponent as c6, SectionToggleComponent as c7, SectionToggleItemDirective as c8, SelectableCardInputComponent as c9, ThemeComponent as cA, ThemeService as cB, ThemeStore as cC, TimeAgoPipe as cD, TimelineComponent as cE, ToggleButtonComponent as cF, ToggleInputComponent as cG, ToggleRadioInputComponent as cH, ToolTipDirective as cI, TooltipComponent as cJ, TranslateService as cK, TreeGridComponent as cL, URL_SEP as cM, USER_STORE_REF as cN, USER_TAB_MAP as cO, UlComponent as cP, UniverseComponent as cQ, UserApiService as cR, UserAvatarComponent as cS, UserComponent as cT, UserNavComponent as cU, UserSettingsComponent as cV, UserStore as cW, WC_ROUTE_CHANGED_EVENT as cX, WC_SEARCH_GROUPS as cY, WIN_USER_TAB_HOOK as cZ, WIN_USER_TAB_KEY as c_, SelectorDirective as ca, SettingsSearchBarComponent as cb, SettingsSearchService as cc, Sex as cd, ShapeComponent as ce, SharedStoreRegistry as cf, SidePanelDirective as cg, Size as ch, SocketStore as ci, SortComponent as cj, StepComponent as ck, StepperComponent as cl, StepsComponent as cm, StorageService as cn, StrokeLinecap as co, StrokeLinejoin as cp, SummaryComponent as cq, SvgGeneratorComponent as cr, SvgGeneratorService as cs, SvgService as ct, TOTAL_COLUMNS as cu, TRANSLATION_SOURCE as cv, TableComponent as cw, TechnicalMeterComponent as cx, TextInputComponent as cy, TextareaInputComponent as cz, APP_CONTEXT_REF as d, loginState as d$, WcRouterStore as d0, WrapperInputComponent as d1, anchorNavId as d2, applyColorsToElement as d3, authGuard as d4, bootstrapMagApp as d5, bootstrapPwaInstall as d6, buildWcBaseUrl as d7, calculateLuminance as d8, calculateRanks as d9, getValue as dA, hasErrorComputed as dB, hexToRgb as dC, hslToRgb$1 as dD, initMagmoniumApp as dE, initialNotificationState as dF, initials as dG, injectAuthenticate as dH, injectInstallApp as dI, injectParentSize as dJ, injectScrollSticky as dK, isButtonName as dL, isCancelledComputed as dM, isExtensiblePlatformNavId as dN, isJson as dO, isLoadingComputed as dP, isLocalhost as dQ, isPlatformNavId as dR, isSize as dS, isTierPreview as dT, isUrlLocalhost as dU, isValidNavId as dV, isValidNavSegment as dW, isWebComponent as dX, linkToId as dY, linkToNav as dZ, loadingActions as d_, cellText as da, checkFilterCondition as db, childNavId as dc, classListSignal as dd, coerceSize as de, createMap as df, createPlatformNavMap as dg, deriveAvatarGradient as dh, deriveContrastColor as di, deriveOppositeColor as dj, derivePropertyName as dk, emailValidation as dl, evaluate as dm, evaluateBool as dn, flattenTreeGridRows as dp, formatBadgeCount as dq, fullName as dr, generateClipPath as ds, generateTransform as dt, getClassList as du, getProperty as dv, getScrollParent as dw, getTierFromPreviewPath as dx, getTreeGridRow as dy, getUniqueId as dz, ASSET_BASE_URL as e, toLength$1 as e$, mInterceptor as e0, manualValidation as e1, matchFieldValidation as e2, maxLengthValidation as e3, maxValidation as e4, mergePlatformNav as e5, mergeUnique as e6, mergeUniqueBy as e7, mergeUniqueWith as e8, minAgeValidation as e9, provideSearch as eA, provideSizeContext as eB, provideUserTabs as eC, publicGuard as eD, readFieldPatterns as eE, renderAddress as eF, requiredValidation as eG, resolveConfigAsset as eH, resolveIconSize as eI, resolvePallet as eJ, resolvePatternRules as eK, resolveSize as eL, rgbToHex as eM, rgbToHsl as eN, rowHasChildren as eO, samePatterns as eP, segmentsToNavId as eQ, setProperty as eR, setTreeGridChildren as eS, settingsWidgets as eT, shouldShowBadge as eU, splitNavId as eV, stringToColor as eW, toAttrBool as eX, toAttrNumber as eY, toCssLength as eZ, toHostNavId as e_, minLengthValidation as ea, minValidation as eb, miniMarkToHtml as ec, navIdChain as ed, navIdFor as ee, navIdSegment as ef, navIdToRoutePath as eg, navIdToSegments as eh, navToId as ei, parentNavId as ej, parseAddress as ek, parseColor as el, parsePatternNames as em, patternValidation as en, patternsValidation as eo, platformNavWidgets as ep, privateGuard as eq, processImageToSvg as er, provideAppContext as es, provideMagAppConfig as et, provideMagWcConfig as eu, provideMagWcRoutes as ev, provideModalComponents as ew, provideMurlUrlSerializer as ex, provideNavWidgets as ey, providePlatformNavWidgets as ez, AccordionBodyDirective as f, toLocalNavId as f0, toggleTreeGridRow as f1, unfetchedPlatformNav as f2, urlValidation as f3, AccordionComponent as g, AccordionGroupComponent as h, ActionComponent as i, AnimatedGraphsComponent as j, AppCardComponent as k, AppRelationType as l, AppTileComponent as m, AssetStore as n, AssetUrlPipe as o, Assets as p, AutosizeDirective as q, BadgeComponent as r, BandingComponent as s, BaseArrayInputComponent as t, BaseRootWebComponent as u, BaseWebComponent as v, ButtonGroupComponent as w, COMPONENT_INPUT_REGISTRY as x, CardComponent as y, CardWrapperComponent as z };
-//# sourceMappingURL=magmonium-one-magmonium-one-CLtPcbRY.mjs.map
+//# sourceMappingURL=magmonium-one-magmonium-one-Cdqj0dfV.mjs.map