@magmonium/one 0.4.2 → 0.4.3

package/fesm2022/{magmonium-one-image-editor-CqTVP7Li.mjs → magmonium-one-image-editor-CgqxXiYr.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-DCRM0N5X.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-BiVtM3fV.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-CqTVP7Li.mjs.map
+//# sourceMappingURL=magmonium-one-image-editor-CgqxXiYr.mjs.map

package/fesm2022/{magmonium-one-image-editor-CqTVP7Li.mjs.map → magmonium-one-image-editor-CgqxXiYr.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"magmonium-one-image-editor-CqTVP7Li.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-CgqxXiYr.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":";;;;AAyCA,MAAM,eAAe,GAAG,MAAM;AAE9B,MAAM,QAAQ,GAAG,CAAC,CAAQ,EAAE,CAAQ,KAClC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;MAsDrB,oBAAoB,CAAA;AACtB,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,0EAAQ;AAC7B,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAChC,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAEhC,IAAA,SAAS,GAAG,MAAM,CAA0C,SAAS,CAAC;AAC9D,IAAA,KAAK,GAAG,SAAS,CAA6B,OAAO,4EAAC;AAEpD,IAAA,MAAM,GAAG,MAAM,CAA0B,SAAS,6EAAC;AACnD,IAAA,SAAS,GAAG,MAAM,CAAqB,SAAS,gFAAC;AACjD,IAAA,UAAU,GAAG,MAAM,CAAC,KAAK,iFAAC;AAC5B,IAAA,OAAO,GAAG,MAAM,CAAU,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,8EAAC;AAC3D,IAAA,UAAU,GAAG,MAAM,CAAC,CAAC,iFAAC;AACtB,IAAA,QAAQ,GAAG,IAAI,GAAG,EAAiB;AACjC,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,gFAAC;IAC5C,QAAQ,GAAG,KAAK;AAEG,IAAA,UAAU,GAAG,QAAQ,CAAa,OAAO;AAC1D,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,SAAS,CAAC,KAAK;QACrB,GAAG,EAAE,QAAQ,GAAG,GAAG;QACnB,GAAG,EAAE,QAAQ,GAAG,GAAG;AACpB,KAAA,CAAC,iFAAC;AAEgB,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,6EAAC;AAExD,IAAA,MAAM,GAAG,QAAQ,CAAwB,MACxD,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,6EACvC;AAEkB,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AAC5C,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE;QAC1B,OAAO;YACL,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC;YAChC,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE,CAAC;SACnC;AACH,IAAA,CAAC,iFAAC;AAEe,IAAA,SAAS,GAAG,QAAQ,CAAwB,MAAK;AAChE,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;QAC5B,OAAO,MAAM,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS;AAC5E,IAAA,CAAC,gFAAC;IAEiB,WAAW,GAAG,QAAQ,CAAC,MACxC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAC9C;;AAGkB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAC1C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE;AAC9B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;AAC/B,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE;AACvE,QAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;AAC3D,QAAA,MAAM,KAAK,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK;QAChC,OAAO;AACL,YAAA,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,KAAK;AAC1B,YAAA,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK;AAC5B,YAAA,SAAS,EAAE,CAAA,UAAA,EAAa,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAA,IAAA,EAAO,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAA,GAAA,CAAK;SACnE;AACH,IAAA,CAAC,+EAAC;AAEe,IAAA,IAAI,GAAG,MAAM,CAAC,CAAC,SAAS,KAAI;AAC3C,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;QACxB,IAAI,SAAS,GAAG,KAAK;QACrB,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC;AACrC,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC;;;QAGvB,iBAAiB,CAAC,IAAI,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE;AACvD,aAAA,IAAI,CAAC,CAAC,MAAM,KAAI;YACf,IAAI,SAAS,EAAE;gBACb,MAAM,CAAC,KAAK,EAAE;gBACd;YACF;YACA,IAAI,CAAC,OAAO,CAAC,GAAG,CACd,cAAc,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAC/D;AACD,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC;AACzB,QAAA,CAAC;aACA,KAAK,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,SAAS;gBAAE,IAAI,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AACnD,QAAA,CAAC,CAAC;QACJ,SAAS,CAAC,MAAK;YACb,SAAS,GAAG,IAAI;AAChB,YAAA,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC;AACxB,YAAA,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE;AACxB,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC,2EAAC;AAEe,IAAA,OAAO,GAAG,MAAM,CAAC,CAAC,SAAS,KAAI;QAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,aAAa;AACzC,QAAA,IAAI,CAAC,KAAK;YAAE;QACZ,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC;QACtC,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE;QAC3C,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,KAC1C,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAC7C;AACD,QAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC;QACvB,SAAS,CAAC,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;AACxC,IAAA,CAAC,8EAAC;;;AAIe,IAAA,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,MAC9D,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CACvB;AAES,IAAA,aAAa,GAAG,CAAC,KAAmB,KAAU;AACtD,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAAE;QACnB,KAAK,CAAC,aAA6B,CAAC,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAAC;QACzE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;AAC1E,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AAC1B,IAAA,CAAC;AAES,IAAA,aAAa,GAAG,CAAC,KAAmB,KAAU;AACtD,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC;AACnD,QAAA,IAAI,CAAC,QAAQ;YAAE;AACf,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE;QACnD,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAChD,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,CAAC,SAAS,CACjC;AACD,QAAA,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;;YAEvB,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3B,MAAM,MAAM,GAAG,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;YACzC,IAAI,MAAM,GAAG,CAAC;AAAE,gBAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC;QAC9D;AAAO,aAAA,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;AAC9B,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;QACtD;QACA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC;AAC1C,IAAA,CAAC;AAES,IAAA,WAAW,GAAG,CAAC,KAAmB,KAAU;QACpD,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC;AACrC,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC;AAC5C,IAAA,CAAC;AAES,IAAA,OAAO,GAAG,CAAC,KAAiB,KAAU;AAC9C,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAAE;QACpB,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,eAAe,CAAC,CAAC;AACxD,IAAA,CAAC;AAES,IAAA,MAAM,GAAG,CAAC,OAAe,KAAU;QAC3C,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,GAAG;AAClC,QAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;YAAE;AAC5B,QAAA,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,MAAM,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AACzD,IAAA,CAAC;IAES,KAAK,GAAG,YAA0B;AAC1C,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE;AAC9B,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,EAAE;YAAE;AACvD,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;AACzB,QAAA,IAAI;AACF,YAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;AAC3D,YAAA,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC,UAAU,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;AACjE,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE;YAC5B,IAAI,CAAC,MAAM,CAAC;AACV,gBAAA,IAAI,EAAE,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;oBAC9D,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,oBAAA,YAAY,EAAE,IAAI,CAAC,GAAG,EAAE;iBACzB,CAAC;AACH,aAAA,CAAC;QACJ;AAAE,QAAA,MAAM;YACN,IAAI,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;QACnC;AACF,IAAA,CAAC;;AAGO,IAAA,KAAK,GAAG,CAAC,EAAU,EAAE,EAAU,KAAU;AAC/C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE;AAC9B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;AAC/B,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK;YAAE;AACtB,QAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;AAC3D,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,KAAK;QACnC,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,MAAM;AAC/B,YAAA,GAAG,OAAO;AACV,YAAA,EAAE,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE,GAAG,QAAQ;AAC9B,YAAA,EAAE,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE,GAAG,QAAQ;AAC/B,SAAA,CAAC,CAAC;AACL,IAAA,CAAC;AAEO,IAAA,MAAM,GAAG,CAAC,MAAc,KAAU;QACxC,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,MAAM;AAC/B,YAAA,GAAG,OAAO;AACV,YAAA,IAAI,EAAE,OAAO,CAAC,IAAI,GAAG,MAAM;AAC5B,SAAA,CAAC,CAAC;AACL,IAAA,CAAC;AAEO,IAAA,aAAa,GAAG,CAAC,MAAqC,KAAU;AACtE,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE;AAC9B,QAAA,IAAI,CAAC,KAAK;YAAE;QACZ,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,KAC1B,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CACpD;AACH,IAAA,CAAC;AAEO,IAAA,MAAM,GAAG,CAAC,MAAqC,KAAU;QAC/D,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC;AAC9B,IAAA,CAAC;uGA5MU,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAlDrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0wBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACS,eAAe,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,OAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,SAAA,EAAA,KAAA,EAAA,QAAA,EAAA,OAAA,EAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,aAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,cAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,MAAA,EAAA,cAAA,EAAA,aAAA,EAAA,aAAA,EAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,mBAAmB,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAIpD,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBApDhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,QAAA,EAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CT,EAAA,OAAA,EACQ,CAAC,eAAe,EAAE,eAAe,EAAE,mBAAmB,CAAC,EAAA,eAAA,EAE/C,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,0wBAAA,CAAA,EAAA;4UAQgB,OAAO,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;;;"}

package/fesm2022/{magmonium-one-magmonium-one-DCRM0N5X.mjs → magmonium-one-magmonium-one-BiVtM3fV.mjs}

@@ -8990,7 +8990,7 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.TOGGLE: {
-                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-DXiBGDPh.mjs');
+                    const { ToggleInputComponent } = await import('./magmonium-one-toggle-B65nJdOJ.mjs');
                     this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                     break;
                 }
@@ -9002,12 +9002,12 @@ class SectionFormItemComponent extends ConfigComponent {
                     break;
                 }
                 case InputType.PASSWORD: {
-                    const { PasswordInputComponent } = await import('./magmonium-one-password-B4R18v54.mjs');
+                    const { PasswordInputComponent } = await import('./magmonium-one-password-6DmhCY23.mjs');
                     this.createDynamicComponent(seq, PasswordInputComponent);
                     break;
                 }
                 case InputType.OTP: {
-                    const { OtpInputComponent } = await import('./magmonium-one-otp-Cq5Hfnh_.mjs');
+                    const { OtpInputComponent } = await import('./magmonium-one-otp-CR75q6_8.mjs');
                     this.createDynamicComponent(seq, OtpInputComponent);
                     break;
                 }
@@ -12006,7 +12006,7 @@ class ClearableInputComponent extends BaseTextInputComponent {
         />
       }
     }
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.input-wrapper{display:flex;align-items:center;background:var(--m-background);overflow:hidden;height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 1px);border-radius:var(--m-input-radius, calc(var(--input-size, 1em) * .5));height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none}.input-wrapper:has(.warning){border-color:var(--m-input-warning-border, var(--m-warning));background:var(--m-input-warning-background, color-mix(in srgb, var(--m-warning) 6%, var(--m-background)));box-shadow:none}.input-wrapper:has(.warning):focus-within{border-color:var(--m-input-warning-border, var(--m-warning));background:var(--m-input-warning-background, color-mix(in srgb, var(--m-warning) 6%, var(--m-background)))}.input-wrapper:has(.warning) input::placeholder,.input-wrapper:has(.warning) textarea::placeholder{color:var(--m-warning, var(--m-warning))}.input-wrapper:has(.error){border-color:var(--m-error);background:var(--m-input-error-background, color-mix(in srgb, var(--m-error) 5%, var(--m-background)));box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);background:var(--m-input-error-background, color-mix(in srgb, var(--m-error) 5%, var(--m-background)));box-shadow:none}.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:var(--m-border, var(--m-border))}.input-wrapper:focus-within input::placeholder,.input-wrapper:focus-visible input::placeholder,.input-wrapper:focus-within textarea::placeholder,.input-wrapper:focus-visible textarea::placeholder{color:var(--m-focus, var(--m-focus))}.input-wrapper:has(.error) input::placeholder,.input-wrapper:has(.error) textarea::placeholder{color:var(--m-error, var(--m-error))}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;padding:var(--m-input-clear-padding, var(--m-text-input-padding, .625em 1.25em ));padding-left:var(--m-input-clear-padding-left, var(--m-text-input-padding-left, var(--m-label-required-space, .75em)));padding-right:var(--m-input-clear-padding-right, var(--m-text-input-padding-right, 1.25em ))}.input-wrapper.has-value{padding-right:0}.input-wrapper{background:var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)));border-color:var(--m-input-clear-border, var(--m-text-input-border, var(--m-input-color, var(--m-mm))));border-radius:var(--m-input-clear-radius, var(--m-text-input-radius, .4em ));transition:var(--m-input-clear-transition, var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease));min-height:var(--m-input-clear-min-height, var(--m-text-input-min-height, 2.25em ));height:var(--m-input-clear-height, var(--m-text-input-height, 2.25em ))}.input-wrapper:hover:not(:has(.error)){border-color:var(--m-input-clear-hover-border, var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12))));background:var(--m-input-clear-hover-background, var(--m-text-input-hover-background, var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)))))}.input-wrapper:focus-within{border-color:var(--m-input-clear-focus-border, var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent)));box-shadow:var(--m-input-clear-shadow, var(--m-text-input-shadow, none));background:var(--m-input-clear-focus-background, var(--m-text-input-focus-background, var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)))))}.input-wrapper .m-icon{--m-icon-size: var(--m-input-clear-icon-size, var(--m-input-clear-size, 1.1em )) !important;color:var(--m-input-clear-icon-color, var(--m-text-input-icon-color, inherit));opacity:var(--m-input-clear-icon-opacity, var(--m-text-input-icon-opacity, 1));flex-shrink:0;transition:opacity .2s ease}.input-wrapper:focus-within .m-icon{opacity:var(--m-input-clear-icon-focus-opacity, var(--m-text-input-icon-focus-opacity, 1))}.input-wrapper .m-one-button{height:100%;display:inline-flex;align-items:center;justify-content:center;--m-button-size: var(--m-input-clear-size, 1rem) !important;opacity:.5;transition:opacity .2s ease}.input-wrapper .m-one-button:hover{opacity:.8}.input-wrapper input{appearance:none;border:none;outline:none;flex:1;background:transparent;color:var(--m-input-clear-color, var(--m-text-input-color, var(--m-text)));font-family:inherit;font-weight:var(--m-input-clear-font-weight, var(--m-text-input-font-weight, inherit));font-size:var(--m-input-clear-size, 1em);padding:0;caret-color:var(--m-input-clear-caret-color, var(--m-text-input-caret-color, auto))}.input-wrapper input::placeholder{font-weight:var(--m-input-clear-placeholder-weight, var(--m-text-input-placeholder-weight, inherit));opacity:var(--m-input-clear-placeholder-opacity, var(--m-text-input-placeholder-opacity, inherit))}:host(.m-input--underlined) .input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--m-backdrop-border);border-radius:0;min-height:auto;height:auto;transition:border-color .3s ease}:host(.m-input--underlined) .input-wrapper:focus-within{border-bottom-color:var(--m-mm);box-shadow:none}:host(.m-input--underlined) input{font-size:var(--m-input-clear-size, 1.125rem);font-weight:var(--m-input-clear-font-weight, var(--m-text-input-font-weight, 700));color:var(--m-input-clear-color, var(--m-text-input-color, var(--m-text)))}:host(.m-input--underlined) .m-icon{--m-icon-size: var(--m-input-clear-size, 1.125rem) !important}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "params", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "fontWeight", "label", "noTranslate", "params"], outputs: ["configChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.input-wrapper{display:flex;align-items:center;background:var(--m-background);overflow:hidden;height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 1px);border-radius:var(--m-input-radius, calc(var(--input-size, 1em) * .5));height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none}.input-wrapper:has(.warning){border-color:var(--m-input-warning-border, var(--m-warning));background:var(--m-input-warning-background, color-mix(in srgb, var(--m-warning) 6%, var(--m-background)));box-shadow:none}.input-wrapper:has(.warning):focus-within{border-color:var(--m-input-warning-border, var(--m-warning));background:var(--m-input-warning-background, color-mix(in srgb, var(--m-warning) 6%, var(--m-background)))}.input-wrapper:has(.warning) input::placeholder,.input-wrapper:has(.warning) textarea::placeholder{color:var(--m-warning, var(--m-warning))}.input-wrapper:has(.error){border-color:var(--m-error);background:var(--m-input-error-background, color-mix(in srgb, var(--m-error) 5%, var(--m-background)));box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);background:var(--m-input-error-background, color-mix(in srgb, var(--m-error) 5%, var(--m-background)));box-shadow:none}.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:var(--m-border, var(--m-border))}.input-wrapper:focus-within input::placeholder,.input-wrapper:focus-visible input::placeholder,.input-wrapper:focus-within textarea::placeholder,.input-wrapper:focus-visible textarea::placeholder{color:var(--m-focus, var(--m-focus))}.input-wrapper:has(.error) input::placeholder,.input-wrapper:has(.error) textarea::placeholder{color:var(--m-error, var(--m-error))}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;padding:var(--m-input-clear-padding, var(--m-text-input-padding, 0 1.25em ));padding-left:var(--m-input-clear-padding-left, var(--m-text-input-padding-left, var(--m-label-required-space, .75em)));padding-right:var(--m-input-clear-padding-right, var(--m-text-input-padding-right, 1.25em ))}.input-wrapper.has-value{padding-right:0}.input-wrapper{background:var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)));border-color:var(--m-input-clear-border, var(--m-text-input-border, var(--m-input-color, var(--m-mm))));border-radius:var(--m-input-clear-radius, var(--m-text-input-radius, .4em ));transition:var(--m-input-clear-transition, var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease));min-height:var(--m-input-clear-min-height, var(--m-text-input-min-height, 2.25em ));height:var(--m-input-clear-height, var(--m-text-input-height, 2.25em ))}.input-wrapper:hover:not(:has(.error)){border-color:var(--m-input-clear-hover-border, var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12))));background:var(--m-input-clear-hover-background, var(--m-text-input-hover-background, var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)))))}.input-wrapper:focus-within{border-color:var(--m-input-clear-focus-border, var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent)));box-shadow:var(--m-input-clear-shadow, var(--m-text-input-shadow, none));background:var(--m-input-clear-focus-background, var(--m-text-input-focus-background, var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)))))}.input-wrapper .m-icon{--m-icon-size: var(--m-input-clear-icon-size, var(--m-input-clear-size, 1.1em )) !important;color:var(--m-input-clear-icon-color, var(--m-text-input-icon-color, inherit));opacity:var(--m-input-clear-icon-opacity, var(--m-text-input-icon-opacity, 1));flex-shrink:0;transition:opacity .2s ease}.input-wrapper:focus-within .m-icon{opacity:var(--m-input-clear-icon-focus-opacity, var(--m-text-input-icon-focus-opacity, 1))}.input-wrapper .m-one-button{align-self:stretch;height:100%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;--m-button-size: var(--m-input-clear-size, 1em) !important;opacity:.5;transition:opacity .2s ease}.input-wrapper .m-one-button:hover{opacity:.8}.input-wrapper input{appearance:none;border:none;outline:none;flex:1;background:transparent;color:var(--m-input-clear-color, var(--m-text-input-color, var(--m-text)));font-family:inherit;font-weight:var(--m-input-clear-font-weight, var(--m-text-input-font-weight, inherit));font-size:var(--m-input-clear-size, 1em);padding:0;caret-color:var(--m-input-clear-caret-color, var(--m-text-input-caret-color, auto))}.input-wrapper input::placeholder{font-weight:var(--m-input-clear-placeholder-weight, var(--m-text-input-placeholder-weight, inherit));opacity:var(--m-input-clear-placeholder-opacity, var(--m-text-input-placeholder-opacity, inherit))}:host(.m-input--underlined) .input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--m-backdrop-border);border-radius:0;min-height:auto;height:auto;transition:border-color .3s ease}:host(.m-input--underlined) .input-wrapper:focus-within{border-bottom-color:var(--m-mm);box-shadow:none}:host(.m-input--underlined) input{font-size:var(--m-input-clear-size, 1.125rem);font-weight:var(--m-input-clear-font-weight, var(--m-text-input-font-weight, 700));color:var(--m-input-clear-color, var(--m-text-input-color, var(--m-text)))}:host(.m-input--underlined) .m-icon{--m-icon-size: var(--m-input-clear-size, 1.125rem) !important}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "m-label", inputs: ["for", "placeholder", "params", "required", "disabled", "color"] }, { kind: "component", type: TextOutputComponent, selector: "m-text-output", inputs: ["config", "align", "variant", "color", "fontWeight", "label", "noTranslate", "params"], outputs: ["configChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ClearableInputComponent, decorators: [{
             type: Component,
@@ -12068,7 +12068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         TranslatePipe,
                     ], host: {
                         '[class]': "config()?.variant ? 'm-input--' + config()?.variant : ''",
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.input-wrapper{display:flex;align-items:center;background:var(--m-background);overflow:hidden;height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 1px);border-radius:var(--m-input-radius, calc(var(--input-size, 1em) * .5));height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none}.input-wrapper:has(.warning){border-color:var(--m-input-warning-border, var(--m-warning));background:var(--m-input-warning-background, color-mix(in srgb, var(--m-warning) 6%, var(--m-background)));box-shadow:none}.input-wrapper:has(.warning):focus-within{border-color:var(--m-input-warning-border, var(--m-warning));background:var(--m-input-warning-background, color-mix(in srgb, var(--m-warning) 6%, var(--m-background)))}.input-wrapper:has(.warning) input::placeholder,.input-wrapper:has(.warning) textarea::placeholder{color:var(--m-warning, var(--m-warning))}.input-wrapper:has(.error){border-color:var(--m-error);background:var(--m-input-error-background, color-mix(in srgb, var(--m-error) 5%, var(--m-background)));box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);background:var(--m-input-error-background, color-mix(in srgb, var(--m-error) 5%, var(--m-background)));box-shadow:none}.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:var(--m-border, var(--m-border))}.input-wrapper:focus-within input::placeholder,.input-wrapper:focus-visible input::placeholder,.input-wrapper:focus-within textarea::placeholder,.input-wrapper:focus-visible textarea::placeholder{color:var(--m-focus, var(--m-focus))}.input-wrapper:has(.error) input::placeholder,.input-wrapper:has(.error) textarea::placeholder{color:var(--m-error, var(--m-error))}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;padding:var(--m-input-clear-padding, var(--m-text-input-padding, .625em 1.25em ));padding-left:var(--m-input-clear-padding-left, var(--m-text-input-padding-left, var(--m-label-required-space, .75em)));padding-right:var(--m-input-clear-padding-right, var(--m-text-input-padding-right, 1.25em ))}.input-wrapper.has-value{padding-right:0}.input-wrapper{background:var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)));border-color:var(--m-input-clear-border, var(--m-text-input-border, var(--m-input-color, var(--m-mm))));border-radius:var(--m-input-clear-radius, var(--m-text-input-radius, .4em ));transition:var(--m-input-clear-transition, var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease));min-height:var(--m-input-clear-min-height, var(--m-text-input-min-height, 2.25em ));height:var(--m-input-clear-height, var(--m-text-input-height, 2.25em ))}.input-wrapper:hover:not(:has(.error)){border-color:var(--m-input-clear-hover-border, var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12))));background:var(--m-input-clear-hover-background, var(--m-text-input-hover-background, var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)))))}.input-wrapper:focus-within{border-color:var(--m-input-clear-focus-border, var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent)));box-shadow:var(--m-input-clear-shadow, var(--m-text-input-shadow, none));background:var(--m-input-clear-focus-background, var(--m-text-input-focus-background, var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)))))}.input-wrapper .m-icon{--m-icon-size: var(--m-input-clear-icon-size, var(--m-input-clear-size, 1.1em )) !important;color:var(--m-input-clear-icon-color, var(--m-text-input-icon-color, inherit));opacity:var(--m-input-clear-icon-opacity, var(--m-text-input-icon-opacity, 1));flex-shrink:0;transition:opacity .2s ease}.input-wrapper:focus-within .m-icon{opacity:var(--m-input-clear-icon-focus-opacity, var(--m-text-input-icon-focus-opacity, 1))}.input-wrapper .m-one-button{height:100%;display:inline-flex;align-items:center;justify-content:center;--m-button-size: var(--m-input-clear-size, 1rem) !important;opacity:.5;transition:opacity .2s ease}.input-wrapper .m-one-button:hover{opacity:.8}.input-wrapper input{appearance:none;border:none;outline:none;flex:1;background:transparent;color:var(--m-input-clear-color, var(--m-text-input-color, var(--m-text)));font-family:inherit;font-weight:var(--m-input-clear-font-weight, var(--m-text-input-font-weight, inherit));font-size:var(--m-input-clear-size, 1em);padding:0;caret-color:var(--m-input-clear-caret-color, var(--m-text-input-caret-color, auto))}.input-wrapper input::placeholder{font-weight:var(--m-input-clear-placeholder-weight, var(--m-text-input-placeholder-weight, inherit));opacity:var(--m-input-clear-placeholder-opacity, var(--m-text-input-placeholder-opacity, inherit))}:host(.m-input--underlined) .input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--m-backdrop-border);border-radius:0;min-height:auto;height:auto;transition:border-color .3s ease}:host(.m-input--underlined) .input-wrapper:focus-within{border-bottom-color:var(--m-mm);box-shadow:none}:host(.m-input--underlined) input{font-size:var(--m-input-clear-size, 1.125rem);font-weight:var(--m-input-clear-font-weight, var(--m-text-input-font-weight, 700));color:var(--m-input-clear-color, var(--m-text-input-color, var(--m-text)))}:host(.m-input--underlined) .m-icon{--m-icon-size: var(--m-input-clear-size, 1.125rem) !important}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}.input-wrapper{display:flex;align-items:center;background:var(--m-background);overflow:hidden;height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 1px);border-radius:var(--m-input-radius, calc(var(--input-size, 1em) * .5));height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none}.input-wrapper:has(.warning){border-color:var(--m-input-warning-border, var(--m-warning));background:var(--m-input-warning-background, color-mix(in srgb, var(--m-warning) 6%, var(--m-background)));box-shadow:none}.input-wrapper:has(.warning):focus-within{border-color:var(--m-input-warning-border, var(--m-warning));background:var(--m-input-warning-background, color-mix(in srgb, var(--m-warning) 6%, var(--m-background)))}.input-wrapper:has(.warning) input::placeholder,.input-wrapper:has(.warning) textarea::placeholder{color:var(--m-warning, var(--m-warning))}.input-wrapper:has(.error){border-color:var(--m-error);background:var(--m-input-error-background, color-mix(in srgb, var(--m-error) 5%, var(--m-background)));box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);background:var(--m-input-error-background, color-mix(in srgb, var(--m-error) 5%, var(--m-background)));box-shadow:none}.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:var(--m-border, var(--m-border))}.input-wrapper:focus-within input::placeholder,.input-wrapper:focus-visible input::placeholder,.input-wrapper:focus-within textarea::placeholder,.input-wrapper:focus-visible textarea::placeholder{color:var(--m-focus, var(--m-focus))}.input-wrapper:has(.error) input::placeholder,.input-wrapper:has(.error) textarea::placeholder{color:var(--m-error, var(--m-error))}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;padding:var(--m-input-clear-padding, var(--m-text-input-padding, 0 1.25em ));padding-left:var(--m-input-clear-padding-left, var(--m-text-input-padding-left, var(--m-label-required-space, .75em)));padding-right:var(--m-input-clear-padding-right, var(--m-text-input-padding-right, 1.25em ))}.input-wrapper.has-value{padding-right:0}.input-wrapper{background:var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)));border-color:var(--m-input-clear-border, var(--m-text-input-border, var(--m-input-color, var(--m-mm))));border-radius:var(--m-input-clear-radius, var(--m-text-input-radius, .4em ));transition:var(--m-input-clear-transition, var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease));min-height:var(--m-input-clear-min-height, var(--m-text-input-min-height, 2.25em ));height:var(--m-input-clear-height, var(--m-text-input-height, 2.25em ))}.input-wrapper:hover:not(:has(.error)){border-color:var(--m-input-clear-hover-border, var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12))));background:var(--m-input-clear-hover-background, var(--m-text-input-hover-background, var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)))))}.input-wrapper:focus-within{border-color:var(--m-input-clear-focus-border, var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent)));box-shadow:var(--m-input-clear-shadow, var(--m-text-input-shadow, none));background:var(--m-input-clear-focus-background, var(--m-text-input-focus-background, var(--m-input-clear-background, var(--m-text-input-background, var(--m-background)))))}.input-wrapper .m-icon{--m-icon-size: var(--m-input-clear-icon-size, var(--m-input-clear-size, 1.1em )) !important;color:var(--m-input-clear-icon-color, var(--m-text-input-icon-color, inherit));opacity:var(--m-input-clear-icon-opacity, var(--m-text-input-icon-opacity, 1));flex-shrink:0;transition:opacity .2s ease}.input-wrapper:focus-within .m-icon{opacity:var(--m-input-clear-icon-focus-opacity, var(--m-text-input-icon-focus-opacity, 1))}.input-wrapper .m-one-button{align-self:stretch;height:100%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;--m-button-size: var(--m-input-clear-size, 1em) !important;opacity:.5;transition:opacity .2s ease}.input-wrapper .m-one-button:hover{opacity:.8}.input-wrapper input{appearance:none;border:none;outline:none;flex:1;background:transparent;color:var(--m-input-clear-color, var(--m-text-input-color, var(--m-text)));font-family:inherit;font-weight:var(--m-input-clear-font-weight, var(--m-text-input-font-weight, inherit));font-size:var(--m-input-clear-size, 1em);padding:0;caret-color:var(--m-input-clear-caret-color, var(--m-text-input-caret-color, auto))}.input-wrapper input::placeholder{font-weight:var(--m-input-clear-placeholder-weight, var(--m-text-input-placeholder-weight, inherit));opacity:var(--m-input-clear-placeholder-opacity, var(--m-text-input-placeholder-opacity, inherit))}:host(.m-input--underlined) .input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--m-backdrop-border);border-radius:0;min-height:auto;height:auto;transition:border-color .3s ease}:host(.m-input--underlined) .input-wrapper:focus-within{border-bottom-color:var(--m-mm);box-shadow:none}:host(.m-input--underlined) input{font-size:var(--m-input-clear-size, 1.125rem);font-weight:var(--m-input-clear-font-weight, var(--m-text-input-font-weight, 700));color:var(--m-input-clear-color, var(--m-text-input-color, var(--m-text)))}:host(.m-input--underlined) .m-icon{--m-icon-size: var(--m-input-clear-size, 1.125rem) !important}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
 
 /**
@@ -19274,6 +19274,7 @@ class ColComponent extends ConfigComponent {
     paddingY = input(undefined, ...(ngDevMode ? [{ debugName: "paddingY" }] : /* istanbul ignore next */ []));
     alignX = input(undefined, ...(ngDevMode ? [{ debugName: "alignX" }] : /* istanbul ignore next */ []));
     alignY = input(undefined, ...(ngDevMode ? [{ debugName: "alignY" }] : /* istanbul ignore next */ []));
