@magmonium/one 0.2.16 → 0.2.18

package/fesm2022/{magmonium-one-magmonium-one-CD8ioDZO.mjs → magmonium-one-magmonium-one-Df7XDosn.mjs}

@@ -5825,7 +5825,7 @@ const toBool$1 = (value) => value === true || value + '' === 'true';
 // `toLength` only appends `em` to real numbers — a numeric string comes back
 // bare, yielding `gap: 2`. Design-editor text fields and YAML both hand over
 // strings, so narrow before converting.
-const toGapValue = (value) => {
+const toSpacingValue = (value) => {
     if (typeof value !== 'string')
         return value;
     const trimmed = value.trim();
@@ -5833,6 +5833,11 @@ const toGapValue = (value) => {
         return value;
     return Number(trimmed);
 };
+// Spacing on the em scale, or nothing at all: an unset value drops the style
+// binding rather than writing `toLength`'s `0` over what CSS would have done.
+const resolveSpacing = (value) => value === undefined || value === null || value === ''
+    ? undefined
+    : toLength$1(toSpacingValue(value));
 class FlexComponent extends ConfigComponent {
     subFolder = LAYOUT_ASSET_FOLDER.flex;
     direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : /* istanbul ignore next */ []));
@@ -5840,6 +5845,9 @@ class FlexComponent extends ConfigComponent {
     alignItems = input(...(ngDevMode ? [undefined, { debugName: "alignItems" }] : /* istanbul ignore next */ []));
     variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
     gap = input(...(ngDevMode ? [undefined, { debugName: "gap" }] : /* istanbul ignore next */ []));
+    padding = input(...(ngDevMode ? [undefined, { debugName: "padding" }] : /* istanbul ignore next */ []));
+    paddingX = input(...(ngDevMode ? [undefined, { debugName: "paddingX" }] : /* istanbul ignore next */ []));
+    paddingY = input(...(ngDevMode ? [undefined, { debugName: "paddingY" }] : /* istanbul ignore next */ []));
     wrap = input(undefined, ...(ngDevMode ? [{ debugName: "wrap" }] : /* istanbul ignore next */ []));
     inline = input(undefined, ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
     fullHeight = input(undefined, ...(ngDevMode ? [{ debugName: "fullHeight" }] : /* istanbul ignore next */ []));
@@ -5872,12 +5880,14 @@ class FlexComponent extends ConfigComponent {
     resolvedMaxWidth = computed(() => toCssLength(this.maxWidth() ?? this.config()?.maxWidth), ...(ngDevMode ? [{ debugName: "resolvedMaxWidth" }] : /* istanbul ignore next */ []));
     // A gap is spacing, not a Size — it goes through `toLength` and never touches
     // the Size enum, which is what stopped the two from sharing a scale (ADR 0008).
-    resolvedGap = computed(() => {
-        const gap = this.gap() ?? this.config()?.gap;
-        return gap === undefined || gap === null
-            ? undefined
-            : toLength$1(toGapValue(gap));
-    }, ...(ngDevMode ? [{ debugName: "resolvedGap" }] : /* istanbul ignore next */ []));
+    resolvedGap = computed(() => resolveSpacing(this.gap() ?? this.config()?.gap), ...(ngDevMode ? [{ debugName: "resolvedGap" }] : /* istanbul ignore next */ []));
+    // Padding is spacing, so it rides the same em scale as `gap`. The axis
+    // inputs win over the shorthand on their own axis; both compile to
+    // `padding-inline` / `padding-block` rather than the `padding` shorthand, so
+    // the two bindings never race to overwrite each other.
+    resolvedPadding = computed(() => this.padding() ?? this.config()?.padding, ...(ngDevMode ? [{ debugName: "resolvedPadding" }] : /* istanbul ignore next */ []));
+    resolvedPaddingInline = computed(() => resolveSpacing(this.paddingX() ?? this.config()?.paddingX ?? this.resolvedPadding()), ...(ngDevMode ? [{ debugName: "resolvedPaddingInline" }] : /* istanbul ignore next */ []));
+    resolvedPaddingBlock = computed(() => resolveSpacing(this.paddingY() ?? this.config()?.paddingY ?? this.resolvedPadding()), ...(ngDevMode ? [{ debugName: "resolvedPaddingBlock" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const list = ['m-flex', `direction-${this.resolvedDirection()}`];
         const justify = this.resolvedJustify();
@@ -5895,7 +5905,7 @@ class FlexComponent extends ConfigComponent {
         return list.join(' ');
     }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FlexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: FlexComponent, isStandalone: true, selector: "m-flex", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "class.is-design-mode": "isDesignMode", "style.gap": "resolvedGap()", "style.min-height": "resolvedMinHeight()", "style.min-width": "resolvedMinWidth()", "style.max-height": "resolvedMaxHeight()", "style.max-width": "resolvedMaxWidth()" }, classAttribute: "m-flex" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:flex;box-sizing:border-box;width:100%}:host(.is-inline){display:inline-flex;width:auto}:host(.is-full-height){height:100%}:host(.is-wrap){flex-wrap:wrap}:host(.is-design-mode){min-width:4em;min-height:4em}:host(.direction-row){flex-direction:row}:host(.direction-column){flex-direction:column}:host(.direction-row-reverse){flex-direction:row-reverse}:host(.direction-column-reverse){flex-direction:column-reverse}:host(.justify-start){justify-content:flex-start}:host(.justify-end){justify-content:flex-end}:host(.justify-center){justify-content:center}:host(.justify-between){justify-content:space-between}:host(.justify-around){justify-content:space-around}:host(.justify-evenly){justify-content:space-evenly}:host(.align-items-start){align-items:flex-start}:host(.align-items-end){align-items:flex-end}:host(.align-items-center){align-items:center}:host(.align-items-stretch){align-items:stretch}:host(.align-items-baseline){align-items:baseline}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: FlexComponent, isStandalone: true, selector: "m-flex", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "class.is-design-mode": "isDesignMode", "style.gap": "resolvedGap()", "style.padding-inline": "resolvedPaddingInline()", "style.padding-block": "resolvedPaddingBlock()", "style.min-height": "resolvedMinHeight()", "style.min-width": "resolvedMinWidth()", "style.max-height": "resolvedMaxHeight()", "style.max-width": "resolvedMaxWidth()" }, classAttribute: "m-flex" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:flex;box-sizing:border-box;width:100%}:host(.is-inline){display:inline-flex;width:auto}:host(.is-full-height){height:100%}:host(.is-wrap){flex-wrap:wrap}:host(.is-design-mode){min-width:4em;min-height:4em}:host(.direction-row){flex-direction:row}:host(.direction-column){flex-direction:column}:host(.direction-row-reverse){flex-direction:row-reverse}:host(.direction-column-reverse){flex-direction:column-reverse}:host(.justify-start){justify-content:flex-start}:host(.justify-end){justify-content:flex-end}:host(.justify-center){justify-content:center}:host(.justify-between){justify-content:space-between}:host(.justify-around){justify-content:space-around}:host(.justify-evenly){justify-content:space-evenly}:host(.align-items-start){align-items:flex-start}:host(.align-items-end){align-items:flex-end}:host(.align-items-center){align-items:center}:host(.align-items-stretch){align-items:stretch}:host(.align-items-baseline){align-items:baseline}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FlexComponent, decorators: [{
             type: Component,
@@ -5904,12 +5914,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[class]': 'classes()',
                         '[class.is-design-mode]': 'isDesignMode',
                         '[style.gap]': 'resolvedGap()',
+                        '[style.padding-inline]': 'resolvedPaddingInline()',
+                        '[style.padding-block]': 'resolvedPaddingBlock()',
                         '[style.min-height]': 'resolvedMinHeight()',
                         '[style.min-width]': 'resolvedMinWidth()',
                         '[style.max-height]': 'resolvedMaxHeight()',
                         '[style.max-width]': 'resolvedMaxWidth()',
                     }, styles: [":host{display:flex;box-sizing:border-box;width:100%}:host(.is-inline){display:inline-flex;width:auto}:host(.is-full-height){height:100%}:host(.is-wrap){flex-wrap:wrap}:host(.is-design-mode){min-width:4em;min-height:4em}:host(.direction-row){flex-direction:row}:host(.direction-column){flex-direction:column}:host(.direction-row-reverse){flex-direction:row-reverse}:host(.direction-column-reverse){flex-direction:column-reverse}:host(.justify-start){justify-content:flex-start}:host(.justify-end){justify-content:flex-end}:host(.justify-center){justify-content:center}:host(.justify-between){justify-content:space-between}:host(.justify-around){justify-content:space-around}:host(.justify-evenly){justify-content:space-evenly}:host(.align-items-start){align-items:flex-start}:host(.align-items-end){align-items:flex-end}:host(.align-items-center){align-items:center}:host(.align-items-stretch){align-items:stretch}:host(.align-items-baseline){align-items:baseline}\n"] }]
-        }], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], alignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignItems", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }] } });
+        }], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], alignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignItems", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingX: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingX", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }] } });
 
 /**
  * Names the AssetOptions list a Field chooses from (CONTEXT.md OptionsSource).
@@ -6435,7 +6447,7 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.TOGGLE: {
-                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-C-FB-Gcs.mjs');
+                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-BOM0YIYl.mjs');
                     this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                     break;
                 }
@@ -6447,12 +6459,12 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.PASSWORD: {
-                    const { PasswordInputComponent } = await import('./magmonium-one-password-CvTU1Qx-.mjs');
+                    const { PasswordInputComponent } = await import('./magmonium-one-password-CQgCBVXn.mjs');
                     this.createDynamicComponent(seq, PasswordInputComponent);
                     break;
                 }
                 case InputType.OTP: {
-                    const { OtpInputComponent } = await import('./magmonium-one-otp-BZAX_j5g.mjs');
+                    const { OtpInputComponent } = await import('./magmonium-one-otp-DbKeX4tp.mjs');
                     this.createDynamicComponent(seq, OtpInputComponent);
                     break;
                 }
@@ -8332,7 +8344,7 @@ class SectionHeaderComponent {
         this.accordion()?.toggle();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionHeaderComponent, isStandalone: true, selector: "m-section-header", inputs: { sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", 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 }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null }, menuName: { classPropertyName: "menuName", publicName: "menuName", isSignal: true, isRequired: false, transformFunction: null }, visibilityRule: { classPropertyName: "visibilityRule", publicName: "visibilityRule", isSignal: true, isRequired: false, transformFunction: null }, disableRule: { classPropertyName: "disableRule", publicName: "disableRule", isSignal: true, isRequired: false, transformFunction: null }, extraData: { classPropertyName: "extraData", publicName: "extraData", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null }, actionButton: { classPropertyName: "actionButton", publicName: "actionButton", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", action: "action", back: "back" }, host: { properties: { "class.is-sticky-enabled": "sticky()", "class.is-sticky": "isSticky()", "class.has-menu": "hasMenu()", "class.align-left": "alignment() === \"left\"", "class.align-center": "alignment() === \"center\"", "class.align-right": "alignment() === \"right\"", "class.has-sidepanel": "sidepanel()", "class.no-border": "noBorder()", "class.spacing": "spacing()" }, classAttribute: "m-section-header" }, ngImport: i0, template: "<!-- One declaration of the row, rendered by whichever branch `spacing` picks.\n     Hoisted into a template rather than written twice: an `<ng-content>` may\n     appear once per selector in a component, so the duplicated copy caught\n     nothing and a header projecting a title rendered it in the `spacing`\n     branch alone. -->\n<ng-template #body>\n  @if (accordion(); as accordionRef) {\n    <div\n      class=\"section-header__toggle\"\n      [class.section-header__toggle--rotate]=\"toggleRotates()\"\n      [class.section-header__toggle--open]=\"accordionRef.isOpen()\"\n      [id]=\"accordionRef.headerId\"\n      [attr.aria-expanded]=\"accordionRef.isOpen()\"\n      [attr.aria-controls]=\"accordionRef.bodyId\"\n    >\n      <m-button\n        [config]=\"{ icon: toggleIconName(), iconOnly: true, variant: 'ghost' }\"\n        (clicked)=\"onToggleClick()\" />\n    </div>\n  }\n  @if (showBack()) {\n    <div class=\"section-header__back\">\n      <m-button\n        [config]=\"{ icon: 'arrow_back', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (icon(); as iconName) {\n    <m-icon [name]=\"iconName\" />\n  }\n  <div\n    class=\"section-header__title\"\n    [class.section-header__title--reverse]=\"reverse()\"\n  >\n    <!-- The title slot is the catch-all rather than a `[label]` one: every\n         header already projecting a heading writes it unselected, and a\n         selector here would drop that content on the floor. What the design\n         page emits \u2014 `<span label>` \u2014 is caught by it too, nothing else\n         claiming the node. -->\n    <ng-content />\n    <!-- The written label, drawn beside the slot rather than as its\n         `ng-content` fallback. A fallback renders only while *nothing* is\n         projected, and the design Canvas always projects the slot span \u2014\n         empty until a Control is dropped in it \u2014 so a fallback there would\n         blank the label a header is still configured with. `label` answers\n         instead, which no header projecting a title sets. -->\n    @if (label()) {\n      <m-header\n        [level]=\"level()\"\n        [label]=\"label()\"\n        [params]=\"params()\"\n        [noTranslate]=\"noTranslate()\" />\n    }\n    <ng-content select=\"[sub]\" />\n    @if (subText(); as sub) {\n      <span class=\"section-header__sub\">{{ sub }}</span>\n    }\n  </div>\n  @if (actionConfig(); as action) {\n    <div class=\"section-header__action\">\n      <m-button [config]=\"action\" (clicked)=\"actionClick.emit()\" />\n    </div>\n  }\n  @if (hasMenu()) {\n    <div class=\"section-header__menu\">\n      <m-context-menu\n        [config]=\"menu()\"\n        [name]=\"menuName()\"\n        [visibilityRule]=\"visibilityRule()\"\n        [disableRule]=\"disableRule()\"\n        [extraData]=\"extraData()\"\n        (action)=\"action.emit($event)\"\n      />\n    </div>\n  }\n</ng-template>\n\n@if (spacing()) {\n  <div class=\"section-header__container\" [style.max-width]=\"maxWidth()\">\n    <div class=\"section-header__inner\">\n      <ng-container [ngTemplateOutlet]=\"body\" />\n    </div>\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"body\" />\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)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;margin:0 auto}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;padding:1rem 1.5rem}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10}:host(.is-sticky-enabled){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-header__toggle{display:flex;flex-shrink:0}.section-header__toggle.section-header__toggle--rotate m-button{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1)}.section-header__toggle.section-header__toggle--rotate.section-header__toggle--open m-button{transform:rotate(180deg)}.section-header__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}m-header{min-width:0}.section-header__title--reverse{flex-direction:column-reverse}.section-header__sub{font-size:.8rem;color:var(--m-text-secondary);line-height:1.2}:host(.align-center){--m-header-justify: center}:host(.align-right){--m-header-justify: flex-end}:host(.has-menu){padding-right:0}:host(.spacing.has-menu) .section-header__inner{padding-right:0}.section-header__back{display:flex;align-items:center;flex-shrink:0}.section-header__menu,.section-header__action{margin-left:auto;flex-shrink:0;display:flex;align-items:center}.section-header__action+.section-header__menu{margin-left:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ContextMenuComponent, selector: "m-context-menu, m-one-context-menu", inputs: ["toggle", "remote", "exclude", "visibilityRule", "disableRule", "extraData", "inverted"], outputs: ["toggleChange", "action"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate", "params"], outputs: ["actionClick"] }, { 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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionHeaderComponent, isStandalone: true, selector: "m-section-header", inputs: { sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", 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 }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null }, menuName: { classPropertyName: "menuName", publicName: "menuName", isSignal: true, isRequired: false, transformFunction: null }, visibilityRule: { classPropertyName: "visibilityRule", publicName: "visibilityRule", isSignal: true, isRequired: false, transformFunction: null }, disableRule: { classPropertyName: "disableRule", publicName: "disableRule", isSignal: true, isRequired: false, transformFunction: null }, extraData: { classPropertyName: "extraData", publicName: "extraData", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null }, actionButton: { classPropertyName: "actionButton", publicName: "actionButton", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", action: "action", back: "back" }, host: { properties: { "class.is-sticky-enabled": "sticky()", "class.is-sticky": "isSticky()", "class.has-menu": "hasMenu()", "class.align-left": "alignment() === \"left\"", "class.align-center": "alignment() === \"center\"", "class.align-right": "alignment() === \"right\"", "class.has-sidepanel": "sidepanel()", "class.no-border": "noBorder()", "class.spacing": "spacing()" }, classAttribute: "m-section-header" }, ngImport: i0, template: "<!-- One declaration of the row, rendered by whichever branch `spacing` picks.\n     Hoisted into a template rather than written twice: an `<ng-content>` may\n     appear once per selector in a component, so the duplicated copy caught\n     nothing and a header projecting a title rendered it in the `spacing`\n     branch alone. -->\n<ng-template #body>\n  @if (accordion(); as accordionRef) {\n    <div\n      class=\"section-header__toggle\"\n      [class.section-header__toggle--rotate]=\"toggleRotates()\"\n      [class.section-header__toggle--open]=\"accordionRef.isOpen()\"\n      [id]=\"accordionRef.headerId\"\n      [attr.aria-expanded]=\"accordionRef.isOpen()\"\n      [attr.aria-controls]=\"accordionRef.bodyId\"\n    >\n      <m-button\n        [config]=\"{ icon: toggleIconName(), iconOnly: true, variant: 'ghost' }\"\n        (clicked)=\"onToggleClick()\" />\n    </div>\n  }\n  @if (showBack()) {\n    <div class=\"section-header__back\">\n      <m-button\n        [config]=\"{ icon: 'arrow_back', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (icon(); as iconName) {\n    <m-icon [name]=\"iconName\" />\n  }\n  <div\n    class=\"section-header__title\"\n    [class.section-header__title--reverse]=\"reverse()\"\n  >\n    <!-- The title slot is the catch-all rather than a `[label]` one: every\n         header already projecting a heading writes it unselected, and a\n         selector here would drop that content on the floor. What the design\n         page emits \u2014 `<span label>` \u2014 is caught by it too, nothing else\n         claiming the node. -->\n    <ng-content />\n    <!-- The written label, drawn beside the slot rather than as its\n         `ng-content` fallback. A fallback renders only while *nothing* is\n         projected, and the design Canvas always projects the slot span \u2014\n         empty until a Control is dropped in it \u2014 so a fallback there would\n         blank the label a header is still configured with. `label` answers\n         instead, which no header projecting a title sets. -->\n    @if (label()) {\n      <m-header\n        [level]=\"level()\"\n        [label]=\"label()\"\n        [params]=\"params()\"\n        [noTranslate]=\"noTranslate()\" />\n    }\n    <ng-content select=\"[sub]\" />\n    @if (subText(); as sub) {\n      <span class=\"section-header__sub\">{{ sub }}</span>\n    }\n  </div>\n  <!-- A FilterGroup projected into the header row, selected by tag rather than\n       by an attribute \u2014 the same shape a Section catches its `m-action` with.\n       A header has room for one icon and not for a row, so a group landing\n       here is squeezed by placement (ADR 0025); nothing here enforces that,\n       the caller binding `[squeeze]` on the tag it projects. -->\n  <div class=\"section-header__filters\">\n    <ng-content select=\"m-section-filter-group\" />\n  </div>\n  @if (actionConfig(); as action) {\n    <div class=\"section-header__action\">\n      <m-button [config]=\"action\" (clicked)=\"actionClick.emit()\" />\n    </div>\n  }\n  @if (hasMenu()) {\n    <div class=\"section-header__menu\">\n      <m-context-menu\n        [config]=\"menu()\"\n        [name]=\"menuName()\"\n        [visibilityRule]=\"visibilityRule()\"\n        [disableRule]=\"disableRule()\"\n        [extraData]=\"extraData()\"\n        (action)=\"action.emit($event)\"\n      />\n    </div>\n  }\n</ng-template>\n\n@if (spacing()) {\n  <div class=\"section-header__container\" [style.max-width]=\"maxWidth()\">\n    <div class=\"section-header__inner\">\n      <ng-container [ngTemplateOutlet]=\"body\" />\n    </div>\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"body\" />\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)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;margin:0 auto}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;padding:1rem 1.5rem}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10}:host(.is-sticky-enabled){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-header__toggle{display:flex;flex-shrink:0}.section-header__toggle.section-header__toggle--rotate m-button{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1)}.section-header__toggle.section-header__toggle--rotate.section-header__toggle--open m-button{transform:rotate(180deg)}.section-header__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}m-header{min-width:0}.section-header__title--reverse{flex-direction:column-reverse}.section-header__sub{font-size:.8rem;color:var(--m-text-secondary);line-height:1.2}:host(.align-center){--m-header-justify: center}:host(.align-right){--m-header-justify: flex-end}:host(.has-menu){padding-right:0}:host(.spacing.has-menu) .section-header__inner{padding-right:0}.section-header__filters{display:contents}.section-header__filters m-section-filter-group{width:auto;flex-shrink:0;border-bottom:none}.section-header__back{display:flex;align-items:center;flex-shrink:0}.section-header__menu,.section-header__action{margin-left:auto;flex-shrink:0;display:flex;align-items:center}.section-header__action+.section-header__menu{margin-left:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ContextMenuComponent, selector: "m-context-menu, m-one-context-menu", inputs: ["toggle", "remote", "exclude", "visibilityRule", "disableRule", "extraData", "inverted"], outputs: ["toggleChange", "action"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate", "params"], outputs: ["actionClick"] }, { 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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionHeaderComponent, decorators: [{
             type: Component,
@@ -8353,7 +8365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[class.has-sidepanel]': 'sidepanel()',
                         '[class.no-border]': 'noBorder()',
                         '[class.spacing]': 'spacing()',
-                    }, template: "<!-- One declaration of the row, rendered by whichever branch `spacing` picks.\n     Hoisted into a template rather than written twice: an `<ng-content>` may\n     appear once per selector in a component, so the duplicated copy caught\n     nothing and a header projecting a title rendered it in the `spacing`\n     branch alone. -->\n<ng-template #body>\n  @if (accordion(); as accordionRef) {\n    <div\n      class=\"section-header__toggle\"\n      [class.section-header__toggle--rotate]=\"toggleRotates()\"\n      [class.section-header__toggle--open]=\"accordionRef.isOpen()\"\n      [id]=\"accordionRef.headerId\"\n      [attr.aria-expanded]=\"accordionRef.isOpen()\"\n      [attr.aria-controls]=\"accordionRef.bodyId\"\n    >\n      <m-button\n        [config]=\"{ icon: toggleIconName(), iconOnly: true, variant: 'ghost' }\"\n        (clicked)=\"onToggleClick()\" />\n    </div>\n  }\n  @if (showBack()) {\n    <div class=\"section-header__back\">\n      <m-button\n        [config]=\"{ icon: 'arrow_back', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (icon(); as iconName) {\n    <m-icon [name]=\"iconName\" />\n  }\n  <div\n    class=\"section-header__title\"\n    [class.section-header__title--reverse]=\"reverse()\"\n  >\n    <!-- The title slot is the catch-all rather than a `[label]` one: every\n         header already projecting a heading writes it unselected, and a\n         selector here would drop that content on the floor. What the design\n         page emits \u2014 `<span label>` \u2014 is caught by it too, nothing else\n         claiming the node. -->\n    <ng-content />\n    <!-- The written label, drawn beside the slot rather than as its\n         `ng-content` fallback. A fallback renders only while *nothing* is\n         projected, and the design Canvas always projects the slot span \u2014\n         empty until a Control is dropped in it \u2014 so a fallback there would\n         blank the label a header is still configured with. `label` answers\n         instead, which no header projecting a title sets. -->\n    @if (label()) {\n      <m-header\n        [level]=\"level()\"\n        [label]=\"label()\"\n        [params]=\"params()\"\n        [noTranslate]=\"noTranslate()\" />\n    }\n    <ng-content select=\"[sub]\" />\n    @if (subText(); as sub) {\n      <span class=\"section-header__sub\">{{ sub }}</span>\n    }\n  </div>\n  @if (actionConfig(); as action) {\n    <div class=\"section-header__action\">\n      <m-button [config]=\"action\" (clicked)=\"actionClick.emit()\" />\n    </div>\n  }\n  @if (hasMenu()) {\n    <div class=\"section-header__menu\">\n      <m-context-menu\n        [config]=\"menu()\"\n        [name]=\"menuName()\"\n        [visibilityRule]=\"visibilityRule()\"\n        [disableRule]=\"disableRule()\"\n        [extraData]=\"extraData()\"\n        (action)=\"action.emit($event)\"\n      />\n    </div>\n  }\n</ng-template>\n\n@if (spacing()) {\n  <div class=\"section-header__container\" [style.max-width]=\"maxWidth()\">\n    <div class=\"section-header__inner\">\n      <ng-container [ngTemplateOutlet]=\"body\" />\n    </div>\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"body\" />\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)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;margin:0 auto}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;padding:1rem 1.5rem}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10}:host(.is-sticky-enabled){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-header__toggle{display:flex;flex-shrink:0}.section-header__toggle.section-header__toggle--rotate m-button{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1)}.section-header__toggle.section-header__toggle--rotate.section-header__toggle--open m-button{transform:rotate(180deg)}.section-header__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}m-header{min-width:0}.section-header__title--reverse{flex-direction:column-reverse}.section-header__sub{font-size:.8rem;color:var(--m-text-secondary);line-height:1.2}:host(.align-center){--m-header-justify: center}:host(.align-right){--m-header-justify: flex-end}:host(.has-menu){padding-right:0}:host(.spacing.has-menu) .section-header__inner{padding-right:0}.section-header__back{display:flex;align-items:center;flex-shrink:0}.section-header__menu,.section-header__action{margin-left:auto;flex-shrink:0;display:flex;align-items:center}.section-header__action+.section-header__menu{margin-left:0}\n"] }]
+                    }, template: "<!-- One declaration of the row, rendered by whichever branch `spacing` picks.\n     Hoisted into a template rather than written twice: an `<ng-content>` may\n     appear once per selector in a component, so the duplicated copy caught\n     nothing and a header projecting a title rendered it in the `spacing`\n     branch alone. -->\n<ng-template #body>\n  @if (accordion(); as accordionRef) {\n    <div\n      class=\"section-header__toggle\"\n      [class.section-header__toggle--rotate]=\"toggleRotates()\"\n      [class.section-header__toggle--open]=\"accordionRef.isOpen()\"\n      [id]=\"accordionRef.headerId\"\n      [attr.aria-expanded]=\"accordionRef.isOpen()\"\n      [attr.aria-controls]=\"accordionRef.bodyId\"\n    >\n      <m-button\n        [config]=\"{ icon: toggleIconName(), iconOnly: true, variant: 'ghost' }\"\n        (clicked)=\"onToggleClick()\" />\n    </div>\n  }\n  @if (showBack()) {\n    <div class=\"section-header__back\">\n      <m-button\n        [config]=\"{ icon: 'arrow_back', iconOnly: true }\"\n        (clicked)=\"back.emit()\" />\n    </div>\n  } @else if (icon(); as iconName) {\n    <m-icon [name]=\"iconName\" />\n  }\n  <div\n    class=\"section-header__title\"\n    [class.section-header__title--reverse]=\"reverse()\"\n  >\n    <!-- The title slot is the catch-all rather than a `[label]` one: every\n         header already projecting a heading writes it unselected, and a\n         selector here would drop that content on the floor. What the design\n         page emits \u2014 `<span label>` \u2014 is caught by it too, nothing else\n         claiming the node. -->\n    <ng-content />\n    <!-- The written label, drawn beside the slot rather than as its\n         `ng-content` fallback. A fallback renders only while *nothing* is\n         projected, and the design Canvas always projects the slot span \u2014\n         empty until a Control is dropped in it \u2014 so a fallback there would\n         blank the label a header is still configured with. `label` answers\n         instead, which no header projecting a title sets. -->\n    @if (label()) {\n      <m-header\n        [level]=\"level()\"\n        [label]=\"label()\"\n        [params]=\"params()\"\n        [noTranslate]=\"noTranslate()\" />\n    }\n    <ng-content select=\"[sub]\" />\n    @if (subText(); as sub) {\n      <span class=\"section-header__sub\">{{ sub }}</span>\n    }\n  </div>\n  <!-- A FilterGroup projected into the header row, selected by tag rather than\n       by an attribute \u2014 the same shape a Section catches its `m-action` with.\n       A header has room for one icon and not for a row, so a group landing\n       here is squeezed by placement (ADR 0025); nothing here enforces that,\n       the caller binding `[squeeze]` on the tag it projects. -->\n  <div class=\"section-header__filters\">\n    <ng-content select=\"m-section-filter-group\" />\n  </div>\n  @if (actionConfig(); as action) {\n    <div class=\"section-header__action\">\n      <m-button [config]=\"action\" (clicked)=\"actionClick.emit()\" />\n    </div>\n  }\n  @if (hasMenu()) {\n    <div class=\"section-header__menu\">\n      <m-context-menu\n        [config]=\"menu()\"\n        [name]=\"menuName()\"\n        [visibilityRule]=\"visibilityRule()\"\n        [disableRule]=\"disableRule()\"\n        [extraData]=\"extraData()\"\n        (action)=\"action.emit($event)\"\n      />\n    </div>\n  }\n</ng-template>\n\n@if (spacing()) {\n  <div class=\"section-header__container\" [style.max-width]=\"maxWidth()\">\n    <div class=\"section-header__inner\">\n      <ng-container [ngTemplateOutlet]=\"body\" />\n    </div>\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"body\" />\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)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, .5rem) * 2 + 1.25rem));border-bottom:1px solid var(--m-backdrop-border);padding:var(--section-header-py, .85rem) var(--section-px, 1rem);width:100%;grid-column:1/-1}:host(.no-border){border-bottom:none}:host(.spacing){padding:0;width:100%}.section-header__container{width:100%;margin:0 auto}.section-header__inner{display:flex;align-items:center;gap:.5rem;width:100%;padding:1rem 1.5rem}.section-header__inner .section-header__title{flex:1;min-width:0;gap:.5rem}:host(.has-sidepanel){padding-right:50px}:host(.has-sidepanel.has-menu){padding-right:50px}:host(.spacing.has-sidepanel) .section-header__inner{padding-right:calc(1.5rem + 50px)}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10}:host(.is-sticky-enabled){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-header__toggle{display:flex;flex-shrink:0}.section-header__toggle.section-header__toggle--rotate m-button{display:flex;transition:transform .3s cubic-bezier(.4,0,.2,1)}.section-header__toggle.section-header__toggle--rotate.section-header__toggle--open m-button{transform:rotate(180deg)}.section-header__title{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}m-header{min-width:0}.section-header__title--reverse{flex-direction:column-reverse}.section-header__sub{font-size:.8rem;color:var(--m-text-secondary);line-height:1.2}:host(.align-center){--m-header-justify: center}:host(.align-right){--m-header-justify: flex-end}:host(.has-menu){padding-right:0}:host(.spacing.has-menu) .section-header__inner{padding-right:0}.section-header__filters{display:contents}.section-header__filters m-section-filter-group{width:auto;flex-shrink:0;border-bottom:none}.section-header__back{display:flex;align-items:center;flex-shrink:0}.section-header__menu,.section-header__action{margin-left:auto;flex-shrink:0;display:flex;align-items:center}.section-header__action+.section-header__menu{margin-left:0}\n"] }]
         }], propDecorators: { sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], noTranslate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noTranslate", required: false }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }], reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: false }] }], menuName: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuName", required: false }] }], visibilityRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibilityRule", required: false }] }], disableRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRule", required: false }] }], extraData: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraData", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], actionButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionButton", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], action: [{ type: i0.Output, args: ["action"] }], back: [{ type: i0.Output, args: ["back"] }] } });
 
 const BACK_BTN = {
@@ -9360,6 +9372,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     }, 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: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: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, color-mix(in srgb, var(--m-focus) 45%, transparent));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:not(:has(.error)){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, color-mix(in srgb, var(--m-focus) 45%, transparent)));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"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
 
+/**
+ * What the results component's search input is called when nobody says
+ * otherwise — the name the design editor mints on a results Screen, spelled
+ * here so a hand-written caller lands on the same word (CONTEXT.md
+ * SearchResultsScreen).
+ */
+const SEARCH_RESULT_INPUT = 'search';
 class SectionSearchComponent extends BaseTextInputComponent {
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
@@ -9375,13 +9394,47 @@ class SectionSearchComponent extends BaseTextInputComponent {
     debounce = input(300, ...(ngDevMode ? [{ debugName: "debounce" }] : /* istanbul ignore next */ []));
     startOpen = input(false, ...(ngDevMode ? [{ debugName: "startOpen" }] : /* istanbul ignore next */ []));
     sticky = input(false, ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    /**
+     * The component drawn under the bar while there is text to search for. A
+     * results body is instantiated by whoever mounts this bar, so the markup has
+     * nowhere to write its selector — the class itself crosses instead, the way a
+     * card body's does (ADR 0067).
+     */
+    element = input(...(ngDevMode ? [undefined, { debugName: "element" }] : /* istanbul ignore next */ []));
+    /**
+     * Which input on that component the search text lands in. Written by codegen
+     * from the ScreenInput the editor minted, so a name that had to dodge a
+     * collision still resolves.
+     */
+    resultInput = input(SEARCH_RESULT_INPUT, ...(ngDevMode ? [{ debugName: "resultInput" }] : /* istanbul ignore next */ []));
+    /**
+     * What the results component is handed instead of the search text — the
+     * Canvas's stand-in, where there is no typing and the body being drawn is a
+     * Tree rather than the emitted class. Ignored off a Canvas.
+     */
+    elementInputs = input(...(ngDevMode ? [undefined, { debugName: "elementInputs" }] : /* istanbul ignore next */ []));
     searchChange = output();
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * The text the results component is drawing for. The debounced value rather
+     * than the live one: results are a search, and a keystroke is not — this is
+     * the same text `searchChange` carries, set the moment it is emitted.
+     */
+    resultText = signal('', ...(ngDevMode ? [{ debugName: "resultText" }] : /* istanbul ignore next */ []));
+    isDesignMode = !!inject(IS_DESIGN_MODE, { optional: true });
     scrollSticky = injectScrollSticky(0, 'none');
     isSticky = computed(() => this.sticky() && this.scrollSticky(), ...(ngDevMode ? [{ debugName: "isSticky" }] : /* istanbul ignore next */ []));
     sectionContext = inject(SECTION_CONTEXT, { optional: true });
     sidepanel = computed(() => this.sectionContext?.sidepanel() ?? false, ...(ngDevMode ? [{ debugName: "sidepanel" }] : /* istanbul ignore next */ []));
     noBorder = computed(() => this.sectionContext?.variant() === 'noBorder', ...(ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the results body is drawn. Text is what opens it, so an untouched
+     * bar is a bar and nothing else. On a Canvas the text never comes — nobody
+     * types into a drawing — so a named body draws as soon as it is named, the
+     * stand-in stubs a card list gets for the same reason.
+     */
+    showResults = computed(() => !!this.element() && (this.isDesignMode || this.resultText().length > 0), ...(ngDevMode ? [{ debugName: "showResults" }] : /* istanbul ignore next */ []));
+    resultInputs = computed(() => this.elementInputs() ?? { [this.resultInput()]: this.resultText() }, ...(ngDevMode ? [{ debugName: "resultInputs" }] : /* istanbul ignore next */ []));
     destroyRef = inject(DestroyRef);
     debounceTimer = null;
     constructor() {
@@ -9408,6 +9461,7 @@ class SectionSearchComponent extends BaseTextInputComponent {
         if (this.debounceTimer) {
             clearTimeout(this.debounceTimer);
             this.debounceTimer = null;
+            this.resultText.set(this.value());
             this.searchChange.emit(this.value());
         }
         this.isOpen.set(false);
@@ -9433,12 +9487,13 @@ class SectionSearchComponent extends BaseTextInputComponent {
             clearTimeout(this.debounceTimer);
         const ms = this.debounce() ?? this.config()?.debounce ?? 300;
         this.debounceTimer = setTimeout(() => {
+            this.resultText.set(this.value());
             this.searchChange.emit(this.value());
             this.debounceTimer = null;
         }, ms);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionSearchComponent, isStandalone: true, selector: "m-section-search, m-one-section-search", 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 }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, startOpen: { classPropertyName: "startOpen", publicName: "startOpen", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", searchChange: "searchChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.is-sticky-enabled": "sticky()", "class.is-sticky": "isSticky()", "class.has-sidepanel": "sidepanel()", "class.no-border": "noBorder()" } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionSearchComponent, isStandalone: true, selector: "m-section-search, m-one-section-search", 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 }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, startOpen: { classPropertyName: "startOpen", publicName: "startOpen", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, resultInput: { classPropertyName: "resultInput", publicName: "resultInput", isSignal: true, isRequired: false, transformFunction: null }, elementInputs: { classPropertyName: "elementInputs", publicName: "elementInputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", searchChange: "searchChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.is-sticky-enabled": "sticky()", "class.is-sticky": "isSticky()", "class.has-sidepanel": "sidepanel()", "class.has-results": "showResults()", "class.no-border": "noBorder()" } }, usesInheritance: true, ngImport: i0, template: `
     @if (isOpen()) {
       <div class="section-search__field">
         <m-input-clear
@@ -9467,7 +9522,20 @@ class SectionSearchComponent extends BaseTextInputComponent {
         </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)}}:host{display:flex;align-items:center;width:100%;grid-column:1/-1;box-sizing:border-box;min-height:var(--section-header-min-height, calc(var(--section-header-py, 1rem) * 2 + 1.375rem));border-bottom:1px solid var(--m-section-search-border, var(--m-backdrop-border));padding:var(--section-header-py, .75rem) var(--section-px, 1rem);--m-header-size: 1rem}:host.has-sidepanel{padding-right:50px}:host(.no-border){border-bottom:none}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-search__bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%}.section-search__bar>*:not(.section-search__toggle){flex:1;min-width:0}.section-search__bar m-header{font-size:1rem}.section-search__bar .section-search__toggle{flex-shrink:0;margin-inline-start:auto;--m-button-size: 1rem !important}.section-search__field{display:flex;align-items:center;width:100%}.section-search__field m-input-clear{width:100%}\n"], dependencies: [{ kind: "component", type: ClearableInputComponent, selector: "m-input-clear", inputs: ["value", "config", "required", "disabled", "readonly", "invalid", "focused", "touched", "errors", "icon", "placeholder", "type", "inputId"], 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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate", "params"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    <!-- The results component, mounted per search rather than written as a tag:
+         which component draws results is the caller's answer, so the markup has
+         no selector to write (CONTEXT.md SearchResultsScreen). Shown only once
+         there is text to search for — a bar nobody has typed into has no result
+         to draw — and handed that text through the one input the editor minted
+         on it. -->
+    @if (showResults()) {
+      <div class="section-search__results">
+        <ng-container
+          *ngComponentOutlet="element()!; inputs: resultInputs()"
+        />
+      </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:flex;align-items:center;width:100%;grid-column:1/-1;box-sizing:border-box;min-height:var(--section-header-min-height, calc(var(--section-header-py, 1rem) * 2 + 1.375rem));border-bottom:1px solid var(--m-section-search-border, var(--m-backdrop-border));padding:var(--section-header-py, .75rem) var(--section-px, 1rem);--m-header-size: 1rem}:host.has-sidepanel{padding-right:50px}:host.has-results{flex-direction:column;align-items:stretch}:host(.no-border){border-bottom:none}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-search__bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%}.section-search__bar>*:not(.section-search__toggle){flex:1;min-width:0}.section-search__bar m-header{font-size:1rem}.section-search__bar .section-search__toggle{flex-shrink:0;margin-inline-start:auto;--m-button-size: 1rem !important}.section-search__field{display:flex;align-items:center;width:100%}.section-search__field m-input-clear{width:100%}.section-search__results{display:block;width:100%;padding-top:.5rem}\n"], dependencies: [{ kind: "component", type: ClearableInputComponent, selector: "m-input-clear", inputs: ["value", "config", "required", "disabled", "readonly", "invalid", "focused", "touched", "errors", "icon", "placeholder", "type", "inputId"], 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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate", "params"], outputs: ["actionClick"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionSearchComponent, decorators: [{
             type: Component,
@@ -9500,14 +9568,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </div>
       </div>
     }
-  `, imports: [ClearableInputComponent, ButtonComponent, HeaderComponent$1], host: {
+    <!-- The results component, mounted per search rather than written as a tag:
+         which component draws results is the caller's answer, so the markup has
+         no selector to write (CONTEXT.md SearchResultsScreen). Shown only once
+         there is text to search for — a bar nobody has typed into has no result
+         to draw — and handed that text through the one input the editor minted
+         on it. -->
+    @if (showResults()) {
+      <div class="section-search__results">
+        <ng-container
+          *ngComponentOutlet="element()!; inputs: resultInputs()"
+        />
+      </div>
+    }
+  `, imports: [
+                        ClearableInputComponent,
+                        ButtonComponent,
+                        HeaderComponent$1,
+                        NgComponentOutlet,
+                    ], host: {
                         '(focusout)': 'onFocusOut($event)',
                         '[class.is-sticky-enabled]': 'sticky()',
                         '[class.is-sticky]': 'isSticky()',
                         '[class.has-sidepanel]': 'sidepanel()',
+                        '[class.has-results]': 'showResults()',
                         '[class.no-border]': 'noBorder()',
-                    }, 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:flex;align-items:center;width:100%;grid-column:1/-1;box-sizing:border-box;min-height:var(--section-header-min-height, calc(var(--section-header-py, 1rem) * 2 + 1.375rem));border-bottom:1px solid var(--m-section-search-border, var(--m-backdrop-border));padding:var(--section-header-py, .75rem) var(--section-px, 1rem);--m-header-size: 1rem}:host.has-sidepanel{padding-right:50px}:host(.no-border){border-bottom:none}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-search__bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%}.section-search__bar>*:not(.section-search__toggle){flex:1;min-width:0}.section-search__bar m-header{font-size:1rem}.section-search__bar .section-search__toggle{flex-shrink:0;margin-inline-start:auto;--m-button-size: 1rem !important}.section-search__field{display:flex;align-items:center;width:100%}.section-search__field m-input-clear{width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], startOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOpen", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }] } });
+                    }, 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:flex;align-items:center;width:100%;grid-column:1/-1;box-sizing:border-box;min-height:var(--section-header-min-height, calc(var(--section-header-py, 1rem) * 2 + 1.375rem));border-bottom:1px solid var(--m-section-search-border, var(--m-backdrop-border));padding:var(--section-header-py, .75rem) var(--section-px, 1rem);--m-header-size: 1rem}:host.has-sidepanel{padding-right:50px}:host.has-results{flex-direction:column;align-items:stretch}:host(.no-border){border-bottom:none}:host(.is-sticky-enabled){position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.section-search__bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%}.section-search__bar>*:not(.section-search__toggle){flex:1;min-width:0}.section-search__bar m-header{font-size:1rem}.section-search__bar .section-search__toggle{flex-shrink:0;margin-inline-start:auto;--m-button-size: 1rem !important}.section-search__field{display:flex;align-items:center;width:100%}.section-search__field m-input-clear{width:100%}.section-search__results{display:block;width:100%;padding-top:.5rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], startOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOpen", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: false }] }], resultInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "resultInput", required: false }] }], elementInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementInputs", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }] } });
 
 function isWithinBoundary(value, draggable, axis) {
     const maxVal = draggable.max?.[axis] ??
@@ -10272,17 +10359,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
   `, imports: [IconComponent, TranslatePipe], 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)}}.section-filter-panel{list-style:none;margin:0;padding:0;min-width:10rem;max-height:15rem;overflow-y:auto;background:var(--m-background);border:1px solid var(--m-mm);border-radius:0;animation:filter-panel-in .2s ease-out}.section-filter-panel__option{display:flex;align-items:center;gap:.5em;padding:calc(.6rem * var(--filter-size, 1)) calc(.9rem * var(--filter-size, 1));cursor:pointer;font-size:calc(.875rem * var(--filter-size, 1));color:var(--m-text);transition:all .3s cubic-bezier(.16,1,.3,1);outline:none}.section-filter-panel__option:hover:not(.is-disabled){background-color:var(--m-backdrop-standard)}.section-filter-panel__option:focus-visible:not(.is-disabled){background-color:var(--m-backdrop-standard)}.section-filter-panel__option.is-selected{color:var(--m-mm);font-weight:500}.section-filter-panel__option.is-disabled{opacity:.4;cursor:not-allowed}.section-filter-panel__check-wrap{width:1em;flex-shrink:0;display:flex;align-items:center;color:var(--m-mm)}@keyframes filter-panel-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
+const FILTER_GROUP_CONTEXT = new InjectionToken('FILTER_GROUP_CONTEXT');
+
 class SectionFilterComponent {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * The key this Filter's slice carries in a FilterGroup's `{name, value}[]`.
+     * Falls back to `label`, which is a TranslationAsset key rather than an
+     * identity — good enough alone, wrong to rely on in a group (ADR 0025).
+     */
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     optionsAsset = input(...(ngDevMode ? [undefined, { debugName: "optionsAsset" }] : /* istanbul ignore next */ []));
     multiple = input(true, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
     value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     filterChange = output();
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * Present only inside a FilterGroup. With one, the group owns the selection
+     * and this Filter reads its slice down and emits nothing of its own — one
+     * click, one emit (ADR 0025). Without one, the `value` model below is the
+     * source of truth and nothing about this component has changed.
+     */
+    group = inject(FILTER_GROUP_CONTEXT, { optional: true });
     sectionContext = inject(SECTION_CONTEXT, { optional: true });
     sidepanel = computed(() => this.sectionContext?.sidepanel() ?? false, ...(ngDevMode ? [{ debugName: "sidepanel" }] : /* istanbul ignore next */ []));
-    noBorder = computed(() => this.sectionContext?.variant() === 'noBorder', ...(ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []));
+    // A group draws one border for its whole row, so a Filter inside one draws
+    // none of its own.
+    noBorder = computed(() => !!this.group || this.sectionContext?.variant() === 'noBorder', ...(ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []));
+    resolvedName = computed(() => this.name() || this.label(), ...(ngDevMode ? [{ debugName: "resolvedName" }] : /* istanbul ignore next */ []));
+    /** The group's slice when there is one, this Filter's own model otherwise. */
+    selected = computed(() => this.group ? this.group.valueOf(this.resolvedName()) : this.value(), ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     toggleConfig = computed(() => ({
         icon: this.isOpen() ? 'x' : 'adjust',
         one: true,
@@ -10291,8 +10398,6 @@ class SectionFilterComponent {
     }), ...(ngDevMode ? [{ debugName: "toggleConfig" }] : /* istanbul ignore next */ []));
     dropdownRef = viewChild(SelectorDirective, ...(ngDevMode ? [{ debugName: "dropdownRef" }] : /* istanbul ignore next */ []));
     assetStore = inject(AssetStore);
-    translateService = inject(TranslateService);
-    filterLabel = computed(() => this.translateService.translate('filter-name', { name: this.label() }), ...(ngDevMode ? [{ debugName: "filterLabel" }] : /* istanbul ignore next */ []));
     assetOptionsResource = rxResource({
         params: () => this.optionsAsset(),
         stream: ({ params }) => {
@@ -10319,14 +10424,14 @@ class SectionFilterComponent {
             disabled: o.disabled,
         }));
     }, ...(ngDevMode ? [{ debugName: "resolvedOptions" }] : /* istanbul ignore next */ []));
-    hasSelection = computed(() => this.value().length > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
-    selectedOptions = computed(() => this.resolvedOptions().filter((o) => this.value().includes(o.value)), ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    hasSelection = computed(() => this.selected().length > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
+    selectedOptions = computed(() => this.resolvedOptions().filter((o) => this.selected().includes(o.value)), ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
     selectorConfig = computed(() => ({
         component: SectionFilterPanelComponent,
         base: 'm-section-filter',
         bindings: [
             inputBinding('options', this.resolvedOptions),
-            inputBinding('selected', this.value),
+            inputBinding('selected', this.selected),
             inputBinding('multiple', this.multiple),
             outputBinding('action', (opt) => this.selectOption(opt)),
         ],
@@ -10334,6 +10439,12 @@ class SectionFilterComponent {
     selectOption = (opt) => {
         if (opt.disabled)
             return;
+        if (this.group) {
+            this.group.toggle(this.resolvedName(), opt, this.multiple());
+            if (!this.multiple())
+                this.dropdownRef()?.close();
+            return;
+        }
         if (this.multiple()) {
             const current = this.value();
             const next = current.includes(opt.value)
@@ -10351,12 +10462,33 @@ class SectionFilterComponent {
         }
     };
     removeOption = (val) => {
+        if (this.group) {
+            this.group.remove(this.resolvedName(), val);
+            return;
+        }
         const next = this.value().filter((v) => v !== val);
         this.value.set(next);
         this.filterChange.emit(next);
     };
+    constructor() {
+        const group = this.group;
+        if (!group)
+            return;
+        // Registered rather than found by a content query: a Col may sit between
+        // this Filter and its group, and squeezed the group renders no bar at all
+        // — the menu it draws instead is built from these registrations, which is
+        // why the row is hidden rather than skipped (ADR 0025).
+        const member = {
+            name: this.resolvedName,
+            label: this.label,
+            options: this.resolvedOptions,
+            multiple: this.multiple,
+        };
+        group.register(member);
+        inject(DestroyRef).onDestroy(() => group.unregister(member));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionFilterComponent, isStandalone: true, selector: "m-section-filter", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionsAsset: { classPropertyName: "optionsAsset", publicName: "optionsAsset", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.has-sidepanel": "sidepanel()", "class.no-border": "noBorder()" } }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: SelectorDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionFilterComponent, isStandalone: true, selector: "m-section-filter", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionsAsset: { classPropertyName: "optionsAsset", publicName: "optionsAsset", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.has-sidepanel": "sidepanel()", "class.no-border": "noBorder()", "class.in-group": "!!group" } }, viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: SelectorDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="section-filter__bar">
       @if (hasSelection()) {
         <div class="section-filter__badges">
@@ -10372,7 +10504,7 @@ class SectionFilterComponent {
           }
         </div>
       } @else {
-        <m-header [level]="3" [label]="filterLabel()" />
+        <m-header [level]="3" [label]="label()" />
       }
       <div
         class="section-filter__dropdown"
@@ -10405,7 +10537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           }
         </div>
       } @else {
-        <m-header [level]="3" [label]="filterLabel()" />
+        <m-header [level]="3" [label]="label()" />
       }
       <div
         class="section-filter__dropdown"
@@ -10427,8 +10559,239 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.has-sidepanel]': 'sidepanel()',
                         '[class.no-border]': 'noBorder()',
+                        '[class.in-group]': '!!group',
                     }, 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;border-bottom:1px solid var(--m-section-filter-border, var(--m-backdrop-border))}:host(.no-border){border-bottom:none}.section-filter__bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:var(--section-header-min-height, calc(var(--section-header-py, 1rem) * 2 + 1.375rem));padding:var(--section-header-py, .75rem) var(--section-px, 1rem)}.section-filter__bar m-header{flex:1;min-width:0;font-size:1rem}.section-filter__bar .section-filter__toggle{flex-shrink:0;--m-button-size: 1rem !important}.section-filter__bar .section-filter__toggle.is-active{--m-button-color: var(--m-mm) !important}.section-filter__badges{display:flex;flex-wrap:wrap;gap:.375rem;flex:1;min-width:0;align-items:center}.section-filter__badges m-badge{--m-badge-size: .6rem}.section-filter__badges m-badge m-button{--m-button-size: .6em;--m-button-color: var(--m-mm);opacity:.7}.section-filter__badges m-badge m-button:hover{opacity:1}.section-filter__dropdown{flex-shrink:0}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionsAsset: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsAsset", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], dropdownRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SelectorDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionsAsset: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsAsset", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], dropdownRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SelectorDirective), { isSignal: true }] }] } });
+
+/**
+ * A Row-like container that owns the selection for every Filter beneath it and
+ * emits one aggregate whenever any of them changes (ADR 0025). Admits Cols, so
+ * a Filter may sit any depth down — DI, not a content query, is what finds it.
+ *
+ * Squeezed, it collapses to one icon whose menu drills into each Filter in
+ * turn. The children are still projected in that mode, only hidden: a Filter
+ * that never instantiates never registers, and the menu is built from
+ * registrations.
+ */
+class SectionFilterGroupComponent {
+    squeeze = input(undefined, ...(ngDevMode ? [{ debugName: "squeeze" }] : /* istanbul ignore next */ []));
+    padding = input(undefined, ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    paddingX = input(undefined, ...(ngDevMode ? [{ debugName: "paddingX" }] : /* istanbul ignore next */ []));
+    paddingY = input(undefined, ...(ngDevMode ? [{ debugName: "paddingY" }] : /* istanbul ignore next */ []));
+    maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    align = input(undefined, ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+    /**
+     * The whole group's selection, one entry per Filter that has ever been
+     * touched. A list rather than an object keyed by name — the keys would come
+     * from whichever Filters are dropped in (ADR 0025).
+     */
+    value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    filterChange = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    members = signal([], ...(ngDevMode ? [{ debugName: "members" }] : /* istanbul ignore next */ []));
+    isDesignMode = !!inject(IS_DESIGN_MODE, {
+        optional: true,
+    });
+    translateService = inject(TranslateService);
+    sectionContext = inject(SECTION_CONTEXT, { optional: true });
+    selectorDir = viewChild(SelectorDirective, ...(ngDevMode ? [{ debugName: "selectorDir" }] : /* istanbul ignore next */ []));
+    squeezed = computed(() => this.squeeze() ?? this.config()?.squeeze ?? false, ...(ngDevMode ? [{ debugName: "squeezed" }] : /* istanbul ignore next */ []));
+    resolvedPadding = computed(() => this.padding() ?? this.config()?.padding ?? false, ...(ngDevMode ? [{ debugName: "resolvedPadding" }] : /* istanbul ignore next */ []));
+    resolvedPaddingX = computed(() => this.paddingX() ?? this.config()?.paddingX ?? false, ...(ngDevMode ? [{ debugName: "resolvedPaddingX" }] : /* istanbul ignore next */ []));
+    resolvedPaddingY = computed(() => this.paddingY() ?? this.config()?.paddingY ?? false, ...(ngDevMode ? [{ debugName: "resolvedPaddingY" }] : /* istanbul ignore next */ []));
+    resolvedAlign = computed(() => this.align() ?? this.config()?.align ?? 'left', ...(ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []));
+    resolvedMaxWidth = computed(() => this.maxWidth() ?? this.config()?.maxWidth, ...(ngDevMode ? [{ debugName: "resolvedMaxWidth" }] : /* istanbul ignore next */ []));
+    noBorder = computed(() => this.sectionContext?.variant() === 'noBorder', ...(ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []));
+    /**
+     * Filters holding any selection — not the sum of selected values. A Filter's
+     * own count is already on its menu row, so a sum would be the same
+     * information twice (ADR 0025).
+     */
+    activeCount = computed(() => this.value().filter((entry) => entry.value.length > 0).length, ...(ngDevMode ? [{ debugName: "activeCount" }] : /* istanbul ignore next */ []));
+    toggleConfig = computed(() => ({
+        icon: this.isOpen() ? 'x' : 'adjust',
+        one: true,
+        variant: 'ghost',
+        iconOnly: true,
+    }), ...(ngDevMode ? [{ debugName: "toggleConfig" }] : /* istanbul ignore next */ []));
+    countBadgeConfig = computed(() => ({
+        variant: 'primary',
+        position: 'top-right',
+    }), ...(ngDevMode ? [{ debugName: "countBadgeConfig" }] : /* istanbul ignore next */ []));
+    /**
+     * One MenuItem per registered Filter, its own options nested underneath.
+     * MenuComponent drills into `options` with a back button rather than
+     * expanding in place, which is what makes a group of many Filters legible in
+     * one icon's worth of space.
+     */
+    menuOptions = computed(() => {
+        const rows = this.members().map((member) => {
+            const name = member.name();
+            const selected = this.valueOf(name);
+            const label = selected.length
+                ? this.translateService.translate(member.label(), {
+                    // Pre-resolved, so the menu's own `| translate` passes it through:
+                    // a key with no entry comes back as itself.
+                    count: String(selected.length),
+                }) + ` (${selected.length})`
+                : member.label();
+            return {
+                id: name,
+                label,
+                selected: selected.length > 0,
+                options: [
+                    member.options().map((opt) => ({
+                        id: `${name}:${opt.value}`,
+                        label: opt.label,
+                        value: opt.value,
+                        disabled: opt.disabled,
+                        selected: selected.includes(opt.value),
+                    })),
+                ],
+            };
+        });
+        return rows.length ? [rows] : [];
+    }, ...(ngDevMode ? [{ debugName: "menuOptions" }] : /* istanbul ignore next */ []));
+    selectorConfig = computed(() => ({
+        component: ContextMenuBoxComponent,
+        base: 'm-section-filter-group',
+        width: '260px',
+        bindings: [
+            inputBinding('options', this.menuOptions),
+            // Bound directly rather than through ContextMenuComponent, which closes
+            // its selector on every action — right for a menu of commands, wrong for
+            // one of checkboxes (ADR 0025).
+            outputBinding('action', (item) => this.onMenuAction(item)),
+        ],
+    }), ...(ngDevMode ? [{ debugName: "selectorConfig" }] : /* istanbul ignore next */ []));
+    onMenuAction = (item) => {
+        const separator = item.id.indexOf(':');
+        if (separator < 0)
+            return;
+        const name = item.id.slice(0, separator);
+        const member = this.members().find((m) => m.name() === name);
+        if (!member)
+            return;
+        const option = member
+            .options()
+            .find((opt) => opt.value === item.id.slice(separator + 1));
+        if (!option)
+            return;
+        this.toggle(name, option, member.multiple());
+    };
+    valueOf = (name) => this.value().find((entry) => entry.name === name)?.value ?? [];
+    write = (name, next) => {
+        const current = this.value();
+        const index = current.findIndex((entry) => entry.name === name);
+        const updated = index < 0
+            ? [...current, { name, value: next }]
+            : current.map((entry, i) => (i === index ? { name, value: next } : entry));
+        this.value.set(updated);
+        this.filterChange.emit(updated);
+    };
+    toggle = (name, option, multiple) => {
+        if (option.disabled)
+            return;
+        const current = this.valueOf(name);
+        if (multiple) {
+            this.write(name, current.includes(option.value)
+                ? current.filter((v) => v !== option.value)
+                : [...current, option.value]);
+            return;
+        }
+        this.write(name, current.includes(option.value) ? [] : [option.value]);
+        // Single-select has nothing more to say once it has said it. Multi-select
+        // stays open, which is the reason this menu is not a ContextMenuComponent.
+        if (!this.squeezed())
+            return;
+        this.selectorDir()?.close();
+    };
+    context = {
+        squeeze: this.squeezed,
+        register: (member) => this.members.update((list) => list.includes(member) ? list : [...list, member]),
+        unregister: (member) => this.members.update((list) => list.filter((m) => m !== member)),
+        valueOf: this.valueOf,
+        toggle: this.toggle,
+        remove: (name, val) => this.write(name, this.valueOf(name).filter((v) => v !== val)),
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFilterGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionFilterGroupComponent, isStandalone: true, selector: "m-section-filter-group", inputs: { squeeze: { classPropertyName: "squeeze", publicName: "squeeze", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.is-squeezed": "squeezed()", "class.has-padding": "resolvedPadding()", "class.has-padding-x": "resolvedPaddingX()", "class.has-padding-y": "resolvedPaddingY()", "class.align-left": "resolvedAlign() === \"left\"", "class.align-center": "resolvedAlign() === \"center\"", "class.align-right": "resolvedAlign() === \"right\"", "class.no-border": "noBorder()", "class.is-design-mode": "isDesignMode", "style.--m-filter-group-max-width": "resolvedMaxWidth()" }, classAttribute: "m-section-filter-group" }, providers: [
+            {
+                provide: FILTER_GROUP_CONTEXT,
+                useFactory: () => inject(SectionFilterGroupComponent).context,
+            },
+        ], viewQueries: [{ propertyName: "selectorDir", first: true, predicate: SelectorDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (squeezed()) {
+      <div
+        class="section-filter-group__squeeze"
+        [mSelector]="selectorConfig()"
+        (opened)="isOpen.set(true)"
+        (closed)="isOpen.set(false)"
+      >
+        <div
+          class="section-filter-group__toggle"
+          [class.is-active]="isOpen()"
+        >
+          <m-button [config]="toggleConfig()" />
+          @if (activeCount(); as count) {
+            <m-badge [config]="countBadgeConfig()">{{ count }}</m-badge>
+          }
+        </div>
+      </div>
+    }
+    <div class="section-filter-group__row">
+      <ng-content />
+    </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%;box-sizing:border-box;border-bottom:1px solid var(--m-section-filter-border, var(--m-backdrop-border))}:host(.no-border){border-bottom:none}:host(.has-padding){padding:var(--m-filter-group-p, var(--section-px, 1rem))}:host(.has-padding-x){padding-inline:var(--m-filter-group-px, var(--section-px, 1rem))}:host(.has-padding-y){padding-block:var(--m-filter-group-py, var(--section-pt, 1rem))}:host(.align-left) .section-filter-group__row{justify-content:flex-start}:host(.align-center) .section-filter-group__row{justify-content:center}:host(.align-right) .section-filter-group__row{justify-content:flex-end}:host(.is-squeezed){display:inline-flex;width:auto;border-bottom:none}:host(.is-squeezed) .section-filter-group__row{display:none}:host(.is-design-mode) .section-filter-group__row{min-width:4em;min-height:4em}.section-filter-group__row{display:flex;flex-wrap:wrap;align-items:stretch;width:100%;max-width:var(--m-filter-group-max-width, none)}.section-filter-group__row m-section-filter{flex:1;min-width:0}.section-filter-group__squeeze{display:inline-flex}.section-filter-group__toggle{position:relative;display:inline-flex;flex-shrink:0;--m-button-size: 1rem}.section-filter-group__toggle.is-active{--m-button-color: var(--m-mm)}.section-filter-group__toggle m-badge{pointer-events:none}\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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: BadgeComponent, selector: "m-badge", inputs: ["config"], outputs: ["configChange"] }, { 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: SectionFilterGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'm-section-filter-group', template: `
+    @if (squeezed()) {
+      <div
+        class="section-filter-group__squeeze"
+        [mSelector]="selectorConfig()"
+        (opened)="isOpen.set(true)"
+        (closed)="isOpen.set(false)"
+      >
+        <div
+          class="section-filter-group__toggle"
+          [class.is-active]="isOpen()"
+        >
+          <m-button [config]="toggleConfig()" />
+          @if (activeCount(); as count) {
+            <m-badge [config]="countBadgeConfig()">{{ count }}</m-badge>
+          }
+        </div>
+      </div>
+    }
+    <div class="section-filter-group__row">
+      <ng-content />
+    </div>
+  `, imports: [
+                        ButtonComponent,
+                        BadgeComponent,
+                        SelectorDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'm-section-filter-group',
+                        '[class.is-squeezed]': 'squeezed()',
+                        '[class.has-padding]': 'resolvedPadding()',
+                        '[class.has-padding-x]': 'resolvedPaddingX()',
+                        '[class.has-padding-y]': 'resolvedPaddingY()',
+                        '[class.align-left]': 'resolvedAlign() === "left"',
+                        '[class.align-center]': 'resolvedAlign() === "center"',
+                        '[class.align-right]': 'resolvedAlign() === "right"',
+                        '[class.no-border]': 'noBorder()',
+                        '[class.is-design-mode]': 'isDesignMode',
+                        '[style.--m-filter-group-max-width]': 'resolvedMaxWidth()',
+                    }, providers: [
+                        {
+                            provide: FILTER_GROUP_CONTEXT,
+                            useFactory: () => inject(SectionFilterGroupComponent).context,
+                        },
+                    ], 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%;box-sizing:border-box;border-bottom:1px solid var(--m-section-filter-border, var(--m-backdrop-border))}:host(.no-border){border-bottom:none}:host(.has-padding){padding:var(--m-filter-group-p, var(--section-px, 1rem))}:host(.has-padding-x){padding-inline:var(--m-filter-group-px, var(--section-px, 1rem))}:host(.has-padding-y){padding-block:var(--m-filter-group-py, var(--section-pt, 1rem))}:host(.align-left) .section-filter-group__row{justify-content:flex-start}:host(.align-center) .section-filter-group__row{justify-content:center}:host(.align-right) .section-filter-group__row{justify-content:flex-end}:host(.is-squeezed){display:inline-flex;width:auto;border-bottom:none}:host(.is-squeezed) .section-filter-group__row{display:none}:host(.is-design-mode) .section-filter-group__row{min-width:4em;min-height:4em}.section-filter-group__row{display:flex;flex-wrap:wrap;align-items:stretch;width:100%;max-width:var(--m-filter-group-max-width, none)}.section-filter-group__row m-section-filter{flex:1;min-width:0}.section-filter-group__squeeze{display:inline-flex}.section-filter-group__toggle{position:relative;display:inline-flex;flex-shrink:0;--m-button-size: 1rem}.section-filter-group__toggle.is-active{--m-button-color: var(--m-mm)}.section-filter-group__toggle m-badge{pointer-events:none}\n"] }]
+        }], propDecorators: { squeeze: [{ type: i0.Input, args: [{ isSignal: true, alias: "squeeze", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingX: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingX", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], selectorDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SelectorDirective), { isSignal: true }] }] } });
 
 const BREAKPOINTS$1 = [
     'xs',
@@ -10818,6 +11181,291 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     }, 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:flex;align-items:center;justify-content:flex-end;gap:.5rem;min-height:var(--section-footer-min-height, calc(var(--section-footer-py, .5rem) * 2 + 1.25rem));border-top:1px solid var(--m-backdrop-border);padding:var(--section-footer-py, .85rem) var(--section-px, 1rem);width:100%}:host(.no-border){border-top:none}:host(.align-left){justify-content:flex-start}:host(.align-center){justify-content:center}:host(.align-right){justify-content:flex-end}:host(.is-sticky-enabled){position:sticky;bottom:0;z-index:10}:host(.is-sticky-enabled){background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}\n"] }]
         }], propDecorators: { sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
 
+const DEFAULT_PER_PAGE_OPTIONS = [10, 25, 50, 100];
+// What an unbound `total` stands in for on the Canvas. A `total` is a
+// DataBinding, and design mode has no data behind one, so the honest value
+// there is zero — which is exactly the value that renders no band, leaving the
+// author a Control they cannot see or select. A sample keeps it visible.
+const DESIGN_MODE_SAMPLE_TOTAL = 100;
+/**
+ * The band that windows a Section's collection: a page-size select, the range
+ * it is showing, and one step back or forward. Distinct from Pagination, which
+ * draws a strip of page numbers and owns a `page` — this one speaks `offset`
+ * and `perPage`, the two an api call actually takes.
+ *
+ * Every rule it follows is conditional, and the reasons are in ADR 0097: it
+ * never emits off an input change, it renders nothing without a `total`, and
+ * `hideOnSinglePage` takes the whole band rather than the arrows alone.
+ */
+class SectionPaginationComponent {
+    /**
+     * How many rows the collection holds, not how many are on screen. Unset or
+     * zero renders no band at all: a pager under a list that has not loaded is
+     * layout the reader pays for twice.
+     */
+    total = input(undefined, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    /**
+     * The page sizes offered, authored as one scalar — `"10,25,50,100"` — so the
+     * Control stays folderless and the whole list fits one inspector field.
+     * Entries that are not positive numbers drop rather than throw.
+     */
+    perPageOptions = input(undefined, ...(ngDevMode ? [{ debugName: "perPageOptions" }] : /* istanbul ignore next */ []));
+    align = input('right', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    showPerPage = input(true, ...(ngDevMode ? [{ debugName: "showPerPage" }] : /* istanbul ignore next */ []));
+    /** Hides the band outright once everything fits one page. */
+    hideOnSinglePage = input(true, ...(ngDevMode ? [{ debugName: "hideOnSinglePage" }] : /* istanbul ignore next */ []));
+    /**
+     * Fires the window once on first render. Off by default — a Screen that
+     * already makes its own initial call would make two, and the second is
+     * invisible until someone reads the network tab.
+     */
+    emitOnInit = input(false, ...(ngDevMode ? [{ debugName: "emitOnInit" }] : /* istanbul ignore next */ []));
+    sticky = input(false, ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    offset = model(0, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    perPage = model(DEFAULT_PER_PAGE_OPTIONS[0], ...(ngDevMode ? [{ debugName: "perPage" }] : /* istanbul ignore next */ []));
+    paginationChange = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    isDesignMode = !!inject(IS_DESIGN_MODE, {
+        optional: true,
+    });
+    selectorDir = viewChild(SelectorDirective, ...(ngDevMode ? [{ debugName: "selectorDir" }] : /* istanbul ignore next */ []));
+    scrollSticky = injectScrollSticky(0, 'none');
+    sectionContext = inject(SECTION_CONTEXT, { optional: true });
+    isSticky = computed(() => this.sticky() && this.scrollSticky(), ...(ngDevMode ? [{ debugName: "isSticky" }] : /* istanbul ignore next */ []));
+    noBorder = computed(() => this.sectionContext?.variant() === 'noBorder', ...(ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []));
+    options = computed(() => {
+        const authored = (this.perPageOptions() ?? '')
+            .split(',')
+            .map((entry) => Number(entry.trim()))
+            .filter((size) => Number.isFinite(size) && size > 0);
+        // Order is the author's, so a list reading `25,10,50` stays that way; only
+        // repeats go, a select offering the same size twice being a select bug.
+        const deduped = [...new Set(authored)];
+        return deduped.length ? deduped : DEFAULT_PER_PAGE_OPTIONS;
+    }, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * The page size actually in force. A `perPage` outside the offered list —
+     * the default 10 under a list of `20,40`, say — falls to the first option
+     * rather than leaving the select showing a size it cannot select.
+     */
+    resolvedPerPage = computed(() => {
+        const opts = this.options();
+        const current = this.perPage();
+        return opts.includes(current) ? current : opts[0];
+    }, ...(ngDevMode ? [{ debugName: "resolvedPerPage" }] : /* istanbul ignore next */ []));
+    resolvedTotal = computed(() => {
+        const bound = this.total();
+        if (bound !== undefined && bound !== null)
+            return bound;
+        return this.isDesignMode ? DESIGN_MODE_SAMPLE_TOTAL : 0;
+    }, ...(ngDevMode ? [{ debugName: "resolvedTotal" }] : /* istanbul ignore next */ []));
+    pageCount = computed(() => Math.max(1, Math.ceil(this.resolvedTotal() / this.resolvedPerPage())), ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    /**
+     * Display-only. A `total` that shrinks under a live offset — a filter landing
+     * — draws the last page instead of an empty one, and writes nothing back:
+     * an emit caused by an input change is how a Section fetches in a loop
+     * (ADR 0097).
+     */
+    clampedOffset = computed(() => {
+        const max = (this.pageCount() - 1) * this.resolvedPerPage();
+        return Math.min(Math.max(0, this.offset()), max);
+    }, ...(ngDevMode ? [{ debugName: "clampedOffset" }] : /* istanbul ignore next */ []));
+    rangeStart = computed(() => this.resolvedTotal() ? this.clampedOffset() + 1 : 0, ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
+    rangeEnd = computed(() => Math.min(this.clampedOffset() + this.resolvedPerPage(), this.resolvedTotal()), ...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
+    singlePage = computed(() => this.resolvedTotal() <= this.resolvedPerPage(), ...(ngDevMode ? [{ debugName: "singlePage" }] : /* istanbul ignore next */ []));
+    visible = computed(() => {
+        if (this.resolvedTotal() < 1)
+            return false;
+        return !(this.hideOnSinglePage() && this.singlePage());
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    canPrev = computed(() => !this.disabled() && this.clampedOffset() > 0, ...(ngDevMode ? [{ debugName: "canPrev" }] : /* istanbul ignore next */ []));
+    canNext = computed(() => !this.disabled() &&
+        this.clampedOffset() + this.resolvedPerPage() < this.resolvedTotal(), ...(ngDevMode ? [{ debugName: "canNext" }] : /* istanbul ignore next */ []));
+    prevConfig = computed(() => ({
+        icon: 'chevron-left',
+        one: true,
+        variant: 'ghost',
+        iconOnly: true,
+        label: 'previous',
+        disabled: !this.canPrev(),
+    }), ...(ngDevMode ? [{ debugName: "prevConfig" }] : /* istanbul ignore next */ []));
+    nextConfig = computed(() => ({
+        icon: 'chevron-right',
+        one: true,
+        variant: 'ghost',
+        iconOnly: true,
+        label: 'next',
+        disabled: !this.canNext(),
+    }), ...(ngDevMode ? [{ debugName: "nextConfig" }] : /* istanbul ignore next */ []));
+    // The size is a figure, not a TranslationAsset key — `noTranslate` or the
+    // pipe resolves `25` as a key and renders nothing.
+    perPageTriggerConfig = computed(() => ({
+        label: String(this.resolvedPerPage()),
+        noTranslate: true,
+        one: true,
+        variant: 'ghost',
+        icon: this.isOpen() ? 'chevron-up' : 'chevron-down',
+        isRightIcon: true,
+        disabled: this.disabled(),
+    }), ...(ngDevMode ? [{ debugName: "perPageTriggerConfig" }] : /* istanbul ignore next */ []));
+    menuOptions = computed(() => [
+        this.options().map((size) => ({
+            id: String(size),
+            label: String(size),
+            value: size,
+            selected: size === this.resolvedPerPage(),
+        })),
+    ], ...(ngDevMode ? [{ debugName: "menuOptions" }] : /* istanbul ignore next */ []));
+    selectorConfig = computed(() => ({
+        component: ContextMenuBoxComponent,
+        base: 'm-section-pagination',
+        width: '120px',
+        toggle: true,
+        bindings: [
+            inputBinding('options', this.menuOptions),
+            outputBinding('action', (item) => this.selectPerPage(Number(item.id))),
+        ],
+    }), ...(ngDevMode ? [{ debugName: "selectorConfig" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            if (!this.emitOnInit())
+                return;
+            this.paginationChange.emit({
+                offset: this.clampedOffset(),
+                perPage: this.resolvedPerPage(),
+            });
+        });
+    }
+    write = (offset, perPage) => {
+        this.offset.set(offset);
+        this.perPage.set(perPage);
+        this.paginationChange.emit({ offset, perPage });
+    };
+    prev = () => {
+        if (!this.canPrev())
+            return;
+        this.write(Math.max(0, this.clampedOffset() - this.resolvedPerPage()), this.resolvedPerPage());
+    };
+    next = () => {
+        if (!this.canNext())
+            return;
+        this.write(this.clampedOffset() + this.resolvedPerPage(), this.resolvedPerPage());
+    };
+    /**
+     * A new page size restarts the window. Keeping the offset would land a reader
+     * on page 7 of a list that now has three.
+     */
+    selectPerPage = (size) => {
+        this.selectorDir()?.close();
+        if (!Number.isFinite(size) || size === this.resolvedPerPage())
+            return;
+        if (!this.options().includes(size))
+            return;
+        this.write(0, size);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionPaginationComponent, isStandalone: true, selector: "m-section-pagination", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, perPageOptions: { classPropertyName: "perPageOptions", publicName: "perPageOptions", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, showPerPage: { classPropertyName: "showPerPage", publicName: "showPerPage", isSignal: true, isRequired: false, transformFunction: null }, hideOnSinglePage: { classPropertyName: "hideOnSinglePage", publicName: "hideOnSinglePage", isSignal: true, isRequired: false, transformFunction: null }, emitOnInit: { classPropertyName: "emitOnInit", publicName: "emitOnInit", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, perPage: { classPropertyName: "perPage", publicName: "perPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { offset: "offsetChange", perPage: "perPageChange", paginationChange: "paginationChange" }, host: { properties: { "class.is-hidden": "!visible()", "class.is-sticky-enabled": "sticky()", "class.is-sticky": "isSticky()", "class.align-left": "align() === \"left\"", "class.align-center": "align() === \"center\"", "class.align-right": "align() === \"right\"", "class.no-border": "noBorder()", "class.is-design-mode": "isDesignMode" }, classAttribute: "m-section-pagination" }, viewQueries: [{ propertyName: "selectorDir", first: true, predicate: SelectorDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (visible()) {
+      <div class="m-section-pagination__inner">
+        @if (showPerPage()) {
+          <div class="m-section-pagination__per-page">
+            <span class="m-section-pagination__per-page-label">
+              {{ 'items-per-page' | translate }}
+            </span>
+            <div
+              class="m-section-pagination__per-page-select"
+              [mSelector]="selectorConfig()"
+              (opened)="isOpen.set(true)"
+              (closed)="isOpen.set(false)"
+            >
+              <m-one-button [config]="perPageTriggerConfig()" />
+            </div>
+          </div>
+        }
+
+        <span class="m-section-pagination__range">
+          {{
+            'showing-range'
+              | translate
+                : {
+                    start: rangeStart().toString(),
+                    end: rangeEnd().toString(),
+                    total: resolvedTotal().toString(),
+                  }
+          }}
+        </span>
+
+        <!-- m-one-button, the spelling Pagination uses for the same pair.
+             A button-group would need an asset naming two arrows whose
+             disabled state changes on every step, which a group cannot say —
+             and two arrows are a pager's mechanism rather than a cluster of
+             actions (ADR 0009). -->
+        <div class="m-section-pagination__nav">
+          <m-one-button [config]="prevConfig()" (clicked)="prev()" />
+          <m-one-button [config]="nextConfig()" (clicked)="next()" />
+        </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)}}:host{display:flex;align-items:center;gap:.5rem;min-height:var(--section-pagination-min-height, calc(var(--section-pagination-py, .5rem) * 2 + 1.25rem));border-top:1px solid var(--m-backdrop-border);padding:var(--section-pagination-py, .85rem) var(--section-px, 1rem);width:100%;box-sizing:border-box}:host(.is-hidden){display:none}:host(.no-border){border-top:none}:host(.is-sticky-enabled){position:sticky;bottom:0;z-index:10;background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.m-section-pagination__inner{display:flex;align-items:center;gap:1rem;width:100%}:host(.align-left) .m-section-pagination__inner{justify-content:flex-start}:host(.align-center) .m-section-pagination__inner{justify-content:center}:host(.align-right) .m-section-pagination__inner{justify-content:flex-end}.m-section-pagination__per-page{display:flex;align-items:center;gap:.4rem}.m-section-pagination__per-page-label,.m-section-pagination__range{color:var(--m-text-secondary);font-size:.85rem;white-space:nowrap}.m-section-pagination__nav{display:flex;align-items:center;gap:.25rem}\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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "directive", type: SelectorDirective, selector: "[mSelector]", inputs: ["mSelector", "disabled"], outputs: ["opened", "closed"], exportAs: ["mSelector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'm-section-pagination', imports: [ButtonComponent, SelectorDirective, TranslatePipe], template: `
+    @if (visible()) {
+      <div class="m-section-pagination__inner">
+        @if (showPerPage()) {
+          <div class="m-section-pagination__per-page">
+            <span class="m-section-pagination__per-page-label">
+              {{ 'items-per-page' | translate }}
+            </span>
+            <div
+              class="m-section-pagination__per-page-select"
+              [mSelector]="selectorConfig()"
+              (opened)="isOpen.set(true)"
+              (closed)="isOpen.set(false)"
+            >
+              <m-one-button [config]="perPageTriggerConfig()" />
+            </div>
+          </div>
+        }
+
+        <span class="m-section-pagination__range">
+          {{
+            'showing-range'
+              | translate
+                : {
+                    start: rangeStart().toString(),
+                    end: rangeEnd().toString(),
+                    total: resolvedTotal().toString(),
+                  }
+          }}
+        </span>
+
+        <!-- m-one-button, the spelling Pagination uses for the same pair.
+             A button-group would need an asset naming two arrows whose
+             disabled state changes on every step, which a group cannot say —
+             and two arrows are a pager's mechanism rather than a cluster of
+             actions (ADR 0009). -->
+        <div class="m-section-pagination__nav">
+          <m-one-button [config]="prevConfig()" (clicked)="prev()" />
+          <m-one-button [config]="nextConfig()" (clicked)="next()" />
+        </div>
+      </div>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'm-section-pagination',
+                        '[class.is-hidden]': '!visible()',
+                        '[class.is-sticky-enabled]': 'sticky()',
+                        '[class.is-sticky]': 'isSticky()',
+                        '[class.align-left]': 'align() === "left"',
+                        '[class.align-center]': 'align() === "center"',
+                        '[class.align-right]': 'align() === "right"',
+                        '[class.no-border]': 'noBorder()',
+                        '[class.is-design-mode]': 'isDesignMode',
+                    }, 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:flex;align-items:center;gap:.5rem;min-height:var(--section-pagination-min-height, calc(var(--section-pagination-py, .5rem) * 2 + 1.25rem));border-top:1px solid var(--m-backdrop-border);padding:var(--section-pagination-py, .85rem) var(--section-px, 1rem);width:100%;box-sizing:border-box}:host(.is-hidden){display:none}:host(.no-border){border-top:none}:host(.is-sticky-enabled){position:sticky;bottom:0;z-index:10;background:color-mix(in srgb,var(--m-background) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}.m-section-pagination__inner{display:flex;align-items:center;gap:1rem;width:100%}:host(.align-left) .m-section-pagination__inner{justify-content:flex-start}:host(.align-center) .m-section-pagination__inner{justify-content:center}:host(.align-right) .m-section-pagination__inner{justify-content:flex-end}.m-section-pagination__per-page{display:flex;align-items:center;gap:.4rem}.m-section-pagination__per-page-label,.m-section-pagination__range{color:var(--m-text-secondary);font-size:.85rem;white-space:nowrap}.m-section-pagination__nav{display:flex;align-items:center;gap:.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], perPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "perPageOptions", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], showPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPerPage", required: false }] }], hideOnSinglePage: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnSinglePage", required: false }] }], emitOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitOnInit", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }, { type: i0.Output, args: ["offsetChange"] }], perPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "perPage", required: false }] }, { type: i0.Output, args: ["perPageChange"] }], paginationChange: [{ type: i0.Output, args: ["paginationChange"] }], selectorDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SelectorDirective), { isSignal: true }] }] } });
+
 function getValue(obj, key) {
     return obj[key];
 }
