@magmonium/one 0.3.8 → 0.3.9

package/fesm2022/{magmonium-one-image-editor-D7mMWvt1.mjs → magmonium-one-image-editor-DA37tqHz.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, inject, viewChild, signal, computed, effect, DestroyRef, ChangeDetectionStrategy, Component } from '@angular/core';
-import { M as MODAL_REF, a as MIN_ZOOM, I as InputType, b as MAX_ZOOM, p as parseRatio, o as outputSize, c as cropRect, i as initialFraming, e as encodeFramed, d as drawFramed, r as renameForType, f as clampFraming, B as ButtonComponent, H as HeaderComponent, R as RangeInputComponent } from './magmonium-one-magmonium-one-CuMK-o0U.mjs';
+import { M as MODAL_REF, a as MIN_ZOOM, I as InputType, b as MAX_ZOOM, p as parseRatio, o as outputSize, c as cropRect, i as initialFraming, e as encodeFramed, d as drawFramed, r as renameForType, f as clampFraming, B as ButtonComponent, H as HeaderComponent, R as RangeInputComponent } from './magmonium-one-magmonium-one-BEK3zmye.mjs';
 
 const WHEEL_ZOOM_RATE = 0.0015;
 const distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
@@ -287,4 +287,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: true }] }], stage: [{ type: i0.ViewChild, args: ['stage', { isSignal: true }] }] } });
 
 export { ImageEditorComponent };
-//# sourceMappingURL=magmonium-one-image-editor-D7mMWvt1.mjs.map
+//# sourceMappingURL=magmonium-one-image-editor-DA37tqHz.mjs.map