+    variant = input(undefined, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     resolvedXs = computed(() => this.xs() ?? this.config()?.xs, ...(ngDevMode ? [{ debugName: "resolvedXs" }] : /* istanbul ignore next */ []));
     resolvedSm = computed(() => this.sm() ?? this.config()?.sm, ...(ngDevMode ? [{ debugName: "resolvedSm" }] : /* istanbul ignore next */ []));
     resolvedMd = computed(() => this.md() ?? this.config()?.md, ...(ngDevMode ? [{ debugName: "resolvedMd" }] : /* istanbul ignore next */ []));
@@ -19336,9 +19337,15 @@ class ColComponent extends ConfigComponent {
         return list.join(' ');
     }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     sectionContext = inject(SECTION_CONTEXT, { optional: true });
-    noBorder = computed(() => this.sectionContext?.variant() === 'noBorder', ...(ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => {
+        const own = this.variant() ?? this.config()?.variant;
+        return own === 'noBorder' || own === 'withBorder'
+            ? own
+            : this.sectionContext?.variant();
+    }, ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    noBorder = computed(() => this.resolvedVariant() === 'noBorder', ...(ngDevMode ? [{ debugName: "noBorder" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ColComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ColComponent, isStandalone: true, selector: "m-col", inputs: { xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null }, alignX: { classPropertyName: "alignX", publicName: "alignX", isSignal: true, isRequired: false, transformFunction: null }, alignY: { classPropertyName: "alignY", publicName: "alignY", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "class.is-design-mode": "isDesignMode", "class.is-full-height": "resolvedFullHeight()" }, classAttribute: "m-col" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;grid-column:span 12;box-sizing:border-box;width:100%;min-width:0}:host(.is-full-height){height:100%}:host(.is-design-mode){min-height:4em}:host.has-padding-x{padding-inline:var(--col-px, var(--section-px, var(--_section-px, 1rem)))}:host.has-padding-y{padding-block:var(--col-py, var(--section-pt, var(--_section-pt, 1.5rem)))}:host(:not(:last-child)){border-right:1px solid var(--m-backdrop-border)}@container mag-grid (max-width: 575.98px){:host(:not(:last-child)){border-right:none;border-bottom:1px solid var(--m-backdrop-border)}}:host(.no-border){border-right:none}@container mag-grid (max-width: 575.98px){:host(.no-border){border-bottom:none}}:host.full-width{grid-column:span 12!important;width:calc(100% + 2 * var(--section-px, var(--_section-px, 1rem)));margin-inline:calc(-1 * var(--section-px, var(--_section-px, 1rem)))}:host.col-xs-1{grid-column:span 1;width:calc(100% * 1 / 12)}:host.col-xs-2{grid-column:span 2;width:calc(100% * 2 / 12)}:host.col-xs-3{grid-column:span 3;width:25%}:host.col-xs-4{grid-column:span 4;width:calc(100% * 4 / 12)}:host.col-xs-5{grid-column:span 5;width:calc(100% * 5 / 12)}:host.col-xs-6{grid-column:span 6;width:50%}:host.col-xs-7{grid-column:span 7;width:calc(100% * 7 / 12)}:host.col-xs-8{grid-column:span 8;width:calc(100% * 8 / 12)}:host.col-xs-9{grid-column:span 9;width:75%}:host.col-xs-10{grid-column:span 10;width:calc(100% * 10 / 12)}:host.col-xs-11{grid-column:span 11;width:calc(100% * 11 / 12)}:host.col-xs-12{grid-column:span 12;width:100%}@container mag-grid (min-width: 576px){:host.col-sm-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 576px){:host.col-sm-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 576px){:host.col-sm-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 576px){:host.col-sm-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 768px){:host.col-md-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 768px){:host.col-md-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 768px){:host.col-md-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 768px){:host.col-md-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 992px){:host.col-lg-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 992px){:host.col-lg-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 992px){:host.col-lg-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 992px){:host.col-lg-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 1200px){:host.col-xl-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 1200px){:host.col-xl-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 1200px){:host.col-xl-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 1200px){:host.col-xl-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 1400px){:host.col-xxl-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 1400px){:host.col-xxl-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 1400px){:host.col-xxl-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 1400px){:host.col-xxl-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-12{grid-column:span 12;width:100%}}:host.align-x-left,:host.align-x-center,:host.align-x-right,:host.align-y-top,:host.align-y-center,:host.align-y-bottom{display:flex;flex-direction:column}:host.align-x-left{align-items:flex-start}:host.align-x-center{align-items:center}:host.align-x-right{align-items:flex-end}:host.align-y-top{justify-content:flex-start}:host.align-y-center{justify-content:center}:host.align-y-bottom{justify-content:flex-end}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ColComponent, isStandalone: true, selector: "m-col", inputs: { xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, paddingX: { classPropertyName: "paddingX", publicName: "paddingX", isSignal: true, isRequired: false, transformFunction: null }, paddingY: { classPropertyName: "paddingY", publicName: "paddingY", isSignal: true, isRequired: false, transformFunction: null }, alignX: { classPropertyName: "alignX", publicName: "alignX", isSignal: true, isRequired: false, transformFunction: null }, alignY: { classPropertyName: "alignY", publicName: "alignY", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "class.is-design-mode": "isDesignMode", "class.is-full-height": "resolvedFullHeight()" }, classAttribute: "m-col" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;grid-column:span 12;box-sizing:border-box;width:100%;min-width:0}:host(.is-full-height){height:100%}:host(.is-design-mode){min-height:4em}:host.has-padding-x{padding-inline:var(--col-px, var(--section-px, var(--_section-px, 1rem)))}:host.has-padding-y{padding-block:var(--col-py, var(--section-pt, var(--_section-pt, 1.5rem)))}:host(:not(:last-child)){border-right:1px solid var(--m-backdrop-border)}@container mag-grid (max-width: 575.98px){:host(:not(:last-child)){border-right:none;border-bottom:1px solid var(--m-backdrop-border)}}:host(.no-border){border-right:none}@container mag-grid (max-width: 575.98px){:host(.no-border){border-bottom:none}}:host.full-width{grid-column:span 12!important;width:calc(100% + 2 * var(--section-px, var(--_section-px, 1rem)));margin-inline:calc(-1 * var(--section-px, var(--_section-px, 1rem)))}:host.col-xs-1{grid-column:span 1;width:calc(100% * 1 / 12)}:host.col-xs-2{grid-column:span 2;width:calc(100% * 2 / 12)}:host.col-xs-3{grid-column:span 3;width:25%}:host.col-xs-4{grid-column:span 4;width:calc(100% * 4 / 12)}:host.col-xs-5{grid-column:span 5;width:calc(100% * 5 / 12)}:host.col-xs-6{grid-column:span 6;width:50%}:host.col-xs-7{grid-column:span 7;width:calc(100% * 7 / 12)}:host.col-xs-8{grid-column:span 8;width:calc(100% * 8 / 12)}:host.col-xs-9{grid-column:span 9;width:75%}:host.col-xs-10{grid-column:span 10;width:calc(100% * 10 / 12)}:host.col-xs-11{grid-column:span 11;width:calc(100% * 11 / 12)}:host.col-xs-12{grid-column:span 12;width:100%}@container mag-grid (min-width: 576px){:host.col-sm-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 576px){:host.col-sm-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 576px){:host.col-sm-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 576px){:host.col-sm-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 768px){:host.col-md-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 768px){:host.col-md-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 768px){:host.col-md-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 768px){:host.col-md-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 992px){:host.col-lg-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 992px){:host.col-lg-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 992px){:host.col-lg-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 992px){:host.col-lg-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 1200px){:host.col-xl-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 1200px){:host.col-xl-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 1200px){:host.col-xl-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 1200px){:host.col-xl-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 1400px){:host.col-xxl-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 1400px){:host.col-xxl-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 1400px){:host.col-xxl-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 1400px){:host.col-xxl-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-12{grid-column:span 12;width:100%}}:host.align-x-left,:host.align-x-center,:host.align-x-right,:host.align-y-top,:host.align-y-center,:host.align-y-bottom{display:flex;flex-direction:column}:host.align-x-left{align-items:flex-start}:host.align-x-center{align-items:center}:host.align-x-right{align-items:flex-end}:host.align-y-top{justify-content:flex-start}:host.align-y-center{justify-content:center}:host.align-y-bottom{justify-content:flex-end}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ColComponent, decorators: [{
             type: Component,
@@ -19348,7 +19355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[class.is-design-mode]': 'isDesignMode',
                         '[class.is-full-height]': 'resolvedFullHeight()',
                     }, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;grid-column:span 12;box-sizing:border-box;width:100%;min-width:0}:host(.is-full-height){height:100%}:host(.is-design-mode){min-height:4em}:host.has-padding-x{padding-inline:var(--col-px, var(--section-px, var(--_section-px, 1rem)))}:host.has-padding-y{padding-block:var(--col-py, var(--section-pt, var(--_section-pt, 1.5rem)))}:host(:not(:last-child)){border-right:1px solid var(--m-backdrop-border)}@container mag-grid (max-width: 575.98px){:host(:not(:last-child)){border-right:none;border-bottom:1px solid var(--m-backdrop-border)}}:host(.no-border){border-right:none}@container mag-grid (max-width: 575.98px){:host(.no-border){border-bottom:none}}:host.full-width{grid-column:span 12!important;width:calc(100% + 2 * var(--section-px, var(--_section-px, 1rem)));margin-inline:calc(-1 * var(--section-px, var(--_section-px, 1rem)))}:host.col-xs-1{grid-column:span 1;width:calc(100% * 1 / 12)}:host.col-xs-2{grid-column:span 2;width:calc(100% * 2 / 12)}:host.col-xs-3{grid-column:span 3;width:25%}:host.col-xs-4{grid-column:span 4;width:calc(100% * 4 / 12)}:host.col-xs-5{grid-column:span 5;width:calc(100% * 5 / 12)}:host.col-xs-6{grid-column:span 6;width:50%}:host.col-xs-7{grid-column:span 7;width:calc(100% * 7 / 12)}:host.col-xs-8{grid-column:span 8;width:calc(100% * 8 / 12)}:host.col-xs-9{grid-column:span 9;width:75%}:host.col-xs-10{grid-column:span 10;width:calc(100% * 10 / 12)}:host.col-xs-11{grid-column:span 11;width:calc(100% * 11 / 12)}:host.col-xs-12{grid-column:span 12;width:100%}@container mag-grid (min-width: 576px){:host.col-sm-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 576px){:host.col-sm-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 576px){:host.col-sm-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 576px){:host.col-sm-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 576px){:host.col-sm-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 768px){:host.col-md-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 768px){:host.col-md-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 768px){:host.col-md-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 768px){:host.col-md-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 768px){:host.col-md-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 992px){:host.col-lg-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 992px){:host.col-lg-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 992px){:host.col-lg-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 992px){:host.col-lg-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 992px){:host.col-lg-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 1200px){:host.col-xl-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 1200px){:host.col-xl-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 1200px){:host.col-xl-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 1200px){:host.col-xl-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 1200px){:host.col-xl-12{grid-column:span 12;width:100%}}@container mag-grid (min-width: 1400px){:host.col-xxl-1{grid-column:span 1;width:calc(100% * 1 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-2{grid-column:span 2;width:calc(100% * 2 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-3{grid-column:span 3;width:25%}}@container mag-grid (min-width: 1400px){:host.col-xxl-4{grid-column:span 4;width:calc(100% * 4 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-5{grid-column:span 5;width:calc(100% * 5 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-6{grid-column:span 6;width:50%}}@container mag-grid (min-width: 1400px){:host.col-xxl-7{grid-column:span 7;width:calc(100% * 7 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-8{grid-column:span 8;width:calc(100% * 8 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-9{grid-column:span 9;width:75%}}@container mag-grid (min-width: 1400px){:host.col-xxl-10{grid-column:span 10;width:calc(100% * 10 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-11{grid-column:span 11;width:calc(100% * 11 / 12)}}@container mag-grid (min-width: 1400px){:host.col-xxl-12{grid-column:span 12;width:100%}}:host.align-x-left,:host.align-x-center,:host.align-x-right,:host.align-y-top,:host.align-y-center,:host.align-y-bottom{display:flex;flex-direction:column}:host.align-x-left{align-items:flex-start}:host.align-x-center{align-items:center}:host.align-x-right{align-items:flex-end}:host.align-y-top{justify-content:flex-start}:host.align-y-center{justify-content:center}:host.align-y-bottom{justify-content:flex-end}\n"] }]
-        }], propDecorators: { xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingX: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingX", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], alignX: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignX", required: false }] }], alignY: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignY", required: false }] }] } });
+        }], propDecorators: { xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingX: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingX", required: false }] }], paddingY: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingY", required: false }] }], alignX: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignX", required: false }] }], alignY: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignY", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class SectionCardComponent extends ColComponent {
     margin = input(false, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
@@ -22990,7 +22997,7 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.TOGGLE: {
-                const { ToggleInputComponent } = await import('./magmonium-one-toggle-DXiBGDPh.mjs');
+                const { ToggleInputComponent } = await import('./magmonium-one-toggle-B65nJdOJ.mjs');
                 this.createDynamicComponent(seq, ToggleInputComponent, [], true);
                 break;
             }
@@ -23002,12 +23009,12 @@ class WrapperInputComponent extends ConfigComponent {
                 break;
             }
             case InputType.PASSWORD: {
-                const { PasswordInputComponent } = await import('./magmonium-one-password-B4R18v54.mjs');
+                const { PasswordInputComponent } = await import('./magmonium-one-password-6DmhCY23.mjs');
                 this.createDynamicComponent(seq, PasswordInputComponent);
                 break;
             }
             case InputType.OTP: {
-                const { OtpInputComponent } = await import('./magmonium-one-otp-Cq5Hfnh_.mjs');
+                const { OtpInputComponent } = await import('./magmonium-one-otp-CR75q6_8.mjs');
                 this.createDynamicComponent(seq, OtpInputComponent);
                 break;
             }
@@ -24714,7 +24721,7 @@ class FileUploadInputComponent extends BaseInputComponent {
         const modalStore = this.modalStore;
         if (!modalStore)
             return undefined;
-        const { ImageEditorComponent } = await import('./magmonium-one-image-editor-CqTVP7Li.mjs');
+        const { ImageEditorComponent } = await import('./magmonium-one-image-editor-CgqxXiYr.mjs');
         const ratio = String(this.config()?.ratio ?? '');
         return new Promise((resolve) => {
             const modalRef = new ModalRef();
@@ -28053,7 +28060,7 @@ class MHeroComponent {
         <ng-content select="[right]"></ng-content>
       </m-col>
     </m-section>
-  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-hero{--chart-color: #10b981;height:var(--m-hero-height, 60vh);min-height:var(--m-hero-min-height, auto);background:var(--m-hero-background, #ffffff);color:#1e293b;--m-section-border-bottom: var(--m-hero-border-bottom, 1px solid var(--m-backdrop-border));overflow:hidden}@media(max-width:767.98px){.m-hero{height:auto}}m-col{position:relative}@media(max-width:767.98px){m-col{height:var(--m-hero-left-height-mobile, 38vh);min-height:220px;border-right:none;border-bottom:1px solid var(--m-backdrop-border)}}.m-hero__indicators{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);z-index:5;display:flex;gap:.5rem;background:var(--m-hero-indicators-background, transparent);padding:var(--m-hero-indicators-padding, 0);-webkit-backdrop-filter:var(--m-hero-indicators-backdrop, none);backdrop-filter:var(--m-hero-indicators-backdrop, none)}.indicator{width:24px;height:3px;padding:0;background:#e2e8f0;border:none;cursor:pointer;transition:background .3s ease,width .3s ease}.indicator:hover{background:#cbd5e1}.indicator.active{background:var(--chart-color);width:40px}\n"], dependencies: [{ kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY", "alignX", "alignY"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.m-hero{--chart-color: #10b981;height:var(--m-hero-height, 60vh);min-height:var(--m-hero-min-height, auto);background:var(--m-hero-background, #ffffff);color:#1e293b;--m-section-border-bottom: var(--m-hero-border-bottom, 1px solid var(--m-backdrop-border));overflow:hidden}@media(max-width:767.98px){.m-hero{height:auto}}m-col{position:relative}@media(max-width:767.98px){m-col{height:var(--m-hero-left-height-mobile, 38vh);min-height:220px;border-right:none;border-bottom:1px solid var(--m-backdrop-border)}}.m-hero__indicators{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);z-index:5;display:flex;gap:.5rem;background:var(--m-hero-indicators-background, transparent);padding:var(--m-hero-indicators-padding, 0);-webkit-backdrop-filter:var(--m-hero-indicators-backdrop, none);backdrop-filter:var(--m-hero-indicators-backdrop, none)}.indicator{width:24px;height:3px;padding:0;background:#e2e8f0;border:none;cursor:pointer;transition:background .3s ease,width .3s ease}.indicator:hover{background:#cbd5e1}.indicator.active{background:var(--chart-color);width:40px}\n"], dependencies: [{ kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY", "alignX", "alignY", "variant"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MHeroComponent, decorators: [{
             type: Component,
@@ -32620,7 +32627,7 @@ class TimelineComponent extends ConfigComponent {
         return { item, ...(timeline.componentInputs ?? {}) };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TimelineComponent, isStandalone: true, selector: "m-timeline, m-one-timeline", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, usesInheritance: true, ngImport: i0, template: "@if (config(); as timeline) {\n  <m-section>\n    @if (timeline.label) {\n      <m-section-header [label]=\"timeline.label\" [level]=\"3\" />\n    }\n    <m-col>\n      <div\n        class=\"m-timeline\"\n        [class.m-timeline--compact]=\"timeline.variant === 'compact'\"\n        [class.m-timeline--mobile]=\"timeline.mobileOnly\"\n      >\n        @if (timeline.isLoading) {\n          <div class=\"m-timeline__skeleton\">\n            @for (i of skeletonItems; track $index) {\n              <div class=\"m-timeline__row\">\n                <div class=\"m-timeline__date\">\n                  <span class=\"m-timeline__skeleton-date\"></span>\n                </div>\n                <div class=\"m-timeline__connector\">\n                  <div class=\"m-timeline__dot m-timeline__dot--skeleton\"></div>\n                  <div class=\"m-timeline__line m-timeline__line--skeleton\"></div>\n                </div>\n                <div class=\"m-timeline__content\">\n                  <div class=\"m-timeline__skeleton-content\"></div>\n                </div>\n              </div>\n            }\n          </div>\n        } @else if (!timeline.items?.length) {\n          <div class=\"m-timeline__empty\">\n            <span class=\"m-timeline__empty-label\">{{ 'no-timeline-entries' | translate }}</span>\n          </div>\n        } @else {\n          @for (item of visibleItems(); track $index; let last = $last) {\n            <div\n              class=\"m-timeline__row\"\n              [class.m-timeline__row--last]=\"last && !hasMore()\"\n            >\n              <div class=\"m-timeline__date\">\n                @if (timeline.dateFormat !== 'relative') {\n                  <span class=\"m-timeline__date-absolute\">\n                    {{ item.timestamp | date: 'MMM d' }}\n                  </span>\n                }\n                @if (timeline.dateFormat !== 'absolute') {\n                  <span class=\"m-timeline__date-relative\">\n                    {{ item.timestamp | timeAgo }}\n                  </span>\n                }\n              </div>\n\n              <div class=\"m-timeline__connector\">\n                <div class=\"m-timeline__dot\"></div>\n                @if (!last && timeline.showLine !== false) {\n                  <div class=\"m-timeline__line\"></div>\n                }\n              </div>\n\n              <div class=\"m-timeline__content\">\n                @if (timeline.component) {\n                  <ng-container\n                    [ngComponentOutlet]=\"timeline.component\"\n                    [ngComponentOutletInputs]=\"resolveInputs(item, timeline)\"\n                  />\n                } @else if (item.label) {\n                  <span class=\"m-timeline__label\">{{ item.label }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          @if (hasMore()) {\n            <div class=\"m-timeline__more\">\n              <m-button\n                [config]=\"{\n                  label: 'view-more',\n                  icon: 'chevron-down',\n                  fullWidth: true,\n                }\"\n                (clicked)=\"loadMore()\"\n              />\n            </div>\n          }\n        }\n      </div>\n    </m-col>\n  </m-section>\n}\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.m-timeline{display:flex;flex-direction:column;width:100%}.m-timeline--compact{padding:1rem;gap:.25rem}.m-timeline--compact .m-timeline__row{gap:0 .5rem}.m-timeline--compact .m-timeline__dot{width:8px;height:8px}.m-timeline--compact .m-timeline__content{padding-bottom:0}.m-timeline--mobile{padding:.4rem!important}.m-timeline--mobile .m-timeline__row{grid-template-columns:1.25rem 1fr!important;grid-template-rows:auto auto;gap:0!important;padding:.4rem .25rem!important}.m-timeline--mobile .m-timeline__date{grid-column:2;grid-row:1;align-items:flex-start!important;padding:0 0 .2rem!important;flex-direction:row!important;gap:.4rem!important}.m-timeline--mobile .m-timeline__date-absolute{font-size:.7rem!important}.m-timeline--mobile .m-timeline__date-relative{font-size:.65rem!important;opacity:.5}.m-timeline--mobile .m-timeline__connector{grid-column:1;grid-row:1/3}.m-timeline--mobile .m-timeline__dot{width:6px!important;height:6px!important;margin-top:.35rem!important}.m-timeline--mobile .m-timeline__line{width:1px!important;margin:.4rem 0!important;opacity:.3!important}.m-timeline--mobile .m-timeline__content{grid-column:2;grid-row:2;padding-bottom:1.25rem!important}.m-timeline__row{display:grid;grid-template-columns:5.5rem 2rem 1fr;gap:0 .5rem;position:relative;padding:.25rem .5rem;transition:background-color .3s cubic-bezier(.4,0,.2,1);opacity:0;transform:translateY(20px);animation:timeline-entry .6s cubic-bezier(.2,.8,.2,1) forwards}.m-timeline__row:nth-child(1){animation-delay:.08s}.m-timeline__row:nth-child(2){animation-delay:.16s}.m-timeline__row:nth-child(3){animation-delay:.24s}.m-timeline__row:nth-child(4){animation-delay:.32s}.m-timeline__row:nth-child(5){animation-delay:.4s}.m-timeline__row:nth-child(6){animation-delay:.48s}.m-timeline__row:nth-child(7){animation-delay:.56s}.m-timeline__row:nth-child(8){animation-delay:.64s}.m-timeline__row:nth-child(9){animation-delay:.72s}.m-timeline__row:nth-child(10){animation-delay:.8s}.m-timeline__row:nth-child(11){animation-delay:.88s}.m-timeline__row:nth-child(12){animation-delay:.96s}.m-timeline__row:nth-child(13){animation-delay:1.04s}.m-timeline__row:nth-child(14){animation-delay:1.12s}.m-timeline__row:nth-child(15){animation-delay:1.2s}.m-timeline__row:nth-child(16){animation-delay:1.28s}.m-timeline__row:nth-child(17){animation-delay:1.36s}.m-timeline__row:nth-child(18){animation-delay:1.44s}.m-timeline__row:nth-child(19){animation-delay:1.52s}.m-timeline__row:nth-child(20){animation-delay:1.6s}.m-timeline__row:hover{background:color-mix(in srgb,var(--m-mm) 4%,transparent)}.m-timeline__row:hover .m-timeline__dot{transform:scale(1.3);box-shadow:0 0 15px color-mix(in srgb,var(--m-mm) 50%,transparent)}.m-timeline__row--last .m-timeline__content{padding-bottom:0}.m-timeline__date{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;padding-top:.4rem;gap:.1rem;min-width:0}.m-timeline__date-absolute{font-size:.75rem;font-weight:800;color:var(--m-text);white-space:nowrap;font-feature-settings:\"tnum\";letter-spacing:-.01em}.m-timeline__date-relative{font-size:.6rem;font-weight:700;color:var(--m-text-tertiary);white-space:nowrap;text-transform:uppercase}.m-timeline__connector{display:flex;flex-direction:column;align-items:center;position:relative}.m-timeline__dot{width:8px;height:8px;border-radius:50%;background:var(--m-mm);box-shadow:0 0 10px color-mix(in srgb,var(--m-mm) 40%,transparent);flex-shrink:0;margin-top:.55rem;z-index:1;transition:all .3s ease}.m-timeline__dot--skeleton{background:var(--m-border);box-shadow:none;animation:timeline-pulse 1.4s ease-in-out infinite}.m-timeline__line{display:block;flex:1;width:2px;background:linear-gradient(to bottom,var(--m-mm),transparent);min-height:1.5rem;margin:.5rem 0;opacity:.6;transition:all .3s ease;animation:timeline-fade-in 1s ease-in}.m-timeline__content{padding-top:.1rem;padding-bottom:2rem;min-width:0}.m-timeline__label{font-size:.9rem;color:var(--m-text-secondary);line-height:1.5;font-weight:500}.m-timeline__empty{display:flex;align-items:center;justify-content:center;padding:4rem 1rem}.m-timeline__empty-label{font-size:.9rem;font-weight:600;color:var(--m-text-tertiary);text-transform:uppercase;letter-spacing:.1em}.m-timeline__skeleton{display:flex;flex-direction:column;gap:1.5rem}.m-timeline__skeleton-date{display:block;height:.75rem;width:4rem;background:var(--m-border);border-radius:4px;margin-top:.25rem;animation:timeline-pulse 1.4s ease-in-out infinite;align-self:flex-end}.m-timeline__skeleton-content{height:3.5rem;background:var(--m-border);border-radius:.75rem;animation:timeline-pulse 1.4s ease-in-out infinite;opacity:.6}.m-timeline__more{display:grid;grid-template-columns:5.5rem 2rem 1fr;gap:0 .5rem;padding:1rem 0 4rem}.m-timeline__more m-button{grid-column:1/-1}.m-timeline__more-button{grid-column:3;margin-bottom:2rem;width:fit-content}.m-timeline__more-icon,.m-timeline__more-text{display:none}@keyframes timeline-entry{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes timeline-fade-in{0%{opacity:0}to{opacity:.6}}@keyframes timeline-pulse{0%,to{opacity:.35}50%{opacity:.7}}@media(max-width:600px){.m-timeline{padding:.4rem!important}.m-timeline__row{grid-template-columns:1.25rem 1fr!important;grid-template-rows:auto auto;gap:0!important;padding:.4rem .25rem!important}.m-timeline__date{grid-column:2;grid-row:1;align-items:flex-start!important;padding:0 0 .2rem!important;flex-direction:row!important;gap:.4rem!important}.m-timeline__date-absolute{font-size:.7rem!important}.m-timeline__date-relative{font-size:.65rem!important;opacity:.5}.m-timeline__connector{grid-column:1;grid-row:1/3}.m-timeline__dot{width:6px!important;height:6px!important;margin-top:.35rem!important}.m-timeline__line{width:1px!important;margin:.4rem 0!important;opacity:.3!important}.m-timeline__content{grid-column:2;grid-row:2;padding-bottom:1.25rem!important}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "noTranslate", "params", "reverse", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY", "alignX", "alignY"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TimelineComponent, isStandalone: true, selector: "m-timeline, m-one-timeline", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, usesInheritance: true, ngImport: i0, template: "@if (config(); as timeline) {\n  <m-section>\n    @if (timeline.label) {\n      <m-section-header [label]=\"timeline.label\" [level]=\"3\" />\n    }\n    <m-col>\n      <div\n        class=\"m-timeline\"\n        [class.m-timeline--compact]=\"timeline.variant === 'compact'\"\n        [class.m-timeline--mobile]=\"timeline.mobileOnly\"\n      >\n        @if (timeline.isLoading) {\n          <div class=\"m-timeline__skeleton\">\n            @for (i of skeletonItems; track $index) {\n              <div class=\"m-timeline__row\">\n                <div class=\"m-timeline__date\">\n                  <span class=\"m-timeline__skeleton-date\"></span>\n                </div>\n                <div class=\"m-timeline__connector\">\n                  <div class=\"m-timeline__dot m-timeline__dot--skeleton\"></div>\n                  <div class=\"m-timeline__line m-timeline__line--skeleton\"></div>\n                </div>\n                <div class=\"m-timeline__content\">\n                  <div class=\"m-timeline__skeleton-content\"></div>\n                </div>\n              </div>\n            }\n          </div>\n        } @else if (!timeline.items?.length) {\n          <div class=\"m-timeline__empty\">\n            <span class=\"m-timeline__empty-label\">{{ 'no-timeline-entries' | translate }}</span>\n          </div>\n        } @else {\n          @for (item of visibleItems(); track $index; let last = $last) {\n            <div\n              class=\"m-timeline__row\"\n              [class.m-timeline__row--last]=\"last && !hasMore()\"\n            >\n              <div class=\"m-timeline__date\">\n                @if (timeline.dateFormat !== 'relative') {\n                  <span class=\"m-timeline__date-absolute\">\n                    {{ item.timestamp | date: 'MMM d' }}\n                  </span>\n                }\n                @if (timeline.dateFormat !== 'absolute') {\n                  <span class=\"m-timeline__date-relative\">\n                    {{ item.timestamp | timeAgo }}\n                  </span>\n                }\n              </div>\n\n              <div class=\"m-timeline__connector\">\n                <div class=\"m-timeline__dot\"></div>\n                @if (!last && timeline.showLine !== false) {\n                  <div class=\"m-timeline__line\"></div>\n                }\n              </div>\n\n              <div class=\"m-timeline__content\">\n                @if (timeline.component) {\n                  <ng-container\n                    [ngComponentOutlet]=\"timeline.component\"\n                    [ngComponentOutletInputs]=\"resolveInputs(item, timeline)\"\n                  />\n                } @else if (item.label) {\n                  <span class=\"m-timeline__label\">{{ item.label }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          @if (hasMore()) {\n            <div class=\"m-timeline__more\">\n              <m-button\n                [config]=\"{\n                  label: 'view-more',\n                  icon: 'chevron-down',\n                  fullWidth: true,\n                }\"\n                (clicked)=\"loadMore()\"\n              />\n            </div>\n          }\n        }\n      </div>\n    </m-col>\n  </m-section>\n}\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%}.m-timeline{display:flex;flex-direction:column;width:100%}.m-timeline--compact{padding:1rem;gap:.25rem}.m-timeline--compact .m-timeline__row{gap:0 .5rem}.m-timeline--compact .m-timeline__dot{width:8px;height:8px}.m-timeline--compact .m-timeline__content{padding-bottom:0}.m-timeline--mobile{padding:.4rem!important}.m-timeline--mobile .m-timeline__row{grid-template-columns:1.25rem 1fr!important;grid-template-rows:auto auto;gap:0!important;padding:.4rem .25rem!important}.m-timeline--mobile .m-timeline__date{grid-column:2;grid-row:1;align-items:flex-start!important;padding:0 0 .2rem!important;flex-direction:row!important;gap:.4rem!important}.m-timeline--mobile .m-timeline__date-absolute{font-size:.7rem!important}.m-timeline--mobile .m-timeline__date-relative{font-size:.65rem!important;opacity:.5}.m-timeline--mobile .m-timeline__connector{grid-column:1;grid-row:1/3}.m-timeline--mobile .m-timeline__dot{width:6px!important;height:6px!important;margin-top:.35rem!important}.m-timeline--mobile .m-timeline__line{width:1px!important;margin:.4rem 0!important;opacity:.3!important}.m-timeline--mobile .m-timeline__content{grid-column:2;grid-row:2;padding-bottom:1.25rem!important}.m-timeline__row{display:grid;grid-template-columns:5.5rem 2rem 1fr;gap:0 .5rem;position:relative;padding:.25rem .5rem;transition:background-color .3s cubic-bezier(.4,0,.2,1);opacity:0;transform:translateY(20px);animation:timeline-entry .6s cubic-bezier(.2,.8,.2,1) forwards}.m-timeline__row:nth-child(1){animation-delay:.08s}.m-timeline__row:nth-child(2){animation-delay:.16s}.m-timeline__row:nth-child(3){animation-delay:.24s}.m-timeline__row:nth-child(4){animation-delay:.32s}.m-timeline__row:nth-child(5){animation-delay:.4s}.m-timeline__row:nth-child(6){animation-delay:.48s}.m-timeline__row:nth-child(7){animation-delay:.56s}.m-timeline__row:nth-child(8){animation-delay:.64s}.m-timeline__row:nth-child(9){animation-delay:.72s}.m-timeline__row:nth-child(10){animation-delay:.8s}.m-timeline__row:nth-child(11){animation-delay:.88s}.m-timeline__row:nth-child(12){animation-delay:.96s}.m-timeline__row:nth-child(13){animation-delay:1.04s}.m-timeline__row:nth-child(14){animation-delay:1.12s}.m-timeline__row:nth-child(15){animation-delay:1.2s}.m-timeline__row:nth-child(16){animation-delay:1.28s}.m-timeline__row:nth-child(17){animation-delay:1.36s}.m-timeline__row:nth-child(18){animation-delay:1.44s}.m-timeline__row:nth-child(19){animation-delay:1.52s}.m-timeline__row:nth-child(20){animation-delay:1.6s}.m-timeline__row:hover{background:color-mix(in srgb,var(--m-mm) 4%,transparent)}.m-timeline__row:hover .m-timeline__dot{transform:scale(1.3);box-shadow:0 0 15px color-mix(in srgb,var(--m-mm) 50%,transparent)}.m-timeline__row--last .m-timeline__content{padding-bottom:0}.m-timeline__date{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;padding-top:.4rem;gap:.1rem;min-width:0}.m-timeline__date-absolute{font-size:.75rem;font-weight:800;color:var(--m-text);white-space:nowrap;font-feature-settings:\"tnum\";letter-spacing:-.01em}.m-timeline__date-relative{font-size:.6rem;font-weight:700;color:var(--m-text-tertiary);white-space:nowrap;text-transform:uppercase}.m-timeline__connector{display:flex;flex-direction:column;align-items:center;position:relative}.m-timeline__dot{width:8px;height:8px;border-radius:50%;background:var(--m-mm);box-shadow:0 0 10px color-mix(in srgb,var(--m-mm) 40%,transparent);flex-shrink:0;margin-top:.55rem;z-index:1;transition:all .3s ease}.m-timeline__dot--skeleton{background:var(--m-border);box-shadow:none;animation:timeline-pulse 1.4s ease-in-out infinite}.m-timeline__line{display:block;flex:1;width:2px;background:linear-gradient(to bottom,var(--m-mm),transparent);min-height:1.5rem;margin:.5rem 0;opacity:.6;transition:all .3s ease;animation:timeline-fade-in 1s ease-in}.m-timeline__content{padding-top:.1rem;padding-bottom:2rem;min-width:0}.m-timeline__label{font-size:.9rem;color:var(--m-text-secondary);line-height:1.5;font-weight:500}.m-timeline__empty{display:flex;align-items:center;justify-content:center;padding:4rem 1rem}.m-timeline__empty-label{font-size:.9rem;font-weight:600;color:var(--m-text-tertiary);text-transform:uppercase;letter-spacing:.1em}.m-timeline__skeleton{display:flex;flex-direction:column;gap:1.5rem}.m-timeline__skeleton-date{display:block;height:.75rem;width:4rem;background:var(--m-border);border-radius:4px;margin-top:.25rem;animation:timeline-pulse 1.4s ease-in-out infinite;align-self:flex-end}.m-timeline__skeleton-content{height:3.5rem;background:var(--m-border);border-radius:.75rem;animation:timeline-pulse 1.4s ease-in-out infinite;opacity:.6}.m-timeline__more{display:grid;grid-template-columns:5.5rem 2rem 1fr;gap:0 .5rem;padding:1rem 0 4rem}.m-timeline__more m-button{grid-column:1/-1}.m-timeline__more-button{grid-column:3;margin-bottom:2rem;width:fit-content}.m-timeline__more-icon,.m-timeline__more-text{display:none}@keyframes timeline-entry{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes timeline-fade-in{0%{opacity:0}to{opacity:.6}}@keyframes timeline-pulse{0%,to{opacity:.35}50%{opacity:.7}}@media(max-width:600px){.m-timeline{padding:.4rem!important}.m-timeline__row{grid-template-columns:1.25rem 1fr!important;grid-template-rows:auto auto;gap:0!important;padding:.4rem .25rem!important}.m-timeline__date{grid-column:2;grid-row:1;align-items:flex-start!important;padding:0 0 .2rem!important;flex-direction:row!important;gap:.4rem!important}.m-timeline__date-absolute{font-size:.7rem!important}.m-timeline__date-relative{font-size:.65rem!important;opacity:.5}.m-timeline__connector{grid-column:1;grid-row:1/3}.m-timeline__dot{width:6px!important;height:6px!important;margin-top:.35rem!important}.m-timeline__line{width:1px!important;margin:.4rem 0!important;opacity:.3!important}.m-timeline__content{grid-column:2;grid-row:2;padding-bottom:1.25rem!important}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: SectionHeaderComponent, selector: "m-section-header", inputs: ["sticky", "level", "label", "subLabel", "noTranslate", "params", "reverse", "icon", "menu", "menuName", "visibilityRule", "disableRule", "extraData", "align", "showBack", "actionButton", "actionLabel", "spacing", "maxWidth"], outputs: ["actionClick", "action", "back"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY", "alignX", "alignY", "variant"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimeAgoPipe, name: "timeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
@@ -36140,7 +36147,7 @@ class UserNavComponent {
         this.activeTabId.set(tab.name);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UserNavComponent, isStandalone: true, selector: "m-user-nav", ngImport: i0, template: "<m-section maxHeight=\"full\">\n  @if (currentUser(); as user) {\n    <m-row>\n      <m-col [sm]=\"11\" [padding]=\"true\">\n        <m-user [id]=\"user.id\" [user]=\"user\" mRef=\"root_user\">\n          <span class=\"user-nav__username\">&#64;{{ user.username }}</span>\n        </m-user>\n      </m-col>\n      <m-col [sm]=\"1\">\n        <m-context-menu name=\"user_header\" [config]=\"{ one: true }\" (action)=\"onUserMenuAction($event)\" />\n      </m-col>\n    </m-row>\n  }\n  <m-col>\n    @if (activeTabEntry(); as entry) {\n      @if (entry.ceSelector) {\n        <m-ce-outlet [tag]=\"entry.ceSelector\" />\n      } @else if (entry.component) {\n        <ng-container [ngComponentOutlet]=\"entry.component\" />\n      } @else {\n        <m-nothing icon=\"clock\" title=\"soon-available\" />\n      }\n    }\n  </m-col>\n</m-section>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.user-nav__username{font-size:.6875rem;font-weight:600;color:var(--m-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.profile-dashboard{display:flex;flex-direction:column;width:100%;margin:0 auto;overflow:visible;box-sizing:border-box;background:var(--m-background-lite)}.profile-banner{position:relative;height:160px;width:100%;overflow:hidden;background:linear-gradient(135deg,var(--m-mm-dark) 0%,color-mix(in oklch,var(--m-mm-dark),#000 20%) 100%);transition:all .5s cubic-bezier(.16,1,.3,1);cursor:pointer}.profile-banner:hover .profile-banner__blob--1{transform:translate(15%,10%) scale(1.1)}.profile-banner:hover .profile-banner__blob--2{transform:translate(-15%,-10%) scale(1.1)}.profile-banner:hover .profile-banner__blob--3{transform:translate(10%,-15%) scale(1.1)}.profile-banner__animate{position:absolute;inset:0;overflow:hidden;opacity:.85}.profile-banner__blob{position:absolute;border-radius:50%;filter:blur(50px);will-change:transform;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}.profile-banner__blob--1{width:240px;height:240px;background:radial-gradient(circle,color-mix(in oklch,var(--m-mm) 85%,transparent) 0%,transparent 70%);top:-85px;left:-40px;animation:float-1 14s infinite alternate ease-in-out}.profile-banner__blob--2{width:200px;height:200px;background:radial-gradient(circle,color-mix(in oklch,#e65c00 75%,transparent) 0%,transparent 70%);bottom:-65px;right:-30px;animation:float-2 18s infinite alternate ease-in-out}.profile-banner__blob--3{width:160px;height:160px;background:radial-gradient(circle,color-mix(in oklch,#ffcc00 65%,transparent) 0%,transparent 70%);top:15px;left:35%;animation:float-3 12s infinite alternate ease-in-out}.profile-banner__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#00000003,#00000014);-webkit-backdrop-filter:saturate(1.3);backdrop-filter:saturate(1.3)}@keyframes float-1{0%{transform:translate(-10%,-10%) scale(1)}50%{transform:translate(20%,12%) scale(1.1)}to{transform:translate(-5%,15%) scale(.95)}}@keyframes float-2{0%{transform:translate(20%,12%) scale(1.05)}50%{transform:translate(-12%,-12%) scale(.92)}to{transform:translate(12%,5%) scale(1.1)}}@keyframes float-3{0%{transform:translate(8%,20%) scale(.92)}50%{transform:translate(25%,-8%) scale(1.08)}to{transform:translate(5%,12%) scale(1)}}.profile-container{display:flex;flex-direction:column;padding:0 1.5rem 2rem;box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto}.profile-nav-card{background:transparent;border:none;overflow:hidden;box-sizing:border-box;width:100%;transition:all .3s cubic-bezier(.16,1,.3,1);margin-left:-1.75rem;margin-right:-1.75rem;width:calc(100% + 3.5rem)}.profile-nav-card.is-sticky{position:sticky;top:-1px;z-index:100;background:#ffffffe6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--m-backdrop-border);box-shadow:0 4px 20px #0000000a;transition:all .3s cubic-bezier(.16,1,.3,1);animation:slide-down-fade .28s cubic-bezier(.16,1,.3,1)}.profile-content{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box;margin-left:-1.75rem;margin-right:-1.75rem;width:calc(100% + 3.5rem)}.soon-card{background:#ffffff8c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--m-backdrop-border);border-radius:20px;padding:4.5rem 2rem;text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px #00000004;box-sizing:border-box;width:100%}.soon-text{font-size:.875rem;color:var(--m-text-secondary);font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(135deg,var(--m-mm),var(--m-mm-lite));-webkit-background-clip:text;-webkit-text-fill-color:transparent}@keyframes slide-down-fade{0%{transform:translateY(-10px);opacity:.75}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: CeOutletComponent, selector: "m-ce-outlet", inputs: ["tag"] }, { kind: "component", type: NothingComponent, selector: "m-nothing", inputs: ["icon", "title", "description", "buttonName", "button"], outputs: ["actionClick"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY", "alignX", "alignY"] }, { kind: "component", type: RowComponent, selector: "m-row", inputs: ["padding", "paddingX", "paddingY", "maxWidth", "center"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user", "firstName", "lastName", "profilePic"] }, { kind: "directive", type: MRefDirective, selector: "[mRef]", inputs: ["mRef", "mRefLinkActive", "mRefToggle", "mRefParams"] }, { kind: "component", type: ContextMenuComponent, selector: "m-context-menu, m-one-context-menu", inputs: ["toggle", "remote", "exclude", "visibilityRule", "disableRule", "extraData", "inverted", "options"], outputs: ["toggleChange", "action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UserNavComponent, isStandalone: true, selector: "m-user-nav", ngImport: i0, template: "<m-section maxHeight=\"full\">\n  @if (currentUser(); as user) {\n    <m-row>\n      <m-col [sm]=\"11\" [padding]=\"true\">\n        <m-user [id]=\"user.id\" [user]=\"user\" mRef=\"root_user\">\n          <span class=\"user-nav__username\">&#64;{{ user.username }}</span>\n        </m-user>\n      </m-col>\n      <m-col [sm]=\"1\">\n        <m-context-menu name=\"user_header\" [config]=\"{ one: true }\" (action)=\"onUserMenuAction($event)\" />\n      </m-col>\n    </m-row>\n  }\n  <m-col>\n    @if (activeTabEntry(); as entry) {\n      @if (entry.ceSelector) {\n        <m-ce-outlet [tag]=\"entry.ceSelector\" />\n      } @else if (entry.component) {\n        <ng-container [ngComponentOutlet]=\"entry.component\" />\n      } @else {\n        <m-nothing icon=\"clock\" title=\"soon-available\" />\n      }\n    }\n  </m-col>\n</m-section>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.user-nav__username{font-size:.6875rem;font-weight:600;color:var(--m-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.profile-dashboard{display:flex;flex-direction:column;width:100%;margin:0 auto;overflow:visible;box-sizing:border-box;background:var(--m-background-lite)}.profile-banner{position:relative;height:160px;width:100%;overflow:hidden;background:linear-gradient(135deg,var(--m-mm-dark) 0%,color-mix(in oklch,var(--m-mm-dark),#000 20%) 100%);transition:all .5s cubic-bezier(.16,1,.3,1);cursor:pointer}.profile-banner:hover .profile-banner__blob--1{transform:translate(15%,10%) scale(1.1)}.profile-banner:hover .profile-banner__blob--2{transform:translate(-15%,-10%) scale(1.1)}.profile-banner:hover .profile-banner__blob--3{transform:translate(10%,-15%) scale(1.1)}.profile-banner__animate{position:absolute;inset:0;overflow:hidden;opacity:.85}.profile-banner__blob{position:absolute;border-radius:50%;filter:blur(50px);will-change:transform;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}.profile-banner__blob--1{width:240px;height:240px;background:radial-gradient(circle,color-mix(in oklch,var(--m-mm) 85%,transparent) 0%,transparent 70%);top:-85px;left:-40px;animation:float-1 14s infinite alternate ease-in-out}.profile-banner__blob--2{width:200px;height:200px;background:radial-gradient(circle,color-mix(in oklch,#e65c00 75%,transparent) 0%,transparent 70%);bottom:-65px;right:-30px;animation:float-2 18s infinite alternate ease-in-out}.profile-banner__blob--3{width:160px;height:160px;background:radial-gradient(circle,color-mix(in oklch,#ffcc00 65%,transparent) 0%,transparent 70%);top:15px;left:35%;animation:float-3 12s infinite alternate ease-in-out}.profile-banner__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#00000003,#00000014);-webkit-backdrop-filter:saturate(1.3);backdrop-filter:saturate(1.3)}@keyframes float-1{0%{transform:translate(-10%,-10%) scale(1)}50%{transform:translate(20%,12%) scale(1.1)}to{transform:translate(-5%,15%) scale(.95)}}@keyframes float-2{0%{transform:translate(20%,12%) scale(1.05)}50%{transform:translate(-12%,-12%) scale(.92)}to{transform:translate(12%,5%) scale(1.1)}}@keyframes float-3{0%{transform:translate(8%,20%) scale(.92)}50%{transform:translate(25%,-8%) scale(1.08)}to{transform:translate(5%,12%) scale(1)}}.profile-container{display:flex;flex-direction:column;padding:0 1.5rem 2rem;box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto}.profile-nav-card{background:transparent;border:none;overflow:hidden;box-sizing:border-box;width:100%;transition:all .3s cubic-bezier(.16,1,.3,1);margin-left:-1.75rem;margin-right:-1.75rem;width:calc(100% + 3.5rem)}.profile-nav-card.is-sticky{position:sticky;top:-1px;z-index:100;background:#ffffffe6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--m-backdrop-border);box-shadow:0 4px 20px #0000000a;transition:all .3s cubic-bezier(.16,1,.3,1);animation:slide-down-fade .28s cubic-bezier(.16,1,.3,1)}.profile-content{display:flex;flex-direction:column;gap:1rem;box-sizing:border-box;margin-left:-1.75rem;margin-right:-1.75rem;width:calc(100% + 3.5rem)}.soon-card{background:#ffffff8c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--m-backdrop-border);border-radius:20px;padding:4.5rem 2rem;text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px #00000004;box-sizing:border-box;width:100%}.soon-text{font-size:.875rem;color:var(--m-text-secondary);font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(135deg,var(--m-mm),var(--m-mm-lite));-webkit-background-clip:text;-webkit-text-fill-color:transparent}@keyframes slide-down-fade{0%{transform:translateY(-10px);opacity:.75}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: CeOutletComponent, selector: "m-ce-outlet", inputs: ["tag"] }, { kind: "component", type: NothingComponent, selector: "m-nothing", inputs: ["icon", "title", "description", "buttonName", "button"], outputs: ["actionClick"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY", "alignX", "alignY", "variant"] }, { kind: "component", type: RowComponent, selector: "m-row", inputs: ["padding", "paddingX", "paddingY", "maxWidth", "center"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user", "firstName", "lastName", "profilePic"] }, { kind: "directive", type: MRefDirective, selector: "[mRef]", inputs: ["mRef", "mRefLinkActive", "mRefToggle", "mRefParams"] }, { kind: "component", type: ContextMenuComponent, selector: "m-context-menu, m-one-context-menu", inputs: ["toggle", "remote", "exclude", "visibilityRule", "disableRule", "extraData", "inverted", "options"], outputs: ["toggleChange", "action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserNavComponent, decorators: [{
             type: Component,
@@ -39659,7 +39666,7 @@ class SearchUserPanelComponent {
         this.modalStore.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SearchUserPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SearchUserPanelComponent, isStandalone: true, selector: "m-search-user-panel", inputs: { onUserSelected: { classPropertyName: "onUserSelected", publicName: "onUserSelected", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<m-section>\n  <m-col>\n    <div class=\"search-user-panel__form\">\n      <m-form name=\"user_search\" [one]=\"true\" (dataChange)=\"onSearchChange($event)\" (act)=\"onAct($event)\" />\n    </div>\n  </m-col>\n\n  @if (searched()) {\n    <div class=\"search-user-panel__results\">\n      @for (user of userStore.searchResults(); track user.id) {\n        <m-section-card\n          [margin]=\"true\"\n          [padding]=\"true\"\n          [attr.data-testid]=\"'user-result-' + user.id\"\n        >\n          <m-user [id]=\"user.id\">\n            <span class=\"search-user-panel__result-name\">{{ userName(user.id) }}</span>\n            <m-one-button name=\"select_user\" (clicked)=\"selectUser(user)\" />\n          </m-user>\n        </m-section-card>\n      } @empty {\n        <div class=\"search-user-panel__empty\">\n          <div class=\"search-user-panel__empty-icon\">\n            <m-icon name=\"user\" />\n          </div>\n          <p>{{ 'user-not-found' | translate }}</p>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"search-user-panel__prompt\">\n      <div class=\"search-user-panel__prompt-icon\">\n        <m-icon name=\"search\" />\n      </div>\n      <p>{{ 'search-user-prompt' | translate }}</p>\n    </div>\n  }\n</m-section>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.search-user-panel__form{padding:var(--section-header-py, .75rem) var(--section-px, 1rem);border-bottom:1px solid var(--m-backdrop-border)}.search-user-panel__results{grid-column:1/-1;overflow-y:auto;display:flex;flex-direction:column}.search-user-panel__results::-webkit-scrollbar{width:6px}.search-user-panel__results::-webkit-scrollbar-track{background:transparent}.search-user-panel__results::-webkit-scrollbar-thumb{background:var(--m-backdrop-border);border-radius:10px}.search-user-panel__results::-webkit-scrollbar-thumb:hover{background:var(--m-backdrop-glass)}.search-user-panel__empty,.search-user-panel__prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;color:var(--m-text-secondary);gap:1.5rem;animation:fadeIn .6s ease-out}.search-user-panel__empty p,.search-user-panel__prompt p{font-size:1.125rem;font-weight:600;margin:0;max-width:300px;line-height:1.5}.search-user-panel__prompt{grid-column:1/-1}.search-user-panel__result-name{font-size:.75rem;color:var(--m-text-secondary)}.search-user-panel__empty-icon,.search-user-panel__prompt-icon{opacity:.15;color:var(--m-mm);filter:drop-shadow(0 8px 16px var(--m-backdrop-mm))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: FormGroupComponent, selector: "m-form, m-one-form", inputs: ["data", "state", "validation", "options", "fieldConfigs", "aclResolver", "autofocus", "readonly", "fieldRenderIds", "elements", "templates", "datas", "label", "subtitle"], outputs: ["dataChange", "act", "stateChange"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user", "firstName", "lastName", "profilePic"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: SectionCardComponent, selector: "m-section-card", inputs: ["margin", "icon", "actionName", "menu", "menuName"], outputs: ["action"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY", "alignX", "alignY"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SearchUserPanelComponent, isStandalone: true, selector: "m-search-user-panel", inputs: { onUserSelected: { classPropertyName: "onUserSelected", publicName: "onUserSelected", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<m-section>\n  <m-col>\n    <div class=\"search-user-panel__form\">\n      <m-form name=\"user_search\" [one]=\"true\" (dataChange)=\"onSearchChange($event)\" (act)=\"onAct($event)\" />\n    </div>\n  </m-col>\n\n  @if (searched()) {\n    <div class=\"search-user-panel__results\">\n      @for (user of userStore.searchResults(); track user.id) {\n        <m-section-card\n          [margin]=\"true\"\n          [padding]=\"true\"\n          [attr.data-testid]=\"'user-result-' + user.id\"\n        >\n          <m-user [id]=\"user.id\">\n            <span class=\"search-user-panel__result-name\">{{ userName(user.id) }}</span>\n            <m-one-button name=\"select_user\" (clicked)=\"selectUser(user)\" />\n          </m-user>\n        </m-section-card>\n      } @empty {\n        <div class=\"search-user-panel__empty\">\n          <div class=\"search-user-panel__empty-icon\">\n            <m-icon name=\"user\" />\n          </div>\n          <p>{{ 'user-not-found' | translate }}</p>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"search-user-panel__prompt\">\n      <div class=\"search-user-panel__prompt-icon\">\n        <m-icon name=\"search\" />\n      </div>\n      <p>{{ 'search-user-prompt' | translate }}</p>\n    </div>\n  }\n</m-section>\n", styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}.search-user-panel__form{padding:var(--section-header-py, .75rem) var(--section-px, 1rem);border-bottom:1px solid var(--m-backdrop-border)}.search-user-panel__results{grid-column:1/-1;overflow-y:auto;display:flex;flex-direction:column}.search-user-panel__results::-webkit-scrollbar{width:6px}.search-user-panel__results::-webkit-scrollbar-track{background:transparent}.search-user-panel__results::-webkit-scrollbar-thumb{background:var(--m-backdrop-border);border-radius:10px}.search-user-panel__results::-webkit-scrollbar-thumb:hover{background:var(--m-backdrop-glass)}.search-user-panel__empty,.search-user-panel__prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;color:var(--m-text-secondary);gap:1.5rem;animation:fadeIn .6s ease-out}.search-user-panel__empty p,.search-user-panel__prompt p{font-size:1.125rem;font-weight:600;margin:0;max-width:300px;line-height:1.5}.search-user-panel__prompt{grid-column:1/-1}.search-user-panel__result-name{font-size:.75rem;color:var(--m-text-secondary)}.search-user-panel__empty-icon,.search-user-panel__prompt-icon{opacity:.15;color:var(--m-mm);filter:drop-shadow(0 8px 16px var(--m-backdrop-mm))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: FormGroupComponent, selector: "m-form, m-one-form", inputs: ["data", "state", "validation", "options", "fieldConfigs", "aclResolver", "autofocus", "readonly", "fieldRenderIds", "elements", "templates", "datas", "label", "subtitle"], outputs: ["dataChange", "act", "stateChange"] }, { kind: "component", type: UserComponent, selector: "m-user", inputs: ["id", "user", "firstName", "lastName", "profilePic"] }, { kind: "component", type: ButtonComponent, selector: "m-button,m-one-button", inputs: ["config", "color", "labelClass", "fullWidth", "nav", "navParams", "href", "disabled", "variant", "name", "baseUrl", "one", "remote", "label", "noTranslate", "params", "noNative", "icon", "isRightIcon", "iconOnly", "stacked", "imgSrc", "nonClickable", "inverted", "isSubmit", "tabindex"], outputs: ["configChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "m-icon, m-one-icon", inputs: ["config", "name", "color", "size", "one", "baseUrl", "remote"], outputs: ["configChange"] }, { kind: "component", type: SectionComponent, selector: "m-section", inputs: ["variant", "maxWidth", "heightMode", "maxHeight", "height", "align", "alignX", "alignY", "size"], outputs: ["inView"] }, { kind: "component", type: SectionCardComponent, selector: "m-section-card", inputs: ["margin", "icon", "actionName", "menu", "menuName"], outputs: ["action"] }, { kind: "component", type: ColComponent, selector: "m-col", inputs: ["xs", "sm", "md", "lg", "xl", "xxl", "fullWidth", "fullHeight", "padding", "paddingX", "paddingY", "alignX", "alignY", "variant"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SearchUserPanelComponent, decorators: [{
             type: Component,
@@ -40339,4 +40346,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 
 export { CheckboxInputComponent as $, ACCESS_DOMAINS as A, ButtonComponent as B, AssetUrlPipe as C, Assets as D, AuthActivityPageComponent as E, AuthApiService as F, AuthStore as G, HeaderComponent$1 as H, InputType as I, AutosizeDirective as J, BadgeComponent as K, LabelComponent as L, MODAL_REF as M, BandingComponent as N, BaseArrayInputComponent as O, BaseRootWebComponent as P, BaseWebComponent as Q, RangeInputComponent as R, ButtonGroupComponent as S, TranslatePipe as T, CALLING_APP_HEADER as U, COMPONENT_INPUT_REGISTRY as V, CardComponent as W, CardWrapperComponent as X, CarouselComponent as Y, ChartComponent as Z, ChatBubbleComponent as _, MIN_ZOOM as a, IS_SIDE_PANEL as a$, ClearableInputComponent as a0, ClipboardService as a1, ColComponent as a2, ColorPickerInputComponent as a3, CommentItemComponent as a4, CommentsApiService as a5, CommentsComponent as a6, CommentsStore as a7, CompactNumberPipe as a8, ComponentInputComponent as a9, DocEditorComponent as aA, DomService as aB, Domain as aC, DotGridComponent as aD, DragListDirective as aE, DragListItemDirective as aF, DraggableDirective as aG, DropdownInputComponent as aH, FILTER_GROUP_CONTEXT as aI, FILTER_RANGE_MODES as aJ, FILTER_VARIANTS as aK, FLEX_VARIANTS as aL, FOLDER_PICK_LISTENER as aM, FORM_ASSET_FOLDER as aN, FileService as aO, FileUploadDirective as aP, FileUploadInputComponent as aQ, FlexComponent as aR, FlexItemComponent as aS, FormGroupComponent as aT, FrameComponent as aU, FreezeService as aV, GRID_BREAKPOINTS as aW, GetNavService as aX, HighlightDirective as aY, HttpService as aZ, ICON_SOURCE as a_, ComponentStepperComponent as aa, ConfigComponent as ab, ConfirmComponent as ac, ContextMenuComponent as ad, CustomIconClass as ae, CustomIconEditComponent as af, DEFAULT_DENIAL as ag, DEFAULT_DOC_DENSITY as ah, DEFAULT_DOC_VARIANT as ai, DEFAULT_FILTER_RANGE_MODE as aj, DEFAULT_FILTER_VARIANT as ak, DEFAULT_NAV_PARAM as al, DEFAULT_NAV_SEGMENT as am, DEFAULT_SIZE as an, DOCK_MIN_PAGE_REMAINDER as ao, DOCS_FOLDER as ap, DOC_ACTION_ICONS as aq, DOC_DENSITIES as ar, DOC_EDIT_ACTIONS as as, DOC_TOOLBAR_GROUPS as at, DOC_VARIANTS as au, DashboardCardComponent as av, DateInputComponent as aw, DatePickerComponent as ax, DeviceService as ay, DocComponent as az, MAX_ZOOM as b, PaginationComponent as b$, IconComponent as b0, ImgComponent as b1, InstrumentScoreComponent as b2, InterceptorObservables as b3, JumbotronComponent as b4, KeyValueComponent as b5, LAYOUT_ASSET_FOLDER as b6, LOGIN_COMPONENT as b7, LOGIN_STORE as b8, LanguageComponent as b9, NAV_WIDGET_MAP as bA, NavComponent as bB, NavDetailsComponent as bC, NavHeaderComponent as bD, NavMenuComponent as bE, NavStore as bF, NavTrailComponent as bG, NothingComponent as bH, NotificationElementComponent as bI, NotificationGroupComponent as bJ, NotificationPopupComponent as bK, NotificationService as bL, NotificationStore as bM, NotificationType as bN, NotificationWidgetComponent as bO, ONE_ASSET_BASE_URL as bP, OPTIONS_SOURCE as bQ, OVERLAY_WIDGETS as bR, OneApp as bS, OptionsSourceDirective as bT, OverlayBodyComponent as bU, OverlayRef as bV, OverlayService as bW, PLATFORM_BUTTON_NAV_IDS as bX, PLATFORM_EXTENSIBLE_NAV_IDS as bY, PLATFORM_NAV_MAP as bZ, PLATFORM_ROOT_CHILDREN as b_, ListComponent as ba, LogoComponent as bb, MAG_SOCKET_EVENT as bc, MHeroColorDirective as bd, MHeroComponent as be, MODAL_STORE_REF as bf, MOUNT_STATIC_SEGMENT as bg, MOUNT_TOKEN as bh, MRefDirective as bi, MStepComponent as bj, MURL_PARAM as bk, MURL_SEP as bl, ManifestEnrichmentService as bm, MenuComponent as bn, ModalDirective as bo, ModalRef as bp, ModalStore as bq, MoneyPipe as br, MultiRangeInputComponent as bs, MurlUrlSerializer as bt, NAV_DEFAULT_MURL as bu, NAV_ID_SEP as bv, NAV_MAIN_BUTTONS as bw, NAV_SEGMENT_RE as bx, NAV_STORE_REF as by, NAV_WC_COMPONENTS as bz, cropRect as c, SharedStoreRegistry as c$, PanelComponent as c0, PercentagePipe as c1, PlaygroundComponent as c2, PositionDirective as c3, PwaInstallComponent as c4, RECENT_SEARCH_LIMIT as c5, REMOTE_PAGE_RELOAD as c6, ROOT_NAV$1 as c7, RadioGroupComponent as c8, RadioInputComponent as c9, SectionCarouselComponent as cA, SectionComponent as cB, SectionFilterComponent as cC, SectionFilterGroupComponent as cD, SectionFilterMenuComponent as cE, SectionFilterPanelComponent as cF, SectionFilterRangePanelComponent as cG, SectionFooterComponent as cH, SectionFormComponent as cI, SectionFormItemComponent as cJ, SectionHeaderComponent as cK, SectionHeroComponent as cL, SectionPaginationComponent as cM, SectionSearchComponent as cN, SectionStepperComponent as cO, SectionTableCellComponent as cP, SectionTableComponent as cQ, SectionTableRowComponent as cR, SectionTableSortPipe as cS, SectionTabsComponent as cT, SectionToggleComponent as cU, SectionToggleItemDirective as cV, SelectableCardInputComponent as cW, SelectorDirective as cX, SettingsSearchBarComponent as cY, SettingsSearchService as cZ, ShapeComponent as c_, RatingInputComponent as ca, ReactiveElementComponent as cb, RemoteComponent as cc, RemoteLoaderService as cd, ResizeElementComponent as ce, RouteContainer as cf, RowComponent as cg, SEARCH_QUERY as ch, SEARCH_RESULTS_EVENT as ci, SECTION_ACCORDION_GROUP as cj, SECTION_FORM_CONTEXT as ck, SECTION_TABLE_VARIANTS as cl, SHARED_ICONS as cm, SIZE_CONTEXT as cn, ScoreComponent as co, ScrollComponent as cp, ScrollService as cq, SearchPanelComponent as cr, SearchStore as cs, SearchUserPanelComponent as ct, SectionAccordionDirective as cu, SectionAccordionGroupDirective as cv, SectionBackComponent as cw, SectionBadgesComponent as cx, SectionButtonGroupComponent as cy, SectionCardComponent as cz, drawFramed as d, cellText as d$, SidePanelDirective as d0, Size as d1, SocketStore as d2, SortComponent as d3, StatComponent as d4, StepComponent as d5, StepperComponent as d6, StepsComponent as d7, StorageService as d8, StrokeLinecap as d9, USER_STORE_REF as dA, USER_TAB_MAP as dB, UniverseComponent as dC, UserApiService as dD, UserAvatarComponent as dE, UserComponent as dF, UserNavComponent as dG, UserSettingsComponent as dH, UserStore as dI, WC_BUNDLE as dJ, WC_NAVIGATE_EVENT as dK, WC_ROUTE_CHANGED_EVENT as dL, WC_SEARCH_GROUPS as dM, WIN_USER_TAB_HOOK as dN, WIN_USER_TAB_KEY as dO, WatermarkComponent as dP, WcRouterStore as dQ, WrapperInputComponent as dR, anchorNavId as dS, applyColorsToElement as dT, applyDocEdit as dU, assetOptions as dV, bootstrapMagApp as dW, bootstrapPwaInstall as dX, buildWcBaseUrl as dY, calculateLuminance as dZ, calculateRanks as d_, StrokeLinejoin as da, SummaryComponent as db, SvgGeneratorComponent as dc, SvgGeneratorService as dd, SvgService as de, TOTAL_COLUMNS as df, TRANSLATION_SOURCE as dg, TableComponent as dh, TechnicalMeterComponent as di, TextInputComponent as dj, TextareaInputComponent as dk, ThemeComponent as dl, ThemeDataService as dm, ThemeService as dn, ThemeStore as dp, TimeAgoPipe as dq, TimelineComponent as dr, ToggleButtonComponent as ds, ToggleInputComponent as dt, ToggleRadioInputComponent as du, ToolTipDirective as dv, TooltipComponent as dw, TranslateService as dx, TreeGridComponent as dy, URL_SEP as dz, encodeFramed as e, isBootRedirect as e$, checkDoc as e0, checkFilterCondition as e1, childNavId as e2, claimDenial as e3, classListSignal as e4, coerceSize as e5, cornerEdge as e6, cornerSide as e7, createMap as e8, createPlatformNavMap as e9, filterTreeGridRows as eA, filterValueList as eB, filterValues as eC, flattenTreeGridRows as eD, formatBadgeCount as eE, fullName as eF, generateClipPath as eG, generateTransform as eH, getClassList as eI, getProperty as eJ, getScrollParent as eK, getTierFromPreviewPath as eL, getTreeGridRow as eM, getUniqueId as eN, getValue as eO, hasErrorComputed as eP, hexToRgb as eQ, hslToRgb$1 as eR, initMagmoniumApp as eS, initialNotificationState as eT, initialState$2 as eU, initials as eV, injectAuthenticate as eW, injectDefaultDenial as eX, injectInstallApp as eY, injectParentSize as eZ, injectScrollSticky as e_, definedWcTierOf as ea, deriveAvatarGradient as eb, deriveContrastColor as ec, deriveOppositeColor as ed, derivePropertyName as ee, docActionKey as ef, docAssetCandidates as eg, docProblemKey as eh, docRemotePath as ei, emailValidation as ej, evaluate as ek, evaluateBool as el, fieldBoolean as em, fieldNumber as en, fieldString as eo, filterHoldsList as ep, filterHoldsOneBound as eq, filterHoldsOptions as er, filterHoldsRange as es, filterList as et, filterNumber as eu, filterNumberList as ev, filterOne as ew, filterPanelOf as ex, filterPanelWidth as ey, filterRange as ez, clampFraming as f, provideMagAppConfig as f$, isButtonName as f0, isCancelledComputed as f1, isExtensiblePlatformNavId as f2, isJson as f3, isLoadingComputed as f4, isLocalhost as f5, isNavInstanceConfig as f6, isNavMenuConfig as f7, isNavRowsConfig as f8, isNavVisibilityConfig as f9, mountPatternText as fA, mountSegmentOf as fB, mountTokenOf as fC, navIdChain as fD, navIdFor as fE, navIdSegment as fF, navIdToRoutePath as fG, navIdToSegments as fH, navParamOf as fI, navTailMatcher as fJ, navToId as fK, navVisibilityGuard as fL, nextSectionTableSort as fM, normalizeAssetOptions as fN, offsetOfLine as fO, parentNavId as fP, parseAddress as fQ, parseColor as fR, parseMountPattern as fS, parsePatternNames as fT, patternValidation as fU, patternsValidation as fV, permissionRefusal as fW, platformNavWidgets as fX, privateGuard as fY, processImageToSvg as fZ, provideAppContext as f_, isPlatformNavId as fa, isSize as fb, isTierPreview as fc, isUrlLocalhost as fd, isValidNavId as fe, isValidNavSegment as ff, isWebComponent as fg, linkToId as fh, linkToNav as fi, loadingActions as fj, mInterceptor as fk, manualValidation as fl, matchFieldValidation as fm, matchMount as fn, maxLengthValidation as fo, maxValidation as fp, mergePlatformNav as fq, mergeUnique as fr, mergeUniqueBy as fs, mergeUniqueWith as ft, minAgeValidation as fu, minLengthValidation as fv, minValidation as fw, miniMarkToHtml as fx, mountFor as fy, mountPatternProblem as fz, BaseInputComponent as g, provideMagWcConfig as g0, provideMagWcRoutes as g1, provideModalComponents as g2, provideMurlUrlSerializer as g3, provideNavWidgets as g4, provideOverlayWidgets as g5, providePlatformNavWidgets as g6, provideSearch as g7, provideSizeContext as g8, provideUserTabs as g9, splitNavId as gA, splitOnMatch as gB, stringToColor as gC, tailRouteOf as gD, toAttrBool as gE, toAttrNumber as gF, toCssLength as gG, toHostNavId as gH, toLength$1 as gI, toLocalNavId as gJ, toggleTreeGridRow as gK, unfetchedPlatformNav as gL, ungroupedDocActions as gM, urlValidation as gN, wcTierOf as gO, publicGuard as ga, readFieldPatterns as gb, recordDefinedWcTier as gc, remoteOutletRoute as gd, renderAddress as ge, renderDocument as gf, requiredValidation as gg, resolveConfigAsset as gh, resolveIconSize as gi, resolvePallet as gj, resolvePatternRules as gk, resolveSize as gl, rgbToHex as gm, rgbToHsl as gn, rowHasChildren as go, samePatterns as gp, sectionTableColumnId as gq, sectionTableColumnWidths as gr, sectionTableFrozenCount as gs, segmentsToNavId as gt, setProperty as gu, setTreeGridChildren as gv, setWcTier as gw, settingsWidgets as gx, shouldShowBadge as gy, sortSectionTableRows as gz, BaseTextInputComponent as h, initialFraming as i, TextOutputComponent as j, IS_DESIGN_MODE as k, APP_CONTEXT_REF as l, APP_LINK as m, ASSET_BASE_URL as n, outputSize as o, parseRatio as p, AccordionBodyDirective as q, renameForType as r, AccordionComponent as s, AccordionGroupComponent as t, ActionComponent as u, AnimatedGraphsComponent as v, AppCardComponent as w, AppRelationType as x, AppTileComponent as y, AssetStore as z };
-//# sourceMappingURL=magmonium-one-magmonium-one-DCRM0N5X.mjs.map
+//# sourceMappingURL=magmonium-one-magmonium-one-BiVtM3fV.mjs.map