@magmonium/one 0.4.53 → 0.4.55

package/fesm2022/{magmonium-one-base-dropdown-7XYsiJBX.mjs → magmonium-one-base-dropdown-Tf6PltuH.mjs}

@@ -83,6 +83,7 @@ var DropdownBoxComponent = class DropdownBoxComponent {
           [class.dropdown-box__option--selected]="selectedState"
           [class.dropdown-box__option--disabled]="option.disabled"
           [class.dropdown-box__option--active]="i === activeIndex()"
+          [style.--m-dropdown-option-depth]="option.depth"
           role="option"
           [attr.aria-selected]="selectedState"
           [attr.data-value]="option.value"
@@ -114,7 +115,7 @@ var DropdownBoxComponent = class DropdownBoxComponent {
     </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)}}.dropdown-box{overflow-y:auto;max-height:15rem;margin:0;padding:.375rem;list-style:none;border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:var(--m-input-radius, .5rem);background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem var(--m-backdrop-shadow);animation:dropdown-in .2s ease-out}.dropdown-box__checkbox{flex-shrink:0;width:14px;height:14px;margin-right:8px;pointer-events:none;accent-color:var(--m-mm);cursor:pointer}.dropdown-box__option{display:flex;align-items:center;padding:.625rem .75rem;border-radius:.375rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:background .15s ease}.dropdown-box__option:hover,.dropdown-box__option--active{background:color-mix(in srgb,var(--m-focus) 8%,transparent)}.dropdown-box__option--selected{font-weight:600;color:var(--m-mm)}.dropdown-box__option--disabled{opacity:.4;pointer-events:none}.dropdown-box__empty{padding:.75rem;text-align:center;color:var(--m-text-tertiary);font-size:.875rem}@keyframes dropdown-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host(.open-upward) .dropdown-box{animation:dropdown-in-up .2s ease-out}@keyframes dropdown-in-up{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom) .dropdown-box{max-height:70vh;border:none;border-radius:0;background:transparent;box-shadow:none;animation:none}\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)}}.dropdown-box{overflow-y:auto;max-height:15rem;margin:0;padding:.375rem;list-style:none;border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:var(--m-input-radius, .5rem);background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem var(--m-backdrop-shadow);animation:dropdown-in .2s ease-out}.dropdown-box__checkbox{flex-shrink:0;width:14px;height:14px;margin-right:8px;pointer-events:none;accent-color:var(--m-mm);cursor:pointer}.dropdown-box__option{display:flex;align-items:center;padding:.625rem .75rem;padding-left:calc(.75rem + var(--m-dropdown-option-depth, 0) * 1rem);border-radius:.375rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:background .15s ease}.dropdown-box__option:hover,.dropdown-box__option--active{background:color-mix(in srgb,var(--m-focus) 8%,transparent)}.dropdown-box__option--selected{font-weight:600;color:var(--m-mm)}.dropdown-box__option--disabled{opacity:.4;pointer-events:none}.dropdown-box__empty{padding:.75rem;text-align:center;color:var(--m-text-tertiary);font-size:.875rem}@keyframes dropdown-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host(.open-upward) .dropdown-box{animation:dropdown-in-up .2s ease-out}@keyframes dropdown-in-up{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom) .dropdown-box{max-height:70vh;border:none;border-radius:0;background:transparent;box-shadow:none;animation:none}\n"],
 		dependencies: [{
 			kind: "pipe",
 			type: TranslatePipe,
@@ -142,6 +143,7 @@ i0.ɵɵngDeclareClassMetadata({
           [class.dropdown-box__option--selected]="selectedState"
           [class.dropdown-box__option--disabled]="option.disabled"
           [class.dropdown-box__option--active]="i === activeIndex()"
+          [style.--m-dropdown-option-depth]="option.depth"
           role="option"
           [attr.aria-selected]="selectedState"
           [attr.data-value]="option.value"
@@ -173,7 +175,7 @@ i0.ɵɵngDeclareClassMetadata({
     </ul>
   `,
 			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)}}.dropdown-box{overflow-y:auto;max-height:15rem;margin:0;padding:.375rem;list-style:none;border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:var(--m-input-radius, .5rem);background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem var(--m-backdrop-shadow);animation:dropdown-in .2s ease-out}.dropdown-box__checkbox{flex-shrink:0;width:14px;height:14px;margin-right:8px;pointer-events:none;accent-color:var(--m-mm);cursor:pointer}.dropdown-box__option{display:flex;align-items:center;padding:.625rem .75rem;border-radius:.375rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:background .15s ease}.dropdown-box__option:hover,.dropdown-box__option--active{background:color-mix(in srgb,var(--m-focus) 8%,transparent)}.dropdown-box__option--selected{font-weight:600;color:var(--m-mm)}.dropdown-box__option--disabled{opacity:.4;pointer-events:none}.dropdown-box__empty{padding:.75rem;text-align:center;color:var(--m-text-tertiary);font-size:.875rem}@keyframes dropdown-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host(.open-upward) .dropdown-box{animation:dropdown-in-up .2s ease-out}@keyframes dropdown-in-up{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom) .dropdown-box{max-height:70vh;border:none;border-radius:0;background:transparent;box-shadow:none;animation:none}\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)}}.dropdown-box{overflow-y:auto;max-height:15rem;margin:0;padding:.375rem;list-style:none;border:var(--m-input-border-width, 1px) solid var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));border-radius:var(--m-input-radius, .5rem);background:color-mix(in srgb,var(--m-focus) 2%,var(--m-background));box-shadow:0 .75rem 2rem var(--m-backdrop-shadow);animation:dropdown-in .2s ease-out}.dropdown-box__checkbox{flex-shrink:0;width:14px;height:14px;margin-right:8px;pointer-events:none;accent-color:var(--m-mm);cursor:pointer}.dropdown-box__option{display:flex;align-items:center;padding:.625rem .75rem;padding-left:calc(.75rem + var(--m-dropdown-option-depth, 0) * 1rem);border-radius:.375rem;cursor:pointer;font-size:.875rem;color:var(--m-text);transition:background .15s ease}.dropdown-box__option:hover,.dropdown-box__option--active{background:color-mix(in srgb,var(--m-focus) 8%,transparent)}.dropdown-box__option--selected{font-weight:600;color:var(--m-mm)}.dropdown-box__option--disabled{opacity:.4;pointer-events:none}.dropdown-box__empty{padding:.75rem;text-align:center;color:var(--m-text-tertiary);font-size:.875rem}@keyframes dropdown-in{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host(.open-upward) .dropdown-box{animation:dropdown-in-up .2s ease-out}@keyframes dropdown-in-up{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}:host-context(.align-bottom) .dropdown-box{max-height:70vh;border:none;border-radius:0;background:transparent;box-shadow:none;animation:none}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -601,4 +603,4 @@ i0.ɵɵngDeclareClassMetadata({
 });
 export { DROPDOWN_IMPORTS as n, DROPDOWN_TEMPLATE as r, BaseDropdownComponent as t };
 
-//# sourceMappingURL=magmonium-one-base-dropdown-7XYsiJBX.mjs.map
+//# sourceMappingURL=magmonium-one-base-dropdown-Tf6PltuH.mjs.map

package/fesm2022/magmonium-one-base-dropdown-Tf6PltuH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"magmonium-one-base-dropdown-Tf6PltuH.mjs","names":[],"sources":["../../../../libs/one/src/lib/shared/ui/input/ui/dropdown/dropdown-box.ts","../../../../libs/one/src/lib/shared/ui/input/ui/dropdown/base-dropdown.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  output,\n} from '@angular/core';\nimport { TranslatePipe } from '../../../../pipe/translate';\nimport { DropdownOption, DropdownValue } from '../../model/input';\n\n@Component({\n  selector: 'm-dropdown-box',\n  imports: [TranslatePipe],\n  template: `\n    <ul class=\"dropdown-box\" role=\"listbox\">\n      @for (option of options(); track option.value; let i = $index) {\n        @let selectedState = isSelected(option.value);\n        <li\n          class=\"dropdown-box__option\"\n          [class.dropdown-box__option--selected]=\"selectedState\"\n          [class.dropdown-box__option--disabled]=\"option.disabled\"\n          [class.dropdown-box__option--active]=\"i === activeIndex()\"\n          [style.--m-dropdown-option-depth]=\"option.depth\"\n          role=\"option\"\n          [attr.aria-selected]=\"selectedState\"\n          [attr.data-value]=\"option.value\"\n          (click)=\"selectOption(option)\"\n          (keydown.enter)=\"selectOption(option)\"\n          tabindex=\"0\"\n        >\n          <!-- A group header is a row, never a choice: no box to tick. -->\n          @if (multiple() && !option.disabled) {\n            <input\n              type=\"checkbox\"\n              class=\"dropdown-box__checkbox\"\n              [checked]=\"selectedState\"\n              tabindex=\"-1\"\n              (click)=\"$event.preventDefault()\"\n            />\n          }\n          @if (option.noTranslate) {\n            {{ option.label }}\n          } @else {\n            {{ option.label | translate }}\n          }\n        </li>\n      } @empty {\n        <li class=\"dropdown-box__empty\">\n          {{ 'no-results-found' | translate }}\n        </li>\n      }\n    </ul>\n  `,\n  styleUrl: './dropdown-box.sass',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DropdownBoxComponent {\n  readonly options = input<DropdownOption<DropdownValue>[]>([]);\n  /** The values ticked, as a list whichever Field drew the panel. */\n  readonly selected = input<readonly DropdownValue[]>([]);\n  readonly multiple = input<boolean>(false);\n  readonly activeIndex = input<number>(-1);\n  readonly action = output<DropdownOption<DropdownValue>>();\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  // Keep the keyboard-active option in view as ↑/↓ walk a scrolled list.\n  constructor() {\n    effect(() => {\n      const index = this.activeIndex();\n      if (index < 0) return;\n      this.host.nativeElement\n        .querySelectorAll('.dropdown-box__option')\n        [index]?.scrollIntoView?.({ block: 'nearest' });\n    });\n  }\n\n  protected readonly isSelected = (value: DropdownValue): boolean =>\n    this.selected().includes(value);\n\n  // Only emit a selection event for enabled options.\n  protected readonly selectOption = (\n    option: DropdownOption<DropdownValue>\n  ): void => {\n    if (option.disabled) return;\n    this.action.emit(option);\n  };\n}\n","import {\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  inputBinding,\n  linkedSignal,\n  model,\n  outputBinding,\n  Signal,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { ValidationError, WithOptionalFieldTree } from '@angular/forms/signals';\nimport { LabelComponent } from '../label';\nimport { TextOutputComponent } from '../../../text-output';\nimport { BaseInputComponent } from '../../lib/base-input';\nimport { Button } from '../../../button/type/button';\nimport { ButtonComponent } from '../../../button/ui/button';\nimport { TranslateService } from '../../../../services';\nimport { SelectorConfig, SelectorDirective } from '../../../../directives';\nimport { Direction } from '../../../../directives/selector/selector-type';\nimport { DropdownBoxComponent } from './dropdown-box';\nimport {\n  DropdownInput,\n  DropdownOption,\n  DropdownValue,\n  TextInput,\n} from '../../model/input';\nimport { TextInputComponent } from '../text/text';\nimport { assetOptions } from '../../lib/options-asset';\n\n/** The trigger both option Fields draw: a searchable text input and a chevron. */\nexport const DROPDOWN_TEMPLATE = `\n  @if (config(); as dropdown) {\n    @if (dropdown.label) {\n      <m-label\n        [for]=\"dropdown.name ?? ''\"\n        [placeholder]=\"dropdown.label\"\n        [params]=\"dropdown.params\"\n        [required]=\"required()\"\n        [disabled]=\"disabled()\"\n      />\n    }\n    <div\n      class=\"trigger-wrap\"\n      #wrapper\n      [mSelector]=\"selectorConfig()\"\n      [disabled]=\"disabled() || readonly() || !!config()?.readonly\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      (focusin)=\"isFocused.set(true)\"\n      (focusout)=\"isFocused.set(false)\"\n    >\n      <m-text-input\n        [config]=\"triggerInputConfig()\"\n        [value]=\"displayValue()\"\n        [disabled]=\"disabled()\"\n        [invalid]=\"invalid()\"\n        [hideErrors]=\"true\"\n        [(touched)]=\"touched\"\n        [focused]=\"focused()\"\n        (valueChange)=\"onInput($event)\"\n        (click)=\"preventToggleWhenOpen($event)\"\n        (keydown.space)=\"$event.stopPropagation()\"\n        (keydown.enter)=\"onEnter($event)\"\n        (keydown.arrowdown)=\"onArrow($event, 1)\"\n        (keydown.arrowup)=\"onArrow($event, -1)\"\n        (keydown.tab)=\"$event.stopPropagation()\"\n      />\n      <m-button [disabled]=\"disabled()\" [config]=\"chevron()\" />\n    </div>\n    @if (showErrors()) {\n      @for (error of errors(); track $index) {\n        <m-text-output\n          variant=\"footer\"\n          color=\"error\"\n          [label]=\"error.message\"\n        />\n      }\n    }\n  }\n`;\n\nexport const DROPDOWN_IMPORTS = [\n  LabelComponent,\n  TextOutputComponent,\n  TextInputComponent,\n  ButtonComponent,\n  SelectorDirective,\n];\n\n/**\n * Everything a Dropdown and a Multiselect share: the options, the search, the\n * keyboard walk and the panel. What differs is only what the Field holds — one\n * value or a list — so a subclass says which values are selected and what a\n * pick does to them.\n */\n@Directive()\nexport abstract class BaseDropdownComponent extends BaseInputComponent<DropdownInput> {\n  public override config = input<Partial<DropdownInput> | undefined>();\n  public override required = input<boolean>(false);\n  public override disabled = input<boolean>(false);\n  public override invalid = input<boolean>(false);\n  public override touched = model<boolean>(false);\n  public override focused = input<boolean>(false);\n  public override errors = input<readonly WithOptionalFieldTree<ValidationError>[]>(\n    []\n  );\n  public override showErrors = computed(() => this.touched() && this.invalid());\n\n  readonly options = input<\n    DropdownOption<DropdownValue>[] | Signal<DropdownOption<DropdownValue>[]>\n  >();\n  readonly dir = input<Direction>();\n  readonly toggle = model(false);\n  readonly searchTerm = signal('');\n  readonly isFocused = signal(false);\n  readonly chevron = computed(\n    () =>\n      <Button>{\n        icon: this.toggle() ? 'chevron-up' : 'chevron-down',\n        one: true,\n        variant: 'ghost',\n        // In-Field control, never the form's submit — without this the Button\n        // reads as the submit control and greys out while the form is invalid.\n        type: 'button',\n        // Chevron tracks the trigger's border like the text input's own icon:\n        // red while the Field shows errors, focus tint while focused, border at rest.\n        color: this.showErrors()\n          ? 'error'\n          : this.isFocused()\n            ? 'focus'\n            : 'border',\n        // The trigger input is the Field's tab stop; the chevron only repeats\n        // what clicking that input already does, so Tab walks past it.\n        tabindex: -1,\n      }\n  );\n\n  /** The values the Field holds now, as a list whichever kind it is. */\n  protected abstract readonly selectedValues: Signal<readonly DropdownValue[]>;\n  /** Whether the panel ticks rows and stays open across picks. */\n  protected abstract readonly multiple: boolean;\n  /** What picking `option` does to the Field's value. */\n  protected abstract selectOption(option: DropdownOption<DropdownValue>): void;\n\n  protected readonly triggerInputConfig = computed(() => {\n    const dropdown = this.config() as DropdownInput | undefined;\n    return <Partial<TextInput>>{\n      name: dropdown?.name,\n      icon: dropdown?.icon,\n      one: dropdown?.one,\n      placeholder: this.placeholderText(),\n      readonly: this.readonly() || !!dropdown?.readonly,\n    };\n  });\n\n  protected readonly dropdownOptions = computed(\n    (): DropdownOption<DropdownValue>[] => {\n      const runtimeOptions = this.options();\n      const source =\n        runtimeOptions ?? (this.config() as DropdownInput | undefined)?.options;\n      if (typeof source === 'function') return source();\n      if (source?.length) return source;\n      return this.assetOptions();\n    }\n  );\n\n  private readonly translateService = inject(TranslateService);\n\n  protected readonly assetOptions = assetOptions(\n    () => (this.config() as DropdownInput | undefined)?.optionsAsset\n  );\n\n  /** An option's text: authored as it stands, a key translated. */\n  private readonly optionLabel = (\n    option?: DropdownOption<DropdownValue>\n  ): string => {\n    if (!option?.label) return '';\n    return option.noTranslate\n      ? option.label\n      : this.translateService.translate(option.label);\n  };\n\n  protected readonly filteredOptions = computed(\n    (): DropdownOption<DropdownValue>[] => {\n      const search = this.searchTerm().toLowerCase();\n      if (!search) return this.dropdownOptions();\n      return this.dropdownOptions().filter((o) => {\n        const label = this.optionLabel(o).toLowerCase();\n        return (\n          label.includes(search) ||\n          String(o.value).toLowerCase().includes(search)\n        );\n      });\n    }\n  );\n\n  /** The option ↑/↓ point at while the panel is open; -1 is none. Reset as the search narrows the list. */\n  protected readonly activeIndex = linkedSignal<\n    DropdownOption<DropdownValue>[],\n    number\n  >({\n    source: this.filteredOptions,\n    computation: (options) =>\n      this.searchTerm() ? this.nextEnabled(options, -1, 1) : -1,\n  });\n\n  /** The enabled option `step` rows past `from`, wrapping; `from` itself when none. */\n  private readonly nextEnabled = (\n    options: DropdownOption<DropdownValue>[],\n    from: number,\n    step: 1 | -1\n  ): number => {\n    for (let i = 1; i <= options.length; i++) {\n      const index =\n        (((from + step * i) % options.length) + options.length) %\n        options.length;\n      if (!options[index].disabled) return index;\n    }\n    return from;\n  };\n\n  /** One pick reads as its option's label, several as a count. */\n  private readonly selectionLabel = computed((): string => {\n    const values = this.selectedValues();\n    if (values.length === 0) return '';\n    if (values.length === 1) {\n      return this.optionLabel(\n        this.dropdownOptions().find((o) => o.value === values[0])\n      );\n    }\n    const translation = this.translateService.translate(\n      `selected?count=${values.length}`\n    );\n    return translation.includes('selected')\n      ? `${values.length} Selected`\n      : translation;\n  });\n\n  protected readonly displayValue = computed((): string =>\n    this.toggle() ? this.searchTerm() : this.selectionLabel()\n  );\n\n  protected readonly placeholderText = computed((): string => {\n    if (this.toggle()) {\n      const label = this.selectionLabel();\n      if (label) return label;\n    }\n    const placeholder = (this.config() as DropdownInput | undefined)\n      ?.placeholder;\n    return placeholder ? this.translateService.translate(placeholder) : '';\n  });\n\n  private readonly wrapperRef =\n    viewChild<ElementRef<HTMLDivElement>>('wrapper');\n\n  protected readonly selectorConfig = computed<\n    SelectorConfig<DropdownBoxComponent>\n  >(() => ({\n    component: DropdownBoxComponent,\n    base: 'm-dropdown-input',\n    matchTriggerWidth: true,\n    toggle: true,\n    dir: this.dir(),\n    bindings: [\n      inputBinding('options', this.filteredOptions),\n      inputBinding('selected', this.selectedValues),\n      inputBinding('multiple', () => this.multiple),\n      inputBinding('activeIndex', this.activeIndex),\n      outputBinding<DropdownOption<DropdownValue>>('action', (option) =>\n        this.selectOption(option)\n      ),\n    ],\n  }));\n\n  /** Shuts the panel after a pick, the way a click on the trigger would. */\n  protected readonly closePanel = (): void => {\n    this.toggle.set(false);\n    this.searchTerm.set('');\n    setTimeout(() => this.wrapperRef()?.nativeElement.click(), 0);\n  };\n\n  protected readonly onOpened = (): void => {\n    this.toggle.set(true);\n    this.searchTerm.set('');\n    const current = this.selectedValues()[0];\n    this.activeIndex.set(\n      this.filteredOptions().findIndex((o) => o.value === current)\n    );\n  };\n\n  // Focus stays in the trigger input (it is the search box), so ↑/↓ move the\n  // active option rather than DOM focus. Closed, ArrowDown bubbles on to\n  // SelectorDirective, which opens the panel.\n  protected readonly onArrow = (event: Event, step: 1 | -1): void => {\n    if (!this.toggle()) return;\n    event.preventDefault();\n    this.activeIndex.update((index) =>\n      this.nextEnabled(this.filteredOptions(), index, step)\n    );\n  };\n\n  // Enter never reaches SelectorDirective (it would toggle the panel); open,\n  // it picks the active option.\n  protected readonly onEnter = (event: Event): void => {\n    event.stopPropagation();\n    if (!this.toggle()) return;\n    event.preventDefault();\n    const option = this.filteredOptions()[this.activeIndex()];\n    if (option && !option.disabled) this.selectOption(option);\n  };\n\n  protected readonly onClosed = (): void => {\n    this.toggle.set(false);\n    this.searchTerm.set('');\n  };\n\n  protected readonly onInput = (value: string): void => {\n    this.searchTerm.set(value);\n  };\n\n  protected readonly preventToggleWhenOpen = (event: Event): void => {\n    if (this.toggle() || this.readonly() || this.config()?.readonly) {\n      event.stopPropagation();\n    }\n  };\n}\n"],"mappings":"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"}

package/fesm2022/magmonium-one-input-DqHPorA1.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"magmonium-one-input-DqHPorA1.mjs","names":[],"sources":["../../../../libs/one/src/lib/shared/ui/input/model/input.ts"],"sourcesContent":["import { Signal } from '@angular/core';\nimport { Config } from '../../../type/config/config-type';\n\nexport enum InputType {\n  TEXT = 'text',\n  PASSWORD = 'password',\n  OTP = 'one-time-password',\n  EMAIL = 'email',\n  NUMBER = 'number',\n  PHONE = 'phone',\n  DATE = 'date',\n  TIME = 'time',\n  DATETIME = 'datetime',\n  CHECKBOX = 'checkbox',\n  CHECKBOX_GROUP = 'checkbox_group',\n  RADIO = 'radio',\n  RADIO_GROUP = 'radio_group',\n  DROPDOWN = 'dropdown',\n  MULTISELECT = 'multiselect',\n  TEXTAREA = 'textarea',\n  FILE = 'file',\n  FOLDER = 'folder',\n  RANGE = 'range',\n  MULTI_RANGE = 'multi_range',\n  TOGGLE = 'toggle',\n  DATA_TOGGLE = 'data_toggle',\n  TOGGLE_RADIO = 'toggle_radio',\n  SEARCH = 'search',\n  URL = 'url',\n  COLOR = 'color',\n  MONTH = 'month',\n  WEEK = 'week',\n  MONEY = 'money',\n  AUTOFILL = 'autofill',\n  SELECTABLE_CARD = 'selectable_card',\n  RATING = 'rating',\n  COMPONENT = 'component',\n}\n\n/**\n * One shape a typed value may take, inlined into a Field's compiled config by\n * `FieldCompiler` from `mag_assets/patterns/<name>.yml` (libs/one ADR 0017).\n * The name does not survive into the browser as a lookup — it rides along so a\n * failing rule can be named in a devtools inspection and so the editor can read\n * back what a Field points at.\n *\n * `expression` arrives anchored (`^(?:…)$`); the asset stores it unanchored.\n * `.test()` matches anywhere in a value, so an unanchored `[0-9]{4}` would pass\n * `abc1234xyz` — and under `any` semantics an unanchored `email` would pass a\n * whole sentence that merely contains an address.\n */\nexport type PatternRule = {\n  name: string;\n  /** Already wrapped `^(?:…)$` by the compiler — used verbatim. */\n  expression: string;\n  /** Narrowed to `i` at author time: `g` carries `lastIndex` between\n   * `.test()` calls, and `m` reverses what the anchors just established. */\n  flags?: string;\n  /** i18n key shown when this rule is the only one a Field declares. */\n  message: string;\n};\n\nexport type Input = Config & {\n  type: InputType;\n  label: string;\n  required?: true;\n  /**\n   * Accepted shapes, any one of which passes (libs/one ADR 0017). Authored as\n   * `patterns: [<name>, ...]` naming PatternAssets; what reaches the browser is\n   * the resolved rules. Asset-only — a list cannot ride on the tag (ADR 0010).\n   */\n  patterns?: PatternRule[];\n  /**\n   * Shown when several `patterns` are declared and the value matches none.\n   * Required in that case, because no one shape's own complaint is true when\n   * the value could have taken another. Ignored for a single pattern, which\n   * speaks for itself.\n   */\n  patternMessage?: string;\n  icon?: string;\n  one?: boolean;\n  /**\n   * The [MessageVariable] values this Field's `label`, `placeholder` and\n   * validation messages are resolved with. One record for the Field rather\n   * than one per text: they are the same sentence's slots, and a page holds\n   * one record for every dynamic value it draws (m-one-ui ADR 0066).\n   *\n   * A Record, so it never rides as a literal attribute (ADR 0010) — a Field\n   * with dynamic slots takes it bound, off the page member holding them.\n   */\n  params?: Record<string, string>;\n  placeholder?: string;\n  button?: string;\n  buttonAction?: string;\n  /**\n   * Same rule grammar as `acl`, applied to the button beside the field rather\n   * than to the field itself: unmatched leaves it disabled instead of hiding it.\n   * A button that appears and disappears as the field's value changes reads as\n   * the layout breaking; one that greys out reads as a step not reached yet.\n   */\n  buttonAcl?: string;\n  disabled?: boolean;\n  readonly?: boolean;\n  maxWidth?: number;\n  prefix?: string;\n  suffix?: string;\n  status?: \"idle\" | \"checking\" | \"available\" | \"taken\" | \"invalid\";\n  /** Rule string like `.fieldName==targetValue` or custom resolver evaluated by FormGroup/WrapperInput */\n  acl?: string;\n  /** Explicit `data-testid` override. Defaults to `<name>-input` when unset. */\n  testid?: string;\n};\n\nexport type TextInput = Input & {\n  type: InputType.TEXT;\n};\n\n/**\n * A figure rather than text: the same `<input>` TextInputComponent draws, typed\n * `number` so the browser rejects letters and the field emits a number instead\n * of the digits typed into it. `min`/`max`/`step` ride onto the element — a\n * Field declaring `min: 1` means one is the smallest figure, not a hint.\n */\nexport type NumberInput = Input & {\n  type: InputType.NUMBER;\n  min?: number;\n  max?: number;\n  step?: number;\n};\n\nexport type PasswordInput = Input & {\n  type: InputType.PASSWORD;\n};\n\nexport type OtpInput = Input & {\n  type: InputType.OTP;\n  length: number;\n};\n\nexport type ToggleInput = Input & {\n  type: InputType.TOGGLE;\n};\n\nexport type ToggleRadioInput = Input & {\n  type: InputType.TOGGLE_RADIO;\n  options?: string[];\n  configs?: RadioInput[];\n  equalWidth?: boolean;\n  vertical?: boolean;\n  iconOnly?: boolean;\n};\n\nexport type RadioInput = Input & {\n  type: InputType.RADIO;\n  value: boolean;\n  id: string;\n};\n\nexport type RadioGroupInput = Input & {\n  type: InputType.RADIO_GROUP;\n  options?: string[];\n  configs?: RadioInput[];\n  vertical?: boolean;\n};\n\n/**\n * Draws one checkbox per option and holds every option picked, in option\n * order. Its options never come from an asset (libs/one ADR 0039): they are\n * bound through the host's `options` input, or placed as `m-checkbox`\n * children of a SectionFormItem.\n */\nexport type CheckboxGroupInput = Input & {\n  type: InputType.CHECKBOX_GROUP;\n  vertical?: boolean;\n  /** Name of a `mag_assets/options/<name>.yml` asset, read when no options are bound or placed. */\n  optionsAsset?: string;\n};\n\nexport type DateInput = Input & {\n  type: InputType.DATE;\n  dateFormat?: string;\n  minDate?: Date;\n  maxDate?: Date;\n  disabledDates?: Date[];\n};\n\nexport type TextareaInput = Input & {\n  type: InputType.TEXTAREA;\n  /**\n   * Off for a field holding something the dictionary has no opinion about —\n   * markdown, a code block, an id. Absent everywhere else, which leaves the\n   * browser's own default.\n   */\n  spellcheck?: boolean;\n  /**\n   * Grows with what is typed instead of holding one height and scrolling.\n   * `--m-textarea-input-height` is then the floor it starts at and\n   * `--m-textarea-input-max-height` the ceiling it scrolls after. Opt-in: a\n   * Field in a form row keeps its one height so the row beside it does not\n   * move as somebody types.\n   */\n  autoGrow?: boolean;\n};\n\n/** What one option of a Dropdown or Multiselect holds. */\nexport type DropdownValue = string | number;\n\n/**\n * One choice. `V` narrows what `value` holds; it defaults to `string`, which is\n * what every OptionSet and option asset writes.\n */\nexport type DropdownOption<V extends DropdownValue = string> = {\n  value: V;\n  label: string;\n  /** Icon name, used by the Fields that render an option as a card. */\n  icon?: string;\n  disabled?: boolean;\n  /**\n   * The row a Field starts on when it holds no value of its own. One per list;\n   * the Field's own value outranks it (`presetDefaultOption`).\n   */\n  default?: boolean;\n  /**\n   * Authored text rather than an i18n key. A key is looked up by splitting on\n   * `.`, so a path like `order.name` would resolve to the `order` key and\n   * render that instead — the same reason a Button carries this flag.\n   */\n  noTranslate?: boolean;\n};\n\n/**\n * A `dropdown` holds one value, a `multiselect` a list of them — two Fields\n * over the same options config, never one Field switched by a flag.\n */\nexport type DropdownInput = Input & {\n  type: InputType.DROPDOWN | InputType.MULTISELECT;\n  options?:\n    | DropdownOption<DropdownValue>[]\n    | Signal<DropdownOption<DropdownValue>[]>;\n  /** Name of a `mag_assets/options/<name>.yml` asset to load options from at runtime. */\n  optionsAsset?: string;\n};\n\nexport type ColorInput = Input & {\n  type: InputType.COLOR;\n};\n\nexport type RangeInput = Input & {\n  type: InputType.RANGE;\n  min?: number;\n  max?: number;\n  step?: number;\n};\n\nexport type MultiRangeInput = Input & {\n  type: InputType.MULTI_RANGE;\n  min?: number;\n  max?: number;\n  step?: number;\n};\n\nexport type InputValue =\n  | boolean\n  | string\n  | number\n  | string[]\n  | File\n  | File[]\n  | undefined;\n\nexport type InputState = {\n  focused?: true;\n  touched?: true;\n};\n\nexport type SelectableCardItem = {\n  id: string;\n  disabled?: boolean;\n  inputs?: Record<string, unknown>;\n  // What this card was mapped from. Carried for an inline card body, which\n  // reads the row itself rather than the item wrapped around it — `inputs` is\n  // the component seat's half of the same thing, and a template has no inputs\n  // to fill.\n  row?: unknown;\n};\n\n/**\n * What an inline card body reads. The same three facts a card component is\n * handed through `inputs` — the row, whether it is picked, whether it is\n * inert — plus the `@for` positions a template can use and a component seat\n * cannot see. `$implicit` is the item, so `let-item` alone reaches the row.\n */\nexport type SelectableCardContext = {\n  $implicit: SelectableCardItem;\n  item: SelectableCardItem;\n  // The item's own `row`, lifted so a body reads what it was mapped from\n  // without walking the wrapper.\n  row: unknown;\n  selected: boolean;\n  disabled: boolean;\n  index: number;\n  first: boolean;\n  last: boolean;\n};\n\nexport type SelectableCardInput = Input & {\n  type: InputType.SELECTABLE_CARD;\n  multiSelect?: boolean;\n  isCheckboxVisible?: boolean;\n  vertical?: boolean;\n  variant?: string;\n  /**\n   * Static cards, named the same way a Dropdown names its choices so one\n   * options asset serves both. Each option's `value` becomes the card's id and\n   * its `label` the card's body — only used when no card component is bound.\n   */\n  options?: DropdownOption[] | Signal<DropdownOption[]>;\n  optionsAsset?: string;\n};\n\nexport type RatingInput = Input & {\n  type: InputType.RATING;\n  /**\n   * Fill of the selected stars: a theme colour key (`mm`, `success`, …) or a\n   * raw CSS colour, resolved against the active theme. Unset keeps the gold.\n   */\n  color?: string;\n  /** Draws the stars at twice their size; label and errors stay as they are. */\n  enlarge?: boolean;\n};\n\nexport type SearchInput = Input & {\n  type: InputType.SEARCH;\n  searchLabel?: string;\n  debounce?: number;\n};\n"],"mappings":"AAGA,IAAY;CAAZ,SAAY,WAAS;CACnB,UAAA,UAAA;CACA,UAAA,cAAA;CACA,UAAA,SAAA;CACA,UAAA,WAAA;CACA,UAAA,YAAA;CACA,UAAA,WAAA;CACA,UAAA,UAAA;CACA,UAAA,UAAA;CACA,UAAA,cAAA;CACA,UAAA,cAAA;CACA,UAAA,oBAAA;CACA,UAAA,WAAA;CACA,UAAA,iBAAA;CACA,UAAA,cAAA;CACA,UAAA,iBAAA;CACA,UAAA,cAAA;CACA,UAAA,UAAA;CACA,UAAA,YAAA;CACA,UAAA,WAAA;CACA,UAAA,iBAAA;CACA,UAAA,YAAA;CACA,UAAA,iBAAA;CACA,UAAA,kBAAA;CACA,UAAA,YAAA;CACA,UAAA,SAAA;CACA,UAAA,WAAA;CACA,UAAA,WAAA;CACA,UAAA,UAAA;CACA,UAAA,WAAA;CACA,UAAA,cAAA;CACA,UAAA,qBAAA;CACA,UAAA,YAAA;CACA,UAAA,eAAA;AACF,EAAA,CAlCY,cAAA,YAAS,CAAA,EAAA"}
+{"version":3,"file":"magmonium-one-input-DqHPorA1.mjs","names":[],"sources":["../../../../libs/one/src/lib/shared/ui/input/model/input.ts"],"sourcesContent":["import { Signal } from '@angular/core';\nimport { Config } from '../../../type/config/config-type';\n\nexport enum InputType {\n  TEXT = 'text',\n  PASSWORD = 'password',\n  OTP = 'one-time-password',\n  EMAIL = 'email',\n  NUMBER = 'number',\n  PHONE = 'phone',\n  DATE = 'date',\n  TIME = 'time',\n  DATETIME = 'datetime',\n  CHECKBOX = 'checkbox',\n  CHECKBOX_GROUP = 'checkbox_group',\n  RADIO = 'radio',\n  RADIO_GROUP = 'radio_group',\n  DROPDOWN = 'dropdown',\n  MULTISELECT = 'multiselect',\n  TEXTAREA = 'textarea',\n  FILE = 'file',\n  FOLDER = 'folder',\n  RANGE = 'range',\n  MULTI_RANGE = 'multi_range',\n  TOGGLE = 'toggle',\n  DATA_TOGGLE = 'data_toggle',\n  TOGGLE_RADIO = 'toggle_radio',\n  SEARCH = 'search',\n  URL = 'url',\n  COLOR = 'color',\n  MONTH = 'month',\n  WEEK = 'week',\n  MONEY = 'money',\n  AUTOFILL = 'autofill',\n  SELECTABLE_CARD = 'selectable_card',\n  RATING = 'rating',\n  COMPONENT = 'component',\n}\n\n/**\n * One shape a typed value may take, inlined into a Field's compiled config by\n * `FieldCompiler` from `mag_assets/patterns/<name>.yml` (libs/one ADR 0017).\n * The name does not survive into the browser as a lookup — it rides along so a\n * failing rule can be named in a devtools inspection and so the editor can read\n * back what a Field points at.\n *\n * `expression` arrives anchored (`^(?:…)$`); the asset stores it unanchored.\n * `.test()` matches anywhere in a value, so an unanchored `[0-9]{4}` would pass\n * `abc1234xyz` — and under `any` semantics an unanchored `email` would pass a\n * whole sentence that merely contains an address.\n */\nexport type PatternRule = {\n  name: string;\n  /** Already wrapped `^(?:…)$` by the compiler — used verbatim. */\n  expression: string;\n  /** Narrowed to `i` at author time: `g` carries `lastIndex` between\n   * `.test()` calls, and `m` reverses what the anchors just established. */\n  flags?: string;\n  /** i18n key shown when this rule is the only one a Field declares. */\n  message: string;\n};\n\nexport type Input = Config & {\n  type: InputType;\n  label: string;\n  required?: true;\n  /**\n   * Accepted shapes, any one of which passes (libs/one ADR 0017). Authored as\n   * `patterns: [<name>, ...]` naming PatternAssets; what reaches the browser is\n   * the resolved rules. Asset-only — a list cannot ride on the tag (ADR 0010).\n   */\n  patterns?: PatternRule[];\n  /**\n   * Shown when several `patterns` are declared and the value matches none.\n   * Required in that case, because no one shape's own complaint is true when\n   * the value could have taken another. Ignored for a single pattern, which\n   * speaks for itself.\n   */\n  patternMessage?: string;\n  icon?: string;\n  one?: boolean;\n  /**\n   * The [MessageVariable] values this Field's `label`, `placeholder` and\n   * validation messages are resolved with. One record for the Field rather\n   * than one per text: they are the same sentence's slots, and a page holds\n   * one record for every dynamic value it draws (m-one-ui ADR 0066).\n   *\n   * A Record, so it never rides as a literal attribute (ADR 0010) — a Field\n   * with dynamic slots takes it bound, off the page member holding them.\n   */\n  params?: Record<string, string>;\n  placeholder?: string;\n  button?: string;\n  buttonAction?: string;\n  /**\n   * Same rule grammar as `acl`, applied to the button beside the field rather\n   * than to the field itself: unmatched leaves it disabled instead of hiding it.\n   * A button that appears and disappears as the field's value changes reads as\n   * the layout breaking; one that greys out reads as a step not reached yet.\n   */\n  buttonAcl?: string;\n  disabled?: boolean;\n  readonly?: boolean;\n  maxWidth?: number;\n  prefix?: string;\n  suffix?: string;\n  status?: \"idle\" | \"checking\" | \"available\" | \"taken\" | \"invalid\";\n  /** Rule string like `.fieldName==targetValue` or custom resolver evaluated by FormGroup/WrapperInput */\n  acl?: string;\n  /** Explicit `data-testid` override. Defaults to `<name>-input` when unset. */\n  testid?: string;\n};\n\nexport type TextInput = Input & {\n  type: InputType.TEXT;\n};\n\n/**\n * A figure rather than text: the same `<input>` TextInputComponent draws, typed\n * `number` so the browser rejects letters and the field emits a number instead\n * of the digits typed into it. `min`/`max`/`step` ride onto the element — a\n * Field declaring `min: 1` means one is the smallest figure, not a hint.\n */\nexport type NumberInput = Input & {\n  type: InputType.NUMBER;\n  min?: number;\n  max?: number;\n  step?: number;\n};\n\nexport type PasswordInput = Input & {\n  type: InputType.PASSWORD;\n};\n\nexport type OtpInput = Input & {\n  type: InputType.OTP;\n  length: number;\n};\n\nexport type ToggleInput = Input & {\n  type: InputType.TOGGLE;\n};\n\nexport type ToggleRadioInput = Input & {\n  type: InputType.TOGGLE_RADIO;\n  options?: string[];\n  configs?: RadioInput[];\n  equalWidth?: boolean;\n  vertical?: boolean;\n  iconOnly?: boolean;\n};\n\nexport type RadioInput = Input & {\n  type: InputType.RADIO;\n  value: boolean;\n  id: string;\n};\n\nexport type RadioGroupInput = Input & {\n  type: InputType.RADIO_GROUP;\n  options?: string[];\n  configs?: RadioInput[];\n  vertical?: boolean;\n};\n\n/**\n * Draws one checkbox per option and holds every option picked, in option\n * order. Its options never come from an asset (libs/one ADR 0039): they are\n * bound through the host's `options` input, or placed as `m-checkbox`\n * children of a SectionFormItem.\n */\nexport type CheckboxGroupInput = Input & {\n  type: InputType.CHECKBOX_GROUP;\n  vertical?: boolean;\n  /** Name of a `mag_assets/options/<name>.yml` asset, read when no options are bound or placed. */\n  optionsAsset?: string;\n};\n\nexport type DateInput = Input & {\n  type: InputType.DATE;\n  dateFormat?: string;\n  minDate?: Date;\n  maxDate?: Date;\n  disabledDates?: Date[];\n};\n\nexport type TextareaInput = Input & {\n  type: InputType.TEXTAREA;\n  /**\n   * Off for a field holding something the dictionary has no opinion about —\n   * markdown, a code block, an id. Absent everywhere else, which leaves the\n   * browser's own default.\n   */\n  spellcheck?: boolean;\n  /**\n   * Grows with what is typed instead of holding one height and scrolling.\n   * `--m-textarea-input-height` is then the floor it starts at and\n   * `--m-textarea-input-max-height` the ceiling it scrolls after. Opt-in: a\n   * Field in a form row keeps its one height so the row beside it does not\n   * move as somebody types.\n   */\n  autoGrow?: boolean;\n};\n\n/** What one option of a Dropdown or Multiselect holds. */\nexport type DropdownValue = string | number;\n\n/**\n * One choice. `V` narrows what `value` holds; it defaults to `string`, which is\n * what every OptionSet and option asset writes.\n */\nexport type DropdownOption<V extends DropdownValue = string> = {\n  value: V;\n  label: string;\n  /** Icon name, used by the Fields that render an option as a card. */\n  icon?: string;\n  disabled?: boolean;\n  /**\n   * The row a Field starts on when it holds no value of its own. One per list;\n   * the Field's own value outranks it (`presetDefaultOption`).\n   */\n  default?: boolean;\n  /**\n   * Authored text rather than an i18n key. A key is looked up by splitting on\n   * `.`, so a path like `order.name` would resolve to the `order` key and\n   * render that instead — the same reason a Button carries this flag.\n   */\n  noTranslate?: boolean;\n  /**\n   * How many headers the row sits beneath, drawn as one indent each — a\n   * sub-section's header and its rows under the section that holds them.\n   * Absent is flush, as every flat list already is.\n   */\n  depth?: number;\n};\n\n/**\n * A `dropdown` holds one value, a `multiselect` a list of them — two Fields\n * over the same options config, never one Field switched by a flag.\n */\nexport type DropdownInput = Input & {\n  type: InputType.DROPDOWN | InputType.MULTISELECT;\n  options?:\n    | DropdownOption<DropdownValue>[]\n    | Signal<DropdownOption<DropdownValue>[]>;\n  /** Name of a `mag_assets/options/<name>.yml` asset to load options from at runtime. */\n  optionsAsset?: string;\n};\n\nexport type ColorInput = Input & {\n  type: InputType.COLOR;\n};\n\nexport type RangeInput = Input & {\n  type: InputType.RANGE;\n  min?: number;\n  max?: number;\n  step?: number;\n};\n\nexport type MultiRangeInput = Input & {\n  type: InputType.MULTI_RANGE;\n  min?: number;\n  max?: number;\n  step?: number;\n};\n\nexport type InputValue =\n  | boolean\n  | string\n  | number\n  | string[]\n  | File\n  | File[]\n  | undefined;\n\nexport type InputState = {\n  focused?: true;\n  touched?: true;\n};\n\nexport type SelectableCardItem = {\n  id: string;\n  disabled?: boolean;\n  inputs?: Record<string, unknown>;\n  // What this card was mapped from. Carried for an inline card body, which\n  // reads the row itself rather than the item wrapped around it — `inputs` is\n  // the component seat's half of the same thing, and a template has no inputs\n  // to fill.\n  row?: unknown;\n};\n\n/**\n * What an inline card body reads. The same three facts a card component is\n * handed through `inputs` — the row, whether it is picked, whether it is\n * inert — plus the `@for` positions a template can use and a component seat\n * cannot see. `$implicit` is the item, so `let-item` alone reaches the row.\n */\nexport type SelectableCardContext = {\n  $implicit: SelectableCardItem;\n  item: SelectableCardItem;\n  // The item's own `row`, lifted so a body reads what it was mapped from\n  // without walking the wrapper.\n  row: unknown;\n  selected: boolean;\n  disabled: boolean;\n  index: number;\n  first: boolean;\n  last: boolean;\n};\n\nexport type SelectableCardInput = Input & {\n  type: InputType.SELECTABLE_CARD;\n  multiSelect?: boolean;\n  isCheckboxVisible?: boolean;\n  vertical?: boolean;\n  variant?: string;\n  /**\n   * Static cards, named the same way a Dropdown names its choices so one\n   * options asset serves both. Each option's `value` becomes the card's id and\n   * its `label` the card's body — only used when no card component is bound.\n   */\n  options?: DropdownOption[] | Signal<DropdownOption[]>;\n  optionsAsset?: string;\n};\n\nexport type RatingInput = Input & {\n  type: InputType.RATING;\n  /**\n   * Fill of the selected stars: a theme colour key (`mm`, `success`, …) or a\n   * raw CSS colour, resolved against the active theme. Unset keeps the gold.\n   */\n  color?: string;\n  /** Draws the stars at twice their size; label and errors stay as they are. */\n  enlarge?: boolean;\n};\n\nexport type SearchInput = Input & {\n  type: InputType.SEARCH;\n  searchLabel?: string;\n  debounce?: number;\n};\n"],"mappings":"AAGA,IAAY;CAAZ,SAAY,WAAS;CACnB,UAAA,UAAA;CACA,UAAA,cAAA;CACA,UAAA,SAAA;CACA,UAAA,WAAA;CACA,UAAA,YAAA;CACA,UAAA,WAAA;CACA,UAAA,UAAA;CACA,UAAA,UAAA;CACA,UAAA,cAAA;CACA,UAAA,cAAA;CACA,UAAA,oBAAA;CACA,UAAA,WAAA;CACA,UAAA,iBAAA;CACA,UAAA,cAAA;CACA,UAAA,iBAAA;CACA,UAAA,cAAA;CACA,UAAA,UAAA;CACA,UAAA,YAAA;CACA,UAAA,WAAA;CACA,UAAA,iBAAA;CACA,UAAA,YAAA;CACA,UAAA,iBAAA;CACA,UAAA,kBAAA;CACA,UAAA,YAAA;CACA,UAAA,SAAA;CACA,UAAA,WAAA;CACA,UAAA,WAAA;CACA,UAAA,UAAA;CACA,UAAA,WAAA;CACA,UAAA,cAAA;CACA,UAAA,qBAAA;CACA,UAAA,YAAA;CACA,UAAA,eAAA;AACF,EAAA,CAlCY,cAAA,YAAS,CAAA,EAAA"}

package/fesm2022/magmonium-one.mjs

@@ -24,7 +24,7 @@ import { t as RadioInputComponent } from "./magmonium-one-radio-BsQv0Wof.mjs";
 import { t as TextInputComponent } from "./magmonium-one-text-Bo4XPBXB.mjs";
 import { r as BaseArrayInputComponent, t as MultiRangeInputComponent } from "./magmonium-one-multi-range-BnWtK-O0.mjs";
 import { t as RangeInputComponent } from "./magmonium-one-range-DPR659yG.mjs";
-import { n as DROPDOWN_IMPORTS, r as DROPDOWN_TEMPLATE, t as BaseDropdownComponent } from "./magmonium-one-base-dropdown-7XYsiJBX.mjs";
+import { n as DROPDOWN_IMPORTS, r as DROPDOWN_TEMPLATE, t as BaseDropdownComponent } from "./magmonium-one-base-dropdown-Tf6PltuH.mjs";
 import { o as isEditableImage, s as outputSize } from "./magmonium-one-image-frame-BTSaUSAi.mjs";
 import * as i0 from "@angular/core";
 import { ApplicationRef, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, DOCUMENT, DestroyRef, Directive, ElementRef, EventEmitter, HostAttributeToken, HostBinding, HostListener, Injectable, InjectionToken, Injector, Input, Output, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation, afterEveryRender, afterNextRender, afterRenderEffect, computed, contentChild, contentChildren, createComponent, effect, forwardRef, inject, input, inputBinding, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, outputBinding, provideAppInitializer, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection, reflectComponentType, runInInjectionContext, signal, twoWayBinding, untracked, viewChild, viewChildren } from "@angular/core";
@@ -30886,7 +30886,7 @@ var PluginComponent = class PluginComponent {
     }
   `,
 		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-plugin{display:block}.m-plugin__loading,.m-plugin__broken{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px}.m-plugin__spinner{width:20px;height:20px;border:2px solid var(--m-backdrop-border);border-top-color:var(--m-mm);border-radius:50%;animation:plugin-spin .8s linear infinite}.m-plugin__broken{color:var(--m-text-secondary)}.m-plugin__detail{font-size:.85em}@keyframes plugin-spin{to{transform:rotate(360deg)}}\n"],
+		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-plugin{display:block;width:100%}.m-plugin__loading,.m-plugin__broken{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px}.m-plugin__spinner{width:20px;height:20px;border:2px solid var(--m-backdrop-border);border-top-color:var(--m-mm);border-radius:50%;animation:plugin-spin .8s linear infinite}.m-plugin__broken{color:var(--m-text-secondary)}.m-plugin__detail{font-size:.85em}@keyframes plugin-spin{to{transform:rotate(360deg)}}\n"],
 		dependencies: [{
 			kind: "component",
 			type: IconComponent,
@@ -30945,7 +30945,7 @@ i0.ɵɵngDeclareClassMetadata({
   `,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
-			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-plugin{display:block}.m-plugin__loading,.m-plugin__broken{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px}.m-plugin__spinner{width:20px;height:20px;border:2px solid var(--m-backdrop-border);border-top-color:var(--m-mm);border-radius:50%;animation:plugin-spin .8s linear infinite}.m-plugin__broken{color:var(--m-text-secondary)}.m-plugin__detail{font-size:.85em}@keyframes plugin-spin{to{transform:rotate(360deg)}}\n"]
+			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-plugin{display:block;width:100%}.m-plugin__loading,.m-plugin__broken{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px}.m-plugin__spinner{width:20px;height:20px;border:2px solid var(--m-backdrop-border);border-top-color:var(--m-mm);border-radius:50%;animation:plugin-spin .8s linear infinite}.m-plugin__broken{color:var(--m-text-secondary)}.m-plugin__detail{font-size:.85em}@keyframes plugin-spin{to{transform:rotate(360deg)}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -47375,9 +47375,8 @@ function provideMagWcConfig(options) {
 		},
 		{
 			provide: MODAL_STORE_REF,
-			useFactory: () => {
-				return SharedStoreRegistry.getHostInjector()?.get(MODAL_STORE_REF, null) ?? null;
-			}
+			useFactory: (localStore) => SharedStoreRegistry.getHostInjector()?.get(MODAL_STORE_REF, null) ?? localStore,
+			deps: [ModalStore]
 		},
 		{
 			provide: ModalStore,