@magmonium/one 0.2.27 → 0.2.28

package/fesm2022/{magmonium-one-magmonium-one-BudsrBEI.mjs → magmonium-one-magmonium-one-Ckv5BQBl.mjs}

@@ -6449,7 +6449,7 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.TOGGLE: {
-                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-OB-u7l7C.mjs');
+                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-dPCJcoX8.mjs');
                     this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                     break;
                 }
@@ -6461,12 +6461,12 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.PASSWORD: {
-                    const { PasswordInputComponent } = await import('./magmonium-one-password-C_iu89uG.mjs');
+                    const { PasswordInputComponent } = await import('./magmonium-one-password-Cl3qN0JY.mjs');
                     this.createDynamicComponent(seq, PasswordInputComponent);
                     break;
                 }
                 case InputType.OTP: {
-                    const { OtpInputComponent } = await import('./magmonium-one-otp-CGJwpx2O.mjs');
+                    const { OtpInputComponent } = await import('./magmonium-one-otp-yKv_Sfbn.mjs');
                     this.createDynamicComponent(seq, OtpInputComponent);
                     break;
                 }
@@ -11603,6 +11603,15 @@ class SectionFilterComponent {
         variant: 'ghost',
         iconOnly: true,
     }), ...(ngDevMode ? [{ debugName: "toggleConfig" }] : /* istanbul ignore next */ []));
+    // The clear mark beside the name. Its own config rather than the toggle's:
+    // the toggle flips to `x` while its panel is open, and these two would then
+    // be the same glyph twice with different jobs.
+    clearConfig = computed(() => ({
+        icon: 'x',
+        one: true,
+        variant: 'ghost',
+        iconOnly: true,
+    }), ...(ngDevMode ? [{ debugName: "clearConfig" }] : /* istanbul ignore next */ []));
     // A computed rather than a literal in the binding: an inline object is a
     // new reference every check, and `no-inline-config` refuses one anyway.
     chipConfig = computed(() => ({
@@ -11694,6 +11703,18 @@ class SectionFilterComponent {
         this.write(next ?? []);
     };
     clearRange = () => this.writeRange(undefined);
+    /**
+     * Drop everything this Filter holds. In a group that is the key deleted
+     * outright; alone it is the model emptied, which emits `''` under the
+     * variants whose key carries one value.
+     */
+    clearAll = () => {
+        if (this.group) {
+            this.group.clear(this.resolvedName());
+            return;
+        }
+        this.write([]);
+    };
     removeOption = (val) => {
         if (this.group) {
             this.group.remove(this.resolvedName(), val);
@@ -11763,6 +11784,18 @@ class SectionFilterComponent {
       } @else {
         <m-header [level]="3" [label]="label()" />
       }
+      @if (hasSelection()) {
+        <!-- One mark for the whole Filter, beside its name: a Filter is one
+             answer to the reader on the other side, so taking it back is one
+             click rather than a badge's × per value. -->
+        <div class="section-filter__clear">
+          <m-button
+            [config]="clearConfig()"
+            (clicked)="clearAll()"
+            [attr.aria-label]="('remove' | translate) + ' ' + label()"
+          />
+        </div>
+      }
       <div
         class="section-filter__dropdown"
         [mSelector]="selectorConfig()"
@@ -11774,7 +11807,7 @@ class SectionFilterComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}: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;--m-badge-chip-padding: 0 .25em}.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"], 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: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate", "params"], outputs: ["actionClick"] }, { kind: "directive", type: SelectorDirective, selector: "[mSelector]", inputs: ["mSelector", "disabled"], outputs: ["opened", "closed"], exportAs: ["mSelector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;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__clear{flex-shrink:0;--m-button-size: .85rem;--m-button-color: var(--m-mm);opacity:.7}.section-filter__bar .section-filter__clear:hover{opacity:1}.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;--m-badge-chip-padding: 0 .25em}.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"], 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: "component", type: HeaderComponent$1, selector: "m-header", inputs: ["level", "label", "actionButton", "actionLabel", "noTranslate", "params"], outputs: ["actionClick"] }, { 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: SectionFilterComponent, decorators: [{
             type: Component,
@@ -11810,6 +11843,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       } @else {
         <m-header [level]="3" [label]="label()" />
       }
+      @if (hasSelection()) {
+        <!-- One mark for the whole Filter, beside its name: a Filter is one
+             answer to the reader on the other side, so taking it back is one
+             click rather than a badge's × per value. -->
+        <div class="section-filter__clear">
+          <m-button
+            [config]="clearConfig()"
+            (clicked)="clearAll()"
+            [attr.aria-label]="('remove' | translate) + ' ' + label()"
+          />
+        </div>
+      }
       <div
         class="section-filter__dropdown"
         [mSelector]="selectorConfig()"
@@ -11831,7 +11876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[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;--m-badge-chip-padding: 0 .25em}.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"] }]
+                    }, 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__clear{flex-shrink:0;--m-button-size: .85rem;--m-button-color: var(--m-mm);opacity:.7}.section-filter__bar .section-filter__clear:hover{opacity:1}.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;--m-badge-chip-padding: 0 .25em}.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"] }]
         }], 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 }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", 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 }] }] } });
 
 /**
@@ -11942,6 +11987,20 @@ class SectionFilterMenuComponent {
         fullWidth: true,
     }), ...(ngDevMode ? [{ debugName: "backConfig" }] : /* istanbul ignore next */ []));
     forwardIcon = computed(() => ({ name: 'chevron-right' }), ...(ngDevMode ? [{ debugName: "forwardIcon" }] : /* istanbul ignore next */ []));