package/fesm2022/{magmonium-one-image-editor-D7mMWvt1.mjs.map → magmonium-one-image-editor-DA37tqHz.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"magmonium-one-image-editor-D7mMWvt1.mjs","sources":["../../../../libs/one/src/lib/shared/ui/input/ui/file-upload-input/image-editor.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '../../../button/ui/button';\nimport { HeaderComponent } from '../../../header';\nimport { RangeInputComponent } from '../range/range';\nimport { InputType, RangeInput } from '../../model/input';\nimport { MODAL_REF, ModalRef } from '../../../../config/modal-ref';\nimport {\n  clampFraming,\n  cropRect,\n  drawFramed,\n  encodeFramed,\n  Framing,\n  FrameSize,\n  initialFraming,\n  MAX_ZOOM,\n  MIN_ZOOM,\n  outputSize,\n  parseRatio,\n  renameForType,\n} from './image-frame';\n\n/**\n * What an ImageEditor closes with. The framed file on an apply, `unreadable`\n * when the picture never decoded, and neither for a dismissal — a flat object\n * rather than a union, so the web-component build (no `strict`) reads it too.\n */\nexport type ImageEditorResult = { file?: File; unreadable?: boolean };\n\ntype Point = { x: number; y: number };\n\nconst WHEEL_ZOOM_RATE = 0.0015;\n\nconst distance = (a: Point, b: Point): number =>\n  Math.hypot(a.x - b.x, a.y - b.y);\n\n@Component({\n  selector: 'm-image-editor',\n  template: `\n    <div class=\"image-editor\">\n      <m-header\n        [level]=\"3\"\n        label=\"edit-image-size\"\n        [params]=\"sizeParams()\"\n      />\n      <div\n        #stage\n        class=\"image-editor__stage\"\n        [style.aspect-ratio]=\"aspect()\"\n        [style.--m-image-editor-aspect]=\"aspect()\"\n        [class.image-editor__stage--panning]=\"isPanning()\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"\n        (wheel)=\"onWheel($event)\"\n      >\n        @if (sourceUrl(); as url) {\n          <img\n            class=\"image-editor__image\"\n            [src]=\"url\"\n            alt=\"\"\n            draggable=\"false\"\n            [style.width.px]=\"imageBox().width\"\n            [style.height.px]=\"imageBox().height\"\n            [style.transform]=\"imageBox().transform\"\n          />\n        }\n      </div>\n      <m-range\n        [config]=\"zoomConfig()\"\n        [value]=\"zoomPercent()\"\n        (valueChange)=\"onZoom($event)\"\n      />\n      <!-- asset: buttons/okay.yml. No cancel beside it: the Modal's own close\n           is the cancel, and it drops the image the same way. -->\n      <m-one-button\n        name=\"okay\"\n        label=\"apply\"\n        [disabled]=\"!source() || isApplying()\"\n        (clicked)=\"apply()\"\n      />\n    </div>\n  `,\n  imports: [ButtonComponent, HeaderComponent, RangeInputComponent],\n  styleUrl: './image-editor.sass',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ImageEditorComponent {\n  readonly file = input.required<File>();\n  readonly ratio = input.required<string>();\n  readonly width = input.required<number>();\n\n  readonly #modalRef = inject<ModalRef<ImageEditorResult | undefined>>(MODAL_REF);\n  private readonly stage = viewChild<ElementRef<HTMLDivElement>>('stage');\n\n  protected readonly source = signal<ImageBitmap | undefined>(undefined);\n  protected readonly sourceUrl = signal<string | undefined>(undefined);\n  protected readonly isApplying = signal(false);\n  private readonly framing = signal<Framing>({ cx: 0, cy: 0, zoom: MIN_ZOOM });\n  private readonly stageWidth = signal(0);\n  private readonly pointers = new Map<number, Point>();\n  protected readonly isPanning = signal(false);\n  #settled = false;\n\n  protected readonly zoomConfig = computed<RangeInput>(() => ({\n    name: 'zoom',\n    label: 'zoom',\n    type: InputType.RANGE,\n    min: MIN_ZOOM * 100,\n    max: MAX_ZOOM * 100,\n  }));\n\n  protected readonly aspect = computed(() => parseRatio(this.ratio()) ?? 1);\n\n  private readonly output = computed<FrameSize | undefined>(() =>\n    outputSize(this.ratio(), this.width())\n  );\n\n  protected readonly sizeParams = computed(() => {\n    const size = this.output();\n    return {\n      width: String(size?.width ?? ''),\n      height: String(size?.height ?? ''),\n    };\n  });\n\n  private readonly imageSize = computed<FrameSize | undefined>(() => {\n    const bitmap = this.source();\n    return bitmap ? { width: bitmap.width, height: bitmap.height } : undefined;\n  });\n\n  protected readonly zoomPercent = computed(() =>\n    String(Math.round(this.framing().zoom * 100))\n  );\n\n  /** The whole picture laid out so the box shows exactly the crop. */\n  protected readonly imageBox = computed(() => {\n    const image = this.imageSize();\n    const stage = this.stageWidth();\n    if (!image || !stage) return { width: 0, height: 0, transform: 'none' };\n    const rect = cropRect(image, this.aspect(), this.framing());\n    const scale = stage / rect.width;\n    return {\n      width: image.width * scale,\n      height: image.height * scale,\n      transform: `translate(${-rect.x * scale}px, ${-rect.y * scale}px)`,\n    };\n  });\n\n  private readonly load = effect((onCleanup) => {\n    const file = this.file();\n    let cancelled = false;\n    const url = URL.createObjectURL(file);\n    this.sourceUrl.set(url);\n    // EXIF orientation applied here, so the geometry below and the <img> the\n    // stage draws agree on which way is up.\n    createImageBitmap(file, { imageOrientation: 'from-image' })\n      .then((bitmap) => {\n        if (cancelled) {\n          bitmap.close();\n          return;\n        }\n        this.framing.set(\n          initialFraming({ width: bitmap.width, height: bitmap.height })\n        );\n        this.source.set(bitmap);\n      })\n      .catch(() => {\n        if (!cancelled) this.settle({ unreadable: true });\n      });\n    onCleanup(() => {\n      cancelled = true;\n      URL.revokeObjectURL(url);\n      this.source()?.close();\n    });\n  });\n\n  private readonly measure = effect((onCleanup) => {\n    const stage = this.stage()?.nativeElement;\n    if (!stage) return;\n    this.stageWidth.set(stage.clientWidth);\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(([entry]) =>\n      this.stageWidth.set(entry.contentRect.width)\n    );\n    observer.observe(stage);\n    onCleanup(() => observer.disconnect());\n  });\n\n  // The Modal's own close affordance destroys the body without a word, and a\n  // dismissal is a cancel: whoever opened the editor is still waiting.\n  private readonly reportDismissal = inject(DestroyRef).onDestroy(() =>\n    this.settle(undefined)\n  );\n\n  protected onPointerDown = (event: PointerEvent): void => {\n    if (!this.source()) return;\n    (event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);\n    this.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });\n    this.isPanning.set(true);\n  };\n\n  protected onPointerMove = (event: PointerEvent): void => {\n    const previous = this.pointers.get(event.pointerId);\n    if (!previous) return;\n    const next = { x: event.clientX, y: event.clientY };\n    const others = [...this.pointers.entries()].filter(\n      ([id]) => id !== event.pointerId\n    );\n    if (others.length === 1) {\n      // Pinch: the gap between two fingers is the zoom.\n      const anchor = others[0][1];\n      const before = distance(previous, anchor);\n      if (before > 0) this.zoomBy(distance(next, anchor) / before);\n    } else if (others.length === 0) {\n      this.panBy(next.x - previous.x, next.y - previous.y);\n    }\n    this.pointers.set(event.pointerId, next);\n  };\n\n  protected onPointerUp = (event: PointerEvent): void => {\n    this.pointers.delete(event.pointerId);\n    this.isPanning.set(this.pointers.size > 0);\n  };\n\n  protected onWheel = (event: WheelEvent): void => {\n    if (!this.source()) return;\n    event.preventDefault();\n    this.zoomBy(Math.exp(-event.deltaY * WHEEL_ZOOM_RATE));\n  };\n\n  protected onZoom = (percent: string): void => {\n    const zoom = Number(percent) / 100;\n    if (!Number.isFinite(zoom)) return;\n    this.updateFraming((framing) => ({ ...framing, zoom }));\n  };\n\n  protected apply = async (): Promise<void> => {\n    const bitmap = this.source();\n    const image = this.imageSize();\n    const output = this.output();\n    if (!bitmap || !image || !output || this.isApplying()) return;\n    this.isApplying.set(true);\n    try {\n      const rect = cropRect(image, this.aspect(), this.framing());\n      const blob = await encodeFramed(drawFramed(bitmap, rect, output));\n      const original = this.file();\n      this.settle({\n        file: new File([blob], renameForType(original.name, blob.type), {\n          type: blob.type,\n          lastModified: Date.now(),\n        }),\n      });\n    } catch {\n      this.settle({ unreadable: true });\n    }\n  };\n\n  /** Screen pixels dragged, moved into source pixels at the current scale. */\n  private panBy = (dx: number, dy: number): void => {\n    const image = this.imageSize();\n    const stage = this.stageWidth();\n    if (!image || !stage) return;\n    const rect = cropRect(image, this.aspect(), this.framing());\n    const perPixel = rect.width / stage;\n    this.updateFraming((framing) => ({\n      ...framing,\n      cx: framing.cx - dx * perPixel,\n      cy: framing.cy - dy * perPixel,\n    }));\n  };\n\n  private zoomBy = (factor: number): void => {\n    this.updateFraming((framing) => ({\n      ...framing,\n      zoom: framing.zoom * factor,\n    }));\n  };\n\n  private updateFraming = (change: (framing: Framing) => Framing): void => {\n    const image = this.imageSize();\n    if (!image) return;\n    this.framing.update((framing) =>\n      clampFraming(image, this.aspect(), change(framing))\n    );\n  };\n\n  private settle = (result: ImageEditorResult | undefined): void => {\n    if (this.#settled) return;\n    this.#settled = true;\n    this.#modalRef.close(result);\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"magmonium-one-image-editor-DA37tqHz.mjs","sources":["../../../../libs/one/src/lib/shared/ui/input/ui/file-upload-input/image-editor.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '../../../button/ui/button';\nimport { HeaderComponent } from '../../../header';\nimport { RangeInputComponent } from '../range/range';\nimport { InputType, RangeInput } from '../../model/input';\nimport { MODAL_REF, ModalRef } from '../../../../config/modal-ref';\nimport {\n  clampFraming,\n  cropRect,\n  drawFramed,\n  encodeFramed,\n  Framing,\n  FrameSize,\n  initialFraming,\n  MAX_ZOOM,\n  MIN_ZOOM,\n  outputSize,\n  parseRatio,\n  renameForType,\n} from './image-frame';\n\n/**\n * What an ImageEditor closes with. The framed file on an apply, `unreadable`\n * when the picture never decoded, and neither for a dismissal — a flat object\n * rather than a union, so the web-component build (no `strict`) reads it too.\n */\nexport type ImageEditorResult = { file?: File; unreadable?: boolean };\n\ntype Point = { x: number; y: number };\n\nconst WHEEL_ZOOM_RATE = 0.0015;\n\nconst distance = (a: Point, b: Point): number =>\n  Math.hypot(a.x - b.x, a.y - b.y);\n\n@Component({\n  selector: 'm-image-editor',\n  template: `\n    <div class=\"image-editor\">\n      <m-header\n        [level]=\"3\"\n        label=\"edit-image-size\"\n        [params]=\"sizeParams()\"\n      />\n      <div\n        #stage\n        class=\"image-editor__stage\"\n        [style.aspect-ratio]=\"aspect()\"\n        [style.--m-image-editor-aspect]=\"aspect()\"\n        [class.image-editor__stage--panning]=\"isPanning()\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"\n        (wheel)=\"onWheel($event)\"\n      >\n        @if (sourceUrl(); as url) {\n          <img\n            class=\"image-editor__image\"\n            [src]=\"url\"\n            alt=\"\"\n            draggable=\"false\"\n            [style.width.px]=\"imageBox().width\"\n            [style.height.px]=\"imageBox().height\"\n            [style.transform]=\"imageBox().transform\"\n          />\n        }\n      </div>\n      <m-range\n        [config]=\"zoomConfig()\"\n        [value]=\"zoomPercent()\"\n        (valueChange)=\"onZoom($event)\"\n      />\n      <!-- asset: buttons/okay.yml. No cancel beside it: the Modal's own close\n           is the cancel, and it drops the image the same way. -->\n      <m-one-button\n        name=\"okay\"\n        label=\"apply\"\n        [disabled]=\"!source() || isApplying()\"\n        (clicked)=\"apply()\"\n      />\n    </div>\n  `,\n  imports: [ButtonComponent, HeaderComponent, RangeInputComponent],\n  styleUrl: './image-editor.sass',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ImageEditorComponent {\n  readonly file = input.required<File>();\n  readonly ratio = input.required<string>();\n  readonly width = input.required<number>();\n\n  readonly #modalRef = inject<ModalRef<ImageEditorResult | undefined>>(MODAL_REF);\n  private readonly stage = viewChild<ElementRef<HTMLDivElement>>('stage');\n\n  protected readonly source = signal<ImageBitmap | undefined>(undefined);\n  protected readonly sourceUrl = signal<string | undefined>(undefined);\n  protected readonly isApplying = signal(false);\n  private readonly framing = signal<Framing>({ cx: 0, cy: 0, zoom: MIN_ZOOM });\n  private readonly stageWidth = signal(0);\n  private readonly pointers = new Map<number, Point>();\n  protected readonly isPanning = signal(false);\n  #settled = false;\n\n  protected readonly zoomConfig = computed<RangeInput>(() => ({\n    name: 'zoom',\n    label: 'zoom',\n    type: InputType.RANGE,\n    min: MIN_ZOOM * 100,\n    max: MAX_ZOOM * 100,\n  }));\n\n  protected readonly aspect = computed(() => parseRatio(this.ratio()) ?? 1);\n\n  private readonly output = computed<FrameSize | undefined>(() =>\n    outputSize(this.ratio(), this.width())\n  );\n\n  protected readonly sizeParams = computed(() => {\n    const size = this.output();\n    return {\n      width: String(size?.width ?? ''),\n      height: String(size?.height ?? ''),\n    };\n  });\n\n  private readonly imageSize = computed<FrameSize | undefined>(() => {\n    const bitmap = this.source();\n    return bitmap ? { width: bitmap.width, height: bitmap.height } : undefined;\n  });\n\n  protected readonly zoomPercent = computed(() =>\n    String(Math.round(this.framing().zoom * 100))\n  );\n\n  /** The whole picture laid out so the box shows exactly the crop. */\n  protected readonly imageBox = computed(() => {\n    const image = this.imageSize();\n    const stage = this.stageWidth();\n    if (!image || !stage) return { width: 0, height: 0, transform: 'none' };\n    const rect = cropRect(image, this.aspect(), this.framing());\n    const scale = stage / rect.width;\n    return {\n      width: image.width * scale,\n      height: image.height * scale,\n      transform: `translate(${-rect.x * scale}px, ${-rect.y * scale}px)`,\n    };\n  });\n\n  private readonly load = effect((onCleanup) => {\n    const file = this.file();\n    let cancelled = false;\n    const url = URL.createObjectURL(file);\n    this.sourceUrl.set(url);\n    // EXIF orientation applied here, so the geometry below and the <img> the\n    // stage draws agree on which way is up.\n    createImageBitmap(file, { imageOrientation: 'from-image' })\n      .then((bitmap) => {\n        if (cancelled) {\n          bitmap.close();\n          return;\n        }\n        this.framing.set(\n          initialFraming({ width: bitmap.width, height: bitmap.height })\n        );\n        this.source.set(bitmap);\n      })\n      .catch(() => {\n        if (!cancelled) this.settle({ unreadable: true });\n      });\n    onCleanup(() => {\n      cancelled = true;\n      URL.revokeObjectURL(url);\n      this.source()?.close();\n    });\n  });\n\n  private readonly measure = effect((onCleanup) => {\n    const stage = this.stage()?.nativeElement;\n    if (!stage) return;\n    this.stageWidth.set(stage.clientWidth);\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(([entry]) =>\n      this.stageWidth.set(entry.contentRect.width)\n    );\n    observer.observe(stage);\n    onCleanup(() => observer.disconnect());\n  });\n\n  // The Modal's own close affordance destroys the body without a word, and a\n  // dismissal is a cancel: whoever opened the editor is still waiting.\n  private readonly reportDismissal = inject(DestroyRef).onDestroy(() =>\n    this.settle(undefined)\n  );\n\n  protected onPointerDown = (event: PointerEvent): void => {\n    if (!this.source()) return;\n    (event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);\n    this.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });\n    this.isPanning.set(true);\n  };\n\n  protected onPointerMove = (event: PointerEvent): void => {\n    const previous = this.pointers.get(event.pointerId);\n    if (!previous) return;\n    const next = { x: event.clientX, y: event.clientY };\n    const others = [...this.pointers.entries()].filter(\n      ([id]) => id !== event.pointerId\n    );\n    if (others.length === 1) {\n      // Pinch: the gap between two fingers is the zoom.\n      const anchor = others[0][1];\n      const before = distance(previous, anchor);\n      if (before > 0) this.zoomBy(distance(next, anchor) / before);\n    } else if (others.length === 0) {\n      this.panBy(next.x - previous.x, next.y - previous.y);\n    }\n    this.pointers.set(event.pointerId, next);\n  };\n\n  protected onPointerUp = (event: PointerEvent): void => {\n    this.pointers.delete(event.pointerId);\n    this.isPanning.set(this.pointers.size > 0);\n  };\n\n  protected onWheel = (event: WheelEvent): void => {\n    if (!this.source()) return;\n    event.preventDefault();\n    this.zoomBy(Math.exp(-event.deltaY * WHEEL_ZOOM_RATE));\n  };\n\n  protected onZoom = (percent: string): void => {\n    const zoom = Number(percent) / 100;\n    if (!Number.isFinite(zoom)) return;\n    this.updateFraming((framing) => ({ ...framing, zoom }));\n  };\n\n  protected apply = async (): Promise<void> => {\n    const bitmap = this.source();\n    const image = this.imageSize();\n    const output = this.output();\n    if (!bitmap || !image || !output || this.isApplying()) return;\n    this.isApplying.set(true);\n    try {\n      const rect = cropRect(image, this.aspect(), this.framing());\n      const blob = await encodeFramed(drawFramed(bitmap, rect, output));\n      const original = this.file();\n      this.settle({\n        file: new File([blob], renameForType(original.name, blob.type), {\n          type: blob.type,\n          lastModified: Date.now(),\n        }),\n      });\n    } catch {\n      this.settle({ unreadable: true });\n    }\n  };\n\n  /** Screen pixels dragged, moved into source pixels at the current scale. */\n  private panBy = (dx: number, dy: number): void => {\n    const image = this.imageSize();\n    const stage = this.stageWidth();\n    if (!image || !stage) return;\n    const rect = cropRect(image, this.aspect(), this.framing());\n    const perPixel = rect.width / stage;\n    this.updateFraming((framing) => ({\n      ...framing,\n      cx: framing.cx - dx * perPixel,\n      cy: framing.cy - dy * perPixel,\n    }));\n  };\n\n  private zoomBy = (factor: number): void => {\n    this.updateFraming((framing) => ({\n      ...framing,\n      zoom: framing.zoom * factor,\n    }));\n  };\n\n  private updateFraming = (change: (framing: Framing) => Framing): void => {\n    const image = this.imageSize();\n    if (!image) return;\n    this.framing.update((framing) =>\n      clampFraming(image, this.aspect(), change(framing))\n    );\n  };\n\n  private settle = (result: ImageEditorResult | undefined): void => {\n    if (this.#settled) return;\n    this.#settled = true;\n    this.#modalRef.close(result);\n  };\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/{magmonium-one-magmonium-one-CuMK-o0U.mjs → magmonium-one-magmonium-one-BEK3zmye.mjs}

@@ -7,7 +7,7 @@ import { signalStore, withState, withMethods, patchState, withHooks, withCompute
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
 import { map as map$1, switchMap, catchError as catchError$1 } from 'rxjs/operators';
 import { io } from 'socket.io-client';
-import { DefaultUrlSerializer, UrlSerializer, PRIMARY_OUTLET, Router, NavigationEnd, RouterModule, RouterLink, UrlSegment, UrlSegmentGroup, UrlTree, provideRouter, withComponentInputBinding, withRouterConfig, RouterOutlet } from '@angular/router';
+import { DefaultUrlSerializer, UrlSerializer, PRIMARY_OUTLET, Router, NavigationEnd, RouterModule, ActivatedRoute, isActive, RouterLink, UrlSegment, UrlSegmentGroup, UrlTree, provideRouter, withComponentInputBinding, withRouterConfig, RouterOutlet } from '@angular/router';
 import * as i1 from '@angular/common';
 import { APP_BASE_HREF, Location, NgOptimizedImage, IMAGE_LOADER, NgTemplateOutlet, CommonModule, NgComponentOutlet, DecimalPipe, NgClass, DatePipe, NgStyle } from '@angular/common';
 import { FormField, email, required, validate, minLength, maxLength, min, max, apply, form } from '@angular/forms/signals';
@@ -7691,7 +7691,7 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.TOGGLE: {
-                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-B7uPF91k.mjs');
+                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-D02UL3-5.mjs');
                     this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                     break;
                 }
@@ -7703,12 +7703,12 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.PASSWORD: {
-                    const { PasswordInputComponent } = await import('./magmonium-one-password-B2EBGNPI.mjs');
+                    const { PasswordInputComponent } = await import('./magmonium-one-password-CFC0vAYf.mjs');
                     this.createDynamicComponent(seq, PasswordInputComponent);
                     break;
                 }
                 case InputType.OTP: {
-                    const { OtpInputComponent } = await import('./magmonium-one-otp-BSxmOX1m.mjs');
+                    const { OtpInputComponent } = await import('./magmonium-one-otp-eAjpXHnS.mjs');
                     this.createDynamicComponent(seq, OtpInputComponent);
                     break;
                 }
@@ -10270,8 +10270,50 @@ class ActionComponent extends ButtonGroupComponent {
     // list re-resolving behind the same names from re-firing the announcement,
     // while still letting a genuinely different first Button be heard.
     announcedDefault = signal(undefined, ...(ngDevMode ? [{ debugName: "announcedDefault" }] : /* istanbul ignore next */ []));
+    router = inject(Router);
+    route = inject(ActivatedRoute, { optional: true });
+    // The route a Button links to. Not on the Canvas: a Button there is a
+    // picture of one, and following it would navigate the editor off the Design
+    // — so there it stays a <button>, lit the way an unrouted bar is.
+    linkOf(button) {
+        return this.isDesignMode ? undefined : button.routerLink;
+    }
+    // Resolved the way the `<a>`'s own RouterLink resolves it, against the route
+    // the bar is drawn under, so a relative link lights the same URL it goes to.
+    urlTreeOf(link) {
+        return this.router.createUrlTree(typeof link === 'string' ? [link] : [...link], { relativeTo: this.route });
+    }
+    // Name -> whether the Router stands on that Button's route (or under it). Read
+    // off the Router rather than off each `<a>`'s RouterLinkActive, because a
+    // squeezed Button has no `<a>` — and the Button a folded bar keeps showing is
+    // exactly the one this has to find.
+    linkActive = computed(() => {
+        const active = new Map();
+        this.actionButtons().forEach((button) => {
+            const link = this.linkOf(button);
+            if (button.name && link) {
+                active.set(button.name, isActive(this.urlTreeOf(link), this.router));
+            }
+        });
+        return active;
+    }, ...(ngDevMode ? [{ debugName: "linkActive" }] : /* istanbul ignore next */ []));
+    // A bar with a link on any of its Buttons is a set of routes, and a route
+    // already says which one the User is on — so the Router, not a press, is
+    // what lights a Button.
+    isRouted = computed(() => this.linkActive().size > 0, ...(ngDevMode ? [{ debugName: "isRouted" }] : /* istanbul ignore next */ []));
     selected = computed(() => {
         const buttons = this.actionButtons();
+        if (this.isRouted()) {
+            const active = this.linkActive();
+            const routed = buttons.find((b) => b.name && active.get(b.name)?.());
+            // Nothing lit when the Router stands on none of them: a toggle opening
+            // on its first route would claim a page the User is not on.
+            if (routed)
+                return routed.name;
+            return this.resolvedVariant() === 'toggle'
+                ? undefined
+                : this.config()?.primary;
+        }
         if (this.resolvedVariant() !== 'toggle')
             return this.config()?.primary;
         const pressed = this.pressed();
@@ -10343,10 +10385,16 @@ class ActionComponent extends ButtonGroupComponent {
             })),
         ],
     }), ...(ngDevMode ? [{ debugName: "squeezeMenu" }] : /* istanbul ignore next */ []));
+    // A squeezed Button has no `<a>` to carry its RouterLink, so the menu
+    // follows the link itself — the one press that would otherwise go nowhere.
     onMenuAction(item) {
         const button = this.actionButtons().find((b) => b.name === item.id);
-        if (button)
-            this.select(button);
+        if (!button)
+            return;
+        const link = this.isDisabled(button.name) ? undefined : this.linkOf(button);
+        if (link)
+            void this.router.navigateByUrl(this.urlTreeOf(link));
+        this.select(button);
     }
     // The bar's own colour, for the one thing that has no Button behind it: the
     // inversion of a selected segment whose Button declared no colour of its own.
@@ -10466,6 +10514,10 @@ class ActionComponent extends ButtonGroupComponent {
     announceDefault = () => {
         if (this.resolvedVariant() !== 'toggle')
             return;
+        // A routed bar has no default to announce — the Router already holds the
+        // answer, and emitting one would read as a press nobody made.
+        if (this.isRouted())
+            return;
         // A press announces itself through `select`; this speaks only for defaults.
         if (this.pressed() !== undefined)
             return;
@@ -10481,7 +10533,7 @@ class ActionComponent extends ButtonGroupComponent {
         this.clicked.emit(button);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ActionComponent, isStandalone: true, selector: "m-action, m-one-action", inputs: { sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, renderIds: { classPropertyName: "renderIds", publicName: "renderIds", isSignal: true, isRequired: false, transformFunction: null }, squeezeAt: { classPropertyName: "squeezeAt", publicName: "squeezeAt", isSignal: true, isRequired: false, transformFunction: null }, squeezeMode: { classPropertyName: "squeezeMode", publicName: "squeezeMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.m-action--host-sticky": "sticky()" } }, usesInheritance: true, ngImport: i0, template: "@let buttons = actionButtons();\n<!-- No `config()` guard: a bar the Design editor folded its Buttons into has no\n     `button_groups/<name>.yml` behind it \u2014 they ride on `[buttons]` instead\n     (ADR 0009, ADR 0010) \u2014 so what decides whether the row exists is whether\n     there are Buttons in it. Empty, it draws only on the Canvas, where it is\n     the drop space a Button lands on. -->\n@if (buttons.length || isDesignMode) {\n  <div\n    class=\"m-action\"\n    [class.m-action--stuck]=\"isStuck()\"\n    [class.m-action--toggle]=\"resolvedVariant() === 'toggle'\"\n    [class.m-action--icon-only]=\"activeSqueeze() === 'icon'\"\n  >\n    @for (button of visibleButtons(); track $index) {\n      <button\n        type=\"button\"\n        class=\"m-action__btn\"\n        [attr.data-testid]=\"(button.name || '') + '-btn'\"\n        [attr.render-id]=\"renderIds()?.[button.name ?? '']\"\n        [class.active]=\"isActive(button)\"\n        [style.--m-action-color]=\"fillColor(button)\"\n        [style.--m-action-color-contrast]=\"contrastColor(button)\"\n        [style.--m-action-label]=\"labelColor(button)\"\n        [disabled]=\"isDisabled(button.name)\"\n        (click)=\"select(button)\"\n      >\n        @if (button.icon) {\n          <m-icon\n            [name]=\"button.icon\"\n            [color]=\"iconColor(button)\"\n            [remote]=\"remote() ?? config()?.remote\"\n          />\n        }\n        @if (button.label && !isLabelHidden(button)) {\n          <span class=\"m-action__label\">{{ button.label | translate }}</span>\n        }\n      </button>\n    }\n    @if (menuButtons().length) {\n      <!-- The Buttons the bar could not fit. Squeezed rather than dropped:\n           an action the User can still reach behind one press beats an action\n           that silently stopped existing at 400px. -->\n      <m-context-menu\n        class=\"m-action__overflow\"\n        [config]=\"squeezeMenu()\"\n        [remote]=\"remote() ?? config()?.remote\"\n        (action)=\"onMenuAction($event)\"\n      />\n    }\n    @if (!buttons.length) {\n      <!-- A bar with nothing in it has no box, and a slot with no box is a slot\n           nothing can be dropped on \u2014 the same rect an empty projected Card is\n           given (m-one-ui `.card-drop-space`). -->\n      <span class=\"m-action__drop\"></span>\n    }\n  </div>\n}\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}m-action,m-one-action{display:block;width:100%;grid-column:1/-1}m-action.m-action--host-sticky,m-one-action.m-action--host-sticky{position:sticky;top:0;z-index:50;background:#ffffffeb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.m-action{display:flex;flex-wrap:nowrap;background:transparent;width:100%;border-bottom:1px solid #f1f5f9;--m-action-color: var(--m-button-color, var(--m-one-button-color, var(--m-mm)));--m-action-color-contrast: var(--m-button-color-contrast, var(--m-one-button-color-contrast, #ffffff))}.m-action--stuck{border-bottom-color:#00000014;box-shadow:0 2px 10px #0000000f}.m-action__btn{flex:1;min-width:0;padding:1rem 2rem;border:none;background:transparent;color:var(--m-action-label, #1e293b);font-weight:300;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:.6rem;white-space:nowrap;overflow:hidden;cursor:pointer;border-right:1px solid #f1f5f9;transition:all .25s cubic-bezier(.4,0,.2,1)}.m-action__btn:last-child{border-right:none}.m-action__btn:hover{background:#f8fafc;color:var(--m-action-color)}.m-action__btn .m-icon{transition:transform .2s ease}.m-action__btn:hover .m-icon{transform:scale(1.1)}.m-action__btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.m-action__btn.active{color:var(--m-action-color);font-weight:500}.m-action--toggle .m-action__btn{position:relative;filter:grayscale(100%);transition:all .25s cubic-bezier(.4,0,.2,1),filter .25s cubic-bezier(.4,0,.2,1)}.m-action--toggle .m-action__btn.active{filter:none}.m-action--toggle .m-action__btn.active:hover:not(:disabled){filter:none}.m-action--icon-only .m-action__btn{padding:1rem .5rem;gap:0}.m-action__overflow{display:flex;align-items:center;padding:0 .5rem;flex:0 0 auto}.m-action__drop{display:block;flex:1;min-height:3.5rem;margin:.5rem;border:1px dashed currentColor;border-radius:.25rem;opacity:.4;pointer-events:none}.m-action__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}@container mag-grid (max-width: 767.98px){.m-action__btn{padding:1rem .75rem;gap:.4rem}}@container mag-grid (max-width: 575.98px){.m-action__btn{padding:.85rem .4rem;font-size:.8rem}}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "component", type: i0.forwardRef(() => IconComponent), selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: i0.forwardRef(() => ContextMenuComponent), selector: "m-context-menu, m-one-context-menu", inputs: ["toggle", "remote", "exclude", "visibilityRule", "disableRule", "extraData", "inverted", "options"], outputs: ["toggleChange", "action"] }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ActionComponent, isStandalone: true, selector: "m-action, m-one-action", inputs: { sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, renderIds: { classPropertyName: "renderIds", publicName: "renderIds", isSignal: true, isRequired: false, transformFunction: null }, squeezeAt: { classPropertyName: "squeezeAt", publicName: "squeezeAt", isSignal: true, isRequired: false, transformFunction: null }, squeezeMode: { classPropertyName: "squeezeMode", publicName: "squeezeMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.m-action--host-sticky": "sticky()" } }, usesInheritance: true, ngImport: i0, template: "@let buttons = actionButtons();\n<!-- No `config()` guard: a bar the Design editor folded its Buttons into has no\n     `button_groups/<name>.yml` behind it \u2014 they ride on `[buttons]` instead\n     (ADR 0009, ADR 0010) \u2014 so what decides whether the row exists is whether\n     there are Buttons in it. Empty, it draws only on the Canvas, where it is\n     the drop space a Button lands on. -->\n@if (buttons.length || isDesignMode) {\n  <div\n    class=\"m-action\"\n    [class.m-action--stuck]=\"isStuck()\"\n    [class.m-action--toggle]=\"resolvedVariant() === 'toggle'\"\n    [class.m-action--icon-only]=\"activeSqueeze() === 'icon'\"\n  >\n    @for (button of visibleButtons(); track $index) {\n      <!-- A routed Button is a real link, so the browser's own affordances \u2014\n           a middle-click, open in new tab, the URL on hover \u2014 reach it. A\n           disabled one stays a <button>: an <a> cannot be disabled, and a\n           RouterLink on one would still navigate. -->\n      @let link = isDisabled(button.name) ? undefined : linkOf(button);\n      @if (link) {\n        <a\n          class=\"m-action__btn\"\n          [routerLink]=\"link\"\n          [attr.data-testid]=\"(button.name || '') + '-btn'\"\n          [class.active]=\"isActive(button)\"\n          [attr.aria-current]=\"isActive(button) ? 'page' : null\"\n          [style.--m-action-color]=\"fillColor(button)\"\n          [style.--m-action-color-contrast]=\"contrastColor(button)\"\n          [style.--m-action-label]=\"labelColor(button)\"\n          (click)=\"select(button)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"buttonContent; context: { $implicit: button }\"\n          />\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"m-action__btn\"\n          [attr.data-testid]=\"(button.name || '') + '-btn'\"\n          [attr.render-id]=\"renderIds()?.[button.name ?? '']\"\n          [class.active]=\"isActive(button)\"\n          [style.--m-action-color]=\"fillColor(button)\"\n          [style.--m-action-color-contrast]=\"contrastColor(button)\"\n          [style.--m-action-label]=\"labelColor(button)\"\n          [disabled]=\"isDisabled(button.name)\"\n          (click)=\"select(button)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"buttonContent; context: { $implicit: button }\"\n          />\n        </button>\n      }\n    }\n    @if (menuButtons().length) {\n      <!-- The Buttons the bar could not fit. Squeezed rather than dropped:\n           an action the User can still reach behind one press beats an action\n           that silently stopped existing at 400px. -->\n      <m-context-menu\n        class=\"m-action__overflow\"\n        [config]=\"squeezeMenu()\"\n        [remote]=\"remote() ?? config()?.remote\"\n        (action)=\"onMenuAction($event)\"\n      />\n    }\n    @if (!buttons.length) {\n      <!-- A bar with nothing in it has no box, and a slot with no box is a slot\n           nothing can be dropped on \u2014 the same rect an empty projected Card is\n           given (m-one-ui `.card-drop-space`). -->\n      <span class=\"m-action__drop\"></span>\n    }\n  </div>\n}\n\n<ng-template #buttonContent let-button>\n  @if (button.icon) {\n    <m-icon\n      [name]=\"button.icon\"\n      [color]=\"iconColor(button)\"\n      [remote]=\"remote() ?? config()?.remote\"\n    />\n  }\n  @if (button.label && !isLabelHidden(button)) {\n    <span class=\"m-action__label\">{{ button.label | translate }}</span>\n  }\n</ng-template>\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-action,m-one-action{display:block;width:100%;grid-column:1/-1}m-action.m-action--host-sticky,m-one-action.m-action--host-sticky{position:sticky;top:0;z-index:50;background:#ffffffeb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.m-action{display:flex;flex-wrap:nowrap;background:transparent;width:100%;border-bottom:1px solid #f1f5f9;--m-action-color: var(--m-button-color, var(--m-one-button-color, var(--m-mm)));--m-action-color-contrast: var(--m-button-color-contrast, var(--m-one-button-color-contrast, #ffffff))}.m-action--stuck{border-bottom-color:#00000014;box-shadow:0 2px 10px #0000000f}.m-action__btn{flex:1;min-width:0;padding:1rem 2rem;border:none;background:transparent;text-decoration:none;color:var(--m-action-label, #1e293b);font-weight:300;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:.6rem;white-space:nowrap;overflow:hidden;cursor:pointer;border-right:1px solid #f1f5f9;transition:all .25s cubic-bezier(.4,0,.2,1)}.m-action__btn:last-child{border-right:none}.m-action__btn:hover{background:#f8fafc;color:var(--m-action-color)}.m-action__btn .m-icon{transition:transform .2s ease}.m-action__btn:hover .m-icon{transform:scale(1.1)}.m-action__btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.m-action__btn.active{color:var(--m-action-color);font-weight:500}.m-action--toggle .m-action__btn{position:relative;filter:grayscale(100%);transition:all .25s cubic-bezier(.4,0,.2,1),filter .25s cubic-bezier(.4,0,.2,1)}.m-action--toggle .m-action__btn.active{filter:none}.m-action--toggle .m-action__btn.active:hover:not(:disabled){filter:none}.m-action--icon-only .m-action__btn{padding:1rem .5rem;gap:0}.m-action__overflow{display:flex;align-items:center;padding:0 .5rem;flex:0 0 auto}.m-action__drop{display:block;flex:1;min-height:3.5rem;margin:.5rem;border:1px dashed currentColor;border-radius:.25rem;opacity:.4;pointer-events:none}.m-action__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}@container mag-grid (max-width: 767.98px){.m-action__btn{padding:1rem .75rem;gap:.4rem}}@container mag-grid (max-width: 575.98px){.m-action__btn{padding:.85rem .4rem;font-size:.8rem}}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => IconComponent), selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: i0.forwardRef(() => ContextMenuComponent), selector: "m-context-menu, m-one-context-menu", inputs: ["toggle", "remote", "exclude", "visibilityRule", "disableRule", "extraData", "inverted", "options"], outputs: ["toggleChange", "action"] }, { kind: "directive", type: i0.forwardRef(() => RouterLink), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ActionComponent, decorators: [{
             type: Component,
@@ -10490,9 +10542,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         forwardRef(() => IconComponent),
                         forwardRef(() => TranslatePipe),
                         forwardRef(() => ContextMenuComponent),
+                        RouterLink,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class.m-action--host-sticky]': 'sticky()',
-                    }, template: "@let buttons = actionButtons();\n<!-- No `config()` guard: a bar the Design editor folded its Buttons into has no\n     `button_groups/<name>.yml` behind it \u2014 they ride on `[buttons]` instead\n     (ADR 0009, ADR 0010) \u2014 so what decides whether the row exists is whether\n     there are Buttons in it. Empty, it draws only on the Canvas, where it is\n     the drop space a Button lands on. -->\n@if (buttons.length || isDesignMode) {\n  <div\n    class=\"m-action\"\n    [class.m-action--stuck]=\"isStuck()\"\n    [class.m-action--toggle]=\"resolvedVariant() === 'toggle'\"\n    [class.m-action--icon-only]=\"activeSqueeze() === 'icon'\"\n  >\n    @for (button of visibleButtons(); track $index) {\n      <button\n        type=\"button\"\n        class=\"m-action__btn\"\n        [attr.data-testid]=\"(button.name || '') + '-btn'\"\n        [attr.render-id]=\"renderIds()?.[button.name ?? '']\"\n        [class.active]=\"isActive(button)\"\n        [style.--m-action-color]=\"fillColor(button)\"\n        [style.--m-action-color-contrast]=\"contrastColor(button)\"\n        [style.--m-action-label]=\"labelColor(button)\"\n        [disabled]=\"isDisabled(button.name)\"\n        (click)=\"select(button)\"\n      >\n        @if (button.icon) {\n          <m-icon\n            [name]=\"button.icon\"\n            [color]=\"iconColor(button)\"\n            [remote]=\"remote() ?? config()?.remote\"\n          />\n        }\n        @if (button.label && !isLabelHidden(button)) {\n          <span class=\"m-action__label\">{{ button.label | translate }}</span>\n        }\n      </button>\n    }\n    @if (menuButtons().length) {\n      <!-- The Buttons the bar could not fit. Squeezed rather than dropped:\n           an action the User can still reach behind one press beats an action\n           that silently stopped existing at 400px. -->\n      <m-context-menu\n        class=\"m-action__overflow\"\n        [config]=\"squeezeMenu()\"\n        [remote]=\"remote() ?? config()?.remote\"\n        (action)=\"onMenuAction($event)\"\n      />\n    }\n    @if (!buttons.length) {\n      <!-- A bar with nothing in it has no box, and a slot with no box is a slot\n           nothing can be dropped on \u2014 the same rect an empty projected Card is\n           given (m-one-ui `.card-drop-space`). -->\n      <span class=\"m-action__drop\"></span>\n    }\n  </div>\n}\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}m-action,m-one-action{display:block;width:100%;grid-column:1/-1}m-action.m-action--host-sticky,m-one-action.m-action--host-sticky{position:sticky;top:0;z-index:50;background:#ffffffeb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.m-action{display:flex;flex-wrap:nowrap;background:transparent;width:100%;border-bottom:1px solid #f1f5f9;--m-action-color: var(--m-button-color, var(--m-one-button-color, var(--m-mm)));--m-action-color-contrast: var(--m-button-color-contrast, var(--m-one-button-color-contrast, #ffffff))}.m-action--stuck{border-bottom-color:#00000014;box-shadow:0 2px 10px #0000000f}.m-action__btn{flex:1;min-width:0;padding:1rem 2rem;border:none;background:transparent;color:var(--m-action-label, #1e293b);font-weight:300;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:.6rem;white-space:nowrap;overflow:hidden;cursor:pointer;border-right:1px solid #f1f5f9;transition:all .25s cubic-bezier(.4,0,.2,1)}.m-action__btn:last-child{border-right:none}.m-action__btn:hover{background:#f8fafc;color:var(--m-action-color)}.m-action__btn .m-icon{transition:transform .2s ease}.m-action__btn:hover .m-icon{transform:scale(1.1)}.m-action__btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.m-action__btn.active{color:var(--m-action-color);font-weight:500}.m-action--toggle .m-action__btn{position:relative;filter:grayscale(100%);transition:all .25s cubic-bezier(.4,0,.2,1),filter .25s cubic-bezier(.4,0,.2,1)}.m-action--toggle .m-action__btn.active{filter:none}.m-action--toggle .m-action__btn.active:hover:not(:disabled){filter:none}.m-action--icon-only .m-action__btn{padding:1rem .5rem;gap:0}.m-action__overflow{display:flex;align-items:center;padding:0 .5rem;flex:0 0 auto}.m-action__drop{display:block;flex:1;min-height:3.5rem;margin:.5rem;border:1px dashed currentColor;border-radius:.25rem;opacity:.4;pointer-events:none}.m-action__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}@container mag-grid (max-width: 767.98px){.m-action__btn{padding:1rem .75rem;gap:.4rem}}@container mag-grid (max-width: 575.98px){.m-action__btn{padding:.85rem .4rem;font-size:.8rem}}\n"] }]
+                    }, template: "@let buttons = actionButtons();\n<!-- No `config()` guard: a bar the Design editor folded its Buttons into has no\n     `button_groups/<name>.yml` behind it \u2014 they ride on `[buttons]` instead\n     (ADR 0009, ADR 0010) \u2014 so what decides whether the row exists is whether\n     there are Buttons in it. Empty, it draws only on the Canvas, where it is\n     the drop space a Button lands on. -->\n@if (buttons.length || isDesignMode) {\n  <div\n    class=\"m-action\"\n    [class.m-action--stuck]=\"isStuck()\"\n    [class.m-action--toggle]=\"resolvedVariant() === 'toggle'\"\n    [class.m-action--icon-only]=\"activeSqueeze() === 'icon'\"\n  >\n    @for (button of visibleButtons(); track $index) {\n      <!-- A routed Button is a real link, so the browser's own affordances \u2014\n           a middle-click, open in new tab, the URL on hover \u2014 reach it. A\n           disabled one stays a <button>: an <a> cannot be disabled, and a\n           RouterLink on one would still navigate. -->\n      @let link = isDisabled(button.name) ? undefined : linkOf(button);\n      @if (link) {\n        <a\n          class=\"m-action__btn\"\n          [routerLink]=\"link\"\n          [attr.data-testid]=\"(button.name || '') + '-btn'\"\n          [class.active]=\"isActive(button)\"\n          [attr.aria-current]=\"isActive(button) ? 'page' : null\"\n          [style.--m-action-color]=\"fillColor(button)\"\n          [style.--m-action-color-contrast]=\"contrastColor(button)\"\n          [style.--m-action-label]=\"labelColor(button)\"\n          (click)=\"select(button)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"buttonContent; context: { $implicit: button }\"\n          />\n        </a>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"m-action__btn\"\n          [attr.data-testid]=\"(button.name || '') + '-btn'\"\n          [attr.render-id]=\"renderIds()?.[button.name ?? '']\"\n          [class.active]=\"isActive(button)\"\n          [style.--m-action-color]=\"fillColor(button)\"\n          [style.--m-action-color-contrast]=\"contrastColor(button)\"\n          [style.--m-action-label]=\"labelColor(button)\"\n          [disabled]=\"isDisabled(button.name)\"\n          (click)=\"select(button)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"buttonContent; context: { $implicit: button }\"\n          />\n        </button>\n      }\n    }\n    @if (menuButtons().length) {\n      <!-- The Buttons the bar could not fit. Squeezed rather than dropped:\n           an action the User can still reach behind one press beats an action\n           that silently stopped existing at 400px. -->\n      <m-context-menu\n        class=\"m-action__overflow\"\n        [config]=\"squeezeMenu()\"\n        [remote]=\"remote() ?? config()?.remote\"\n        (action)=\"onMenuAction($event)\"\n      />\n    }\n    @if (!buttons.length) {\n      <!-- A bar with nothing in it has no box, and a slot with no box is a slot\n           nothing can be dropped on \u2014 the same rect an empty projected Card is\n           given (m-one-ui `.card-drop-space`). -->\n      <span class=\"m-action__drop\"></span>\n    }\n  </div>\n}\n\n<ng-template #buttonContent let-button>\n  @if (button.icon) {\n    <m-icon\n      [name]=\"button.icon\"\n      [color]=\"iconColor(button)\"\n      [remote]=\"remote() ?? config()?.remote\"\n    />\n  }\n  @if (button.label && !isLabelHidden(button)) {\n    <span class=\"m-action__label\">{{ button.label | translate }}</span>\n  }\n</ng-template>\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-action,m-one-action{display:block;width:100%;grid-column:1/-1}m-action.m-action--host-sticky,m-one-action.m-action--host-sticky{position:sticky;top:0;z-index:50;background:#ffffffeb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.m-action{display:flex;flex-wrap:nowrap;background:transparent;width:100%;border-bottom:1px solid #f1f5f9;--m-action-color: var(--m-button-color, var(--m-one-button-color, var(--m-mm)));--m-action-color-contrast: var(--m-button-color-contrast, var(--m-one-button-color-contrast, #ffffff))}.m-action--stuck{border-bottom-color:#00000014;box-shadow:0 2px 10px #0000000f}.m-action__btn{flex:1;min-width:0;padding:1rem 2rem;border:none;background:transparent;text-decoration:none;color:var(--m-action-label, #1e293b);font-weight:300;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:.6rem;white-space:nowrap;overflow:hidden;cursor:pointer;border-right:1px solid #f1f5f9;transition:all .25s cubic-bezier(.4,0,.2,1)}.m-action__btn:last-child{border-right:none}.m-action__btn:hover{background:#f8fafc;color:var(--m-action-color)}.m-action__btn .m-icon{transition:transform .2s ease}.m-action__btn:hover .m-icon{transform:scale(1.1)}.m-action__btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.m-action__btn.active{color:var(--m-action-color);font-weight:500}.m-action--toggle .m-action__btn{position:relative;filter:grayscale(100%);transition:all .25s cubic-bezier(.4,0,.2,1),filter .25s cubic-bezier(.4,0,.2,1)}.m-action--toggle .m-action__btn.active{filter:none}.m-action--toggle .m-action__btn.active:hover:not(:disabled){filter:none}.m-action--icon-only .m-action__btn{padding:1rem .5rem;gap:0}.m-action__overflow{display:flex;align-items:center;padding:0 .5rem;flex:0 0 auto}.m-action__drop{display:block;flex:1;min-height:3.5rem;margin:.5rem;border:1px dashed currentColor;border-radius:.25rem;opacity:.4;pointer-events:none}.m-action__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}@container mag-grid (max-width: 767.98px){.m-action__btn{padding:1rem .75rem;gap:.4rem}}@container mag-grid (max-width: 575.98px){.m-action__btn{padding:.85rem .4rem;font-size:.8rem}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], renderIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderIds", required: false }] }], squeezeAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "squeezeAt", required: false }] }], squeezeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "squeezeMode", required: false }] }] } });
 
 class BaseInputComponent {
@@ -22368,7 +22421,7 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.TOGGLE: {
-                const { ToggleInputComponent } = await import('./magmonium-one-toggle-B7uPF91k.mjs');
+                const { ToggleInputComponent } = await import('./magmonium-one-toggle-D02UL3-5.mjs');
                 this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                 break;
             }
@@ -22380,12 +22433,12 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.PASSWORD: {
-                const { PasswordInputComponent } = await import('./magmonium-one-password-B2EBGNPI.mjs');
+                const { PasswordInputComponent } = await import('./magmonium-one-password-CFC0vAYf.mjs');
                 this.createDynamicComponent(seq, PasswordInputComponent);
                 break;
             }
             case InputType.OTP: {
-                const { OtpInputComponent } = await import('./magmonium-one-otp-BSxmOX1m.mjs');
+                const { OtpInputComponent } = await import('./magmonium-one-otp-eAjpXHnS.mjs');
                 this.createDynamicComponent(seq, OtpInputComponent);
                 break;
             }
@@ -24092,7 +24145,7 @@ class FileUploadInputComponent extends BaseInputComponent {
         const modalStore = this.modalStore;
         if (!modalStore)
             return undefined;
-        const { ImageEditorComponent } = await import('./magmonium-one-image-editor-D7mMWvt1.mjs');
+        const { ImageEditorComponent } = await import('./magmonium-one-image-editor-DA37tqHz.mjs');
         const ratio = String(this.config()?.ratio ?? '');
         return new Promise((resolve) => {
             const modalRef = new ModalRef();
@@ -39435,4 +39488,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 
 export { ClipboardService as $, ACCESS_DOMAINS as A, ButtonComponent as B, Assets as C, AuthActivityPageComponent as D, AuthApiService as E, AuthStore as F, AutosizeDirective as G, HeaderComponent$1 as H, InputType as I, BadgeComponent as J, BandingComponent as K, LabelComponent as L, MODAL_REF as M, BaseArrayInputComponent as N, BaseRootWebComponent as O, BaseWebComponent as P, ButtonGroupComponent as Q, RangeInputComponent as R, COMPONENT_INPUT_REGISTRY as S, TranslatePipe as T, CardComponent as U, CardWrapperComponent as V, CarouselComponent as W, ChartComponent as X, ChatBubbleComponent as Y, CheckboxInputComponent as Z, ClearableInputComponent as _, MIN_ZOOM as a, ImgComponent as a$, ColComponent as a0, ColorPickerInputComponent as a1, CommentItemComponent as a2, CommentsApiService as a3, CommentsComponent as a4, CommentsStore as a5, CompactNumberPipe as a6, ComponentInputComponent as a7, ComponentStepperComponent as a8, ConfigComponent as a9, Domain as aA, DotGridComponent as aB, DragListDirective as aC, DragListItemDirective as aD, DraggableDirective as aE, DropdownInputComponent as aF, FILTER_GROUP_CONTEXT as aG, FILTER_RANGE_MODES as aH, FILTER_VARIANTS as aI, FLEX_VARIANTS as aJ, FOLDER_PICK_LISTENER as aK, FORM_ASSET_FOLDER as aL, FileService as aM, FileUploadDirective as aN, FileUploadInputComponent as aO, FlexComponent as aP, FlexItemComponent as aQ, FormGroupComponent as aR, FrameComponent as aS, FreezeService as aT, GRID_BREAKPOINTS as aU, GetNavService as aV, HighlightDirective as aW, HttpService as aX, ICON_SOURCE as aY, IS_SIDE_PANEL as aZ, IconComponent as a_, ConfirmComponent as aa, ContextMenuComponent as ab, CustomIconClass as ac, CustomIconEditComponent as ad, DEFAULT_DENIAL as ae, DEFAULT_DOC_DENSITY as af, DEFAULT_DOC_VARIANT as ag, DEFAULT_FILTER_RANGE_MODE as ah, DEFAULT_FILTER_VARIANT as ai, DEFAULT_NAV_PARAM as aj, DEFAULT_NAV_SEGMENT as ak, DEFAULT_SIZE as al, DOCK_MIN_PAGE_REMAINDER as am, DOCS_FOLDER as an, DOC_ACTION_ICONS as ao, DOC_DENSITIES as ap, DOC_EDIT_ACTIONS as aq, DOC_TOOLBAR_GROUPS as ar, DOC_VARIANTS as as, DashboardCardComponent as at, DateInputComponent as au, DatePickerComponent as av, DeviceService as aw, DocComponent as ax, DocEditorComponent as ay, DomService as az, MAX_ZOOM as b, PercentagePipe as b$, InstrumentScoreComponent as b0, InterceptorObservables as b1, JumbotronComponent as b2, KeyValueComponent as b3, LAYOUT_ASSET_FOLDER as b4, LOGIN_COMPONENT as b5, LOGIN_STORE as b6, LanguageComponent as b7, ListComponent as b8, LogoComponent as b9, NavDetailsComponent as bA, NavHeaderComponent as bB, NavMenuComponent as bC, NavStore as bD, NavTrailComponent as bE, NothingComponent as bF, NotificationElementComponent as bG, NotificationGroupComponent as bH, NotificationPopupComponent as bI, NotificationService as bJ, NotificationStore as bK, NotificationType as bL, NotificationWidgetComponent as bM, ONE_ASSET_BASE_URL as bN, OPTIONS_SOURCE as bO, OVERLAY_WIDGETS as bP, OneApp as bQ, OptionsSourceDirective as bR, OverlayBodyComponent as bS, OverlayRef as bT, OverlayService as bU, PLATFORM_BUTTON_NAV_IDS as bV, PLATFORM_EXTENSIBLE_NAV_IDS as bW, PLATFORM_NAV_MAP as bX, PLATFORM_ROOT_CHILDREN as bY, PaginationComponent as bZ, PanelComponent as b_, MAG_SOCKET_EVENT as ba, MHeroColorDirective as bb, MHeroComponent as bc, MODAL_STORE_REF as bd, MOUNT_STATIC_SEGMENT as be, MOUNT_TOKEN as bf, MRefDirective as bg, MStepComponent as bh, MURL_PARAM as bi, MURL_SEP as bj, ManifestEnrichmentService as bk, MenuComponent as bl, ModalDirective as bm, ModalRef as bn, ModalStore as bo, MoneyPipe as bp, MultiRangeInputComponent as bq, MurlUrlSerializer as br, NAV_DEFAULT_MURL as bs, NAV_ID_SEP as bt, NAV_MAIN_BUTTONS as bu, NAV_SEGMENT_RE as bv, NAV_STORE_REF as bw, NAV_WC_COMPONENTS as bx, NAV_WIDGET_MAP as by, NavComponent as bz, cropRect as c, SocketStore as c$, PlaygroundComponent as c0, PositionDirective as c1, PwaInstallComponent as c2, REMOTE_PAGE_RELOAD as c3, ROOT_NAV$1 as c4, RadioGroupComponent as c5, RadioInputComponent as c6, RatingInputComponent as c7, ReactiveElementComponent as c8, RemoteComponent as c9, SectionFilterGroupComponent as cA, SectionFilterMenuComponent as cB, SectionFilterPanelComponent as cC, SectionFilterRangePanelComponent as cD, SectionFooterComponent as cE, SectionFormComponent as cF, SectionFormItemComponent as cG, SectionHeaderComponent as cH, SectionHeroComponent as cI, SectionPaginationComponent as cJ, SectionSearchComponent as cK, SectionStepperComponent as cL, SectionTableCellComponent as cM, SectionTableComponent as cN, SectionTableRowComponent as cO, SectionTableSortPipe as cP, SectionTabsComponent as cQ, SectionToggleComponent as cR, SectionToggleItemDirective as cS, SelectableCardInputComponent as cT, SelectorDirective as cU, SettingsSearchBarComponent as cV, SettingsSearchService as cW, ShapeComponent as cX, SharedStoreRegistry as cY, SidePanelDirective as cZ, Size as c_, RemoteLoaderService as ca, ResizeElementComponent as cb, RouteContainer as cc, RowComponent as cd, SEARCH_QUERY as ce, SEARCH_RESULTS_EVENT as cf, SECTION_ACCORDION_GROUP as cg, SECTION_FORM_CONTEXT as ch, SECTION_TABLE_VARIANTS as ci, SHARED_ICONS as cj, SIZE_CONTEXT as ck, ScoreComponent as cl, ScrollComponent as cm, ScrollService as cn, SearchPanelComponent as co, SearchStore as cp, SearchUserPanelComponent as cq, SectionAccordionDirective as cr, SectionAccordionGroupDirective as cs, SectionBackComponent as ct, SectionBadgesComponent as cu, SectionButtonGroupComponent as cv, SectionCardComponent as cw, SectionCarouselComponent as cx, SectionComponent as cy, SectionFilterComponent as cz, drawFramed as d, childNavId as d$, SortComponent as d0, StatComponent as d1, StepComponent as d2, StepperComponent as d3, StepsComponent as d4, StorageService as d5, StrokeLinecap as d6, StrokeLinejoin as d7, SummaryComponent as d8, SvgGeneratorComponent as d9, UserApiService as dA, UserAvatarComponent as dB, UserComponent as dC, UserNavComponent as dD, UserSettingsComponent as dE, UserStore as dF, WC_BUNDLE as dG, WC_NAVIGATE_EVENT as dH, WC_ROUTE_CHANGED_EVENT as dI, WC_SEARCH_GROUPS as dJ, WIN_USER_TAB_HOOK as dK, WIN_USER_TAB_KEY as dL, WatermarkComponent as dM, WcRouterStore as dN, WrapperInputComponent as dO, anchorNavId as dP, applyColorsToElement as dQ, applyDocEdit as dR, assetOptions as dS, bootstrapMagApp as dT, bootstrapPwaInstall as dU, buildWcBaseUrl as dV, calculateLuminance as dW, calculateRanks as dX, cellText as dY, checkDoc as dZ, checkFilterCondition as d_, SvgGeneratorService as da, SvgService as db, TOTAL_COLUMNS as dc, TRANSLATION_SOURCE as dd, TableComponent as de, TechnicalMeterComponent as df, TextInputComponent as dg, TextareaInputComponent as dh, ThemeComponent as di, ThemeDataService as dj, ThemeService as dk, ThemeStore as dl, TimeAgoPipe as dm, TimelineComponent as dn, ToggleButtonComponent as dp, ToggleInputComponent as dq, ToggleRadioInputComponent as dr, ToolTipDirective as ds, TooltipComponent as dt, TranslateService as du, TreeGridComponent as dv, URL_SEP as dw, USER_STORE_REF as dx, USER_TAB_MAP as dy, UniverseComponent as dz, encodeFramed as e, isExtensiblePlatformNavId as e$, claimDenial as e0, classListSignal as e1, coerceSize as e2, cornerEdge as e3, cornerSide as e4, createMap as e5, createPlatformNavMap as e6, definedWcTierOf as e7, deriveAvatarGradient as e8, deriveContrastColor as e9, flattenTreeGridRows as eA, formatBadgeCount as eB, fullName as eC, generateClipPath as eD, generateTransform as eE, getClassList as eF, getProperty as eG, getScrollParent as eH, getTierFromPreviewPath as eI, getTreeGridRow as eJ, getUniqueId as eK, getValue as eL, hasErrorComputed as eM, hexToRgb as eN, hslToRgb$1 as eO, initMagmoniumApp as eP, initialNotificationState as eQ, initialState$2 as eR, initials as eS, injectAuthenticate as eT, injectDefaultDenial as eU, injectInstallApp as eV, injectParentSize as eW, injectScrollSticky as eX, isBootRedirect as eY, isButtonName as eZ, isCancelledComputed as e_, deriveOppositeColor as ea, derivePropertyName as eb, docActionKey as ec, docAssetCandidates as ed, docProblemKey as ee, docRemotePath as ef, emailValidation as eg, evaluate as eh, evaluateBool as ei, fieldBoolean as ej, fieldNumber as ek, fieldString as el, filterHoldsList as em, filterHoldsOneBound as en, filterHoldsOptions as eo, filterHoldsRange as ep, filterList as eq, filterNumber as er, filterNumberList as es, filterOne as et, filterPanelOf as eu, filterPanelWidth as ev, filterRange as ew, filterTreeGridRows as ex, filterValueList as ey, filterValues as ez, clampFraming as f, provideModalComponents as f$, isJson as f0, isLoadingComputed as f1, isLocalhost as f2, isNavInstanceConfig as f3, isNavMenuConfig as f4, isNavRowsConfig as f5, isNavVisibilityConfig as f6, isPlatformNavId as f7, isSize as f8, isTierPreview as f9, navIdChain as fA, navIdFor as fB, navIdSegment as fC, navIdToRoutePath as fD, navIdToSegments as fE, navParamOf as fF, navTailMatcher as fG, navToId as fH, navVisibilityGuard as fI, nextSectionTableSort as fJ, normalizeAssetOptions as fK, offsetOfLine as fL, parentNavId as fM, parseAddress as fN, parseColor as fO, parseMountPattern as fP, parsePatternNames as fQ, patternValidation as fR, patternsValidation as fS, permissionRefusal as fT, platformNavWidgets as fU, privateGuard as fV, processImageToSvg as fW, provideAppContext as fX, provideMagAppConfig as fY, provideMagWcConfig as fZ, provideMagWcRoutes as f_, isUrlLocalhost as fa, isValidNavId as fb, isValidNavSegment as fc, isWebComponent as fd, linkToId as fe, linkToNav as ff, loadingActions as fg, mInterceptor as fh, manualValidation as fi, matchFieldValidation as fj, matchMount as fk, maxLengthValidation as fl, maxValidation as fm, mergePlatformNav as fn, mergeUnique as fo, mergeUniqueBy as fp, mergeUniqueWith as fq, minAgeValidation as fr, minLengthValidation as fs, minValidation as ft, miniMarkToHtml as fu, mountFor as fv, mountPatternProblem as fw, mountPatternText as fx, mountSegmentOf as fy, mountTokenOf as fz, BaseInputComponent as g, provideMurlUrlSerializer as g0, provideNavWidgets as g1, provideOverlayWidgets as g2, providePlatformNavWidgets as g3, provideSearch as g4, provideSizeContext as g5, provideUserTabs as g6, publicGuard as g7, readFieldPatterns as g8, recordDefinedWcTier as g9, toAttrBool as gA, toAttrNumber as gB, toCssLength as gC, toHostNavId as gD, toLength$1 as gE, toLocalNavId as gF, toggleTreeGridRow as gG, unfetchedPlatformNav as gH, ungroupedDocActions as gI, urlValidation as gJ, wcTierOf as gK, remoteOutletRoute as ga, renderAddress as gb, renderDocument as gc, requiredValidation as gd, resolveConfigAsset as ge, resolveIconSize as gf, resolvePallet as gg, resolvePatternRules as gh, resolveSize as gi, rgbToHex as gj, rgbToHsl as gk, rowHasChildren as gl, samePatterns as gm, sectionTableColumnId as gn, sectionTableColumnWidths as go, sectionTableFrozenCount as gp, segmentsToNavId as gq, setProperty as gr, setTreeGridChildren as gs, setWcTier as gt, settingsWidgets as gu, shouldShowBadge as gv, sortSectionTableRows as gw, splitNavId as gx, splitOnMatch as gy, stringToColor as gz, BaseTextInputComponent as h, initialFraming as i, TextOutputComponent as j, IS_DESIGN_MODE as k, APP_CONTEXT_REF as l, ASSET_BASE_URL as m, AccordionBodyDirective as n, outputSize as o, parseRatio as p, AccordionComponent as q, renameForType as r, AccordionGroupComponent as s, ActionComponent as t, AnimatedGraphsComponent as u, AppCardComponent as v, AppRelationType as w, AppTileComponent as x, AssetStore as y, AssetUrlPipe as z };
-//# sourceMappingURL=magmonium-one-magmonium-one-CuMK-o0U.mjs.map
+//# sourceMappingURL=magmonium-one-magmonium-one-BEK3zmye.mjs.map