@@ -12275,17 +12923,23 @@ class SectionComponent extends ConfigComponent {
     back = contentChild(SectionBackComponent, ...(ngDevMode ? [{ debugName: "back" }] : /* istanbul ignore next */ []));
     search = contentChild(SectionSearchComponent, ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
     filter = contentChild(SectionFilterComponent, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    filterGroup = contentChild(SectionFilterGroupComponent, ...(ngDevMode ? [{ debugName: "filterGroup" }] : /* istanbul ignore next */ []));
     stepper = contentChild(SectionStepperComponent, ...(ngDevMode ? [{ debugName: "stepper" }] : /* istanbul ignore next */ []));
     hero = contentChild(SectionHeroComponent, ...(ngDevMode ? [{ debugName: "hero" }] : /* istanbul ignore next */ []));
     jumbotron = contentChild(JumbotronComponent, ...(ngDevMode ? [{ debugName: "jumbotron" }] : /* istanbul ignore next */ []));
     carousel = contentChild(CarouselComponent, ...(ngDevMode ? [{ debugName: "carousel" }] : /* istanbul ignore next */ []));
     footer = contentChild(SectionFooterComponent, ...(ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []));
+    // Above the footer rather than inside it: a Section may carry both, and a
+    // pager competing with actions for one row is neither (ADR 0097).
+    pagination = contentChild(SectionPaginationComponent, ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
     variant = input(undefined, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     maxWidth = input(...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
     heightMode = input(undefined, ...(ngDevMode ? [{ debugName: "heightMode" }] : /* istanbul ignore next */ []));
     maxHeight = input(...(ngDevMode ? [undefined, { debugName: "maxHeight" }] : /* istanbul ignore next */ []));
     height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
     align = input(undefined, ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    alignX = input(undefined, ...(ngDevMode ? [{ debugName: "alignX" }] : /* istanbul ignore next */ []));
+    alignY = input(undefined, ...(ngDevMode ? [{ debugName: "alignY" }] : /* istanbul ignore next */ []));
     // Widened beyond `Size` so a plain attribute (`size="lg"`) type-checks in a
     // template — enums are nominal, but `coerceSize` already validates and
     // falls back to the default for anything that isn't one of the three.
@@ -12296,6 +12950,8 @@ class SectionComponent extends ConfigComponent {
     resolvedSize = computed(() => coerceSize(this.size(), this.config()?.size, this.parentSize?.size()), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
     sizeLength = computed(() => resolveSize(this.resolvedSize()), ...(ngDevMode ? [{ debugName: "sizeLength" }] : /* istanbul ignore next */ []));
     resolvedAlign = computed(() => this.align() ?? this.config()?.align ?? 'left', ...(ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []));
+    resolvedAlignX = computed(() => this.alignX() ?? this.config()?.alignX, ...(ngDevMode ? [{ debugName: "resolvedAlignX" }] : /* istanbul ignore next */ []));
+    resolvedAlignY = computed(() => this.alignY() ?? this.config()?.alignY, ...(ngDevMode ? [{ debugName: "resolvedAlignY" }] : /* istanbul ignore next */ []));
     resolvedVariant = computed(() => this.variant() ?? this.config()?.variant ?? undefined, ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
     resolvedMaxWidth = computed(() => this.maxWidth() ?? this.config()?.maxWidth, ...(ngDevMode ? [{ debugName: "resolvedMaxWidth" }] : /* istanbul ignore next */ []));
     resolvedHeightMode = computed(() => this.heightMode() ?? this.config()?.heightMode, ...(ngDevMode ? [{ debugName: "resolvedHeightMode" }] : /* istanbul ignore next */ []));
@@ -12348,7 +13004,7 @@ class SectionComponent extends ConfigComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionComponent, isStandalone: true, selector: "m-section", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, heightMode: { classPropertyName: "heightMode", publicName: "heightMode", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inView: "inView" }, host: { properties: { "class.is-full-height": "isFullHeight()", "class.has-sidepanel": "resolvedSidepanel()", "class.has-max-height": "!!cssMaxHeight()", "class.no-border": "resolvedVariant() === \"noBorder\"", "class.is-with-border": "resolvedVariant() === \"withBorder\"", "class.is-sandwich-border": "resolvedVariant() === \"sandwichBorder\"", "class.align-left": "resolvedAlign() === \"left\"", "class.align-right": "resolvedAlign() === \"right\"", "class.align-center": "resolvedAlign() === \"center\"", "style.font-size": "sizeLength()", "style.--input-size": "sizeLength()", "style.--m-section-align": "resolvedAlign()", "style.--m-section-max-width": "resolvedMaxWidth()", "style.--m-section-max-height": "cssMaxHeight()" }, classAttribute: "m-section" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionComponent, isStandalone: true, selector: "m-section", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, heightMode: { classPropertyName: "heightMode", publicName: "heightMode", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignX: { classPropertyName: "alignX", publicName: "alignX", isSignal: true, isRequired: false, transformFunction: null }, alignY: { classPropertyName: "alignY", publicName: "alignY", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inView: "inView" }, host: { properties: { "class.is-full-height": "isFullHeight()", "class.has-sidepanel": "resolvedSidepanel()", "class.has-max-height": "!!cssMaxHeight()", "class.no-border": "resolvedVariant() === \"noBorder\"", "class.is-with-border": "resolvedVariant() === \"withBorder\"", "class.is-sandwich-border": "resolvedVariant() === \"sandwichBorder\"", "class.align-x-left": "resolvedAlignX() === \"left\"", "class.align-x-center": "resolvedAlignX() === \"center\"", "class.align-x-right": "resolvedAlignX() === \"right\"", "class.align-y-top": "resolvedAlignY() === \"top\"", "class.align-y-center": "resolvedAlignY() === \"center\"", "class.align-y-bottom": "resolvedAlignY() === \"bottom\"", "class.align-left": "resolvedAlign() === \"left\"", "class.align-right": "resolvedAlign() === \"right\"", "class.align-center": "resolvedAlign() === \"center\"", "style.font-size": "sizeLength()", "style.--input-size": "sizeLength()", "style.--m-section-align": "resolvedAlign()", "style.--m-section-max-width": "resolvedMaxWidth()", "style.--m-section-max-height": "cssMaxHeight()" }, classAttribute: "m-section" }, providers: [
             provideSizeContext(SectionComponent),
             {
                 provide: SECTION_CONTEXT,
@@ -12362,7 +13018,7 @@ class SectionComponent extends ConfigComponent {
                     };
                 },
             },
-        ], queries: [{ propertyName: "header", first: true, predicate: SectionHeaderComponent, descendants: true, isSignal: true }, { propertyName: "badges", first: true, predicate: SectionBadgesComponent, descendants: true, isSignal: true }, { propertyName: "toggle", first: true, predicate: SectionToggleComponent, descendants: true, isSignal: true }, { propertyName: "action", first: true, predicate: ActionComponent, descendants: true, isSignal: true }, { propertyName: "back", first: true, predicate: SectionBackComponent, descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: SectionSearchComponent, descendants: true, isSignal: true }, { propertyName: "filter", first: true, predicate: SectionFilterComponent, descendants: true, isSignal: true }, { propertyName: "stepper", first: true, predicate: SectionStepperComponent, descendants: true, isSignal: true }, { propertyName: "hero", first: true, predicate: SectionHeroComponent, descendants: true, isSignal: true }, { propertyName: "jumbotron", first: true, predicate: JumbotronComponent, descendants: true, isSignal: true }, { propertyName: "carousel", first: true, predicate: CarouselComponent, descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: SectionFooterComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "header", first: true, predicate: SectionHeaderComponent, descendants: true, isSignal: true }, { propertyName: "badges", first: true, predicate: SectionBadgesComponent, descendants: true, isSignal: true }, { propertyName: "toggle", first: true, predicate: SectionToggleComponent, descendants: true, isSignal: true }, { propertyName: "action", first: true, predicate: ActionComponent, descendants: true, isSignal: true }, { propertyName: "back", first: true, predicate: SectionBackComponent, descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: SectionSearchComponent, descendants: true, isSignal: true }, { propertyName: "filter", first: true, predicate: SectionFilterComponent, descendants: true, isSignal: true }, { propertyName: "filterGroup", first: true, predicate: SectionFilterGroupComponent, descendants: true, isSignal: true }, { propertyName: "stepper", first: true, predicate: SectionStepperComponent, descendants: true, isSignal: true }, { propertyName: "hero", first: true, predicate: SectionHeroComponent, descendants: true, isSignal: true }, { propertyName: "jumbotron", first: true, predicate: JumbotronComponent, descendants: true, isSignal: true }, { propertyName: "carousel", first: true, predicate: CarouselComponent, descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: SectionFooterComponent, descendants: true, isSignal: true }, { propertyName: "pagination", first: true, predicate: SectionPaginationComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     @if (header()) {
       <ng-content select="m-section-header" />
     }
@@ -12401,6 +13057,9 @@ class SectionComponent extends ConfigComponent {
         @if (filter()) {
           <ng-content select="m-section-filter" />
         }
+        @if (filterGroup()) {
+          <ng-content select="m-section-filter-group" />
+        }
 
         @if (carousel()) {
           <ng-content select="m-carousel, m-one-carousel" />
@@ -12408,12 +13067,15 @@ class SectionComponent extends ConfigComponent {
         <div class="m-section__body">
           <ng-content />
         </div>
+        @if (pagination()) {
+          <ng-content select="m-section-pagination" />
+        }
         @if (footer()) {
           <ng-content select="m-section-footer" />
         }
       </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)}}:host{display:block;width:100%;min-height:5em;container-type:inline-size;container-name:mag-grid;--_section-px: 1rem;--_section-pt: 1.5rem;--_section-pb: 0rem;--_section-header-py: 1rem}:host(.has-max-height){height:var(--m-section-max-height);overflow:auto}:host(.is-with-border){border:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-sandwich-border){border-block:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}.m-section__collapsible{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);opacity:1}.m-section__collapsible.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none}.m-section__collapsible-content{min-height:0;overflow:hidden}.m-section__body{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:stretch;max-width:var(--m-section-max-width);margin-inline:auto}:host(.align-left) .m-section__body{margin-inline-start:0;margin-inline-end:auto}:host(.align-right) .m-section__body{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .m-section__body{margin-inline:auto;justify-content:center}:host(.is-full-height){height:100vh;min-height:100vh;overflow:auto}:host(.is-full-height) .m-section__body{flex:1;height:100%}\n"], 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%;min-height:5em;container-type:inline-size;container-name:mag-grid;--_section-px: 1rem;--_section-pt: 1.5rem;--_section-pb: 0rem;--_section-header-py: 1rem}:host(.has-max-height){height:var(--m-section-max-height);overflow:auto}:host(.is-with-border){border:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-sandwich-border){border-block:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}.m-section__collapsible{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);opacity:1}.m-section__collapsible.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none}.m-section__collapsible-content{min-height:0;overflow:hidden}.m-section__body{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:stretch;max-width:var(--m-section-max-width);margin-inline:auto}:host(.align-left) .m-section__body{margin-inline-start:0;margin-inline-end:auto}:host(.align-right) .m-section__body{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .m-section__body{margin-inline:auto;justify-content:center}:host(.align-x-left) .m-section__body{justify-content:flex-start}:host(.align-x-center) .m-section__body{justify-content:center}:host(.align-x-right) .m-section__body{justify-content:flex-end}:host(.align-y-top) .m-section__body{align-items:flex-start;align-content:flex-start}:host(.align-y-center) .m-section__body{align-items:center;align-content:center}:host(.align-y-bottom) .m-section__body{align-items:flex-end;align-content:flex-end}:host(.is-full-height){height:100vh;min-height:100vh;overflow:auto}:host(.is-full-height) .m-section__body{flex:1;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionComponent, decorators: [{
             type: Component,
@@ -12456,6 +13118,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         @if (filter()) {
           <ng-content select="m-section-filter" />
         }
+        @if (filterGroup()) {
+          <ng-content select="m-section-filter-group" />
+        }
 
         @if (carousel()) {
           <ng-content select="m-carousel, m-one-carousel" />
@@ -12463,6 +13128,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         <div class="m-section__body">
           <ng-content />
         </div>
+        @if (pagination()) {
+          <ng-content select="m-section-pagination" />
+        }
         @if (footer()) {
           <ng-content select="m-section-footer" />
         }
@@ -12476,6 +13144,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[class.no-border]': 'resolvedVariant() === "noBorder"',
                         '[class.is-with-border]': 'resolvedVariant() === "withBorder"',
                         '[class.is-sandwich-border]': 'resolvedVariant() === "sandwichBorder"',
+                        '[class.align-x-left]': 'resolvedAlignX() === "left"',
+                        '[class.align-x-center]': 'resolvedAlignX() === "center"',
+                        '[class.align-x-right]': 'resolvedAlignX() === "right"',
+                        '[class.align-y-top]': 'resolvedAlignY() === "top"',
+                        '[class.align-y-center]': 'resolvedAlignY() === "center"',
+                        '[class.align-y-bottom]': 'resolvedAlignY() === "bottom"',
                         '[class.align-left]': 'resolvedAlign() === "left"',
                         '[class.align-right]': 'resolvedAlign() === "right"',
                         '[class.align-center]': 'resolvedAlign() === "center"',
@@ -12504,8 +13178,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                                 };
                             },
                         },
-                    ], 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%;min-height:5em;container-type:inline-size;container-name:mag-grid;--_section-px: 1rem;--_section-pt: 1.5rem;--_section-pb: 0rem;--_section-header-py: 1rem}:host(.has-max-height){height:var(--m-section-max-height);overflow:auto}:host(.is-with-border){border:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-sandwich-border){border-block:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}.m-section__collapsible{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);opacity:1}.m-section__collapsible.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none}.m-section__collapsible-content{min-height:0;overflow:hidden}.m-section__body{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:stretch;max-width:var(--m-section-max-width);margin-inline:auto}:host(.align-left) .m-section__body{margin-inline-start:0;margin-inline-end:auto}:host(.align-right) .m-section__body{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .m-section__body{margin-inline:auto;justify-content:center}:host(.is-full-height){height:100vh;min-height:100vh;overflow:auto}:host(.is-full-height) .m-section__body{flex:1;height:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionHeaderComponent), { isSignal: true }] }], badges: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionBadgesComponent), { isSignal: true }] }], toggle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionToggleComponent), { isSignal: true }] }], action: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ActionComponent), { isSignal: true }] }], back: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionBackComponent), { isSignal: true }] }], search: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionSearchComponent), { isSignal: true }] }], filter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionFilterComponent), { isSignal: true }] }], stepper: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionStepperComponent), { isSignal: true }] }], hero: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionHeroComponent), { isSignal: true }] }], jumbotron: [{ type: i0.ContentChild, args: [i0.forwardRef(() => JumbotronComponent), { isSignal: true }] }], carousel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CarouselComponent), { isSignal: true }] }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionFooterComponent), { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], heightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightMode", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inView: [{ type: i0.Output, args: ["inView"] }] } });
+                    ], 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%;min-height:5em;container-type:inline-size;container-name:mag-grid;--_section-px: 1rem;--_section-pt: 1.5rem;--_section-pb: 0rem;--_section-header-py: 1rem}:host(.has-max-height){height:var(--m-section-max-height);overflow:auto}:host(.is-with-border){border:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}:host(.is-sandwich-border){border-block:var(--m-section-border, 1px solid var(--m-backdrop-border));box-sizing:border-box}.m-section__collapsible{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);opacity:1}.m-section__collapsible.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none}.m-section__collapsible-content{min-height:0;overflow:hidden}.m-section__body{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:stretch;max-width:var(--m-section-max-width);margin-inline:auto}:host(.align-left) .m-section__body{margin-inline-start:0;margin-inline-end:auto}:host(.align-right) .m-section__body{margin-inline-start:auto;margin-inline-end:0;justify-content:flex-end}:host(.align-center) .m-section__body{margin-inline:auto;justify-content:center}:host(.align-x-left) .m-section__body{justify-content:flex-start}:host(.align-x-center) .m-section__body{justify-content:center}:host(.align-x-right) .m-section__body{justify-content:flex-end}:host(.align-y-top) .m-section__body{align-items:flex-start;align-content:flex-start}:host(.align-y-center) .m-section__body{align-items:center;align-content:center}:host(.align-y-bottom) .m-section__body{align-items:flex-end;align-content:flex-end}:host(.is-full-height){height:100vh;min-height:100vh;overflow:auto}:host(.is-full-height) .m-section__body{flex:1;height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionHeaderComponent), { isSignal: true }] }], badges: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionBadgesComponent), { isSignal: true }] }], toggle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionToggleComponent), { isSignal: true }] }], action: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ActionComponent), { isSignal: true }] }], back: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionBackComponent), { isSignal: true }] }], search: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionSearchComponent), { isSignal: true }] }], filter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionFilterComponent), { isSignal: true }] }], filterGroup: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionFilterGroupComponent), { isSignal: true }] }], stepper: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionStepperComponent), { isSignal: true }] }], hero: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionHeroComponent), { isSignal: true }] }], jumbotron: [{ type: i0.ContentChild, args: [i0.forwardRef(() => JumbotronComponent), { isSignal: true }] }], carousel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CarouselComponent), { isSignal: true }] }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionFooterComponent), { isSignal: true }] }], pagination: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SectionPaginationComponent), { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], heightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightMode", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignX: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignX", required: false }] }], alignY: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignY", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inView: [{ type: i0.Output, args: ["inView"] }] } });
 
 class UserApiService {
     http = inject(HttpService);
@@ -13505,7 +14179,7 @@ class AuthActivityPageComponent {
         wrongPassword: this.authStore.wrongPassword,
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AuthActivityPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AuthActivityPageComponent, isStandalone: true, selector: "m-auth-activity", ngImport: i0, template: "<m-section>\n  <m-flex direction=\"column\" justify=\"center\" alignItems=\"center\" gap=\"2em\" minHeight=\"400px\">\n    <m-logo color=\"mm\" width=\"5em\" padding=\"10px\" variant=\"grained\" />\n    @if (authStore.variant().busy) {\n      <m-icon color=\"mm\" size=\"4em\" name=\"loading-bars\" [one]=\"true\" />\n    } @else if (!authStore.variant().identity_exiest && !authStore.variant().many_identifications) {\n      <m-text-output [noTranslate]=\"false\" label=\"welcome-to-app?app=Magmonium\" />\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        [data]=\"emailData!\"\n        (submitted)=\"authStore.patch({ email: $event.email }); authStore.createAuthEmail({ identity: $event.email })\"\n      >\n        <m-section-form-item\n          name=\"email\"\n          patterns=\"email\"\n          type=\"text\"\n          label=\"e-mail\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"next\"\n          icon=\"chevron-right\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"mm\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n      </m-section-form>\n    } @else if (!authStore.variant().identity_exiest && authStore.variant().many_identifications) {\n      <m-text-output [noTranslate]=\"false\" label=\"welcome-to-app?app=Magmonium\" />\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        (dataChange)=\"selectUserCard($event.user)\"\n      >\n        <m-section-form-item\n          name=\"user\"\n          [span]=\"1\"\n          patterns=\"email\"\n          type=\"selectable_card\"\n          label=\"select-user\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n          [multiSelect]=\"false\"\n          [vertical]=\"true\"\n          [isCheckboxVisible]=\"false\"\n          [data]=\"userCards()\"\n        >\n          <ng-template let-item=\"row\" let-index=\"index\">\n            <m-user [firstName]=\"item.firstName\" [lastName]=\"item.lastName\">\n              <m-text-output [label]=\"item.identity\" noTranslate />\n            </m-user>\n          </ng-template>\n        </m-section-form-item>\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"or-try-new-user\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            [fullWidth]=\"true\"\n            variant=\"primary\"\n            (clicked)=\"authStore.patch({ identity: undefined, email: undefined })\"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (authStore.variant().with_show_term && !authStore.variant().create_new_user) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        (submitted)=\"authStore.createSignUpOtp()\"\n      >\n        <m-text-output\n          align=\"center\"\n          variant=\"footer\"\n          label=\"by-signing-in-you-agree-to-magmonium-s-terms-of-service-terms-and-acknowledge-our-privacy-policy-privacy\"\n          [params]=\"activityTranslateParams()\"\n        />\n        <m-section-form-item name=\"field_1\" type=\"checkbox\" label=\"i-agree\" placeholder=\"type-text\" [required]=\"true\" />\n        <m-button\n          label=\"confirm\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"success\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"\n              authStore.patch({\n                identity: undefined,\n                otp: undefined,\n                otpCounter: undefined,\n                registerNewUser: undefined,\n                resetPassword: undefined,\n                showTerms: undefined,\n                signUp: undefined,\n              })\n            \"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (authStore.variant().with_otp && authStore.variant().create_new_user) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [data]=\"eMailData!\"\n        (submitted)=\"authStore.updateAuthOtp({ code: $event.otp })\"\n      >\n        <m-section-form-item\n          name=\"otp\"\n          type=\"one-time-password\"\n          label=\"one-time-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"next\"\n          icon=\"chevron-right\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"mm\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"resend\"\n            icon=\"corner-left-up\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.createAuthOtp()\"\n          />\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"\n              authStore.patch({\n                identity: undefined,\n                otp: undefined,\n                otpCounter: undefined,\n                registerNewUser: undefined,\n                resetPassword: undefined,\n                showTerms: undefined,\n                signUp: undefined,\n              })\n            \"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (\n      authStore.variant().identity_exiest && !authStore.variant().reset_password && !authStore.variant().create_new_user\n    ) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [validation]=\"signInValidation\"\n        [data]=\"signInData!\"\n        (formInitialized)=\"authStore.patch({ wrongPassword: undefined })\"\n        (submitted)=\"authStore.updateAuthPassword({ password: btoa($event.password) })\"\n      >\n        <m-text-output label=\"signing-in-as\" [params]=\"activityTranslateParams()\" />\n        <m-section-form-item\n          name=\"password\"\n          type=\"password\"\n          label=\"password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"sign-in\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"success\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.patch({ identity: undefined })\"\n          />\n          <m-button\n            label=\"reset\"\n            icon=\"chevron-right\"\n            [isRightIcon]=\"true\"\n            color=\"textSecondary\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.createAuthOtp()\"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (authStore.variant().reset_password && authStore.variant().with_otp) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [validation]=\"passwordValidation\"\n        [data]=\"passwordData!\"\n        (submitted)=\"authStore.createAuthPassword({ password: $event.confirm, code: $event.code })\"\n      >\n        <m-section-form-item\n          name=\"code\"\n          type=\"one-time-password\"\n          label=\"one-time-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"resend\"\n            icon=\"corner-left-up\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.createAuthOtp()\"\n          />\n        </m-section-button-group>\n        <m-section-form-item\n          name=\"password\"\n          type=\"password\"\n          label=\"new-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-form-item\n          name=\"confirm\"\n          type=\"password\"\n          label=\"confirm-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"reset\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"mm\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n      </m-section-form>\n    } @else if (authStore.variant().create_new_user && authStore.variant().identity_exiest) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [data]=\"signupData!\"\n        (submitted)=\"\n          authStore.createAuthSignup({\n            firstName: $event.firstname,\n            lastName: $event.lastname,\n            dob: $event.dob,\n            sex: $event.sex,\n            password: btoa($event.password),\n          })\n        \"\n      >\n        <m-text-output label=\"signing-up-as\" [params]=\"activityTranslateParams()\" />\n        <m-section-form-item\n          name=\"firstname\"\n          type=\"text\"\n          label=\"first-name\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-form-item name=\"lastname\" type=\"text\" label=\"last-name\" placeholder=\"type-text\" [required]=\"true\" />\n        <m-section-form-item name=\"dob\" type=\"date\" label=\"date-of-birth\" placeholder=\"type-text\" [required]=\"true\" />\n        <m-section-form-item\n          name=\"sex\"\n          type=\"toggle_radio\"\n          label=\"sex\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n          value=\"male\"\n          mOptions=\"sex\"\n        />\n        <m-section-form-item\n          name=\"password\"\n          type=\"password\"\n          label=\"password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-form-item\n          name=\"repassword\"\n          type=\"password\"\n          label=\"confirm-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"sign-up\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"success\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"\n              authStore.patch({\n                identity: undefined,\n                otp: undefined,\n                otpCounter: undefined,\n                registerNewUser: undefined,\n                resetPassword: undefined,\n                showTerms: undefined,\n                signUp: undefined,\n              })\n            \"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    }\n  </m-flex>\n</m-section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;padding-block:clamp(1.5rem,6vh,4rem)}\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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: FlexComponent, selector: "m-flex", inputs: ["direction", "justify", "alignItems", "variant", "gap", "wrap", "inline", "fullHeight", "minHeight", "minWidth", "maxHeight", "maxWidth"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: LogoComponent, selector: "m-logo", inputs: ["animation", "alive", "variant", "interactive", "width", "padding", "border", "color"] }, { kind: "directive", type: OptionsSourceDirective, selector: "[mOptions]", inputs: ["mOptions"] }, { kind: "component", type: SectionButtonGroupComponent, selector: "m-section-button-group", inputs: ["vertical", "align", "variant", "size", "fullWidth"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size"], outputs: ["inView"] }, { kind: "component", type: SectionFormComponent, selector: "m-section-form, m-one-section-form", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size", "autofocus", "data", "validation", "disabled", "fieldConfigs", "fieldRenderIds"], outputs: ["dataChange", "submitted", "formInitialized"] }, { kind: "component", type: SectionFormItemComponent, selector: "m-section-form-item, m-one-section-form-item", inputs: ["span", "labelOrientation", "gap", "readonly", "focused", "form", "options", "dir", "element", "data", "template", "aclResolver", "formValues", "type", "label", "placeholder", "params", "required", "disabled", "icon", "prefix", "suffix", "button", "buttonAction", "buttonAcl", "maxWidth", "acl", "testid", "color", "variant", "min", "max", "step", "length", "debounce", "dateFormat", "searchLabel", "vertical", "multiple", "multiSelect", "equalWidth", "iconOnly", "isCheckboxVisible", "optionsAsset", "patterns", "patternMessage", "value"], outputs: ["valueChange", "act", "fieldKey"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], outputs: ["configChange", "clicked"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user", "firstName", "lastName", "profilePic"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AuthActivityPageComponent, isStandalone: true, selector: "m-auth-activity", ngImport: i0, template: "<m-section>\n  <m-flex direction=\"column\" justify=\"center\" alignItems=\"center\" gap=\"2em\" minHeight=\"400px\">\n    <m-logo color=\"mm\" width=\"5em\" padding=\"10px\" variant=\"grained\" />\n    @if (authStore.variant().busy) {\n      <m-icon color=\"mm\" size=\"4em\" name=\"loading-bars\" [one]=\"true\" />\n    } @else if (!authStore.variant().identity_exiest && !authStore.variant().many_identifications) {\n      <m-text-output [noTranslate]=\"false\" label=\"welcome-to-app?app=Magmonium\" />\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        [data]=\"emailData!\"\n        (submitted)=\"authStore.patch({ email: $event.email }); authStore.createAuthEmail({ identity: $event.email })\"\n      >\n        <m-section-form-item\n          name=\"email\"\n          patterns=\"email\"\n          type=\"text\"\n          label=\"e-mail\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"next\"\n          icon=\"chevron-right\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"mm\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n      </m-section-form>\n    } @else if (!authStore.variant().identity_exiest && authStore.variant().many_identifications) {\n      <m-text-output [noTranslate]=\"false\" label=\"welcome-to-app?app=Magmonium\" />\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        (dataChange)=\"selectUserCard($event.user)\"\n      >\n        <m-section-form-item\n          name=\"user\"\n          [span]=\"1\"\n          patterns=\"email\"\n          type=\"selectable_card\"\n          label=\"select-user\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n          [multiSelect]=\"false\"\n          [vertical]=\"true\"\n          [isCheckboxVisible]=\"false\"\n          [data]=\"userCards()\"\n        >\n          <ng-template let-item=\"row\" let-index=\"index\">\n            <m-user [firstName]=\"item.firstName\" [lastName]=\"item.lastName\">\n              <m-text-output [label]=\"item.identity\" noTranslate />\n            </m-user>\n          </ng-template>\n        </m-section-form-item>\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"or-try-new-user\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            [fullWidth]=\"true\"\n            variant=\"primary\"\n            (clicked)=\"authStore.patch({ identity: undefined, email: undefined })\"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (authStore.variant().with_show_term && !authStore.variant().create_new_user) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        (submitted)=\"authStore.createSignUpOtp()\"\n      >\n        <m-text-output\n          align=\"center\"\n          variant=\"footer\"\n          label=\"by-signing-in-you-agree-to-magmonium-s-terms-of-service-terms-and-acknowledge-our-privacy-policy-privacy\"\n          [params]=\"activityTranslateParams()\"\n        />\n        <m-section-form-item name=\"field_1\" type=\"checkbox\" label=\"i-agree\" placeholder=\"type-text\" [required]=\"true\" />\n        <m-button\n          label=\"confirm\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"success\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"\n              authStore.patch({\n                identity: undefined,\n                otp: undefined,\n                otpCounter: undefined,\n                registerNewUser: undefined,\n                resetPassword: undefined,\n                showTerms: undefined,\n                signUp: undefined,\n              })\n            \"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (authStore.variant().with_otp && authStore.variant().create_new_user) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [data]=\"eMailData!\"\n        (submitted)=\"authStore.updateAuthOtp({ code: $event.otp })\"\n      >\n        <m-section-form-item\n          name=\"otp\"\n          type=\"one-time-password\"\n          label=\"one-time-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"next\"\n          icon=\"chevron-right\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"mm\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"resend\"\n            icon=\"corner-left-up\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.createAuthOtp()\"\n          />\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"\n              authStore.patch({\n                identity: undefined,\n                otp: undefined,\n                otpCounter: undefined,\n                registerNewUser: undefined,\n                resetPassword: undefined,\n                showTerms: undefined,\n                signUp: undefined,\n              })\n            \"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (\n      authStore.variant().identity_exiest && !authStore.variant().reset_password && !authStore.variant().create_new_user\n    ) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [validation]=\"signInValidation\"\n        [data]=\"signInData!\"\n        (formInitialized)=\"authStore.patch({ wrongPassword: undefined })\"\n        (submitted)=\"authStore.updateAuthPassword({ password: btoa($event.password) })\"\n      >\n        <m-text-output label=\"signing-in-as\" [params]=\"activityTranslateParams()\" />\n        <m-section-form-item\n          name=\"password\"\n          type=\"password\"\n          label=\"password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"sign-in\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"success\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.patch({ identity: undefined })\"\n          />\n          <m-button\n            label=\"reset\"\n            icon=\"chevron-right\"\n            [isRightIcon]=\"true\"\n            color=\"textSecondary\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.createAuthOtp()\"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    } @else if (authStore.variant().reset_password && authStore.variant().with_otp) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [validation]=\"passwordValidation\"\n        [data]=\"passwordData!\"\n        (submitted)=\"authStore.createAuthPassword({ password: $event.confirm, code: $event.code })\"\n      >\n        <m-section-form-item\n          name=\"code\"\n          type=\"one-time-password\"\n          label=\"one-time-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"resend\"\n            icon=\"corner-left-up\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"authStore.createAuthOtp()\"\n          />\n        </m-section-button-group>\n        <m-section-form-item\n          name=\"password\"\n          type=\"password\"\n          label=\"new-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-form-item\n          name=\"confirm\"\n          type=\"password\"\n          label=\"confirm-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"reset\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"mm\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n      </m-section-form>\n    } @else if (authStore.variant().create_new_user && authStore.variant().identity_exiest) {\n      <m-section-form\n        minWidth=\"320px\"\n        maxWidth=\"320px\"\n        label=\"e-mail\"\n        subtitle=\"type-text\"\n        align=\"center\"\n        [data]=\"signupData!\"\n        (submitted)=\"\n          authStore.createAuthSignup({\n            firstName: $event.firstname,\n            lastName: $event.lastname,\n            dob: $event.dob,\n            sex: $event.sex,\n            password: btoa($event.password),\n          })\n        \"\n      >\n        <m-text-output label=\"signing-up-as\" [params]=\"activityTranslateParams()\" />\n        <m-section-form-item\n          name=\"firstname\"\n          type=\"text\"\n          label=\"first-name\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-form-item name=\"lastname\" type=\"text\" label=\"last-name\" placeholder=\"type-text\" [required]=\"true\" />\n        <m-section-form-item name=\"dob\" type=\"date\" label=\"date-of-birth\" placeholder=\"type-text\" [required]=\"true\" />\n        <m-section-form-item\n          name=\"sex\"\n          type=\"toggle_radio\"\n          label=\"sex\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n          value=\"male\"\n          mOptions=\"sex\"\n        />\n        <m-section-form-item\n          name=\"password\"\n          type=\"password\"\n          label=\"password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-section-form-item\n          name=\"repassword\"\n          type=\"password\"\n          label=\"confirm-password\"\n          placeholder=\"type-text\"\n          [required]=\"true\"\n        />\n        <m-button\n          label=\"sign-up\"\n          icon=\"check\"\n          isSubmit\n          [isRightIcon]=\"true\"\n          color=\"success\"\n          [fullWidth]=\"true\"\n          variant=\"primary\"\n        />\n        <m-section-button-group [fullWidth]=\"true\">\n          <m-button\n            label=\"back\"\n            icon=\"chevron-left\"\n            color=\"mm\"\n            variant=\"ghost\"\n            (clicked)=\"\n              authStore.patch({\n                identity: undefined,\n                otp: undefined,\n                otpCounter: undefined,\n                registerNewUser: undefined,\n                resetPassword: undefined,\n                showTerms: undefined,\n                signUp: undefined,\n              })\n            \"\n          />\n        </m-section-button-group>\n      </m-section-form>\n    }\n  </m-flex>\n</m-section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;padding-block:clamp(1.5rem,6vh,4rem)}\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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: FlexComponent, selector: "m-flex", inputs: ["direction", "justify", "alignItems", "variant", "gap", "padding", "paddingX", "paddingY", "wrap", "inline", "fullHeight", "minHeight", "minWidth", "maxHeight", "maxWidth"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: LogoComponent, selector: "m-logo", inputs: ["animation", "alive", "variant", "interactive", "width", "padding", "border", "color"] }, { kind: "directive", type: OptionsSourceDirective, selector: "[mOptions]", inputs: ["mOptions"] }, { kind: "component", type: SectionButtonGroupComponent, selector: "m-section-button-group", inputs: ["vertical", "align", "variant", "size", "fullWidth"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: SectionFormComponent, selector: "m-section-form, m-one-section-form", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "size", "autofocus", "data", "validation", "disabled", "fieldConfigs", "fieldRenderIds"], outputs: ["dataChange", "submitted", "formInitialized"] }, { kind: "component", type: SectionFormItemComponent, selector: "m-section-form-item, m-one-section-form-item", inputs: ["span", "labelOrientation", "gap", "readonly", "focused", "form", "options", "dir", "element", "data", "template", "aclResolver", "formValues", "type", "label", "placeholder", "params", "required", "disabled", "icon", "prefix", "suffix", "button", "buttonAction", "buttonAcl", "maxWidth", "acl", "testid", "color", "variant", "min", "max", "step", "length", "debounce", "dateFormat", "searchLabel", "vertical", "multiple", "multiSelect", "equalWidth", "iconOnly", "isCheckboxVisible", "optionsAsset", "patterns", "patternMessage", "value"], outputs: ["valueChange", "act", "fieldKey"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "label", "noTranslate", "params"], 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: AuthActivityPageComponent, decorators: [{
             type: Component,
@@ -14364,6 +15038,8 @@ class ColComponent extends ConfigComponent {
     padding = input(undefined, ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
     paddingX = input(undefined, ...(ngDevMode ? [{ debugName: "paddingX" }] : /* istanbul ignore next */ []));
     paddingY = input(undefined, ...(ngDevMode ? [{ debugName: "paddingY" }] : /* istanbul ignore next */ []));
+    alignX = input(undefined, ...(ngDevMode ? [{ debugName: "alignX" }] : /* istanbul ignore next */ []));
+    alignY = input(undefined, ...(ngDevMode ? [{ debugName: "alignY" }] : /* istanbul ignore next */ []));
     resolvedXs = computed(() => this.xs() ?? this.config()?.xs, ...(ngDevMode ? [{ debugName: "resolvedXs" }] : /* istanbul ignore next */ []));
     resolvedSm = computed(() => this.sm() ?? this.config()?.sm, ...(ngDevMode ? [{ debugName: "resolvedSm" }] : /* istanbul ignore next */ []));
     resolvedMd = computed(() => this.md() ?? this.config()?.md, ...(ngDevMode ? [{ debugName: "resolvedMd" }] : /* istanbul ignore next */ []));
@@ -14390,6 +15066,8 @@ class ColComponent extends ConfigComponent {
         const v = this.paddingY() ?? this.config()?.paddingY;
         return v === true || v + '' === 'true';
     }, ...(ngDevMode ? [{ debugName: "resolvedPaddingY" }] : /* istanbul ignore next */ []));
+    resolvedAlignX = computed(() => this.alignX() ?? this.config()?.alignX, ...(ngDevMode ? [{ debugName: "resolvedAlignX" }] : /* istanbul ignore next */ []));
+    resolvedAlignY = computed(() => this.alignY() ?? this.config()?.alignY, ...(ngDevMode ? [{ debugName: "resolvedAlignY" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const list = ['m-col'];
         if (this.resolvedXs() !== undefined)
@@ -14412,6 +15090,12 @@ class ColComponent extends ConfigComponent {
             list.push('has-padding-y');
         if (this.noBorder())
             list.push('no-border');
+        // Distinct prefixes: the ancestor Section pushes a bare `align-<x>` below,
+        // and a Col's own child alignment must not answer to it.
+        if (this.resolvedAlignX())
+            list.push(`align-x-${this.resolvedAlignX()}`);
+        if (this.resolvedAlignY())
+            list.push(`align-y-${this.resolvedAlignY()}`);
         const align = this.sectionContext?.align?.();
         if (align)
             list.push(`align-${align}`);
@@ -14420,7 +15104,7 @@ class ColComponent extends ConfigComponent {
     sectionContext = inject(SECTION_CONTEXT, { optional: true });
     noBorder = computed(() => this.sectionContext?.variant() === 'noBorder', ...(ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ColComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ColComponent, isStandalone: true, selector: "m-col", inputs: { xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "class.is-full-height": "resolvedFullHeight()" }, classAttribute: "m-col" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', 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;grid-column:span 12;box-sizing:border-box;width:100%;min-height:5em}:host(.is-full-height){height:100%}:host.has-padding-x{padding-inline:var(--col-px, var(--section-px, var(--_section-px, 1rem)))}:host.has-padding-y{padding-block:var(--col-py, var(--section-pt, var(--_section-pt, 1.5rem)))}:host(:not(:last-child)){border-right:1px solid var(--m-backdrop-border)}@container mag-grid (max-width: 575.98px){:host(:not(:last-child)){border-right:none;border-bottom:1px solid var(--m-backdrop-border)}}:host(.no-border){border-right:none}@container mag-grid (max-width: 575.98px){:host(.no-border){border-bottom:none}}:host.full-width{grid-column:span 12!important;width:calc(100% + 2 * var(--section-px, var(--_section-px, 1rem)));margin-inline:calc(-1 * var(--section-px, var(--_section-px, 1rem)))}:host.col-xs-1{grid-column:span 1;width:calc(100% * 1 / 12)}:host.col-xs-2{grid-column:span 2;width:calc(100% * 2 / 12)}:host.col-xs-3{grid-column:span 3;width:25%}:host.col-xs-4{grid-column:span 4;width:calc(100% * 4 / 12)}:host.col-xs-5{grid-column:span 5;width:calc(100% * 5 / 12)}:host.col-xs-6{grid-column:span 6;width:50%}:host.col-xs-7{grid-column:span 7;width:calc(100% * 7 / 12)}:host.col-xs-8{grid-column:span 8;width:calc(100% * 8 / 12)}:host.col-xs-9{grid-column:span 9;width:75%}:host.col-xs-10{grid-column:span 10;width:calc(100% * 10 / 12)}:host.col-xs-11{grid-column:span 11;width:calc(100% * 11 / 12)}:host.col-xs-12{grid-column:span 12;width:100%}@container mag-grid (min-width: 576px){:host.col-sm-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 576px){:host.col-sm-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 576px){:host.col-sm-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 576px){:host.col-sm-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 768px){:host.col-md-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 768px){:host.col-md-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 768px){:host.col-md-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 768px){:host.col-md-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 992px){:host.col-lg-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 992px){:host.col-lg-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 992px){:host.col-lg-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 992px){:host.col-lg-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 1200px){:host.col-xl-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 1200px){:host.col-xl-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 1200px){:host.col-xl-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 1200px){:host.col-xl-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 1400px){:host.col-xxl-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 1400px){:host.col-xxl-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 1400px){:host.col-xxl-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 1400px){:host.col-xxl-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-12{grid-column:span 12;width:100%}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ColComponent, isStandalone: true, selector: "m-col", inputs: { xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null }, alignX: { classPropertyName: "alignX", publicName: "alignX", isSignal: true, isRequired: false, transformFunction: null }, alignY: { classPropertyName: "alignY", publicName: "alignY", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "class.is-full-height": "resolvedFullHeight()" }, classAttribute: "m-col" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', 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;grid-column:span 12;box-sizing:border-box;width:100%;min-height:5em}:host(.is-full-height){height:100%}:host.has-padding-x{padding-inline:var(--col-px, var(--section-px, var(--_section-px, 1rem)))}:host.has-padding-y{padding-block:var(--col-py, var(--section-pt, var(--_section-pt, 1.5rem)))}:host(:not(:last-child)){border-right:1px solid var(--m-backdrop-border)}@container mag-grid (max-width: 575.98px){:host(:not(:last-child)){border-right:none;border-bottom:1px solid var(--m-backdrop-border)}}:host(.no-border){border-right:none}@container mag-grid (max-width: 575.98px){:host(.no-border){border-bottom:none}}:host.full-width{grid-column:span 12!important;width:calc(100% + 2 * var(--section-px, var(--_section-px, 1rem)));margin-inline:calc(-1 * var(--section-px, var(--_section-px, 1rem)))}:host.col-xs-1{grid-column:span 1;width:calc(100% * 1 / 12)}:host.col-xs-2{grid-column:span 2;width:calc(100% * 2 / 12)}:host.col-xs-3{grid-column:span 3;width:25%}:host.col-xs-4{grid-column:span 4;width:calc(100% * 4 / 12)}:host.col-xs-5{grid-column:span 5;width:calc(100% * 5 / 12)}:host.col-xs-6{grid-column:span 6;width:50%}:host.col-xs-7{grid-column:span 7;width:calc(100% * 7 / 12)}:host.col-xs-8{grid-column:span 8;width:calc(100% * 8 / 12)}:host.col-xs-9{grid-column:span 9;width:75%}:host.col-xs-10{grid-column:span 10;width:calc(100% * 10 / 12)}:host.col-xs-11{grid-column:span 11;width:calc(100% * 11 / 12)}:host.col-xs-12{grid-column:span 12;width:100%}@container mag-grid (min-width: 576px){:host.col-sm-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 576px){:host.col-sm-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 576px){:host.col-sm-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 576px){:host.col-sm-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 768px){:host.col-md-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 768px){:host.col-md-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 768px){:host.col-md-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 768px){:host.col-md-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 992px){:host.col-lg-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 992px){:host.col-lg-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 992px){:host.col-lg-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 992px){:host.col-lg-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 1200px){:host.col-xl-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 1200px){:host.col-xl-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 1200px){:host.col-xl-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 1200px){:host.col-xl-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 1400px){:host.col-xxl-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 1400px){:host.col-xxl-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 1400px){:host.col-xxl-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 1400px){:host.col-xxl-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-12{grid-column:span 12;width:100%}}:host.align-x-left,:host.align-x-center,:host.align-x-right,:host.align-y-top,:host.align-y-center,:host.align-y-bottom{display:flex;flex-direction:column}:host.align-x-left{align-items:flex-start}:host.align-x-center{align-items:center}:host.align-x-right{align-items:flex-end}:host.align-y-top{justify-content:flex-start}:host.align-y-center{justify-content:center}:host.align-y-bottom{justify-content:flex-end}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ColComponent, decorators: [{
             type: Component,
@@ -14428,8 +15112,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         class: 'm-col',
                         '[class]': 'classes()',
                         '[class.is-full-height]': 'resolvedFullHeight()',
-                    }, 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;grid-column:span 12;box-sizing:border-box;width:100%;min-height:5em}:host(.is-full-height){height:100%}:host.has-padding-x{padding-inline:var(--col-px, var(--section-px, var(--_section-px, 1rem)))}:host.has-padding-y{padding-block:var(--col-py, var(--section-pt, var(--_section-pt, 1.5rem)))}:host(:not(:last-child)){border-right:1px solid var(--m-backdrop-border)}@container mag-grid (max-width: 575.98px){:host(:not(:last-child)){border-right:none;border-bottom:1px solid var(--m-backdrop-border)}}:host(.no-border){border-right:none}@container mag-grid (max-width: 575.98px){:host(.no-border){border-bottom:none}}:host.full-width{grid-column:span 12!important;width:calc(100% + 2 * var(--section-px, var(--_section-px, 1rem)));margin-inline:calc(-1 * var(--section-px, var(--_section-px, 1rem)))}:host.col-xs-1{grid-column:span 1;width:calc(100% * 1 / 12)}:host.col-xs-2{grid-column:span 2;width:calc(100% * 2 / 12)}:host.col-xs-3{grid-column:span 3;width:25%}:host.col-xs-4{grid-column:span 4;width:calc(100% * 4 / 12)}:host.col-xs-5{grid-column:span 5;width:calc(100% * 5 / 12)}:host.col-xs-6{grid-column:span 6;width:50%}:host.col-xs-7{grid-column:span 7;width:calc(100% * 7 / 12)}:host.col-xs-8{grid-column:span 8;width:calc(100% * 8 / 12)}:host.col-xs-9{grid-column:span 9;width:75%}:host.col-xs-10{grid-column:span 10;width:calc(100% * 10 / 12)}:host.col-xs-11{grid-column:span 11;width:calc(100% * 11 / 12)}:host.col-xs-12{grid-column:span 12;width:100%}@container mag-grid (min-width: 576px){:host.col-sm-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 576px){:host.col-sm-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 576px){:host.col-sm-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 576px){:host.col-sm-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 768px){:host.col-md-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 768px){:host.col-md-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 768px){:host.col-md-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 768px){:host.col-md-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 992px){:host.col-lg-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 992px){:host.col-lg-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 992px){:host.col-lg-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 992px){:host.col-lg-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 1200px){:host.col-xl-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 1200px){:host.col-xl-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 1200px){:host.col-xl-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 1200px){:host.col-xl-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 1400px){:host.col-xxl-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 1400px){:host.col-xxl-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 1400px){:host.col-xxl-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 1400px){:host.col-xxl-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-12{grid-column:span 12;width:100%}}\n"] }]
-        }], propDecorators: { xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingX: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingX", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }] } });
+                    }, 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;grid-column:span 12;box-sizing:border-box;width:100%;min-height:5em}:host(.is-full-height){height:100%}:host.has-padding-x{padding-inline:var(--col-px, var(--section-px, var(--_section-px, 1rem)))}:host.has-padding-y{padding-block:var(--col-py, var(--section-pt, var(--_section-pt, 1.5rem)))}:host(:not(:last-child)){border-right:1px solid var(--m-backdrop-border)}@container mag-grid (max-width: 575.98px){:host(:not(:last-child)){border-right:none;border-bottom:1px solid var(--m-backdrop-border)}}:host(.no-border){border-right:none}@container mag-grid (max-width: 575.98px){:host(.no-border){border-bottom:none}}:host.full-width{grid-column:span 12!important;width:calc(100% + 2 * var(--section-px, var(--_section-px, 1rem)));margin-inline:calc(-1 * var(--section-px, var(--_section-px, 1rem)))}:host.col-xs-1{grid-column:span 1;width:calc(100% * 1 / 12)}:host.col-xs-2{grid-column:span 2;width:calc(100% * 2 / 12)}:host.col-xs-3{grid-column:span 3;width:25%}:host.col-xs-4{grid-column:span 4;width:calc(100% * 4 / 12)}:host.col-xs-5{grid-column:span 5;width:calc(100% * 5 / 12)}:host.col-xs-6{grid-column:span 6;width:50%}:host.col-xs-7{grid-column:span 7;width:calc(100% * 7 / 12)}:host.col-xs-8{grid-column:span 8;width:calc(100% * 8 / 12)}:host.col-xs-9{grid-column:span 9;width:75%}:host.col-xs-10{grid-column:span 10;width:calc(100% * 10 / 12)}:host.col-xs-11{grid-column:span 11;width:calc(100% * 11 / 12)}:host.col-xs-12{grid-column:span 12;width:100%}@container mag-grid (min-width: 576px){:host.col-sm-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 576px){:host.col-sm-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 576px){:host.col-sm-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 576px){:host.col-sm-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 768px){:host.col-md-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 768px){:host.col-md-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 768px){:host.col-md-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 768px){:host.col-md-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 992px){:host.col-lg-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 992px){:host.col-lg-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 992px){:host.col-lg-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 992px){:host.col-lg-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 1200px){:host.col-xl-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 1200px){:host.col-xl-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 1200px){:host.col-xl-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 1200px){:host.col-xl-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 1400px){:host.col-xxl-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 1400px){:host.col-xxl-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 1400px){:host.col-xxl-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 1400px){:host.col-xxl-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-12{grid-column:span 12;width:100%}}:host.align-x-left,:host.align-x-center,:host.align-x-right,:host.align-y-top,:host.align-y-center,:host.align-y-bottom{display:flex;flex-direction:column}:host.align-x-left{align-items:flex-start}:host.align-x-center{align-items:center}:host.align-x-right{align-items:flex-end}:host.align-y-top{justify-content:flex-start}:host.align-y-center{justify-content:center}:host.align-y-bottom{justify-content:flex-end}\n"] }]
+        }], propDecorators: { xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingX: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingX", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], alignX: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignX", required: false }] }], alignY: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignY", required: false }] }] } });
 
 class SectionCardComponent extends ColComponent {
     margin = input(false, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
@@ -17404,7 +18088,7 @@ class ColorPickerBoxComponent {
       </div>
     </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)}}.color-picker-box{width:100%;box-sizing:border-box;background:var(--m-background);border:var(--m-input-border-width, 2px) solid var(--m-text-input-border, var(--m-input-color, var(--m-mm, #4169e1)));border-radius:var(--m-input-radius, 4px);overflow:hidden;box-shadow:none;animation:color-picker-in .2s ease-out}.color-picker-box .color-picker-box-header{position:sticky;display:flex;flex-direction:row;top:0;left:0;width:100%;z-index:5260;align-items:center;justify-content:space-between;background:var(--m-background);border-bottom:1px solid var(--border-color)}.color-picker-box .color-picker-box-header .color-preview{height:2em;width:2em;border-radius:5px;margin:.5em}.color-picker-box .color-picker-box-header .color-header{flex:1;padding:0 .5em}.color-picker-box .color-area{position:relative;width:100%;height:5em;overflow:hidden}.color-picker-box .color-area .color-base{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(180deg,#fff,#fff0,#000),linear-gradient(90deg,gray,#fff0);pointer-events:none}.color-picker-box .color-area .saturation-gradient{position:absolute;inset:0;background:linear-gradient(90deg,rgb(128,128,128) 0%,transparent 100%)}.color-picker-box .color-area .brightness-gradient{position:absolute;inset:0;background:linear-gradient(180deg,#ffffff 0%,transparent 50%,#000000 100%)}.color-picker-box .color-area .color-pointer{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000004d;cursor:pointer;z-index:1}.color-picker-box .color-sliders{display:flex;flex-direction:column;gap:.5em;padding:.5em 1em;box-sizing:border-box}.color-picker-box .color-sliders .hue-slider,.color-picker-box .color-sliders .opacity-slider{height:.5em;position:relative;border-radius:.5em}.color-picker-box .color-sliders .hue-slider .pointer,.color-picker-box .color-sliders .opacity-slider .pointer{width:.5em;height:.5em;border-radius:50%;transform:translate(-50%,calc(-50% + 4px));border:2px solid var(--mag-border-color);box-shadow:0 1px 3px #0003;cursor:pointer;margin:0;padding:0;border:2px solid white;transition:scale .2s ease}.color-picker-box .color-sliders .hue-slider .pointer:hover,.color-picker-box .color-sliders .opacity-slider .pointer:hover{scale:1.2;box-shadow:0 2px 4px #0003}.color-picker-box .color-sliders .hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker-box .suggested-colors{padding:.5em;box-sizing:border-box;width:100%}.color-picker-box .suggested-colors .suggested-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5em;padding:.25em 0;border-bottom:1px solid var(--mag-border-color)}.color-picker-box .suggested-colors .suggested-header span{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:.75em;font-weight:500;color:var(--mm-color);display:flex;align-items:center;gap:.5em}.color-picker-box .suggested-colors .color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:8px;width:100%;padding:.25rem}.color-picker-box .suggested-colors .color-grid .color-option{width:24px;height:24px;border-radius:4px;cursor:pointer;border:1px solid var(--border-color);transition:all .2s ease;margin:auto;position:relative;padding:0}.color-picker-box .suggested-colors .color-grid .color-option:hover{transform:scale(1.1);z-index:1;box-shadow:0 2px 4px #0003}.color-picker-box .suggested-colors .color-grid .color-option:active{transform:scale(.95)}.color-picker-box .suggested-colors .color-grid .color-option[data-alpha]{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}@keyframes color-picker-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"], dependencies: [{ kind: "directive", type: DraggableDirective, selector: "[mDraggable]", inputs: ["mDraggable", "handleSelector", "pos", "max", "min"], outputs: ["mDraggableChange", "dragStart", "dragEnd"] }, { kind: "directive", type: ToolTipDirective, selector: "[mToolTip]", inputs: ["mToolTip"] }, { 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", "noTranslate", "params", "reverse", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { 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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "directive", type: FileUploadDirective, selector: "[mFileUpload]", inputs: ["mFileUpload"], outputs: ["fileSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], 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)}}.color-picker-box{width:100%;box-sizing:border-box;background:var(--m-background);border:var(--m-input-border-width, 2px) solid var(--m-text-input-border, var(--m-input-color, var(--m-mm, #4169e1)));border-radius:var(--m-input-radius, 4px);overflow:hidden;box-shadow:none;animation:color-picker-in .2s ease-out}.color-picker-box .color-picker-box-header{position:sticky;display:flex;flex-direction:row;top:0;left:0;width:100%;z-index:5260;align-items:center;justify-content:space-between;background:var(--m-background);border-bottom:1px solid var(--border-color)}.color-picker-box .color-picker-box-header .color-preview{height:2em;width:2em;border-radius:5px;margin:.5em}.color-picker-box .color-picker-box-header .color-header{flex:1;padding:0 .5em}.color-picker-box .color-area{position:relative;width:100%;height:5em;overflow:hidden}.color-picker-box .color-area .color-base{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(180deg,#fff,#fff0,#000),linear-gradient(90deg,gray,#fff0);pointer-events:none}.color-picker-box .color-area .saturation-gradient{position:absolute;inset:0;background:linear-gradient(90deg,rgb(128,128,128) 0%,transparent 100%)}.color-picker-box .color-area .brightness-gradient{position:absolute;inset:0;background:linear-gradient(180deg,#ffffff 0%,transparent 50%,#000000 100%)}.color-picker-box .color-area .color-pointer{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000004d;cursor:pointer;z-index:1}.color-picker-box .color-sliders{display:flex;flex-direction:column;gap:.5em;padding:.5em 1em;box-sizing:border-box}.color-picker-box .color-sliders .hue-slider,.color-picker-box .color-sliders .opacity-slider{height:.5em;position:relative;border-radius:.5em}.color-picker-box .color-sliders .hue-slider .pointer,.color-picker-box .color-sliders .opacity-slider .pointer{width:.5em;height:.5em;border-radius:50%;transform:translate(-50%,calc(-50% + 4px));border:2px solid var(--mag-border-color);box-shadow:0 1px 3px #0003;cursor:pointer;margin:0;padding:0;border:2px solid white;transition:scale .2s ease}.color-picker-box .color-sliders .hue-slider .pointer:hover,.color-picker-box .color-sliders .opacity-slider .pointer:hover{scale:1.2;box-shadow:0 2px 4px #0003}.color-picker-box .color-sliders .hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.color-picker-box .suggested-colors{padding:.5em;box-sizing:border-box;width:100%}.color-picker-box .suggested-colors .suggested-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5em;padding:.25em 0;border-bottom:1px solid var(--mag-border-color)}.color-picker-box .suggested-colors .suggested-header span{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:.75em;font-weight:500;color:var(--mm-color);display:flex;align-items:center;gap:.5em}.color-picker-box .suggested-colors .color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:8px;width:100%;padding:.25rem}.color-picker-box .suggested-colors .color-grid .color-option{width:24px;height:24px;border-radius:4px;cursor:pointer;border:1px solid var(--border-color);transition:all .2s ease;margin:auto;position:relative;padding:0}.color-picker-box .suggested-colors .color-grid .color-option:hover{transform:scale(1.1);z-index:1;box-shadow:0 2px 4px #0003}.color-picker-box .suggested-colors .color-grid .color-option:active{transform:scale(.95)}.color-picker-box .suggested-colors .color-grid .color-option[data-alpha]{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0px}@keyframes color-picker-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"], dependencies: [{ kind: "directive", type: DraggableDirective, selector: "[mDraggable]", inputs: ["mDraggable", "handleSelector", "pos", "max", "min"], outputs: ["mDraggableChange", "dragStart", "dragEnd"] }, { kind: "directive", type: ToolTipDirective, selector: "[mToolTip]", inputs: ["mToolTip"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "noTranslate", "params", "reverse", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { 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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "directive", type: FileUploadDirective, selector: "[mFileUpload]", inputs: ["mFileUpload"], outputs: ["fileSelect"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ColorPickerBoxComponent, decorators: [{
             type: Component,
@@ -17933,7 +18617,7 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.TOGGLE: {
-                const { ToggleInputComponent } = await import('./magmonium-one-toggle-C-FB-Gcs.mjs');
+                const { ToggleInputComponent } = await import('./magmonium-one-toggle-BOM0YIYl.mjs');
                 this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                 break;
             }
@@ -17945,12 +18629,12 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.PASSWORD: {
-                const { PasswordInputComponent } = await import('./magmonium-one-password-CvTU1Qx-.mjs');
+                const { PasswordInputComponent } = await import('./magmonium-one-password-CQgCBVXn.mjs');
                 this.createDynamicComponent(seq, PasswordInputComponent);
                 break;
             }
             case InputType.OTP: {
-                const { OtpInputComponent } = await import('./magmonium-one-otp-BZAX_j5g.mjs');
+                const { OtpInputComponent } = await import('./magmonium-one-otp-DbKeX4tp.mjs');
                 this.createDynamicComponent(seq, OtpInputComponent);
                 break;
             }
@@ -21887,7 +22571,7 @@ class MHeroComponent {
         <ng-content select="[right]"></ng-content>
       </m-col>
     </m-section>
-  `, 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-hero{--chart-color: #10b981;height:var(--m-hero-height, 60vh);min-height:var(--m-hero-min-height, auto);background:var(--m-hero-background, #ffffff);color:#1e293b;--m-section-border-bottom: var(--m-hero-border-bottom, 1px solid var(--m-backdrop-border));overflow:hidden}@media(max-width:767.98px){.m-hero{height:auto}}m-col{position:relative}@media(max-width:767.98px){m-col{height:var(--m-hero-left-height-mobile, 38vh);min-height:220px;border-right:none;border-bottom:1px solid var(--m-backdrop-border)}}.m-hero__indicators{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);z-index:5;display:flex;gap:.5rem;background:var(--m-hero-indicators-background, transparent);padding:var(--m-hero-indicators-padding, 0);-webkit-backdrop-filter:var(--m-hero-indicators-backdrop, none);backdrop-filter:var(--m-hero-indicators-backdrop, none)}.indicator{width:24px;height:3px;padding:0;background:#e2e8f0;border:none;cursor:pointer;transition:background .3s ease,width .3s ease}.indicator:hover{background:#cbd5e1}.indicator.active{background:var(--chart-color);width:40px}\n"], dependencies: [{ 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: "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)}}.m-hero{--chart-color: #10b981;height:var(--m-hero-height, 60vh);min-height:var(--m-hero-min-height, auto);background:var(--m-hero-background, #ffffff);color:#1e293b;--m-section-border-bottom: var(--m-hero-border-bottom, 1px solid var(--m-backdrop-border));overflow:hidden}@media(max-width:767.98px){.m-hero{height:auto}}m-col{position:relative}@media(max-width:767.98px){m-col{height:var(--m-hero-left-height-mobile, 38vh);min-height:220px;border-right:none;border-bottom:1px solid var(--m-backdrop-border)}}.m-hero__indicators{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);z-index:5;display:flex;gap:.5rem;background:var(--m-hero-indicators-background, transparent);padding:var(--m-hero-indicators-padding, 0);-webkit-backdrop-filter:var(--m-hero-indicators-backdrop, none);backdrop-filter:var(--m-hero-indicators-backdrop, none)}.indicator{width:24px;height:3px;padding:0;background:#e2e8f0;border:none;cursor:pointer;transition:background .3s ease,width .3s ease}.indicator:hover{background:#cbd5e1}.indicator.active{background:var(--chart-color);width:40px}\n"], dependencies: [{ kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY", "alignX", "alignY"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MHeroComponent, decorators: [{
             type: Component,
@@ -25298,7 +25982,7 @@ class TimelineComponent extends ConfigComponent {
         return { item, ...(timeline.componentInputs ?? {}) };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TimelineComponent, isStandalone: true, selector: "m-timeline, m-one-timeline", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, usesInheritance: true, ngImport: i0, template: "@if (config(); as timeline) {\n  <m-section>\n    @if (timeline.label) {\n      <m-section-header [label]=\"timeline.label\" [level]=\"3\" />\n    }\n    <m-col>\n      <div\n        class=\"m-timeline\"\n        [class.m-timeline--compact]=\"timeline.variant === 'compact'\"\n        [class.m-timeline--mobile]=\"timeline.mobileOnly\"\n      >\n        @if (timeline.isLoading) {\n          <div class=\"m-timeline__skeleton\">\n            @for (i of skeletonItems; track $index) {\n              <div class=\"m-timeline__row\">\n                <div class=\"m-timeline__date\">\n                  <span class=\"m-timeline__skeleton-date\"></span>\n                </div>\n                <div class=\"m-timeline__connector\">\n                  <div class=\"m-timeline__dot m-timeline__dot--skeleton\"></div>\n                  <div class=\"m-timeline__line m-timeline__line--skeleton\"></div>\n                </div>\n                <div class=\"m-timeline__content\">\n                  <div class=\"m-timeline__skeleton-content\"></div>\n                </div>\n              </div>\n            }\n          </div>\n        } @else if (!timeline.items?.length) {\n          <div class=\"m-timeline__empty\">\n            <span class=\"m-timeline__empty-label\">{{ 'no-timeline-entries' | translate }}</span>\n          </div>\n        } @else {\n          @for (item of visibleItems(); track $index; let last = $last) {\n            <div\n              class=\"m-timeline__row\"\n              [class.m-timeline__row--last]=\"last && !hasMore()\"\n            >\n              <div class=\"m-timeline__date\">\n                @if (timeline.dateFormat !== 'relative') {\n                  <span class=\"m-timeline__date-absolute\">\n                    {{ item.timestamp | date: 'MMM d' }}\n                  </span>\n                }\n                @if (timeline.dateFormat !== 'absolute') {\n                  <span class=\"m-timeline__date-relative\">\n                    {{ item.timestamp | timeAgo }}\n                  </span>\n                }\n              </div>\n\n              <div class=\"m-timeline__connector\">\n                <div class=\"m-timeline__dot\"></div>\n                @if (!last && timeline.showLine !== false) {\n                  <div class=\"m-timeline__line\"></div>\n                }\n              </div>\n\n              <div class=\"m-timeline__content\">\n                @if (timeline.component) {\n                  <ng-container\n                    [ngComponentOutlet]=\"timeline.component\"\n                    [ngComponentOutletInputs]=\"resolveInputs(item, timeline)\"\n                  />\n                } @else if (item.label) {\n                  <span class=\"m-timeline__label\">{{ item.label }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          @if (hasMore()) {\n            <div class=\"m-timeline__more\">\n              <m-button\n                [config]=\"{\n                  label: 'view-more',\n                  icon: 'chevron-down',\n                  fullWidth: true,\n                }\"\n                (clicked)=\"loadMore()\"\n              />\n            </div>\n          }\n        }\n      </div>\n    </m-col>\n  </m-section>\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)}}:host{display:block;width:100%}.m-timeline{display:flex;flex-direction:column;width:100%}.m-timeline--compact{padding:1rem;gap:.25rem}.m-timeline--compact .m-timeline__row{gap:0 .5rem}.m-timeline--compact .m-timeline__dot{width:8px;height:8px}.m-timeline--compact .m-timeline__content{padding-bottom:0}.m-timeline--mobile{padding:.4rem!important}.m-timeline--mobile .m-timeline__row{grid-template-columns:1.25rem 1fr!important;grid-template-rows:auto auto;gap:0!important;padding:.4rem .25rem!important}.m-timeline--mobile .m-timeline__date{grid-column:2;grid-row:1;align-items:flex-start!important;padding:0 0 .2rem!important;flex-direction:row!important;gap:.4rem!important}.m-timeline--mobile .m-timeline__date-absolute{font-size:.7rem!important}.m-timeline--mobile .m-timeline__date-relative{font-size:.65rem!important;opacity:.5}.m-timeline--mobile .m-timeline__connector{grid-column:1;grid-row:1/3}.m-timeline--mobile .m-timeline__dot{width:6px!important;height:6px!important;margin-top:.35rem!important}.m-timeline--mobile .m-timeline__line{width:1px!important;margin:.4rem 0!important;opacity:.3!important}.m-timeline--mobile .m-timeline__content{grid-column:2;grid-row:2;padding-bottom:1.25rem!important}.m-timeline__row{display:grid;grid-template-columns:5.5rem 2rem 1fr;gap:0 .5rem;position:relative;padding:.25rem .5rem;transition:background-color .3s cubic-bezier(.4,0,.2,1);opacity:0;transform:translateY(20px);animation:timeline-entry .6s cubic-bezier(.2,.8,.2,1) forwards}.m-timeline__row:nth-child(1){animation-delay:.08s}.m-timeline__row:nth-child(2){animation-delay:.16s}.m-timeline__row:nth-child(3){animation-delay:.24s}.m-timeline__row:nth-child(4){animation-delay:.32s}.m-timeline__row:nth-child(5){animation-delay:.4s}.m-timeline__row:nth-child(6){animation-delay:.48s}.m-timeline__row:nth-child(7){animation-delay:.56s}.m-timeline__row:nth-child(8){animation-delay:.64s}.m-timeline__row:nth-child(9){animation-delay:.72s}.m-timeline__row:nth-child(10){animation-delay:.8s}.m-timeline__row:nth-child(11){animation-delay:.88s}.m-timeline__row:nth-child(12){animation-delay:.96s}.m-timeline__row:nth-child(13){animation-delay:1.04s}.m-timeline__row:nth-child(14){animation-delay:1.12s}.m-timeline__row:nth-child(15){animation-delay:1.2s}.m-timeline__row:nth-child(16){animation-delay:1.28s}.m-timeline__row:nth-child(17){animation-delay:1.36s}.m-timeline__row:nth-child(18){animation-delay:1.44s}.m-timeline__row:nth-child(19){animation-delay:1.52s}.m-timeline__row:nth-child(20){animation-delay:1.6s}.m-timeline__row:hover{background:color-mix(in srgb,var(--m-mm) 4%,transparent)}.m-timeline__row:hover .m-timeline__dot{transform:scale(1.3);box-shadow:0 0 15px color-mix(in srgb,var(--m-mm) 50%,transparent)}.m-timeline__row--last .m-timeline__content{padding-bottom:0}.m-timeline__date{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;padding-top:.4rem;gap:.1rem;min-width:0}.m-timeline__date-absolute{font-size:.75rem;font-weight:800;color:var(--m-text);white-space:nowrap;font-feature-settings:\"tnum\";letter-spacing:-.01em}.m-timeline__date-relative{font-size:.6rem;font-weight:700;color:var(--m-text-tertiary);white-space:nowrap;text-transform:uppercase}.m-timeline__connector{display:flex;flex-direction:column;align-items:center;position:relative}.m-timeline__dot{width:8px;height:8px;border-radius:50%;background:var(--m-mm);box-shadow:0 0 10px color-mix(in srgb,var(--m-mm) 40%,transparent);flex-shrink:0;margin-top:.55rem;z-index:1;transition:all .3s ease}.m-timeline__dot--skeleton{background:var(--m-border);box-shadow:none;animation:timeline-pulse 1.4s ease-in-out infinite}.m-timeline__line{display:block;flex:1;width:2px;background:linear-gradient(to bottom,var(--m-mm),transparent);min-height:1.5rem;margin:.5rem 0;opacity:.6;transition:all .3s ease;animation:timeline-fade-in 1s ease-in}.m-timeline__content{padding-top:.1rem;padding-bottom:2rem;min-width:0}.m-timeline__label{font-size:.9rem;color:var(--m-text-secondary);line-height:1.5;font-weight:500}.m-timeline__empty{display:flex;align-items:center;justify-content:center;padding:4rem 1rem}.m-timeline__empty-label{font-size:.9rem;font-weight:600;color:var(--m-text-tertiary);text-transform:uppercase;letter-spacing:.1em}.m-timeline__skeleton{display:flex;flex-direction:column;gap:1.5rem}.m-timeline__skeleton-date{display:block;height:.75rem;width:4rem;background:var(--m-border);border-radius:4px;margin-top:.25rem;animation:timeline-pulse 1.4s ease-in-out infinite;align-self:flex-end}.m-timeline__skeleton-content{height:3.5rem;background:var(--m-border);border-radius:.75rem;animation:timeline-pulse 1.4s ease-in-out infinite;opacity:.6}.m-timeline__more{display:grid;grid-template-columns:5.5rem 2rem 1fr;gap:0 .5rem;padding:1rem 0 4rem}.m-timeline__more m-button{grid-column:1/-1}.m-timeline__more-button{grid-column:3;margin-bottom:2rem;width:fit-content}.m-timeline__more-icon,.m-timeline__more-text{display:none}@keyframes timeline-entry{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes timeline-fade-in{0%{opacity:0}to{opacity:.6}}@keyframes timeline-pulse{0%,to{opacity:.35}50%{opacity:.7}}@media(max-width:600px){.m-timeline{padding:.4rem!important}.m-timeline__row{grid-template-columns:1.25rem 1fr!important;grid-template-rows:auto auto;gap:0!important;padding:.4rem .25rem!important}.m-timeline__date{grid-column:2;grid-row:1;align-items:flex-start!important;padding:0 0 .2rem!important;flex-direction:row!important;gap:.4rem!important}.m-timeline__date-absolute{font-size:.7rem!important}.m-timeline__date-relative{font-size:.65rem!important;opacity:.5}.m-timeline__connector{grid-column:1;grid-row:1/3}.m-timeline__dot{width:6px!important;height:6px!important;margin-top:.35rem!important}.m-timeline__line{width:1px!important;margin:.4rem 0!important;opacity:.3!important}.m-timeline__content{grid-column:2;grid-row:2;padding-bottom:1.25rem!important}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { 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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { 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", "noTranslate", "params", "reverse", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TimelineComponent, isStandalone: true, selector: "m-timeline, m-one-timeline", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, usesInheritance: true, ngImport: i0, template: "@if (config(); as timeline) {\n  <m-section>\n    @if (timeline.label) {\n      <m-section-header [label]=\"timeline.label\" [level]=\"3\" />\n    }\n    <m-col>\n      <div\n        class=\"m-timeline\"\n        [class.m-timeline--compact]=\"timeline.variant === 'compact'\"\n        [class.m-timeline--mobile]=\"timeline.mobileOnly\"\n      >\n        @if (timeline.isLoading) {\n          <div class=\"m-timeline__skeleton\">\n            @for (i of skeletonItems; track $index) {\n              <div class=\"m-timeline__row\">\n                <div class=\"m-timeline__date\">\n                  <span class=\"m-timeline__skeleton-date\"></span>\n                </div>\n                <div class=\"m-timeline__connector\">\n                  <div class=\"m-timeline__dot m-timeline__dot--skeleton\"></div>\n                  <div class=\"m-timeline__line m-timeline__line--skeleton\"></div>\n                </div>\n                <div class=\"m-timeline__content\">\n                  <div class=\"m-timeline__skeleton-content\"></div>\n                </div>\n              </div>\n            }\n          </div>\n        } @else if (!timeline.items?.length) {\n          <div class=\"m-timeline__empty\">\n            <span class=\"m-timeline__empty-label\">{{ 'no-timeline-entries' | translate }}</span>\n          </div>\n        } @else {\n          @for (item of visibleItems(); track $index; let last = $last) {\n            <div\n              class=\"m-timeline__row\"\n              [class.m-timeline__row--last]=\"last && !hasMore()\"\n            >\n              <div class=\"m-timeline__date\">\n                @if (timeline.dateFormat !== 'relative') {\n                  <span class=\"m-timeline__date-absolute\">\n                    {{ item.timestamp | date: 'MMM d' }}\n                  </span>\n                }\n                @if (timeline.dateFormat !== 'absolute') {\n                  <span class=\"m-timeline__date-relative\">\n                    {{ item.timestamp | timeAgo }}\n                  </span>\n                }\n              </div>\n\n              <div class=\"m-timeline__connector\">\n                <div class=\"m-timeline__dot\"></div>\n                @if (!last && timeline.showLine !== false) {\n                  <div class=\"m-timeline__line\"></div>\n                }\n              </div>\n\n              <div class=\"m-timeline__content\">\n                @if (timeline.component) {\n                  <ng-container\n                    [ngComponentOutlet]=\"timeline.component\"\n                    [ngComponentOutletInputs]=\"resolveInputs(item, timeline)\"\n                  />\n                } @else if (item.label) {\n                  <span class=\"m-timeline__label\">{{ item.label }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          @if (hasMore()) {\n            <div class=\"m-timeline__more\">\n              <m-button\n                [config]=\"{\n                  label: 'view-more',\n                  icon: 'chevron-down',\n                  fullWidth: true,\n                }\"\n                (clicked)=\"loadMore()\"\n              />\n            </div>\n          }\n        }\n      </div>\n    </m-col>\n  </m-section>\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)}}:host{display:block;width:100%}.m-timeline{display:flex;flex-direction:column;width:100%}.m-timeline--compact{padding:1rem;gap:.25rem}.m-timeline--compact .m-timeline__row{gap:0 .5rem}.m-timeline--compact .m-timeline__dot{width:8px;height:8px}.m-timeline--compact .m-timeline__content{padding-bottom:0}.m-timeline--mobile{padding:.4rem!important}.m-timeline--mobile .m-timeline__row{grid-template-columns:1.25rem 1fr!important;grid-template-rows:auto auto;gap:0!important;padding:.4rem .25rem!important}.m-timeline--mobile .m-timeline__date{grid-column:2;grid-row:1;align-items:flex-start!important;padding:0 0 .2rem!important;flex-direction:row!important;gap:.4rem!important}.m-timeline--mobile .m-timeline__date-absolute{font-size:.7rem!important}.m-timeline--mobile .m-timeline__date-relative{font-size:.65rem!important;opacity:.5}.m-timeline--mobile .m-timeline__connector{grid-column:1;grid-row:1/3}.m-timeline--mobile .m-timeline__dot{width:6px!important;height:6px!important;margin-top:.35rem!important}.m-timeline--mobile .m-timeline__line{width:1px!important;margin:.4rem 0!important;opacity:.3!important}.m-timeline--mobile .m-timeline__content{grid-column:2;grid-row:2;padding-bottom:1.25rem!important}.m-timeline__row{display:grid;grid-template-columns:5.5rem 2rem 1fr;gap:0 .5rem;position:relative;padding:.25rem .5rem;transition:background-color .3s cubic-bezier(.4,0,.2,1);opacity:0;transform:translateY(20px);animation:timeline-entry .6s cubic-bezier(.2,.8,.2,1) forwards}.m-timeline__row:nth-child(1){animation-delay:.08s}.m-timeline__row:nth-child(2){animation-delay:.16s}.m-timeline__row:nth-child(3){animation-delay:.24s}.m-timeline__row:nth-child(4){animation-delay:.32s}.m-timeline__row:nth-child(5){animation-delay:.4s}.m-timeline__row:nth-child(6){animation-delay:.48s}.m-timeline__row:nth-child(7){animation-delay:.56s}.m-timeline__row:nth-child(8){animation-delay:.64s}.m-timeline__row:nth-child(9){animation-delay:.72s}.m-timeline__row:nth-child(10){animation-delay:.8s}.m-timeline__row:nth-child(11){animation-delay:.88s}.m-timeline__row:nth-child(12){animation-delay:.96s}.m-timeline__row:nth-child(13){animation-delay:1.04s}.m-timeline__row:nth-child(14){animation-delay:1.12s}.m-timeline__row:nth-child(15){animation-delay:1.2s}.m-timeline__row:nth-child(16){animation-delay:1.28s}.m-timeline__row:nth-child(17){animation-delay:1.36s}.m-timeline__row:nth-child(18){animation-delay:1.44s}.m-timeline__row:nth-child(19){animation-delay:1.52s}.m-timeline__row:nth-child(20){animation-delay:1.6s}.m-timeline__row:hover{background:color-mix(in srgb,var(--m-mm) 4%,transparent)}.m-timeline__row:hover .m-timeline__dot{transform:scale(1.3);box-shadow:0 0 15px color-mix(in srgb,var(--m-mm) 50%,transparent)}.m-timeline__row--last .m-timeline__content{padding-bottom:0}.m-timeline__date{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;padding-top:.4rem;gap:.1rem;min-width:0}.m-timeline__date-absolute{font-size:.75rem;font-weight:800;color:var(--m-text);white-space:nowrap;font-feature-settings:\"tnum\";letter-spacing:-.01em}.m-timeline__date-relative{font-size:.6rem;font-weight:700;color:var(--m-text-tertiary);white-space:nowrap;text-transform:uppercase}.m-timeline__connector{display:flex;flex-direction:column;align-items:center;position:relative}.m-timeline__dot{width:8px;height:8px;border-radius:50%;background:var(--m-mm);box-shadow:0 0 10px color-mix(in srgb,var(--m-mm) 40%,transparent);flex-shrink:0;margin-top:.55rem;z-index:1;transition:all .3s ease}.m-timeline__dot--skeleton{background:var(--m-border);box-shadow:none;animation:timeline-pulse 1.4s ease-in-out infinite}.m-timeline__line{display:block;flex:1;width:2px;background:linear-gradient(to bottom,var(--m-mm),transparent);min-height:1.5rem;margin:.5rem 0;opacity:.6;transition:all .3s ease;animation:timeline-fade-in 1s ease-in}.m-timeline__content{padding-top:.1rem;padding-bottom:2rem;min-width:0}.m-timeline__label{font-size:.9rem;color:var(--m-text-secondary);line-height:1.5;font-weight:500}.m-timeline__empty{display:flex;align-items:center;justify-content:center;padding:4rem 1rem}.m-timeline__empty-label{font-size:.9rem;font-weight:600;color:var(--m-text-tertiary);text-transform:uppercase;letter-spacing:.1em}.m-timeline__skeleton{display:flex;flex-direction:column;gap:1.5rem}.m-timeline__skeleton-date{display:block;height:.75rem;width:4rem;background:var(--m-border);border-radius:4px;margin-top:.25rem;animation:timeline-pulse 1.4s ease-in-out infinite;align-self:flex-end}.m-timeline__skeleton-content{height:3.5rem;background:var(--m-border);border-radius:.75rem;animation:timeline-pulse 1.4s ease-in-out infinite;opacity:.6}.m-timeline__more{display:grid;grid-template-columns:5.5rem 2rem 1fr;gap:0 .5rem;padding:1rem 0 4rem}.m-timeline__more m-button{grid-column:1/-1}.m-timeline__more-button{grid-column:3;margin-bottom:2rem;width:fit-content}.m-timeline__more-icon,.m-timeline__more-text{display:none}@keyframes timeline-entry{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes timeline-fade-in{0%{opacity:0}to{opacity:.6}}@keyframes timeline-pulse{0%,to{opacity:.35}50%{opacity:.7}}@media(max-width:600px){.m-timeline{padding:.4rem!important}.m-timeline__row{grid-template-columns:1.25rem 1fr!important;grid-template-rows:auto auto;gap:0!important;padding:.4rem .25rem!important}.m-timeline__date{grid-column:2;grid-row:1;align-items:flex-start!important;padding:0 0 .2rem!important;flex-direction:row!important;gap:.4rem!important}.m-timeline__date-absolute{font-size:.7rem!important}.m-timeline__date-relative{font-size:.65rem!important;opacity:.5}.m-timeline__connector{grid-column:1;grid-row:1/3}.m-timeline__dot{width:6px!important;height:6px!important;margin-top:.35rem!important}.m-timeline__line{width:1px!important;margin:.4rem 0!important;opacity:.3!important}.m-timeline__content{grid-column:2;grid-row:2;padding-bottom:1.25rem!important}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { 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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "noTranslate", "params", "reverse", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY", "alignX", "alignY"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
@@ -26684,7 +27368,7 @@ class NavHeaderComponent {
     }, ...(ngDevMode ? [{ debugName: "_trail" }] : /* istanbul ignore next */ []));
     _header = computed(() => this._isUser() ? null : this._navStore.breadcrumb().header, ...(ngDevMode ? [{ debugName: "_header" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NavHeaderComponent, isStandalone: true, selector: "m-nav-header", ngImport: i0, template: "<m-section>\n  @if (_trail(); as trail) {\n    <m-section-back [back]=\"_hasParent()\" (navigate)=\"_navStore.back()\">\n      <m-nav-trail [config]=\"trail\" />\n    </m-section-back>\n  }\n\n  @if (_isSearch()) {\n    <m-section-search\n      [value]=\"_searchStore.query()\"\n      [startOpen]=\"true\"\n      (searchChange)=\"_searchStore.updateQuery($event)\"\n    />\n  } @else if (_header(); as h) {\n    @if (h.label) {\n      <m-section-header class=\"nav-header__title\" [icon]=\"h.icon\" [label]=\"h.label\" />\n    }\n  }\n</m-section>\n", dependencies: [{ kind: "component", type: NavTrailComponent, selector: "m-nav-trail", inputs: ["config"] }, { 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", "noTranslate", "params", "reverse", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { kind: "component", type: SectionBackComponent, selector: "m-section-back", inputs: ["back", "label", "html", "padding", "paddingX", "paddingY"], outputs: ["navigate"] }, { kind: "component", type: SectionSearchComponent, selector: "m-section-search, m-one-section-search", inputs: ["value", "config", "required", "disabled", "invalid", "touched", "focused", "errors", "label", "searchLabel", "placeholder", "debounce", "startOpen", "sticky"], outputs: ["valueChange", "touchedChange", "searchChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: NavHeaderComponent, isStandalone: true, selector: "m-nav-header", ngImport: i0, template: "<m-section>\n  @if (_trail(); as trail) {\n    <m-section-back [back]=\"_hasParent()\" (navigate)=\"_navStore.back()\">\n      <m-nav-trail [config]=\"trail\" />\n    </m-section-back>\n  }\n\n  @if (_isSearch()) {\n    <m-section-search\n      [value]=\"_searchStore.query()\"\n      [startOpen]=\"true\"\n      (searchChange)=\"_searchStore.updateQuery($event)\"\n    />\n  } @else if (_header(); as h) {\n    @if (h.label) {\n      <m-section-header class=\"nav-header__title\" [icon]=\"h.icon\" [label]=\"h.label\" />\n    }\n  }\n</m-section>\n", dependencies: [{ kind: "component", type: NavTrailComponent, selector: "m-nav-trail", inputs: ["config"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "noTranslate", "params", "reverse", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { kind: "component", type: SectionBackComponent, selector: "m-section-back", inputs: ["back", "label", "html", "padding", "paddingX", "paddingY"], outputs: ["navigate"] }, { kind: "component", type: SectionSearchComponent, selector: "m-section-search, m-one-section-search", inputs: ["value", "config", "required", "disabled", "invalid", "touched", "focused", "errors", "label", "searchLabel", "placeholder", "debounce", "startOpen", "sticky", "element", "resultInput", "elementInputs"], outputs: ["valueChange", "touchedChange", "searchChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavHeaderComponent, decorators: [{
             type: Component,
@@ -28259,7 +28943,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\" [user]=\"user\" 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 });
+    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\" [user]=\"user\" 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", "alignX", "alignY", "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", "alignX", "alignY"] }, { 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,
@@ -31030,7 +31714,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", "noTranslate", "params", "reverse", "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 });
+  </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", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "noTranslate", "params", "reverse", "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,
@@ -31712,7 +32396,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", "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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], 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", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], 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", "alignX", "alignY", "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", "alignX", "alignY"] }, { 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,
@@ -32296,5 +32980,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DateInputComponent as $, ACCESS_DOMAINS as A, BaseInputComponent as B, COMPONENT_INPUT_REGISTRY as C, CardComponent as D, CardWrapperComponent as E, CarouselComponent as F, ChartComponent as G, CheckboxInputComponent as H, IS_DESIGN_MODE as I, ClearableInputComponent as J, ColComponent as K, LabelComponent as L, ColorPickerInputComponent as M, CommentItemComponent as N, CommentsApiService as O, CommentsComponent as P, CommentsStore as Q, ComponentInputComponent as R, ComponentStepperComponent as S, TranslatePipe as T, ConfigComponent as U, ConfirmComponent as V, ContextMenuComponent as W, CustomIconClass as X, CustomIconEditComponent as Y, DEFAULT_SIZE as Z, DashboardCardComponent as _, BaseTextInputComponent as a, NavComponent as a$, DatePickerComponent as a0, DeviceService as a1, DomService as a2, Domain as a3, DotGridComponent as a4, DragListDirective as a5, DragListItemDirective as a6, DraggableDirective as a7, DropdownInputComponent as a8, FLEX_VARIANTS as a9, LOGIN_STORE as aA, LanguageComponent as aB, LogoComponent as aC, MAG_SOCKET_EVENT as aD, MHeroColorDirective as aE, MHeroComponent as aF, MODAL_REF as aG, MODAL_STORE_REF as aH, MRefDirective as aI, MStepComponent as aJ, MURL_PARAM as aK, MURL_SEP as aL, ManifestEnrichmentService as aM, MenuComponent as aN, ModalDirective as aO, ModalRef as aP, ModalStore as aQ, MoneyPipe as aR, MultiRangeInputComponent as aS, MurlUrlSerializer as aT, NAV_DEFAULT_MURL as aU, NAV_ID_SEP as aV, NAV_MAIN_BUTTONS as aW, NAV_SEGMENT_RE as aX, NAV_STORE_REF as aY, NAV_WC_COMPONENTS as aZ, NAV_WIDGET_MAP as a_, FOLDER_PICK_LISTENER as aa, FORM_ASSET_FOLDER as ab, FileService as ac, FileUploadDirective as ad, FileUploadInputComponent as ae, FlexComponent as af, FlexItemComponent as ag, FormGroupComponent as ah, FrameComponent as ai, FreezeService as aj, GRID_BREAKPOINTS as ak, GetNavService as al, HeaderComponent$1 as am, HighlightDirective as an, HttpService as ao, ICON_SOURCE as ap, IS_SIDE_PANEL as aq, IconComponent as ar, ImgComponent as as, InputType as at, InstrumentScoreComponent as au, InterceptorObservables as av, JumbotronComponent as aw, KeyValueComponent as ax, LAYOUT_ASSET_FOLDER as ay, LOGIN_COMPONENT as az, TextOutputComponent as b, SectionFooterComponent as b$, NavDetailsComponent as b0, NavHeaderComponent as b1, NavMenuComponent as b2, NavStore as b3, NavTrailComponent as b4, NothingComponent as b5, NotificationElementComponent as b6, NotificationGroupComponent as b7, NotificationPopupComponent as b8, NotificationService as b9, ReactiveElementComponent as bA, RemoteComponent as bB, RemoteLoaderService as bC, ResizeElementComponent as bD, RouteContainer as bE, RowComponent as bF, SEARCH_QUERY as bG, SEARCH_RESULTS_EVENT as bH, SECTION_ACCORDION_GROUP as bI, SECTION_FORM_CONTEXT as bJ, SHARED_ICONS as bK, SIZE_CONTEXT as bL, ScoreComponent as bM, ScrollComponent as bN, ScrollService as bO, SearchPanelComponent as bP, SearchStore as bQ, SearchUserPanelComponent as bR, SectionAccordionDirective as bS, SectionAccordionGroupDirective as bT, SectionBackComponent as bU, SectionBadgesComponent as bV, SectionButtonGroupComponent as bW, SectionCardComponent as bX, SectionCarouselComponent as bY, SectionComponent as bZ, SectionFilterComponent as b_, NotificationStore as ba, NotificationType as bb, NotificationWidgetComponent as bc, ONE_ASSET_BASE_URL as bd, OPTIONS_SOURCE as be, OVERLAY_WIDGETS as bf, OneApp as bg, OptionsSourceDirective as bh, OverlayBodyComponent as bi, OverlayRef as bj, OverlayService as bk, PLATFORM_BUTTON_NAV_IDS as bl, PLATFORM_EXTENSIBLE_NAV_IDS as bm, PLATFORM_NAV_MAP as bn, PLATFORM_ROOT_CHILDREN as bo, PaginationComponent as bp, PanelComponent as bq, PercentagePipe as br, PlaygroundComponent as bs, PositionDirective as bt, PwaInstallComponent as bu, ROOT_NAV$1 as bv, RadioGroupComponent as bw, RadioInputComponent as bx, RangeInputComponent as by, RatingInputComponent as bz, ButtonComponent as c, WIN_USER_TAB_KEY as c$, SectionFormComponent as c0, SectionFormItemComponent as c1, SectionHeaderComponent as c2, SectionHeroComponent as c3, SectionSearchComponent as c4, SectionStepperComponent as c5, SectionTabsComponent as c6, SectionToggleComponent as c7, SectionToggleItemDirective as c8, SelectableCardInputComponent as c9, ThemeComponent as cA, ThemeDataService as cB, ThemeService as cC, ThemeStore as cD, TimeAgoPipe as cE, TimelineComponent as cF, ToggleButtonComponent as cG, ToggleInputComponent as cH, ToggleRadioInputComponent as cI, ToolTipDirective as cJ, TooltipComponent as cK, TranslateService as cL, TreeGridComponent as cM, URL_SEP as cN, USER_STORE_REF as cO, USER_TAB_MAP as cP, UlComponent as cQ, UniverseComponent as cR, UserApiService as cS, UserAvatarComponent as cT, UserComponent as cU, UserNavComponent as cV, UserSettingsComponent as cW, UserStore as cX, WC_ROUTE_CHANGED_EVENT as cY, WC_SEARCH_GROUPS as cZ, WIN_USER_TAB_HOOK as c_, SelectorDirective as ca, SettingsSearchBarComponent as cb, SettingsSearchService as cc, ShapeComponent as cd, SharedStoreRegistry as ce, SidePanelDirective as cf, Size as cg, SocketStore as ch, SortComponent as ci, StatComponent 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, linkToId as d$, WatermarkComponent as d0, WcRouterStore as d1, WrapperInputComponent as d2, anchorNavId as d3, applyColorsToElement as d4, bootstrapMagApp as d5, bootstrapPwaInstall as d6, buildWcBaseUrl as d7, calculateLuminance as d8, calculateRanks as d9, getTreeGridRow as dA, getUniqueId as dB, getValue as dC, hasErrorComputed as dD, hexToRgb as dE, hslToRgb$1 as dF, initMagmoniumApp as dG, initialNotificationState as dH, initialState$2 as dI, initials as dJ, injectAuthenticate as dK, injectInstallApp as dL, injectParentSize as dM, injectScrollSticky as dN, isButtonName as dO, isCancelledComputed as dP, isExtensiblePlatformNavId as dQ, isJson as dR, isLoadingComputed as dS, isLocalhost as dT, isPlatformNavId as dU, isSize as dV, isTierPreview as dW, isUrlLocalhost as dX, isValidNavId as dY, isValidNavSegment as dZ, isWebComponent as d_, cellText as da, checkFilterCondition as db, childNavId as dc, classListSignal as dd, coerceSize as de, cornerEdge as df, cornerSide as dg, createMap as dh, createPlatformNavMap as di, deriveAvatarGradient as dj, deriveContrastColor as dk, deriveOppositeColor as dl, derivePropertyName as dm, emailValidation as dn, evaluate as dp, evaluateBool as dq, flattenTreeGridRows as dr, formatBadgeCount as ds, fullName as dt, generateClipPath as du, generateTransform as dv, getClassList as dw, getProperty as dx, getScrollParent as dy, getTierFromPreviewPath as dz, ASSET_BASE_URL as e, toAttrNumber as e$, linkToNav as e0, loadingActions as e1, mInterceptor as e2, manualValidation as e3, matchFieldValidation as e4, maxLengthValidation as e5, maxValidation as e6, mergePlatformNav as e7, mergeUnique as e8, mergeUniqueBy as e9, provideNavWidgets as eA, provideOverlayWidgets as eB, providePlatformNavWidgets as eC, provideSearch as eD, provideSizeContext as eE, provideUserTabs as eF, publicGuard as eG, readFieldPatterns as eH, renderAddress as eI, requiredValidation as eJ, resolveConfigAsset as eK, resolveIconSize as eL, resolvePallet as eM, resolvePatternRules as eN, resolveSize as eO, rgbToHex as eP, rgbToHsl as eQ, rowHasChildren as eR, samePatterns as eS, segmentsToNavId as eT, setProperty as eU, setTreeGridChildren as eV, settingsWidgets as eW, shouldShowBadge as eX, splitNavId as eY, stringToColor as eZ, toAttrBool as e_, mergeUniqueWith as ea, minAgeValidation as eb, minLengthValidation as ec, minValidation as ed, miniMarkToHtml as ee, navIdChain as ef, navIdFor as eg, navIdSegment as eh, navIdToRoutePath as ei, navIdToSegments as ej, navToId as ek, parentNavId as el, parseAddress as em, parseColor as en, parsePatternNames as eo, patternValidation as ep, patternsValidation as eq, platformNavWidgets as er, privateGuard as es, processImageToSvg as et, provideAppContext as eu, provideMagAppConfig as ev, provideMagWcConfig as ew, provideMagWcRoutes as ex, provideModalComponents as ey, provideMurlUrlSerializer as ez, AccordionBodyDirective as f, toCssLength as f0, toHostNavId as f1, toLength$1 as f2, toLocalNavId as f3, toggleTreeGridRow as f4, unfetchedPlatformNav as f5, urlValidation as f6, 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, AuthActivityPageComponent as q, AuthApiService as r, AuthStore as s, AutosizeDirective as t, BadgeComponent as u, BandingComponent as v, BaseArrayInputComponent as w, BaseRootWebComponent as x, BaseWebComponent as y, ButtonGroupComponent as z };
-//# sourceMappingURL=magmonium-one-magmonium-one-CD8ioDZO.mjs.map
+export { DateInputComponent as $, ACCESS_DOMAINS as A, BaseInputComponent as B, COMPONENT_INPUT_REGISTRY as C, CardComponent as D, CardWrapperComponent as E, CarouselComponent as F, ChartComponent as G, CheckboxInputComponent as H, IS_DESIGN_MODE as I, ClearableInputComponent as J, ColComponent as K, LabelComponent as L, ColorPickerInputComponent as M, CommentItemComponent as N, CommentsApiService as O, CommentsComponent as P, CommentsStore as Q, ComponentInputComponent as R, ComponentStepperComponent as S, TranslatePipe as T, ConfigComponent as U, ConfirmComponent as V, ContextMenuComponent as W, CustomIconClass as X, CustomIconEditComponent as Y, DEFAULT_SIZE as Z, DashboardCardComponent as _, BaseTextInputComponent as a, NAV_WIDGET_MAP as a$, DatePickerComponent as a0, DeviceService as a1, DomService as a2, Domain as a3, DotGridComponent as a4, DragListDirective as a5, DragListItemDirective as a6, DraggableDirective as a7, DropdownInputComponent as a8, FILTER_GROUP_CONTEXT as a9, LOGIN_COMPONENT as aA, LOGIN_STORE as aB, LanguageComponent as aC, LogoComponent as aD, MAG_SOCKET_EVENT as aE, MHeroColorDirective as aF, MHeroComponent as aG, MODAL_REF as aH, MODAL_STORE_REF as aI, MRefDirective as aJ, MStepComponent as aK, MURL_PARAM as aL, MURL_SEP as aM, ManifestEnrichmentService as aN, MenuComponent as aO, ModalDirective as aP, ModalRef as aQ, ModalStore as aR, MoneyPipe as aS, MultiRangeInputComponent as aT, MurlUrlSerializer as aU, NAV_DEFAULT_MURL as aV, NAV_ID_SEP as aW, NAV_MAIN_BUTTONS as aX, NAV_SEGMENT_RE as aY, NAV_STORE_REF as aZ, NAV_WC_COMPONENTS as a_, FLEX_VARIANTS as aa, FOLDER_PICK_LISTENER as ab, FORM_ASSET_FOLDER as ac, FileService as ad, FileUploadDirective as ae, FileUploadInputComponent as af, FlexComponent as ag, FlexItemComponent as ah, FormGroupComponent as ai, FrameComponent as aj, FreezeService as ak, GRID_BREAKPOINTS as al, GetNavService as am, HeaderComponent$1 as an, HighlightDirective as ao, HttpService as ap, ICON_SOURCE as aq, IS_SIDE_PANEL as ar, IconComponent as as, ImgComponent as at, InputType as au, InstrumentScoreComponent as av, InterceptorObservables as aw, JumbotronComponent as ax, KeyValueComponent as ay, LAYOUT_ASSET_FOLDER as az, TextOutputComponent as b, SectionFilterComponent as b$, NavComponent as b0, NavDetailsComponent as b1, NavHeaderComponent as b2, NavMenuComponent as b3, NavStore as b4, NavTrailComponent as b5, NothingComponent as b6, NotificationElementComponent as b7, NotificationGroupComponent as b8, NotificationPopupComponent as b9, RatingInputComponent as bA, ReactiveElementComponent as bB, RemoteComponent as bC, RemoteLoaderService as bD, ResizeElementComponent as bE, RouteContainer as bF, RowComponent as bG, SEARCH_QUERY as bH, SEARCH_RESULTS_EVENT as bI, SECTION_ACCORDION_GROUP as bJ, SECTION_FORM_CONTEXT as bK, SHARED_ICONS as bL, SIZE_CONTEXT as bM, ScoreComponent as bN, ScrollComponent as bO, ScrollService as bP, SearchPanelComponent as bQ, SearchStore as bR, SearchUserPanelComponent as bS, SectionAccordionDirective as bT, SectionAccordionGroupDirective as bU, SectionBackComponent as bV, SectionBadgesComponent as bW, SectionButtonGroupComponent as bX, SectionCardComponent as bY, SectionCarouselComponent as bZ, SectionComponent as b_, NotificationService as ba, NotificationStore as bb, NotificationType as bc, NotificationWidgetComponent as bd, ONE_ASSET_BASE_URL as be, OPTIONS_SOURCE as bf, OVERLAY_WIDGETS as bg, OneApp as bh, OptionsSourceDirective as bi, OverlayBodyComponent as bj, OverlayRef as bk, OverlayService as bl, PLATFORM_BUTTON_NAV_IDS as bm, PLATFORM_EXTENSIBLE_NAV_IDS as bn, PLATFORM_NAV_MAP as bo, PLATFORM_ROOT_CHILDREN as bp, PaginationComponent as bq, PanelComponent as br, PercentagePipe as bs, PlaygroundComponent as bt, PositionDirective as bu, PwaInstallComponent as bv, ROOT_NAV$1 as bw, RadioGroupComponent as bx, RadioInputComponent as by, RangeInputComponent as bz, ButtonComponent as c, WC_ROUTE_CHANGED_EVENT as c$, SectionFilterGroupComponent as c0, SectionFooterComponent as c1, SectionFormComponent as c2, SectionFormItemComponent as c3, SectionHeaderComponent as c4, SectionHeroComponent as c5, SectionPaginationComponent as c6, SectionSearchComponent as c7, SectionStepperComponent as c8, SectionTabsComponent as c9, TechnicalMeterComponent as cA, TextInputComponent as cB, TextareaInputComponent as cC, ThemeComponent as cD, ThemeDataService as cE, ThemeService as cF, ThemeStore as cG, TimeAgoPipe as cH, TimelineComponent as cI, ToggleButtonComponent as cJ, ToggleInputComponent as cK, ToggleRadioInputComponent as cL, ToolTipDirective as cM, TooltipComponent as cN, TranslateService as cO, TreeGridComponent as cP, URL_SEP as cQ, USER_STORE_REF as cR, USER_TAB_MAP as cS, UlComponent as cT, UniverseComponent as cU, UserApiService as cV, UserAvatarComponent as cW, UserComponent as cX, UserNavComponent as cY, UserSettingsComponent as cZ, UserStore as c_, SectionToggleComponent as ca, SectionToggleItemDirective as cb, SelectableCardInputComponent as cc, SelectorDirective as cd, SettingsSearchBarComponent as ce, SettingsSearchService as cf, ShapeComponent as cg, SharedStoreRegistry as ch, SidePanelDirective as ci, Size as cj, SocketStore as ck, SortComponent as cl, StatComponent as cm, StepComponent as cn, StepperComponent as co, StepsComponent as cp, StorageService as cq, StrokeLinecap as cr, StrokeLinejoin as cs, SummaryComponent as ct, SvgGeneratorComponent as cu, SvgGeneratorService as cv, SvgService as cw, TOTAL_COLUMNS as cx, TRANSLATION_SOURCE as cy, TableComponent as cz, APP_CONTEXT_REF as d, isValidNavId as d$, WC_SEARCH_GROUPS as d0, WIN_USER_TAB_HOOK as d1, WIN_USER_TAB_KEY as d2, WatermarkComponent as d3, WcRouterStore as d4, WrapperInputComponent as d5, anchorNavId as d6, applyColorsToElement as d7, bootstrapMagApp as d8, bootstrapPwaInstall as d9, getProperty as dA, getScrollParent as dB, getTierFromPreviewPath as dC, getTreeGridRow as dD, getUniqueId as dE, getValue as dF, hasErrorComputed as dG, hexToRgb as dH, hslToRgb$1 as dI, initMagmoniumApp as dJ, initialNotificationState as dK, initialState$2 as dL, initials as dM, injectAuthenticate as dN, injectInstallApp as dO, injectParentSize as dP, injectScrollSticky as dQ, isButtonName as dR, isCancelledComputed as dS, isExtensiblePlatformNavId as dT, isJson as dU, isLoadingComputed as dV, isLocalhost as dW, isPlatformNavId as dX, isSize as dY, isTierPreview as dZ, isUrlLocalhost as d_, buildWcBaseUrl as da, calculateLuminance as db, calculateRanks as dc, cellText as dd, checkFilterCondition as de, childNavId as df, classListSignal as dg, coerceSize as dh, cornerEdge as di, cornerSide as dj, createMap as dk, createPlatformNavMap as dl, deriveAvatarGradient as dm, deriveContrastColor as dn, deriveOppositeColor as dp, derivePropertyName as dq, emailValidation as dr, evaluate as ds, evaluateBool as dt, flattenTreeGridRows as du, formatBadgeCount as dv, fullName as dw, generateClipPath as dx, generateTransform as dy, getClassList as dz, ASSET_BASE_URL as e, splitNavId as e$, isValidNavSegment as e0, isWebComponent as e1, linkToId as e2, linkToNav as e3, loadingActions as e4, mInterceptor as e5, manualValidation as e6, matchFieldValidation as e7, maxLengthValidation as e8, maxValidation as e9, provideMagWcRoutes as eA, provideModalComponents as eB, provideMurlUrlSerializer as eC, provideNavWidgets as eD, provideOverlayWidgets as eE, providePlatformNavWidgets as eF, provideSearch as eG, provideSizeContext as eH, provideUserTabs as eI, publicGuard as eJ, readFieldPatterns as eK, renderAddress as eL, requiredValidation as eM, resolveConfigAsset as eN, resolveIconSize as eO, resolvePallet as eP, resolvePatternRules as eQ, resolveSize as eR, rgbToHex as eS, rgbToHsl as eT, rowHasChildren as eU, samePatterns as eV, segmentsToNavId as eW, setProperty as eX, setTreeGridChildren as eY, settingsWidgets as eZ, shouldShowBadge as e_, mergePlatformNav as ea, mergeUnique as eb, mergeUniqueBy as ec, mergeUniqueWith as ed, minAgeValidation as ee, minLengthValidation as ef, minValidation as eg, miniMarkToHtml as eh, navIdChain as ei, navIdFor as ej, navIdSegment as ek, navIdToRoutePath as el, navIdToSegments as em, navToId as en, parentNavId as eo, parseAddress as ep, parseColor as eq, parsePatternNames as er, patternValidation as es, patternsValidation as et, platformNavWidgets as eu, privateGuard as ev, processImageToSvg as ew, provideAppContext as ex, provideMagAppConfig as ey, provideMagWcConfig as ez, AccordionBodyDirective as f, stringToColor as f0, toAttrBool as f1, toAttrNumber as f2, toCssLength as f3, toHostNavId as f4, toLength$1 as f5, toLocalNavId as f6, toggleTreeGridRow as f7, unfetchedPlatformNav as f8, urlValidation as f9, 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, AuthActivityPageComponent as q, AuthApiService as r, AuthStore as s, AutosizeDirective as t, BadgeComponent as u, BandingComponent as v, BaseArrayInputComponent as w, BaseRootWebComponent as x, BaseWebComponent as y, ButtonGroupComponent as z };
+//# sourceMappingURL=magmonium-one-magmonium-one-Df7XDosn.mjs.map