+    // The group's toggle wears this exact badge for how many Filters hold
+    // something; a row wears it for how many options the one Filter holds.
+    countBadgeConfig = computed(() => ({
+        variant: 'primary',
+        position: 'top-right',
+    }), ...(ngDevMode ? [{ debugName: "countBadgeConfig" }] : /* istanbul ignore next */ []));
+    // A computed rather than a literal in the binding: an inline object is a new
+    // reference every check, and `no-inline-config` refuses one anyway.
+    clearConfig = computed(() => ({
+        icon: 'x',
+        one: true,
+        variant: 'ghost',
+        iconOnly: true,
+    }), ...(ngDevMode ? [{ debugName: "clearConfig" }] : /* istanbul ignore next */ []));
     rows = computed(() => this.members().map((member) => {
         const name = member.name();
         const held = this.ctx()?.valueOf(name) ?? [];
@@ -11949,6 +12008,7 @@ class SectionFilterMenuComponent {
             name,
             label: member.label(),
             detail: this.detailOf(member.variant(), held),
+            count: this.countOf(member.variant(), held),
             selected: held.length > 0,
         };
     }), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
@@ -11994,6 +12054,22 @@ class SectionFilterMenuComponent {
             });
         });
     }
+    /**
+     * Drill into a Filter's panel — unless the clear mark inside the row was what
+     * was hit. Read off the event rather than stopped inside the mark's own
+     * handler: a `(click)` there would make the wrapping span interactive, which
+     * it is not — the Button inside it is what takes focus.
+     */
+    open = (name, event) => {
+        const target = event.target;
+        if (target?.closest('.section-filter-menu__clear'))
+            return;
+        this.activeName.set(name);
+    };
+    /** Drop everything the named Filter holds, without drilling into it. */
+    clear = (name) => {
+        this.ctx()?.clear(name);
+    };
     pick = (option) => {
         const member = this.active();
         if (!member)
@@ -12007,18 +12083,22 @@ class SectionFilterMenuComponent {
         this.ctx()?.setRange(member.name(), next);
     };
     /**
-     * A range says what it holds and an option list says how many: two picked
-     * options are two of a set the row cannot show, while two bounds *are* the
-     * answer and fit.
+     * A range says what it holds: two bounds *are* the answer and fit beside the
+     * name. An option list says nothing here — two picked options are two of a
+     * set the row cannot show, so how many it holds goes to `countOf` and is
+     * drawn as a badge rather than as text.
      */
     detailOf = (variant, held) => {
-        if (!held.length)
+        if (!held.length || !filterHoldsRange(variant))
             return '';
-        if (filterHoldsRange(variant)) {
-            return held.length === 2 ? `${held[0]} – ${held[1]}` : '';
-        }
-        return String(held.length);
+        return held.length === 2 ? `${held[0]} – ${held[1]}` : '';
     };
+    /**
+     * How many options the Filter holds, as the badge draws it — `99+` past the
+     * cap, and empty for a `range`, whose two entries are one answer and are
+     * spelled out by `detailOf` instead.
+     */
+    countOf = (variant, held) => filterHoldsRange(variant) ? '' : formatBadgeCount(held.length);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFilterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionFilterMenuComponent, isStandalone: true, selector: "m-section-filter-menu", inputs: { members: { classPropertyName: "members", publicName: "members", isSignal: true, isRequired: false, transformFunction: null }, ctx: { classPropertyName: "ctx", publicName: "ctx", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "section-filter-menu" }, viewQueries: [{ propertyName: "panelHost", first: true, predicate: ["panelHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
     @if (activeRow()) {
@@ -12036,13 +12116,32 @@ class SectionFilterMenuComponent {
             [class.is-selected]="row.selected"
             role="menuitem"
             tabindex="0"
-            (click)="activeName.set(row.name)"
-            (keydown.enter)="activeName.set(row.name)"
-            (keydown.space)="$event.preventDefault(); activeName.set(row.name)"
+            (click)="open(row.name, $event)"
+            (keydown.enter)="open(row.name, $event)"
+            (keydown.space)="$event.preventDefault(); open(row.name, $event)"
           >
-            <span class="section-filter-menu__label">{{
-              row.label | translate
-            }}</span>
+            <span class="section-filter-menu__name">
+              <span class="section-filter-menu__label">{{
+                row.label | translate
+              }}</span>
+              @if (row.count) {
+                <m-badge [config]="countBadgeConfig()">{{ row.count }}</m-badge>
+              }
+            </span>
+            @if (row.selected) {
+              <!-- The same clear mark a Filter's own bar carries, kept in the
+                   squeezed drill-in: the bar is not rendered in that mode, and
+                   without this the only way back to nothing is to drill in and
+                   unpick each value. Swallows the click so dropping a Filter's
+                   answer does not also open it. -->
+              <span class="section-filter-menu__clear">
+                <m-button
+                  [config]="clearConfig()"
+                  (clicked)="clear(row.name)"
+                  [attr.aria-label]="('remove' | translate) + ' ' + (row.label | translate)"
+                />
+              </span>
+            }
             @if (row.detail) {
               <span class="section-filter-menu__detail">{{ row.detail }}</span>
             }
@@ -12051,7 +12150,7 @@ class SectionFilterMenuComponent {
         }
       </ul>
     }
-  `, 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;background:var(--m-background);border:1px solid var(--m-mm);width:260px;max-height:20rem;overflow-y:auto}.section-filter-menu__rows{list-style:none;margin:0;padding:0}.section-filter-menu__row{display:flex;align-items:center;gap:.5em;padding:.6rem .9rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:all .3s cubic-bezier(.16,1,.3,1);outline:none}.section-filter-menu__row:hover,.section-filter-menu__row:focus-visible{background-color:var(--m-backdrop-standard)}.section-filter-menu__row.is-selected{color:var(--m-mm);font-weight:500}.section-filter-menu__row m-icon{--m-icon-size: .875em;margin-left:auto;display:flex}.section-filter-menu__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.section-filter-menu__detail{font-size:.75rem;color:var(--m-text-secondary);flex-shrink:0}.section-filter-menu__back{display:flex;align-items:center;gap:.5em;width:100%;padding:.6rem .9rem;background:transparent;border:none;border-bottom:1px solid var(--m-backdrop-border);font:inherit;font-size:.875rem;color:var(--m-text);cursor:pointer;outline:none}.section-filter-menu__back:hover,.section-filter-menu__back:focus-visible{background-color:var(--m-backdrop-standard)}.section-filter-menu__back m-icon{--m-icon-size: .875em;display:flex}.section-filter-menu__panel{display:block;--m-filter-panel-border: none;--m-filter-panel-bg: transparent;--m-filter-panel-animation: none;--m-filter-panel-max-height: none}\n"], dependencies: [{ 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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;background:var(--m-background);border:1px solid var(--m-mm);width:260px;max-height:20rem;overflow-y:auto}.section-filter-menu__rows{list-style:none;margin:0;padding:0}.section-filter-menu__row{display:flex;align-items:center;gap:.5em;padding:.6rem .9rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:all .3s cubic-bezier(.16,1,.3,1);outline:none}.section-filter-menu__row:hover,.section-filter-menu__row:focus-visible{background-color:var(--m-backdrop-standard)}.section-filter-menu__row.is-selected{color:var(--m-mm);font-weight:500}.section-filter-menu__row m-icon{--m-icon-size: .875em;margin-left:auto;display:flex}.section-filter-menu__name{position:relative;display:inline-flex;align-items:center;min-width:0;padding-right:.4rem}.section-filter-menu__name m-badge{pointer-events:none;--M-BADGE-color: var(--m-error);--m-badge-size: .6rem;--m-badge-height: .9rem;--m-badge-min-width: .9rem}.section-filter-menu__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.section-filter-menu__clear{display:flex;flex-shrink:0;--m-button-size: .75rem;--m-button-color: var(--m-mm);opacity:.7}.section-filter-menu__clear:hover{opacity:1}.section-filter-menu__detail{font-size:.75rem;color:var(--m-text-secondary);flex-shrink:0}.section-filter-menu__back{display:flex;align-items:center;gap:.5em;width:100%;padding:.6rem .9rem;background:transparent;border:none;border-bottom:1px solid var(--m-backdrop-border);font:inherit;font-size:.875rem;color:var(--m-text);cursor:pointer;outline:none}.section-filter-menu__back:hover,.section-filter-menu__back:focus-visible{background-color:var(--m-backdrop-standard)}.section-filter-menu__back m-icon{--m-icon-size: .875em;display:flex}.section-filter-menu__panel{display:block;--m-filter-panel-border: none;--m-filter-panel-bg: transparent;--m-filter-panel-animation: none;--m-filter-panel-max-height: none}\n"], dependencies: [{ 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"] }, { kind: "component", type: BadgeComponent, selector: "m-badge", inputs: ["config"], outputs: ["configChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionFilterMenuComponent, decorators: [{
             type: Component,
@@ -12071,13 +12170,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             [class.is-selected]="row.selected"
             role="menuitem"
             tabindex="0"
-            (click)="activeName.set(row.name)"
-            (keydown.enter)="activeName.set(row.name)"
-            (keydown.space)="$event.preventDefault(); activeName.set(row.name)"
+            (click)="open(row.name, $event)"
+            (keydown.enter)="open(row.name, $event)"
+            (keydown.space)="$event.preventDefault(); open(row.name, $event)"
           >
-            <span class="section-filter-menu__label">{{
-              row.label | translate
-            }}</span>
+            <span class="section-filter-menu__name">
+              <span class="section-filter-menu__label">{{
+                row.label | translate
+              }}</span>
+              @if (row.count) {
+                <m-badge [config]="countBadgeConfig()">{{ row.count }}</m-badge>
+              }
+            </span>
+            @if (row.selected) {
+              <!-- The same clear mark a Filter's own bar carries, kept in the
+                   squeezed drill-in: the bar is not rendered in that mode, and
+                   without this the only way back to nothing is to drill in and
+                   unpick each value. Swallows the click so dropping a Filter's
+                   answer does not also open it. -->
+              <span class="section-filter-menu__clear">
+                <m-button
+                  [config]="clearConfig()"
+                  (clicked)="clear(row.name)"
+                  [attr.aria-label]="('remove' | translate) + ' ' + (row.label | translate)"
+                />
+              </span>
+            }
             @if (row.detail) {
               <span class="section-filter-menu__detail">{{ row.detail }}</span>
             }
@@ -12086,7 +12204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }
       </ul>
     }
-  `, imports: [IconComponent, ButtonComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'section-filter-menu' }, 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;background:var(--m-background);border:1px solid var(--m-mm);width:260px;max-height:20rem;overflow-y:auto}.section-filter-menu__rows{list-style:none;margin:0;padding:0}.section-filter-menu__row{display:flex;align-items:center;gap:.5em;padding:.6rem .9rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:all .3s cubic-bezier(.16,1,.3,1);outline:none}.section-filter-menu__row:hover,.section-filter-menu__row:focus-visible{background-color:var(--m-backdrop-standard)}.section-filter-menu__row.is-selected{color:var(--m-mm);font-weight:500}.section-filter-menu__row m-icon{--m-icon-size: .875em;margin-left:auto;display:flex}.section-filter-menu__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.section-filter-menu__detail{font-size:.75rem;color:var(--m-text-secondary);flex-shrink:0}.section-filter-menu__back{display:flex;align-items:center;gap:.5em;width:100%;padding:.6rem .9rem;background:transparent;border:none;border-bottom:1px solid var(--m-backdrop-border);font:inherit;font-size:.875rem;color:var(--m-text);cursor:pointer;outline:none}.section-filter-menu__back:hover,.section-filter-menu__back:focus-visible{background-color:var(--m-backdrop-standard)}.section-filter-menu__back m-icon{--m-icon-size: .875em;display:flex}.section-filter-menu__panel{display:block;--m-filter-panel-border: none;--m-filter-panel-bg: transparent;--m-filter-panel-animation: none;--m-filter-panel-max-height: none}\n"] }]
+  `, imports: [IconComponent, ButtonComponent, BadgeComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'section-filter-menu' }, 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;background:var(--m-background);border:1px solid var(--m-mm);width:260px;max-height:20rem;overflow-y:auto}.section-filter-menu__rows{list-style:none;margin:0;padding:0}.section-filter-menu__row{display:flex;align-items:center;gap:.5em;padding:.6rem .9rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:all .3s cubic-bezier(.16,1,.3,1);outline:none}.section-filter-menu__row:hover,.section-filter-menu__row:focus-visible{background-color:var(--m-backdrop-standard)}.section-filter-menu__row.is-selected{color:var(--m-mm);font-weight:500}.section-filter-menu__row m-icon{--m-icon-size: .875em;margin-left:auto;display:flex}.section-filter-menu__name{position:relative;display:inline-flex;align-items:center;min-width:0;padding-right:.4rem}.section-filter-menu__name m-badge{pointer-events:none;--M-BADGE-color: var(--m-error);--m-badge-size: .6rem;--m-badge-height: .9rem;--m-badge-min-width: .9rem}.section-filter-menu__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.section-filter-menu__clear{display:flex;flex-shrink:0;--m-button-size: .75rem;--m-button-color: var(--m-mm);opacity:.7}.section-filter-menu__clear:hover{opacity:1}.section-filter-menu__detail{font-size:.75rem;color:var(--m-text-secondary);flex-shrink:0}.section-filter-menu__back{display:flex;align-items:center;gap:.5em;width:100%;padding:.6rem .9rem;background:transparent;border:none;border-bottom:1px solid var(--m-backdrop-border);font:inherit;font-size:.875rem;color:var(--m-text);cursor:pointer;outline:none}.section-filter-menu__back:hover,.section-filter-menu__back:focus-visible{background-color:var(--m-backdrop-standard)}.section-filter-menu__back m-icon{--m-icon-size: .875em;display:flex}.section-filter-menu__panel{display:block;--m-filter-panel-border: none;--m-filter-panel-bg: transparent;--m-filter-panel-animation: none;--m-filter-panel-max-height: none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { members: [{ type: i0.Input, args: [{ isSignal: true, alias: "members", required: false }] }], ctx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctx", required: false }] }], panelHost: [{ type: i0.ViewChild, args: ['panelHost', { ...{
                             read: ViewContainerRef,
                         }, isSignal: true }] }] } });
@@ -12236,6 +12354,9 @@ class SectionFilterGroupComponent {
         toggle: this.toggle,
         setRange: this.setRange,
         remove: (name, val) => this.write(name, this.valueOf(name).filter((v) => v !== val)),
+        // An empty list is how `write` deletes a key, so clearing is the same act
+        // for every variant — no range/option split to keep in step here.
+        clear: (name) => this.write(name, []),
     };
     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: [
@@ -19734,7 +19855,7 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.TOGGLE: {
-                const { ToggleInputComponent } = await import('./magmonium-one-toggle-OB-u7l7C.mjs');
+                const { ToggleInputComponent } = await import('./magmonium-one-toggle-dPCJcoX8.mjs');
                 this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                 break;
             }
@@ -19746,12 +19867,12 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.PASSWORD: {
-                const { PasswordInputComponent } = await import('./magmonium-one-password-C_iu89uG.mjs');
+                const { PasswordInputComponent } = await import('./magmonium-one-password-Cl3qN0JY.mjs');
                 this.createDynamicComponent(seq, PasswordInputComponent);
                 break;
             }
             case InputType.OTP: {
-                const { OtpInputComponent } = await import('./magmonium-one-otp-CGJwpx2O.mjs');
+                const { OtpInputComponent } = await import('./magmonium-one-otp-yKv_Sfbn.mjs');
                 this.createDynamicComponent(seq, OtpInputComponent);
                 break;
             }
@@ -33751,4 +33872,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 
 export { DEFAULT_SIZE 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_FILTER_RANGE_MODE as Z, DEFAULT_FILTER_VARIANT as _, BaseTextInputComponent as a, NAV_MAIN_BUTTONS as a$, DashboardCardComponent as a0, DateInputComponent as a1, DatePickerComponent as a2, DeviceService as a3, DomService as a4, Domain as a5, DotGridComponent as a6, DragListDirective as a7, DragListItemDirective as a8, DraggableDirective as a9, InterceptorObservables as aA, JumbotronComponent as aB, KeyValueComponent as aC, LAYOUT_ASSET_FOLDER as aD, LOGIN_COMPONENT as aE, LOGIN_STORE as aF, LanguageComponent as aG, LogoComponent as aH, MAG_SOCKET_EVENT as aI, MHeroColorDirective as aJ, MHeroComponent as aK, MODAL_REF as aL, MODAL_STORE_REF as aM, MRefDirective as aN, MStepComponent as aO, MURL_PARAM as aP, MURL_SEP as aQ, ManifestEnrichmentService as aR, MenuComponent as aS, ModalDirective as aT, ModalRef as aU, ModalStore as aV, MoneyPipe as aW, MultiRangeInputComponent as aX, MurlUrlSerializer as aY, NAV_DEFAULT_MURL as aZ, NAV_ID_SEP as a_, DropdownInputComponent as aa, FILTER_GROUP_CONTEXT as ab, FILTER_RANGE_MODES as ac, FILTER_VARIANTS as ad, FLEX_VARIANTS as ae, FOLDER_PICK_LISTENER as af, FORM_ASSET_FOLDER as ag, FileService as ah, FileUploadDirective as ai, FileUploadInputComponent as aj, FlexComponent as ak, FlexItemComponent as al, FormGroupComponent as am, FrameComponent as an, FreezeService as ao, GRID_BREAKPOINTS as ap, GetNavService as aq, HeaderComponent$1 as ar, HighlightDirective as as, HttpService as at, ICON_SOURCE as au, IS_SIDE_PANEL as av, IconComponent as aw, ImgComponent as ax, InputType as ay, InstrumentScoreComponent as az, TextOutputComponent as b, SectionButtonGroupComponent as b$, NAV_SEGMENT_RE as b0, NAV_STORE_REF as b1, NAV_WC_COMPONENTS as b2, NAV_WIDGET_MAP as b3, NavComponent as b4, NavDetailsComponent as b5, NavHeaderComponent as b6, NavMenuComponent as b7, NavStore as b8, NavTrailComponent as b9, ROOT_NAV$1 as bA, RadioGroupComponent as bB, RadioInputComponent as bC, RangeInputComponent as bD, RatingInputComponent as bE, ReactiveElementComponent as bF, RemoteComponent as bG, RemoteLoaderService as bH, ResizeElementComponent as bI, RouteContainer as bJ, RowComponent as bK, SEARCH_QUERY as bL, SEARCH_RESULTS_EVENT as bM, SECTION_ACCORDION_GROUP as bN, SECTION_FORM_CONTEXT as bO, SHARED_ICONS as bP, SIZE_CONTEXT as bQ, ScoreComponent as bR, ScrollComponent as bS, ScrollService as bT, SearchPanelComponent as bU, SearchStore as bV, SearchUserPanelComponent as bW, SectionAccordionDirective as bX, SectionAccordionGroupDirective as bY, SectionBackComponent as bZ, SectionBadgesComponent as b_, NothingComponent as ba, NotificationElementComponent as bb, NotificationGroupComponent as bc, NotificationPopupComponent as bd, NotificationService as be, NotificationStore as bf, NotificationType as bg, NotificationWidgetComponent as bh, ONE_ASSET_BASE_URL as bi, OPTIONS_SOURCE as bj, OVERLAY_WIDGETS as bk, OneApp as bl, OptionsSourceDirective as bm, OverlayBodyComponent as bn, OverlayRef as bo, OverlayService as bp, PLATFORM_BUTTON_NAV_IDS as bq, PLATFORM_EXTENSIBLE_NAV_IDS as br, PLATFORM_NAV_MAP as bs, PLATFORM_ROOT_CHILDREN as bt, PaginationComponent as bu, PanelComponent as bv, PercentagePipe as bw, PlaygroundComponent as bx, PositionDirective as by, PwaInstallComponent as bz, ButtonComponent as c, UniverseComponent as c$, SectionCardComponent as c0, SectionCarouselComponent as c1, SectionComponent as c2, SectionFilterComponent as c3, SectionFilterGroupComponent as c4, SectionFilterMenuComponent as c5, SectionFilterPanelComponent as c6, SectionFilterRangePanelComponent as c7, SectionFooterComponent as c8, SectionFormComponent as c9, SummaryComponent as cA, SvgGeneratorComponent as cB, SvgGeneratorService as cC, SvgService as cD, TOTAL_COLUMNS as cE, TRANSLATION_SOURCE as cF, TableComponent as cG, TechnicalMeterComponent as cH, TextInputComponent as cI, TextareaInputComponent as cJ, ThemeComponent as cK, ThemeDataService as cL, ThemeService as cM, ThemeStore as cN, TimeAgoPipe as cO, TimelineComponent as cP, ToggleButtonComponent as cQ, ToggleInputComponent as cR, ToggleRadioInputComponent as cS, ToolTipDirective as cT, TooltipComponent as cU, TranslateService as cV, TreeGridComponent as cW, URL_SEP as cX, USER_STORE_REF as cY, USER_TAB_MAP as cZ, UlComponent as c_, SectionFormItemComponent as ca, SectionHeaderComponent as cb, SectionHeroComponent as cc, SectionPaginationComponent as cd, SectionSearchComponent as ce, SectionStepperComponent as cf, SectionTabsComponent as cg, SectionToggleComponent as ch, SectionToggleItemDirective as ci, SelectableCardInputComponent as cj, SelectorDirective as ck, SettingsSearchBarComponent as cl, SettingsSearchService as cm, ShapeComponent as cn, SharedStoreRegistry as co, SidePanelDirective as cp, Size as cq, SocketStore as cr, SortComponent as cs, StatComponent as ct, StepComponent as cu, StepperComponent as cv, StepsComponent as cw, StorageService as cx, StrokeLinecap as cy, StrokeLinejoin as cz, APP_CONTEXT_REF as d, initMagmoniumApp as d$, UserApiService as d0, UserAvatarComponent as d1, UserComponent as d2, UserNavComponent as d3, UserSettingsComponent as d4, UserStore as d5, WC_ROUTE_CHANGED_EVENT as d6, WC_SEARCH_GROUPS as d7, WIN_USER_TAB_HOOK as d8, WIN_USER_TAB_KEY as d9, evaluateBool as dA, filterHoldsList as dB, filterHoldsOneBound as dC, filterHoldsOptions as dD, filterHoldsRange as dE, filterList as dF, filterOne as dG, filterPanelOf as dH, filterPanelWidth as dI, filterRange as dJ, filterValueList as dK, filterValues as dL, flattenTreeGridRows as dM, formatBadgeCount as dN, fullName as dO, generateClipPath as dP, generateTransform as dQ, getClassList as dR, getProperty as dS, getScrollParent as dT, getTierFromPreviewPath as dU, getTreeGridRow as dV, getUniqueId as dW, getValue as dX, hasErrorComputed as dY, hexToRgb as dZ, hslToRgb$1 as d_, WatermarkComponent as da, WcRouterStore as db, WrapperInputComponent as dc, anchorNavId as dd, applyColorsToElement as de, bootstrapMagApp as df, bootstrapPwaInstall as dg, buildWcBaseUrl as dh, calculateLuminance as di, calculateRanks as dj, cellText as dk, checkFilterCondition as dl, childNavId as dm, classListSignal as dn, coerceSize as dp, cornerEdge as dq, cornerSide as dr, createMap as ds, createPlatformNavMap as dt, deriveAvatarGradient as du, deriveContrastColor as dv, deriveOppositeColor as dw, derivePropertyName as dx, emailValidation as dy, evaluate as dz, ASSET_BASE_URL as e, publicGuard as e$, initialNotificationState as e0, initialState$2 as e1, initials as e2, injectAuthenticate as e3, injectInstallApp as e4, injectParentSize as e5, injectScrollSticky as e6, isButtonName as e7, isCancelledComputed as e8, isExtensiblePlatformNavId as e9, navIdChain as eA, navIdFor as eB, navIdSegment as eC, navIdToRoutePath as eD, navIdToSegments as eE, navToId as eF, parentNavId as eG, parseAddress as eH, parseColor as eI, parsePatternNames as eJ, patternValidation as eK, patternsValidation as eL, platformNavWidgets as eM, privateGuard as eN, processImageToSvg as eO, provideAppContext as eP, provideMagAppConfig as eQ, provideMagWcConfig as eR, provideMagWcRoutes as eS, provideModalComponents as eT, provideMurlUrlSerializer as eU, provideNavWidgets as eV, provideOverlayWidgets as eW, providePlatformNavWidgets as eX, provideSearch as eY, provideSizeContext as eZ, provideUserTabs as e_, isJson as ea, isLoadingComputed as eb, isLocalhost as ec, isPlatformNavId as ed, isSize as ee, isTierPreview as ef, isUrlLocalhost as eg, isValidNavId as eh, isValidNavSegment as ei, isWebComponent as ej, linkToId as ek, linkToNav as el, loadingActions as em, mInterceptor as en, manualValidation as eo, matchFieldValidation as ep, maxLengthValidation as eq, maxValidation as er, mergePlatformNav as es, mergeUnique as et, mergeUniqueBy as eu, mergeUniqueWith as ev, minAgeValidation as ew, minLengthValidation as ex, minValidation as ey, miniMarkToHtml as ez, AccordionBodyDirective as f, readFieldPatterns as f0, renderAddress as f1, requiredValidation as f2, resolveConfigAsset as f3, resolveIconSize as f4, resolvePallet as f5, resolvePatternRules as f6, resolveSize as f7, rgbToHex as f8, rgbToHsl as f9, rowHasChildren as fa, samePatterns as fb, segmentsToNavId as fc, setProperty as fd, setTreeGridChildren as fe, settingsWidgets as ff, shouldShowBadge as fg, splitNavId as fh, stringToColor as fi, toAttrBool as fj, toAttrNumber as fk, toCssLength as fl, toHostNavId as fm, toLength$1 as fn, toLocalNavId as fo, toggleTreeGridRow as fp, unfetchedPlatformNav as fq, urlValidation as fr, 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-BudsrBEI.mjs.map
+//# sourceMappingURL=magmonium-one-magmonium-one-Ckv5BQBl.mjs.map