@ng-matero/extensions/fesm2022/mtxSplit.mjs.map

Angular Material Extensions

{"version":3,"file":"mtxSplit.mjs","sources":["../../../projects/extensions/split/utils.ts","../../../projects/extensions/split/split.ts","../../../projects/extensions/split/split.html","../../../projects/extensions/split/split-pane.ts","../../../projects/extensions/split/split-module.ts","../../../projects/extensions/split/mtxSplit.ts"],"sourcesContent":["import { ElementRef } from '@angular/core';\n\nimport {\n  MtxSplitArea,\n  MtxSplitPoint,\n  MtxSplitAreaSnapshot,\n  MtxSplitSideAbsorptionCapacity,\n  MtxSplitAreaAbsorptionCapacity,\n} from './interfaces';\n\nexport function getPointFromEvent(event: MouseEvent | TouchEvent): MtxSplitPoint | null {\n  // TouchEvent\n  if (\n    (event as TouchEvent).changedTouches !== undefined &&\n    (event as TouchEvent).changedTouches.length > 0\n  ) {\n    return {\n      x: (event as TouchEvent).changedTouches[0].clientX,\n      y: (event as TouchEvent).changedTouches[0].clientY,\n    };\n  }\n  // MouseEvent\n  else if (\n    (event as MouseEvent).clientX !== undefined &&\n    (event as MouseEvent).clientY !== undefined\n  ) {\n    return {\n      x: (event as MouseEvent).clientX,\n      y: (event as MouseEvent).clientY,\n    };\n  }\n  return null;\n}\n\nexport function getElementPixelSize(\n  elRef: ElementRef,\n  direction: 'horizontal' | 'vertical'\n): number {\n  const rect = (elRef.nativeElement as HTMLElement).getBoundingClientRect();\n\n  return direction === 'horizontal' ? rect.width : rect.height;\n}\n\nexport function getInputPositiveNumber<T>(v: any, defaultValue: T): number | T {\n  if (v === null || v === undefined) {\n    return defaultValue;\n  }\n\n  v = Number(v);\n  return !isNaN(v) && v >= 0 ? v : defaultValue;\n}\n\nexport function isUserSizesValid(\n  unit: 'percent' | 'pixel',\n  sizes: number[]\n): boolean | number | void {\n  // All sizes have to be not null and total should be 100\n  if (unit === 'percent') {\n    const total = sizes.reduce((_total, s) => (s !== null ? _total + s : _total), 0);\n    return sizes.every(s => s !== null) && total && total > 99.9 && total < 100.1;\n  }\n\n  // A size at null is mandatory but only one.\n  if (unit === 'pixel') {\n    return sizes.filter(s => s === null).length === 1;\n  }\n}\n\nexport function getAreaMinSize(a: MtxSplitArea): null | number {\n  if (a.size === null) {\n    return null;\n  }\n\n  if (a.component.lockSize === true) {\n    return a.size;\n  }\n\n  if (a.component.minSize === null) {\n    return null;\n  }\n\n  if (a.component.minSize > a.size) {\n    return a.size;\n  }\n\n  return a.component.minSize;\n}\n\nexport function getAreaMaxSize(a: MtxSplitArea): null | number {\n  if (a.size === null) {\n    return null;\n  }\n\n  if (a.component.lockSize === true) {\n    return a.size;\n  }\n\n  if (a.component.maxSize === null) {\n    return null;\n  }\n\n  if (a.component.maxSize < a.size) {\n    return a.size;\n  }\n\n  return a.component.maxSize;\n}\n\nexport function getGutterSideAbsorptionCapacity(\n  unit: 'percent' | 'pixel',\n  sideAreas: MtxSplitAreaSnapshot[],\n  pixels: number,\n  allAreasSizePixel: number\n): MtxSplitSideAbsorptionCapacity {\n  return sideAreas.reduce(\n    (acc: any, area) => {\n      const res = getAreaAbsorptionCapacity(unit, area, acc.remain, allAreasSizePixel);\n      acc.list.push(res);\n      acc.remain = res && res.pixelRemain;\n      return acc;\n    },\n    { remain: pixels, list: [] }\n  );\n}\n\nexport function getAreaAbsorptionCapacity(\n  unit: 'percent' | 'pixel',\n  areaSnapshot: MtxSplitAreaSnapshot,\n  pixels: number,\n  allAreasSizePixel: number\n): MtxSplitAreaAbsorptionCapacity | void {\n  // No pain no gain\n  if (pixels === 0) {\n    return {\n      areaSnapshot,\n      pixelAbsorb: 0,\n      percentAfterAbsorption: areaSnapshot.sizePercentAtStart,\n      pixelRemain: 0,\n    };\n  }\n\n  // Area start at zero and need to be reduced, not possible\n  if (areaSnapshot.sizePixelAtStart === 0 && pixels < 0) {\n    return {\n      areaSnapshot,\n      pixelAbsorb: 0,\n      percentAfterAbsorption: 0,\n      pixelRemain: pixels,\n    };\n  }\n\n  if (unit === 'percent') {\n    return getAreaAbsorptionCapacityPercent(areaSnapshot, pixels, allAreasSizePixel);\n  }\n\n  if (unit === 'pixel') {\n    return getAreaAbsorptionCapacityPixel(areaSnapshot, pixels, allAreasSizePixel);\n  }\n}\n\nexport function getAreaAbsorptionCapacityPercent(\n  areaSnapshot: MtxSplitAreaSnapshot,\n  pixels: number,\n  allAreasSizePixel: number\n): MtxSplitAreaAbsorptionCapacity | void {\n  const tempPixelSize = areaSnapshot.sizePixelAtStart + pixels;\n  const tempPercentSize = (tempPixelSize / allAreasSizePixel) * 100;\n\n  // ENLARGE AREA\n\n  if (pixels > 0) {\n    // If maxSize & newSize bigger than it > absorb to max and return remaining pixels\n    if (areaSnapshot.area.maxSize !== null && tempPercentSize > areaSnapshot.area.maxSize) {\n      // Use area.area.maxSize as newPercentSize and return calculate pixels remaining\n      const maxSizePixel = (areaSnapshot.area.maxSize / 100) * allAreasSizePixel;\n      return {\n        areaSnapshot,\n        pixelAbsorb: maxSizePixel,\n        percentAfterAbsorption: areaSnapshot.area.maxSize,\n        pixelRemain: areaSnapshot.sizePixelAtStart + pixels - maxSizePixel,\n      };\n    }\n    return {\n      areaSnapshot,\n      pixelAbsorb: pixels,\n      percentAfterAbsorption: tempPercentSize > 100 ? 100 : tempPercentSize,\n      pixelRemain: 0,\n    };\n  }\n\n  // REDUCE AREA\n  else if (pixels < 0) {\n    // If minSize & newSize smaller than it > absorb to min and return remaining pixels\n    if (areaSnapshot.area.minSize !== null && tempPercentSize < areaSnapshot.area.minSize) {\n      // Use area.area.minSize as newPercentSize and return calculate pixels remaining\n      const minSizePixel = (areaSnapshot.area.minSize / 100) * allAreasSizePixel;\n      return {\n        areaSnapshot,\n        pixelAbsorb: minSizePixel,\n        percentAfterAbsorption: areaSnapshot.area.minSize,\n        pixelRemain: areaSnapshot.sizePixelAtStart + pixels - minSizePixel,\n      };\n    }\n    // If reduced under zero > return remaining pixels\n    else if (tempPercentSize < 0) {\n      // Use 0 as newPercentSize and return calculate pixels remaining\n      return {\n        areaSnapshot,\n        pixelAbsorb: -areaSnapshot.sizePixelAtStart,\n        percentAfterAbsorption: 0,\n        pixelRemain: pixels + areaSnapshot.sizePixelAtStart,\n      };\n    }\n    return {\n      areaSnapshot,\n      pixelAbsorb: pixels,\n      percentAfterAbsorption: tempPercentSize,\n      pixelRemain: 0,\n    };\n  }\n}\n\nexport function getAreaAbsorptionCapacityPixel(\n  areaSnapshot: MtxSplitAreaSnapshot,\n  pixels: number,\n  containerSizePixel: number\n): MtxSplitAreaAbsorptionCapacity | void {\n  const tempPixelSize = areaSnapshot.sizePixelAtStart + pixels;\n\n  // ENLARGE AREA\n\n  if (pixels > 0) {\n    // If maxSize & newSize bigger than it > absorb to max and return remaining pixels\n    if (areaSnapshot.area.maxSize !== null && tempPixelSize > areaSnapshot.area.maxSize) {\n      return {\n        areaSnapshot,\n        pixelAbsorb: areaSnapshot.area.maxSize - areaSnapshot.sizePixelAtStart,\n        percentAfterAbsorption: -1,\n        pixelRemain: tempPixelSize - areaSnapshot.area.maxSize,\n      };\n    }\n    return {\n      areaSnapshot,\n      pixelAbsorb: pixels,\n      percentAfterAbsorption: -1,\n      pixelRemain: 0,\n    };\n  }\n\n  // REDUCE AREA\n  else if (pixels < 0) {\n    // If minSize & newSize smaller than it > absorb to min and return remaining pixels\n    if (areaSnapshot.area.minSize !== null && tempPixelSize < areaSnapshot.area.minSize) {\n      return {\n        areaSnapshot,\n        pixelAbsorb: areaSnapshot.area.minSize + pixels - tempPixelSize,\n        percentAfterAbsorption: -1,\n        pixelRemain: tempPixelSize - areaSnapshot.area.minSize,\n      };\n    }\n    // If reduced under zero > return remaining pixels\n    else if (tempPixelSize < 0) {\n      return {\n        areaSnapshot,\n        pixelAbsorb: -areaSnapshot.sizePixelAtStart,\n        percentAfterAbsorption: -1,\n        pixelRemain: pixels + areaSnapshot.sizePixelAtStart,\n      };\n    }\n    return {\n      areaSnapshot,\n      pixelAbsorb: pixels,\n      percentAfterAbsorption: -1,\n      pixelRemain: 0,\n    };\n  }\n}\n\nexport function updateAreaSize(unit: 'percent' | 'pixel', item: MtxSplitAreaAbsorptionCapacity) {\n  if (unit === 'percent') {\n    item.areaSnapshot.area.size = item.percentAfterAbsorption;\n  } else if (unit === 'pixel') {\n    // Update size except for the wildcard size area\n    if (item.areaSnapshot.area.size !== null) {\n      item.areaSnapshot.area.size = item.areaSnapshot.sizePixelAtStart + item.pixelAbsorb;\n    }\n  }\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  InjectionToken,\n  Input,\n  NgZone,\n  OnDestroy,\n  Output,\n  QueryList,\n  Renderer2,\n  ViewChildren,\n  ViewEncapsulation,\n  booleanAttribute,\n  inject,\n} from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\nimport { Observable, Subject, Subscriber } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\nimport {\n  MtxSplitArea,\n  MtxSplitAreaSnapshot,\n  MtxSplitDefaultOptions,\n  MtxSplitOutputAreaSizes,\n  MtxSplitOutputData,\n  MtxSplitPoint,\n  MtxSplitSnapshot,\n} from './interfaces';\nimport { MtxSplitPane } from './split-pane';\nimport {\n  getAreaMaxSize,\n  getAreaMinSize,\n  getElementPixelSize,\n  getGutterSideAbsorptionCapacity,\n  getInputPositiveNumber,\n  getPointFromEvent,\n  isUserSizesValid,\n  updateAreaSize,\n} from './utils';\n\n/** Injection token that can be used to specify default split options. */\nexport const MTX_SPLIT_DEFAULT_OPTIONS = new InjectionToken<MtxSplitDefaultOptions>(\n  'mtx-split-default-options'\n);\n\n/**\n * mtx-split\n *\n *\n *  PERCENT MODE ([unit]=\"'percent'\")\n *  ___________________________________________________________________________________________\n * |       A       [g1]       B       [g2]       C       [g3]       D       [g4]       E       |\n * |-------------------------------------------------------------------------------------------|\n * |       20                 30                 20                 15                 15      | <-- [size]=\"x\"\n * |               10px               10px               10px               10px               | <-- [gutterSize]=\"10\"\n * |calc(20% - 8px)    calc(30% - 12px)   calc(20% - 8px)    calc(15% - 6px)    calc(15% - 6px)| <-- CSS flex-basis property (with flex-grow&shrink at 0)\n * |     152px              228px              152px              114px              114px     | <-- el.getBoundingClientRect().width\n * |___________________________________________________________________________________________|\n *                                                                                 800px         <-- el.getBoundingClientRect().width\n *  flex-basis = calc( { area.size }% - { area.size/100 * nbGutter*gutterSize }px );\n *\n *\n *  PIXEL MODE ([unit]=\"'pixel'\")\n *  ___________________________________________________________________________________________\n * |       A       [g1]       B       [g2]       C       [g3]       D       [g4]       E       |\n * |-------------------------------------------------------------------------------------------|\n * |      100                250                 *                 150                100      | <-- [size]=\"y\"\n * |               10px               10px               10px               10px               | <-- [gutterSize]=\"10\"\n * |   0 0 100px          0 0 250px           1 1 auto          0 0 150px          0 0 100px   | <-- CSS flex property (flex-grow/flex-shrink/flex-basis)\n * |     100px              250px              200px              150px              100px     | <-- el.getBoundingClientRect().width\n * |___________________________________________________________________________________________|\n *                                                                                 800px         <-- el.getBoundingClientRect().width\n *\n */\n\n@Component({\n  selector: 'mtx-split',\n  exportAs: 'mtxSplit',\n  host: {\n    class: 'mtx-split',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  styleUrl: './split.scss',\n  templateUrl: './split.html',\n})\nexport class MtxSplit implements AfterViewInit, OnDestroy {\n  private ngZone = inject(NgZone);\n  private elRef = inject(ElementRef);\n  private cdRef = inject(ChangeDetectorRef);\n  private renderer = inject(Renderer2);\n  protected _defaultOptions = inject<MtxSplitDefaultOptions>(MTX_SPLIT_DEFAULT_OPTIONS, {\n    optional: true,\n  });\n\n  @Input() color: ThemePalette;\n\n  /** The split direction. */\n  @Input()\n  get direction() {\n    return this._direction;\n  }\n  set direction(v: 'horizontal' | 'vertical') {\n    this._direction = v === 'vertical' ? 'vertical' : 'horizontal';\n\n    this.renderer.addClass(this.elRef.nativeElement, `mtx-split-${this._direction}`);\n    this.renderer.removeClass(\n      this.elRef.nativeElement,\n      `mtx-split-${this._direction === 'vertical' ? 'horizontal' : 'vertical'}`\n    );\n\n    this.build(false, false);\n  }\n  private _direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** The unit you want to specify area sizes. */\n  @Input()\n  get unit() {\n    return this._unit;\n  }\n  set unit(v: 'percent' | 'pixel') {\n    this._unit = v === 'pixel' ? 'pixel' : 'percent';\n\n    this.renderer.addClass(this.elRef.nativeElement, `mtx-split-${this._unit}`);\n    this.renderer.removeClass(\n      this.elRef.nativeElement,\n      `mtx-split-${this._unit === 'pixel' ? 'percent' : 'pixel'}`\n    );\n\n    this.build(false, true);\n  }\n  private _unit: 'percent' | 'pixel' = 'percent';\n\n  /** Gutters's size (dragging elements) in pixels. */\n  @Input()\n  get gutterSize() {\n    return this._gutterSize;\n  }\n  set gutterSize(v: number) {\n    this._gutterSize = getInputPositiveNumber(v, 4);\n\n    this.build(false, false);\n  }\n  private _gutterSize = 4;\n\n  /** Gutter step while moving in pixels. */\n  @Input()\n  get gutterStep() {\n    return this._gutterStep;\n  }\n  set gutterStep(v: number) {\n    this._gutterStep = getInputPositiveNumber(v, 1);\n  }\n  private _gutterStep = 1;\n\n  /** Set to true if you want to limit gutter move to adjacent areas only. */\n  @Input({ transform: booleanAttribute }) restrictMove = false;\n\n  /** Add transition when toggling visibility using `visible` or `size` changes. */\n  @Input({ transform: booleanAttribute })\n  get useTransition() {\n    return this._useTransition;\n  }\n  set useTransition(v: boolean) {\n    this._useTransition = v;\n\n    if (this._useTransition) {\n      this.renderer.addClass(this.elRef.nativeElement, 'mtx-split-transition');\n    } else {\n      this.renderer.removeClass(this.elRef.nativeElement, 'mtx-split-transition');\n    }\n  }\n  private _useTransition = false;\n\n  /**\n   * Disable the dragging feature (remove cursor/image on gutters).\n   * `gutterClick`/`gutterDblClick` still emits.\n   */\n  @Input({ transform: booleanAttribute })\n  get disabled() {\n    return this._disabled;\n  }\n  set disabled(v: boolean) {\n    this._disabled = v;\n\n    if (this._disabled) {\n      this.renderer.addClass(this.elRef.nativeElement, 'mtx-split-disabled');\n    } else {\n      this.renderer.removeClass(this.elRef.nativeElement, 'mtx-split-disabled');\n    }\n  }\n  private _disabled = false;\n\n  /** Indicates the directionality of the areas. */\n  @Input()\n  get dir() {\n    return this._dir;\n  }\n  set dir(v: 'ltr' | 'rtl') {\n    this._dir = v === 'rtl' ? 'rtl' : 'ltr';\n\n    this.renderer.setAttribute(this.elRef.nativeElement, 'dir', this._dir);\n  }\n  private _dir: 'ltr' | 'rtl' = 'ltr';\n\n  /**\n   * Milliseconds to detect a double click on a gutter. Set it around 300-500ms if\n   * you want to use `gutterDblClick` event.\n   */\n  @Input()\n  get gutterDblClickDuration() {\n    return this._gutterDblClickDuration;\n  }\n  set gutterDblClickDuration(v: number) {\n    this._gutterDblClickDuration = getInputPositiveNumber(v, 0);\n  }\n  private _gutterDblClickDuration = 0;\n\n  /** Event emitted when drag starts. */\n  @Output() dragStart = new EventEmitter<MtxSplitOutputData>(false);\n  /** Event emitted when drag ends. */\n  @Output() dragEnd = new EventEmitter<MtxSplitOutputData>(false);\n  /** Event emitted when user clicks on a gutter. */\n  @Output() gutterClick = new EventEmitter<MtxSplitOutputData>(false);\n  /** Event emitted when user double clicks on a gutter. */\n  @Output() gutterDblClick = new EventEmitter<MtxSplitOutputData>(false);\n  /**\n   * Event emitted when transition ends (could be triggered from `visible` or `size` changes).\n   * Only if `useTransition` equals true.\n   */\n  @Output()\n  get transitionEnd(): Observable<MtxSplitOutputAreaSizes> {\n    return new Observable(subscriber => (this.transitionEndSubscriber = subscriber)).pipe(\n      debounceTime<any>(20)\n    );\n  }\n  private transitionEndSubscriber!: Subscriber<MtxSplitOutputAreaSizes>;\n\n  private dragProgressSubject = new Subject<MtxSplitOutputData>();\n  dragProgress$: Observable<MtxSplitOutputData> = this.dragProgressSubject.asObservable();\n\n  private isDragging = false;\n  private dragListeners: (() => void)[] = [];\n  private snapshot: MtxSplitSnapshot | null = null;\n  private startPoint: MtxSplitPoint | null = null;\n  private endPoint: MtxSplitPoint | null = null;\n\n  public readonly displayedAreas: MtxSplitArea[] = [];\n  private readonly hidedAreas: MtxSplitArea[] = [];\n\n  @ViewChildren('gutterEls') private gutterEls!: QueryList<ElementRef>;\n\n  constructor() {\n    const _defaultOptions = this._defaultOptions;\n\n    if (_defaultOptions) {\n      this.color = _defaultOptions.color ?? 'primary';\n      this.direction = _defaultOptions.direction ?? 'horizontal';\n      this.dir = _defaultOptions.dir ?? 'ltr';\n      this.unit = _defaultOptions.unit ?? 'percent';\n      this.gutterDblClickDuration = _defaultOptions.gutterDblClickDuration ?? 0;\n      this.gutterSize = _defaultOptions.gutterSize ?? 4;\n      this.gutterStep = _defaultOptions.gutterStep ?? 1;\n      this.restrictMove = _defaultOptions.restrictMove ?? false;\n      this.useTransition = _defaultOptions.useTransition ?? false;\n    }\n  }\n\n  ngAfterViewInit() {\n    this.ngZone.runOutsideAngular(() => {\n      // To avoid transition at first rendering\n      setTimeout(() => this.renderer.addClass(this.elRef.nativeElement, 'mtx-split-init'));\n    });\n  }\n\n  private getNbGutters(): number {\n    return this.displayedAreas.length === 0 ? 0 : this.displayedAreas.length - 1;\n  }\n\n  addArea(component: MtxSplitPane): void {\n    const newArea: MtxSplitArea = {\n      component,\n      order: 0,\n      size: 0,\n      minSize: null,\n      maxSize: null,\n    };\n\n    if (component.visible === true) {\n      this.displayedAreas.push(newArea);\n\n      this.build(true, true);\n    } else {\n      this.hidedAreas.push(newArea);\n    }\n  }\n\n  removeArea(component: MtxSplitPane): void {\n    if (this.displayedAreas.some(a => a.component === component)) {\n      const area = this.displayedAreas.find(a => a.component === component) as MtxSplitArea;\n      this.displayedAreas.splice(this.displayedAreas.indexOf(area), 1);\n\n      this.build(true, true);\n    } else if (this.hidedAreas.some(a => a.component === component)) {\n      const area = this.hidedAreas.find(a => a.component === component) as MtxSplitArea;\n      this.hidedAreas.splice(this.hidedAreas.indexOf(area), 1);\n    }\n  }\n\n  updateArea(component: MtxSplitPane, resetOrders: boolean, resetSizes: boolean): void {\n    if (component.visible === true) {\n      this.build(resetOrders, resetSizes);\n    }\n  }\n\n  showArea(component: MtxSplitPane): void {\n    const area = this.hidedAreas.find(a => a.component === component);\n    if (area === undefined) {\n      return;\n    }\n\n    const areas = this.hidedAreas.splice(this.hidedAreas.indexOf(area), 1);\n    this.displayedAreas.push(...areas);\n\n    this.build(true, true);\n  }\n\n  hideArea(comp: MtxSplitPane): void {\n    const area = this.displayedAreas.find(a => a.component === comp);\n    if (area === undefined) {\n      return;\n    }\n\n    const areas = this.displayedAreas.splice(this.displayedAreas.indexOf(area), 1);\n    areas.forEach(_area => {\n      _area.order = 0;\n      _area.size = 0;\n    });\n    this.hidedAreas.push(...areas);\n\n    this.build(true, true);\n  }\n\n  getVisibleAreaSizes(): MtxSplitOutputAreaSizes {\n    return this.displayedAreas.map(a => (a.size === null ? '*' : a.size));\n  }\n\n  setVisibleAreaSizes(sizes: MtxSplitOutputAreaSizes): boolean {\n    if (sizes.length !== this.displayedAreas.length) {\n      return false;\n    }\n\n    const formatedSizes = sizes.map(s => getInputPositiveNumber(s, null)) as number[];\n    const isValid = isUserSizesValid(this.unit, formatedSizes);\n\n    if (isValid === false) {\n      return false;\n    }\n\n    this.displayedAreas.forEach((area, i) => (area.component.size = formatedSizes[i]));\n\n    this.build(false, true);\n    return true;\n  }\n\n  private build(resetOrders: boolean, resetSizes: boolean): void {\n    this.stopDragging();\n\n    // ¤ AREAS ORDER\n\n    if (resetOrders === true) {\n      // If user provided 'order' for each area, use it to sort them.\n      if (this.displayedAreas.every(a => a.component.order !== null)) {\n        this.displayedAreas.sort(\n          (a, b) => (a.component.order as number) - (b.component.order as number)\n        );\n      }\n\n      // Then set real order with multiples of 2, numbers between will be used by gutters.\n      this.displayedAreas.forEach((area, i) => {\n        area.order = i * 2;\n        area.component.setStyleOrder(area.order);\n      });\n    }\n\n    // ¤ AREAS SIZE\n\n    if (resetSizes === true) {\n      const useUserSizes = isUserSizesValid(\n        this.unit,\n        this.displayedAreas.map(a => a.component.size) as number[]\n      );\n\n      switch (this.unit) {\n        case 'percent': {\n          const defaultSize = 100 / this.displayedAreas.length;\n\n          this.displayedAreas.forEach(area => {\n            area.size = useUserSizes ? (area.component.size as number) : defaultSize;\n            area.minSize = getAreaMinSize(area);\n            area.maxSize = getAreaMaxSize(area);\n          });\n          break;\n        }\n        case 'pixel': {\n          if (useUserSizes) {\n            this.displayedAreas.forEach(area => {\n              area.size = area.component.size;\n              area.minSize = getAreaMinSize(area);\n              area.maxSize = getAreaMaxSize(area);\n            });\n          } else {\n            const wildcardSizeAreas = this.displayedAreas.filter(a => a.component.size === null);\n\n            // No wildcard area > Need to select one arbitrarily > first\n            if (wildcardSizeAreas.length === 0 && this.displayedAreas.length > 0) {\n              this.displayedAreas.forEach((area, i) => {\n                area.size = i === 0 ? null : area.component.size;\n                area.minSize = i === 0 ? null : getAreaMinSize(area);\n                area.maxSize = i === 0 ? null : getAreaMaxSize(area);\n              });\n            }\n            // More than one wildcard area > Need to keep only one arbitrarly > first\n            else if (wildcardSizeAreas.length > 1) {\n              let alreadyGotOne = false;\n              this.displayedAreas.forEach(area => {\n                if (area.component.size === null) {\n                  if (alreadyGotOne === false) {\n                    area.size = null;\n                    area.minSize = null;\n                    area.maxSize = null;\n                    alreadyGotOne = true;\n                  } else {\n                    area.size = 100;\n                    area.minSize = null;\n                    area.maxSize = null;\n                  }\n                } else {\n                  area.size = area.component.size;\n                  area.minSize = getAreaMinSize(area);\n                  area.maxSize = getAreaMaxSize(area);\n                }\n              });\n            }\n          }\n          break;\n        }\n      }\n    }\n\n    this.refreshStyleSizes();\n    this.cdRef.markForCheck();\n  }\n\n  private refreshStyleSizes(): void {\n    ///////////////////////////////////////////\n    // PERCENT MODE\n    if (this.unit === 'percent') {\n      // Only one area > flex-basis 100%\n      if (this.displayedAreas.length === 1) {\n        this.displayedAreas[0].component.setStyleFlex(0, 0, `100%`, false, false);\n      }\n      // Multiple areas > use each percent basis\n      else {\n        const sumGutterSize = this.getNbGutters() * this.gutterSize;\n\n        this.displayedAreas.forEach(area => {\n          area.component.setStyleFlex(\n            0,\n            0,\n            `calc( ${area.size}% - ${((area.size as number) / 100) * sumGutterSize}px )`,\n            area.minSize !== null && area.minSize === area.size ? true : false,\n            area.maxSize !== null && area.maxSize === area.size ? true : false\n          );\n        });\n      }\n    }\n    ///////////////////////////////////////////\n    // PIXEL MODE\n    else if (this.unit === 'pixel') {\n      this.displayedAreas.forEach(area => {\n        // Area with wildcard size\n        if (area.size === null) {\n          if (this.displayedAreas.length === 1) {\n            area.component.setStyleFlex(1, 1, `100%`, false, false);\n          } else {\n            area.component.setStyleFlex(1, 1, `auto`, false, false);\n          }\n        }\n        // Area with pixel size\n        else {\n          // Only one area > flex-basis 100%\n          if (this.displayedAreas.length === 1) {\n            area.component.setStyleFlex(0, 0, `100%`, false, false);\n          }\n          // Multiple areas > use each pixel basis\n          else {\n            area.component.setStyleFlex(\n              0,\n              0,\n              `${area.size}px`,\n              area.minSize !== null && area.minSize === area.size ? true : false,\n              area.maxSize !== null && area.maxSize === area.size ? true : false\n            );\n          }\n        }\n      });\n    }\n  }\n\n  _clickTimeout: number | null = null;\n\n  clickGutter(event: MouseEvent | TouchEvent, gutterNum: number): void {\n    const tempPoint = getPointFromEvent(event) as MtxSplitPoint;\n\n    // Be sure mouseup/touchend happened at same point as mousedown/touchstart to trigger click/dblclick\n    if (this.startPoint && this.startPoint.x === tempPoint.x && this.startPoint.y === tempPoint.y) {\n      // If timeout in progress and new click > clearTimeout & dblClickEvent\n      if (this._clickTimeout !== null) {\n        window.clearTimeout(this._clickTimeout);\n        this._clickTimeout = null;\n        this.notify('dblclick', gutterNum);\n        this.stopDragging();\n      }\n      // Else start timeout to call clickEvent at end\n      else {\n        this._clickTimeout = window.setTimeout(() => {\n          this._clickTimeout = null;\n          this.notify('click', gutterNum);\n          this.stopDragging();\n        }, this.gutterDblClickDuration);\n      }\n    }\n  }\n\n  startDragging(event: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void {\n    event.preventDefault();\n    event.stopPropagation();\n\n    this.startPoint = getPointFromEvent(event);\n    if (this.startPoint === null || this.disabled === true) {\n      return;\n    }\n\n    this.snapshot = {\n      gutterNum,\n      lastSteppedOffset: 0,\n      allAreasSizePixel:\n        getElementPixelSize(this.elRef, this.direction) - this.getNbGutters() * this.gutterSize,\n      allInvolvedAreasSizePercent: 100,\n      areasBeforeGutter: [],\n      areasAfterGutter: [],\n    };\n\n    this.displayedAreas.forEach(area => {\n      const areaSnapshot: MtxSplitAreaSnapshot = {\n        area,\n        sizePixelAtStart: getElementPixelSize(area.component.elRef, this.direction),\n        sizePercentAtStart: (this.unit === 'percent' ? area.size : -1) as number, // If pixel mode, anyway, will not be used.\n      };\n\n      if (area.order < gutterOrder) {\n        if (this.restrictMove === true) {\n          (this.snapshot as MtxSplitSnapshot).areasBeforeGutter = [areaSnapshot];\n        } else {\n          (this.snapshot as MtxSplitSnapshot).areasBeforeGutter.unshift(areaSnapshot);\n        }\n      } else if (area.order > gutterOrder) {\n        if (this.restrictMove === true) {\n          if ((this.snapshot as MtxSplitSnapshot).areasAfterGutter.length === 0) {\n            (this.snapshot as MtxSplitSnapshot).areasAfterGutter = [areaSnapshot];\n          }\n        } else {\n          (this.snapshot as MtxSplitSnapshot).areasAfterGutter.push(areaSnapshot);\n        }\n      }\n    });\n\n    this.snapshot.allInvolvedAreasSizePercent = [\n      ...this.snapshot.areasBeforeGutter,\n      ...this.snapshot.areasAfterGutter,\n    ].reduce((t, a) => t + a.sizePercentAtStart, 0);\n\n    if (\n      this.snapshot.areasBeforeGutter.length === 0 ||\n      this.snapshot.areasAfterGutter.length === 0\n    ) {\n      return;\n    }\n\n    this.dragListeners.push(\n      this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this))\n    );\n    this.dragListeners.push(\n      this.renderer.listen('document', 'touchend', this.stopDragging.bind(this))\n    );\n    this.dragListeners.push(\n      this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this))\n    );\n\n    this.ngZone.runOutsideAngular(() => {\n      this.dragListeners.push(\n        this.renderer.listen('document', 'mousemove', this.dragEvent.bind(this))\n      );\n      this.dragListeners.push(\n        this.renderer.listen('document', 'touchmove', this.dragEvent.bind(this))\n      );\n    });\n\n    this.displayedAreas.forEach(area => area.component.lockEvents());\n\n    this.isDragging = true;\n    this.renderer.addClass(this.elRef.nativeElement, 'mtx-dragging');\n    this.renderer.addClass(\n      this.gutterEls.toArray()[this.snapshot.gutterNum - 1].nativeElement,\n      'mtx-dragged'\n    );\n\n    this.notify('start', this.snapshot.gutterNum);\n  }\n\n  private dragEvent(event: MouseEvent | TouchEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (this._clickTimeout !== null) {\n      window.clearTimeout(this._clickTimeout);\n      this._clickTimeout = null;\n    }\n\n    if (this.isDragging === false) {\n      return;\n    }\n\n    this.endPoint = getPointFromEvent(event);\n    if (this.endPoint === null) {\n      return;\n    }\n\n    // Calculate steppedOffset\n\n    let offset =\n      this.direction === 'horizontal'\n        ? (this.startPoint as MtxSplitPoint).x - this.endPoint.x\n        : (this.startPoint as MtxSplitPoint).y - this.endPoint.y;\n    if (this.dir === 'rtl' && this.direction === 'horizontal') {\n      offset = -offset;\n    }\n    const steppedOffset = Math.round(offset / this.gutterStep) * this.gutterStep;\n\n    if (steppedOffset === (this.snapshot as MtxSplitSnapshot).lastSteppedOffset) {\n      return;\n    }\n\n    (this.snapshot as MtxSplitSnapshot).lastSteppedOffset = steppedOffset;\n\n    // Need to know if each gutter side areas could reacts to steppedOffset\n\n    let areasBefore = getGutterSideAbsorptionCapacity(\n      this.unit,\n      (this.snapshot as MtxSplitSnapshot).areasBeforeGutter,\n      -steppedOffset,\n      (this.snapshot as MtxSplitSnapshot).allAreasSizePixel\n    );\n    let areasAfter = getGutterSideAbsorptionCapacity(\n      this.unit,\n      (this.snapshot as MtxSplitSnapshot).areasAfterGutter,\n      steppedOffset,\n      (this.snapshot as MtxSplitSnapshot).allAreasSizePixel\n    );\n\n    // Each gutter side areas can't absorb all offset\n    if (areasBefore.remain !== 0 && areasAfter.remain !== 0) {\n      if (Math.abs(areasBefore.remain) === Math.abs(areasAfter.remain)) {\n        /** */\n      } else if (Math.abs(areasBefore.remain) > Math.abs(areasAfter.remain)) {\n        areasAfter = getGutterSideAbsorptionCapacity(\n          this.unit,\n          (this.snapshot as MtxSplitSnapshot).areasAfterGutter,\n          steppedOffset + areasBefore.remain,\n          (this.snapshot as MtxSplitSnapshot).allAreasSizePixel\n        );\n      } else {\n        areasBefore = getGutterSideAbsorptionCapacity(\n          this.unit,\n          (this.snapshot as MtxSplitSnapshot).areasBeforeGutter,\n          -(steppedOffset - areasAfter.remain),\n          (this.snapshot as MtxSplitSnapshot).allAreasSizePixel\n        );\n      }\n    }\n    // Areas before gutter can't absorbs all offset > need to recalculate sizes for areas after gutter.\n    else if (areasBefore.remain !== 0) {\n      areasAfter = getGutterSideAbsorptionCapacity(\n        this.unit,\n        (this.snapshot as MtxSplitSnapshot).areasAfterGutter,\n        steppedOffset + areasBefore.remain,\n        (this.snapshot as MtxSplitSnapshot).allAreasSizePixel\n      );\n    }\n    // Areas after gutter can't absorbs all offset > need to recalculate sizes for areas before gutter.\n    else if (areasAfter.remain !== 0) {\n      areasBefore = getGutterSideAbsorptionCapacity(\n        this.unit,\n        (this.snapshot as MtxSplitSnapshot).areasBeforeGutter,\n        -(steppedOffset - areasAfter.remain),\n        (this.snapshot as MtxSplitSnapshot).allAreasSizePixel\n      );\n    }\n\n    if (this.unit === 'percent') {\n      // Hack because of browser messing up with sizes using calc(X% - Ypx) -> el.getBoundingClientRect()\n      // If not there, playing with gutters makes total going down to 99.99875% then 99.99286%, 99.98986%,..\n      const all = [...areasBefore.list, ...areasAfter.list];\n      const areaToReset = all.find(\n        a =>\n          a.percentAfterAbsorption !== 0 &&\n          a.percentAfterAbsorption !== a.areaSnapshot.area.minSize &&\n          a.percentAfterAbsorption !== a.areaSnapshot.area.maxSize\n      );\n\n      if (areaToReset) {\n        areaToReset.percentAfterAbsorption =\n          (this.snapshot as MtxSplitSnapshot).allInvolvedAreasSizePercent -\n          all\n            .filter(a => a !== areaToReset)\n            .reduce((total, a) => total + a.percentAfterAbsorption, 0);\n      }\n    }\n\n    // Now we know areas could absorb steppedOffset, time to really update sizes\n\n    areasBefore.list.forEach(item => updateAreaSize(this.unit, item));\n    areasAfter.list.forEach(item => updateAreaSize(this.unit, item));\n\n    this.refreshStyleSizes();\n    this.notify('progress', (this.snapshot as MtxSplitSnapshot).gutterNum);\n  }\n\n  private stopDragging(event?: Event): void {\n    if (event) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    if (this.isDragging === false) {\n      return;\n    }\n\n    this.displayedAreas.forEach(area => area.component.unlockEvents());\n\n    while (this.dragListeners.length > 0) {\n      const fct = this.dragListeners.pop();\n      if (fct) {\n        fct();\n      }\n    }\n\n    // Warning: Have to be before \"notify('end')\"\n    // because \"notify('end')\"\" can be linked to \"[size]='x'\" > \"build()\" > \"stopDragging()\"\n    this.isDragging = false;\n\n    // If moved from starting point, notify end\n    if (\n      this.endPoint &&\n      ((this.startPoint as MtxSplitPoint).x !== this.endPoint.x ||\n        (this.startPoint as MtxSplitPoint).y !== this.endPoint.y)\n    ) {\n      this.notify('end', (this.snapshot as MtxSplitSnapshot).gutterNum);\n    }\n\n    this.renderer.removeClass(this.elRef.nativeElement, 'mtx-dragging');\n    this.renderer.removeClass(\n      this.gutterEls.toArray()[(this.snapshot as MtxSplitSnapshot).gutterNum - 1].nativeElement,\n      'mtx-dragged'\n    );\n    this.snapshot = null;\n\n    // Needed to let (click)=\"clickGutter(...)\" event run and verify if mouse moved or not\n    this.ngZone.runOutsideAngular(() => {\n      setTimeout(() => {\n        this.startPoint = null;\n        this.endPoint = null;\n      });\n    });\n  }\n\n  notify(\n    type: 'start' | 'progress' | 'end' | 'click' | 'dblclick' | 'transitionEnd',\n    gutterNum: number\n  ): void {\n    const sizes = this.getVisibleAreaSizes();\n\n    if (type === 'start') {\n      this.dragStart.emit({ gutterNum, sizes });\n    } else if (type === 'end') {\n      this.dragEnd.emit({ gutterNum, sizes });\n    } else if (type === 'click') {\n      this.gutterClick.emit({ gutterNum, sizes });\n    } else if (type === 'dblclick') {\n      this.gutterDblClick.emit({ gutterNum, sizes });\n    } else if (type === 'transitionEnd') {\n      if (this.transitionEndSubscriber) {\n        this.ngZone.run(() => this.transitionEndSubscriber.next(sizes));\n      }\n    } else if (type === 'progress') {\n      // Stay outside zone to allow users do what they want about change detection mechanism.\n      this.dragProgressSubject.next({ gutterNum, sizes });\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.stopDragging();\n  }\n}\n","<ng-content></ng-content>\r\n@for (area of displayedAreas; track area; let index = $index; let last = $last) {\r\n  @if (!last) {\r\n    <div\r\n      #gutterEls\r\n      class=\"mtx-split-gutter\"\r\n      [class]=\"color ? 'mat-' + color : ''\"\r\n      [style.flex-basis.px]=\"gutterSize\"\r\n      [style.order]=\"index * 2 + 1\"\r\n      (mousedown)=\"startDragging($event, index * 2 + 1, index + 1)\"\r\n      (touchstart)=\"startDragging($event, index * 2 + 1, index + 1)\"\r\n      (mouseup)=\"clickGutter($event, index + 1)\"\r\n      (touchend)=\"clickGutter($event, index + 1)\"\r\n    >\r\n      <div class=\"mtx-split-gutter-handle\"></div>\r\n    </div>\r\n  }\r\n}\r\n","import {\n  Directive,\n  ElementRef,\n  Input,\n  NgZone,\n  OnDestroy,\n  OnInit,\n  Renderer2,\n  booleanAttribute,\n  inject,\n} from '@angular/core';\n\nimport { MtxSplit } from './split';\nimport { getInputPositiveNumber } from './utils';\n\n@Directive({\n  selector: 'mtx-split-pane, [mtx-split-pane]',\n  exportAs: 'mtxSplitPane',\n})\nexport class MtxSplitPane implements OnInit, OnDestroy {\n  private ngZone = inject(NgZone);\n  private renderer = inject(Renderer2);\n  private split = inject(MtxSplit);\n\n  elRef = inject(ElementRef);\n\n  /**\n   * Order of the area. Used to maintain the order of areas when toggling their visibility.\n   * Toggling area visibility without specifying an `order` leads to weird behavior.\n   */\n  @Input()\n  get order() {\n    return this._order;\n  }\n  set order(v: number | null) {\n    this._order = getInputPositiveNumber(v, null);\n\n    this.split.updateArea(this, true, false);\n  }\n  private _order: number | null = null;\n\n  /**\n   * Size of the area in selected unit (percent/pixel).\n   * - Percent: All areas sizes should equal to `100`, If not, all areas will have the same size.\n   * - Pixel: An area with wildcard size (`size=\"*\"`) is mandatory (only one) and\n   *   can't have `visible=\"false\"` or `minSize`/`maxSize`/`lockSize` properties.\n   */\n  @Input()\n  get size() {\n    return this._size;\n  }\n  set size(v: number | null) {\n    this._size = getInputPositiveNumber(v, null);\n\n    this.split.updateArea(this, false, true);\n  }\n  private _size: number | null = null;\n\n  /** Minimum pixel or percent size, should be equal to or smaller than provided `size`. */\n  @Input()\n  get minSize() {\n    return this._minSize;\n  }\n  set minSize(v: number | null) {\n    this._minSize = getInputPositiveNumber(v, null);\n\n    this.split.updateArea(this, false, true);\n  }\n  private _minSize: number | null = null;\n\n  /** Maximum pixel or percent size, should be equal to or larger than provided `size`. */\n  @Input()\n  get maxSize() {\n    return this._maxSize;\n  }\n  set maxSize(v: number | null) {\n    this._maxSize = getInputPositiveNumber(v, null);\n\n    this.split.updateArea(this, false, true);\n  }\n  private _maxSize: number | null = null;\n\n  /** Lock area size, same as `minSize`=`maxSize`=`size`. */\n  @Input({ transform: booleanAttribute })\n  get lockSize() {\n    return this._lockSize;\n  }\n  set lockSize(v: boolean) {\n    this._lockSize = v;\n\n    this.split.updateArea(this, false, true);\n  }\n  private _lockSize = false;\n\n  /** Hide area visually but still present in the DOM, use `ngIf` to completely remove it. */\n  @Input({ transform: booleanAttribute })\n  get visible() {\n    return this._visible;\n  }\n  set visible(v: boolean) {\n    this._visible = v;\n\n    if (this._visible) {\n      this.split.showArea(this);\n      this.renderer.removeClass(this.elRef.nativeElement, 'mtx-split-pane-hidden');\n    } else {\n      this.split.hideArea(this);\n      this.renderer.addClass(this.elRef.nativeElement, 'mtx-split-pane-hidden');\n    }\n  }\n  private _visible = true;\n\n  private transitionListener!: () => void;\n  private readonly lockListeners: (() => void)[] = [];\n\n  constructor() {\n    this.renderer.addClass(this.elRef.nativeElement, 'mtx-split-pane');\n  }\n\n  ngOnInit(): void {\n    this.split.addArea(this);\n\n    this.ngZone.runOutsideAngular(() => {\n      this.transitionListener = this.renderer.listen(\n        this.elRef.nativeElement,\n        'transitionend',\n        (event: TransitionEvent) => {\n          // Limit only flex-basis transition to trigger the event\n          if (event.propertyName === 'flex-basis') {\n            this.split.notify('transitionEnd', -1);\n          }\n        }\n      );\n    });\n  }\n\n  setStyleOrder(value: number): void {\n    this.renderer.setStyle(this.elRef.nativeElement, 'order', value);\n  }\n\n  setStyleFlex(grow: number, shrink: number, basis: string, isMin: boolean, isMax: boolean): void {\n    // Need 3 separated properties to work on IE11 (https://github.com/angular/flex-layout/issues/323)\n    this.renderer.setStyle(this.elRef.nativeElement, 'flex-grow', grow);\n    this.renderer.setStyle(this.elRef.nativeElement, 'flex-shrink', shrink);\n    this.renderer.setStyle(this.elRef.nativeElement, 'flex-basis', basis);\n\n    if (isMin === true) {\n      this.renderer.addClass(this.elRef.nativeElement, 'mtx-min');\n    } else {\n      this.renderer.removeClass(this.elRef.nativeElement, 'mtx-min');\n    }\n\n    if (isMax === true) {\n      this.renderer.addClass(this.elRef.nativeElement, 'mtx-max');\n    } else {\n      this.renderer.removeClass(this.elRef.nativeElement, 'mtx-max');\n    }\n  }\n\n  lockEvents(): void {\n    this.ngZone.runOutsideAngular(() => {\n      this.lockListeners.push(\n        this.renderer.listen(this.elRef.nativeElement, 'selectstart', (e: Event) => false)\n      );\n      this.lockListeners.push(\n        this.renderer.listen(this.elRef.nativeElement, 'dragstart', (e: Event) => false)\n      );\n    });\n  }\n\n  unlockEvents(): void {\n    while (this.lockListeners.length > 0) {\n      const fct = this.lockListeners.pop();\n      if (fct) {\n        fct();\n      }\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.unlockEvents();\n\n    if (this.transitionListener) {\n      this.transitionListener();\n    }\n\n    this.split.removeArea(this);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MtxSplit } from './split';\nimport { MtxSplitPane } from './split-pane';\n\n@NgModule({\n  imports: [CommonModule, MtxSplit, MtxSplitPane],\n  exports: [MtxSplit, MtxSplitPane],\n})\nexport class MtxSplitModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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