\n * Drag Me!\n *
\n * ```\n *\n * @memberof IgxDragDirective\n */\n set ghostOffsetX(value) {\n this._offsetX = parseInt(value, 10);\n }\n get ghostOffsetX() {\n return this._offsetX !== undefined ? this._offsetX : this._defaultOffsetX;\n }\n /**\n * Sets the offset of the dragged element relative to the mouse in pixels.\n * By default it's taking the relative position to the mouse when the drag started and keeps it the same.\n * ```html\n * \n * \n * Drag Me!\n *
\n * ```\n *\n * @memberof IgxDragDirective\n */\n set ghostOffsetY(value) {\n this._offsetY = parseInt(value, 10);\n }\n get ghostOffsetY() {\n return this._offsetY !== undefined ? this._offsetY : this._defaultOffsetY;\n }\n constructor(cdr, element, viewContainer, zone, renderer, platformUtil) {\n this.cdr = cdr;\n this.element = element;\n this.viewContainer = viewContainer;\n this.zone = zone;\n this.renderer = renderer;\n this.platformUtil = platformUtil;\n /**\n * Sets the tolerance in pixels before drag starts.\n * By default the drag starts after the draggable element is moved by 5px.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.dragTolerance = 5;\n /**\n * Sets the directions that the element can be dragged.\n * By default it is set to both horizontal and vertical directions.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public dragDir = DragDirection.HORIZONTAL;\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.dragDirection = DragDirection.BOTH;\n /**\n * Sets whether the base element should be moved, or a ghost element should be rendered that represents it instead.\n * By default it is set to `true`.\n * If it is set to `false` when dragging the base element is moved instead and no ghost elements are rendered.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.ghost = true;\n /**\n * Sets a custom class that will be added to the `ghostElement` element.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.ghostClass = '';\n /**\n * Set styles that will be added to the `ghostElement` element.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.ghostStyle = {};\n /**\n * Overrides the scroll container of the dragged element. By default its the window.\n */\n this.scrollContainer = null;\n /**\n * Event triggered when the draggable element drag starts.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public onDragStart(){\n * alert(\"The drag has stared!\");\n * }\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.dragStart = new EventEmitter();\n /**\n * Event triggered when the draggable element has been moved.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public onDragMove(){\n * alert(\"The element has moved!\");\n * }\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.dragMove = new EventEmitter();\n /**\n * Event triggered when the draggable element is released.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public onDragEnd(){\n * alert(\"The drag has ended!\");\n * }\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.dragEnd = new EventEmitter();\n /**\n * Event triggered when the draggable element is clicked.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public onDragClick(){\n * alert(\"The element has been clicked!\");\n * }\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.dragClick = new EventEmitter();\n /**\n * Event triggered when the drag ghost element is created.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public ghostCreated(){\n * alert(\"The ghost has been created!\");\n * }\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.ghostCreate = new EventEmitter();\n /**\n * Event triggered when the drag ghost element is created.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public ghostDestroyed(){\n * alert(\"The ghost has been destroyed!\");\n * }\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.ghostDestroy = new EventEmitter();\n /**\n * Event triggered after the draggable element is released and after its animation has finished.\n * ```html\n * \n * Drag Me!\n *
\n * ```\n * ```typescript\n * public onMoveEnd(){\n * alert(\"The move has ended!\");\n * }\n * ```\n *\n * @memberof IgxDragDirective\n */\n this.transitioned = new EventEmitter();\n /**\n * @hidden\n */\n this.baseClass = true;\n /**\n * @hidden\n */\n this.selectDisabled = false;\n /**\n * @hidden\n */\n this.defaultReturnDuration = '0.5s';\n /**\n * @hidden\n */\n this.animInProgress = false;\n this.ghostContext = null;\n this._startX = 0;\n this._startY = 0;\n this._lastX = 0;\n this._lastY = 0;\n this._dragStarted = false;\n this._ghostHostX = 0;\n this._ghostHostY = 0;\n this._pointerDownId = null;\n this._clicked = false;\n this._lastDropArea = null;\n this._destroy = new Subject();\n this._removeOnDestroy = true;\n this._scrollContainer = null;\n this._originalScrollContainerWidth = 0;\n this._originalScrollContainerHeight = 0;\n this._scrollContainerStep = 5;\n this._scrollContainerStepMs = 10;\n this._scrollContainerThreshold = 25;\n this._containerScrollIntervalId = null;\n }\n /**\n * @hidden\n */\n ngAfterContentInit() {\n if (!this.dragHandles || !this.dragHandles.length) {\n // Set user select none to the whole draggable element if no drag handles are defined.\n this.selectDisabled = true;\n }\n // Bind events\n this.zone.runOutsideAngular(() => {\n if (!this.platformUtil.isBrowser) {\n return;\n }\n const targetElements = this.dragHandles && this.dragHandles.length ? this.dragHandles.filter(item => item.parentDragElement === null).map(item => {\n item.parentDragElement = this.element.nativeElement;\n return item.element.nativeElement;\n }) : [this.element.nativeElement];\n targetElements.forEach(element => {\n if (this.pointerEventsEnabled) {\n fromEvent(element, 'pointerdown').pipe(takeUntil(this._destroy)).subscribe(res => this.onPointerDown(res));\n fromEvent(element, 'pointermove').pipe(throttle(() => interval(0, animationFrameScheduler)), takeUntil(this._destroy)).subscribe(res => this.onPointerMove(res));\n fromEvent(element, 'pointerup').pipe(takeUntil(this._destroy)).subscribe(res => this.onPointerUp(res));\n if (!this.ghost) {\n // Do not bind `lostpointercapture` to the target, because we will bind it on the ghost later.\n fromEvent(element, 'lostpointercapture').pipe(takeUntil(this._destroy)).subscribe(res => this.onPointerLost(res));\n }\n } else if (this.touchEventsEnabled) {\n fromEvent(element, 'touchstart').pipe(takeUntil(this._destroy)).subscribe(res => this.onPointerDown(res));\n } else {\n // We don't have pointer events and touch events. Use then mouse events.\n fromEvent(element, 'mousedown').pipe(takeUntil(this._destroy)).subscribe(res => this.onPointerDown(res));\n }\n });\n // We should bind to document events only once when there are no pointer events.\n if (!this.pointerEventsEnabled && this.touchEventsEnabled) {\n fromEvent(document.defaultView, 'touchmove').pipe(throttle(() => interval(0, animationFrameScheduler)), takeUntil(this._destroy)).subscribe(res => this.onPointerMove(res));\n fromEvent(document.defaultView, 'touchend').pipe(takeUntil(this._destroy)).subscribe(res => this.onPointerUp(res));\n } else if (!this.pointerEventsEnabled) {\n fromEvent(document.defaultView, 'mousemove').pipe(throttle(() => interval(0, animationFrameScheduler)), takeUntil(this._destroy)).subscribe(res => this.onPointerMove(res));\n fromEvent(document.defaultView, 'mouseup').pipe(takeUntil(this._destroy)).subscribe(res => this.onPointerUp(res));\n }\n this.element.nativeElement.addEventListener('transitionend', args => {\n this.onTransitionEnd(args);\n });\n });\n // Set transition duration to 0s. This also helps with setting `visibility: hidden` to the base to not lag.\n this.element.nativeElement.style.transitionDuration = '0.0s';\n }\n /**\n * @hidden\n */\n ngOnDestroy() {\n this._destroy.next(true);\n this._destroy.complete();\n if (this.ghost && this.ghostElement && this._removeOnDestroy) {\n this.ghostElement.parentNode.removeChild(this.ghostElement);\n this.ghostElement = null;\n if (this._dynamicGhostRef) {\n this._dynamicGhostRef.destroy();\n this._dynamicGhostRef = null;\n }\n }\n if (this._containerScrollIntervalId) {\n clearInterval(this._containerScrollIntervalId);\n this._containerScrollIntervalId = null;\n }\n }\n /**\n * Sets desired location of the base element or ghost element if rended relative to the document.\n *\n * @param newLocation New location that should be applied. It is advised to get new location using getBoundingClientRects() + scroll.\n */\n setLocation(newLocation) {\n // We do not subtract marginLeft and marginTop here because here we calculate deltas.\n if (this.ghost && this.ghostElement) {\n this.ghostLeft = newLocation.pageX + this.windowScrollLeft;\n this.ghostTop = newLocation.pageY + this.windowScrollTop;\n } else if (!this.ghost) {\n const deltaX = newLocation.pageX - this.pageX;\n const deltaY = newLocation.pageY - this.pageY;\n const transformX = this.getTransformX(this.element.nativeElement);\n const transformY = this.getTransformY(this.element.nativeElement);\n this.setTransformXY(transformX + deltaX, transformY + deltaY);\n }\n this._startX = this.baseLeft;\n this._startY = this.baseTop;\n }\n /**\n * Animates the base or ghost element depending on the `ghost` input to its initial location.\n * If `ghost` is true but there is not ghost rendered, it will be created and animated.\n * If the base element has changed its DOM position its initial location will be changed accordingly.\n *\n * @param customAnimArgs Custom transition properties that will be applied when performing the transition.\n * @param startLocation Start location from where the transition should start.\n */\n transitionToOrigin(customAnimArgs, startLocation) {\n if (!!startLocation && startLocation.pageX === this.baseOriginLeft && startLocation.pageY === this.baseOriginLeft || !startLocation && this.ghost && !this.ghostElement) {\n return;\n }\n if (!!startLocation && startLocation.pageX !== this.pageX && startLocation.pageY !== this.pageY) {\n if (this.ghost && !this.ghostElement) {\n this._startX = startLocation.pageX;\n this._startY = startLocation.pageY;\n this._ghostStartX = this._startX;\n this._ghostStartY = this._startY;\n this.createGhost(this._startX, this._startY);\n }\n this.setLocation(startLocation);\n }\n this.animInProgress = true;\n // Use setTimeout because we need to be sure that the element is positioned first correctly if there is start location.\n setTimeout(() => {\n if (this.ghost) {\n this.ghostElement.style.transitionProperty = 'top, left';\n this.ghostElement.style.transitionDuration = customAnimArgs && customAnimArgs.duration ? customAnimArgs.duration + 's' : this.defaultReturnDuration;\n this.ghostElement.style.transitionTimingFunction = customAnimArgs && customAnimArgs.timingFunction ? customAnimArgs.timingFunction : '';\n this.ghostElement.style.transitionDelay = customAnimArgs && customAnimArgs.delay ? customAnimArgs.delay + 's' : '';\n this.setLocation(new IgxDragLocation(this.baseLeft, this.baseTop));\n } else if (!this.ghost) {\n this.element.nativeElement.style.transitionProperty = 'transform';\n this.element.nativeElement.style.transitionDuration = customAnimArgs && customAnimArgs.duration ? customAnimArgs.duration + 's' : this.defaultReturnDuration;\n this.element.nativeElement.style.transitionTimingFunction = customAnimArgs && customAnimArgs.timingFunction ? customAnimArgs.timingFunction : '';\n this.element.nativeElement.style.transitionDelay = customAnimArgs && customAnimArgs.delay ? customAnimArgs.delay + 's' : '';\n this._startX = this.baseLeft;\n this._startY = this.baseTop;\n this.setTransformXY(0, 0);\n }\n }, 0);\n }\n /**\n * Animates the base or ghost element to a specific target location or other element using transition.\n * If `ghost` is true but there is not ghost rendered, it will be created and animated.\n * It is recommended to use 'getBoundingClientRects() + pageScroll' when determining desired location.\n *\n * @param target Target that the base or ghost will transition to. It can be either location in the page or another HTML element.\n * @param customAnimArgs Custom transition properties that will be applied when performing the transition.\n * @param startLocation Start location from where the transition should start.\n */\n transitionTo(target, customAnimArgs, startLocation) {\n if (!!startLocation && this.ghost && !this.ghostElement) {\n this._startX = startLocation.pageX;\n this._startY = startLocation.pageY;\n this._ghostStartX = this._startX;\n this._ghostStartY = this._startY;\n } else if (!!startLocation && (!this.ghost || this.ghostElement)) {\n this.setLocation(startLocation);\n } else if (this.ghost && !this.ghostElement) {\n this._startX = this.baseLeft;\n this._startY = this.baseTop;\n this._ghostStartX = this._startX + this.windowScrollLeft;\n this._ghostStartY = this._startY + this.windowScrollTop;\n }\n if (this.ghost && !this.ghostElement) {\n this.createGhost(this._startX, this._startY);\n }\n this.animInProgress = true;\n // Use setTimeout because we need to be sure that the element is positioned first correctly if there is start location.\n setTimeout(() => {\n const movedElem = this.ghost ? this.ghostElement : this.element.nativeElement;\n movedElem.style.transitionProperty = this.ghost && this.ghostElement ? 'left, top' : 'transform';\n movedElem.style.transitionDuration = customAnimArgs && customAnimArgs.duration ? customAnimArgs.duration + 's' : this.defaultReturnDuration;\n movedElem.style.transitionTimingFunction = customAnimArgs && customAnimArgs.timingFunction ? customAnimArgs.timingFunction : '';\n movedElem.style.transitionDelay = customAnimArgs && customAnimArgs.delay ? customAnimArgs.delay + 's' : '';\n if (target instanceof IgxDragLocation) {\n this.setLocation(new IgxDragLocation(target.pageX, target.pageY));\n } else {\n const targetRects = target.nativeElement.getBoundingClientRect();\n this.setLocation(new IgxDragLocation(targetRects.left - this.windowScrollLeft, targetRects.top - this.windowScrollTop));\n }\n }, 0);\n }\n /**\n * @hidden\n * Method bound to the PointerDown event of the base element igxDrag is initialized.\n * @param event PointerDown event captured\n */\n onPointerDown(event) {\n const ignoredElement = this.dragIgnoredElems.find(elem => elem.element.nativeElement === event.target);\n if (ignoredElement) {\n return;\n }\n // Set pointer capture so we detect pointermove even if mouse is out of bounds until ghostElement is created.\n const handleFound = this.dragHandles.find(handle => handle.element.nativeElement === event.target);\n const targetElement = handleFound ? handleFound.element.nativeElement : event.target || this.element.nativeElement;\n if (this.pointerEventsEnabled && targetElement.isConnected) {\n this._pointerDownId = event.pointerId;\n targetElement.setPointerCapture(this._pointerDownId);\n } else if (targetElement.isConnected) {\n targetElement.focus();\n event.preventDefault();\n } else {\n return;\n }\n this._clicked = true;\n if (this.pointerEventsEnabled || !this.touchEventsEnabled) {\n // Check first for pointer events or non touch, because we can have pointer events and touch events at once.\n this._startX = event.pageX;\n this._startY = event.pageY;\n } else if (this.touchEventsEnabled) {\n this._startX = event.touches[0].pageX;\n this._startY = event.touches[0].pageY;\n }\n this._defaultOffsetX = this.baseLeft - this._startX + this.windowScrollLeft;\n this._defaultOffsetY = this.baseTop - this._startY + this.windowScrollTop;\n this._ghostStartX = this._startX + this.ghostOffsetX;\n this._ghostStartY = this._startY + this.ghostOffsetY;\n this._lastX = this._startX;\n this._lastY = this._startY;\n }\n /**\n * @hidden\n * Perform drag move logic when dragging and dispatching events if there is igxDrop under the pointer.\n * This method is bound at first at the base element.\n * If dragging starts and after the ghostElement is rendered the pointerId is reassigned it. Then this method is bound to it.\n * @param event PointerMove event captured\n */\n onPointerMove(event) {\n if (this._clicked) {\n let pageX;\n let pageY;\n if (this.pointerEventsEnabled || !this.touchEventsEnabled) {\n // Check first for pointer events or non touch, because we can have pointer events and touch events at once.\n pageX = event.pageX;\n pageY = event.pageY;\n } else if (this.touchEventsEnabled) {\n pageX = event.touches[0].pageX;\n pageY = event.touches[0].pageY;\n // Prevent scrolling on touch while dragging\n event.preventDefault();\n }\n const totalMovedX = pageX - this._startX;\n const totalMovedY = pageY - this._startY;\n if (!this._dragStarted && (Math.abs(totalMovedX) > this.dragTolerance || Math.abs(totalMovedY) > this.dragTolerance)) {\n const dragStartArgs = {\n originalEvent: event,\n owner: this,\n startX: pageX - totalMovedX,\n startY: pageY - totalMovedY,\n pageX,\n pageY,\n cancel: false\n };\n this.zone.run(() => {\n this.dragStart.emit(dragStartArgs);\n });\n if (!dragStartArgs.cancel) {\n this._dragStarted = true;\n if (this.ghost) {\n // We moved enough so ghostElement can be rendered and actual dragging to start.\n // When creating it will take into account any offset set by the user by default.\n this.createGhost(pageX, pageY);\n } else if (this._offsetX !== undefined || this._offsetY !== undefined) {\n // There is no need for ghost, but we will need to position initially the base element to reflect any offset.\n const transformX = (this._offsetX !== undefined ? this._offsetX - this._defaultOffsetX : 0) + this.getTransformX(this.element.nativeElement);\n const transformY = (this._offsetY !== undefined ? this._offsetY - this._defaultOffsetY : 0) + this.getTransformY(this.element.nativeElement);\n this.setTransformXY(transformX, transformY);\n }\n } else {\n return;\n }\n } else if (!this._dragStarted) {\n return;\n }\n const moveArgs = {\n originalEvent: event,\n owner: this,\n startX: this._startX,\n startY: this._startY,\n pageX: this._lastX,\n pageY: this._lastY,\n nextPageX: pageX,\n nextPageY: pageY,\n cancel: false\n };\n this.dragMove.emit(moveArgs);\n const setPageX = moveArgs.nextPageX;\n const setPageY = moveArgs.nextPageY;\n if (!moveArgs.cancel) {\n // Scroll root container if the user reaches its boundaries.\n this.onScrollContainer();\n // Move the actual element around\n if (this.ghost) {\n const updatedTotalMovedX = this.dragDirection === DragDirection.VERTICAL ? 0 : setPageX - this._startX;\n const updatedTotalMovedY = this.dragDirection === DragDirection.HORIZONTAL ? 0 : setPageY - this._startY;\n this.ghostLeft = this._ghostStartX + updatedTotalMovedX;\n this.ghostTop = this._ghostStartY + updatedTotalMovedY;\n } else {\n const lastMovedX = this.dragDirection === DragDirection.VERTICAL ? 0 : setPageX - this._lastX;\n const lastMovedY = this.dragDirection === DragDirection.HORIZONTAL ? 0 : setPageY - this._lastY;\n const translateX = this.getTransformX(this.element.nativeElement) + lastMovedX;\n const translateY = this.getTransformY(this.element.nativeElement) + lastMovedY;\n this.setTransformXY(translateX, translateY);\n }\n this.dispatchDragEvents(pageX, pageY, event);\n }\n this._lastX = setPageX;\n this._lastY = setPageY;\n }\n }\n /**\n * @hidden\n * Perform drag end logic when releasing the ghostElement and dispatching drop event if igxDrop is under the pointer.\n * This method is bound at first at the base element.\n * If dragging starts and after the ghostElement is rendered the pointerId is reassigned to it. Then this method is bound to it.\n * @param event PointerUp event captured\n */\n onPointerUp(event) {\n if (!this._clicked) {\n return;\n }\n let pageX;\n let pageY;\n if (this.pointerEventsEnabled || !this.touchEventsEnabled) {\n // Check first for pointer events or non touch, because we can have pointer events and touch events at once.\n pageX = event.pageX;\n pageY = event.pageY;\n } else if (this.touchEventsEnabled) {\n pageX = event.touches[0].pageX;\n pageY = event.touches[0].pageY;\n // Prevent scrolling on touch while dragging\n event.preventDefault();\n }\n const eventArgs = {\n originalEvent: event,\n owner: this,\n startX: this._startX,\n startY: this._startY,\n pageX,\n pageY\n };\n this._pointerDownId = null;\n this._clicked = false;\n if (this._dragStarted) {\n if (this._lastDropArea && this._lastDropArea !== this.element.nativeElement) {\n this.dispatchDropEvent(event.pageX, event.pageY, event);\n }\n this.zone.run(() => {\n this.dragEnd.emit(eventArgs);\n });\n if (!this.animInProgress) {\n this.onTransitionEnd(null);\n }\n } else {\n // Trigger our own click event because when there is no ghost, native click cannot be prevented when dragging.\n this.zone.run(() => {\n this.dragClick.emit(eventArgs);\n });\n }\n if (this._containerScrollIntervalId) {\n clearInterval(this._containerScrollIntervalId);\n this._containerScrollIntervalId = null;\n }\n }\n /**\n * @hidden\n * Execute this method whe the pointer capture has been lost.\n * This means that during dragging the user has performed other action like right clicking and then clicking somewhere else.\n * This method will ensure that the drag state is being reset in this case as if the user released the dragged element.\n * @param event Event captured\n */\n onPointerLost(event) {\n if (!this._clicked) {\n return;\n }\n // When the base element is moved to previous index, angular reattaches the ghost template as a sibling by default.\n // This is the defaut place for the EmbededViewRef when recreated.\n // That's why we need to move it to the proper place and set pointer capture again.\n if (this._pointerDownId && this.ghostElement && this._dynamicGhostRef && !this._dynamicGhostRef.destroyed) {\n let ghostReattached = false;\n if (this.ghostHost && !Array.from(this.ghostHost.children).includes(this.ghostElement)) {\n ghostReattached = true;\n this.ghostHost.appendChild(this.ghostElement);\n } else if (!this.ghostHost && !Array.from(document.body.children).includes(this.ghostElement)) {\n ghostReattached = true;\n document.body.appendChild(this.ghostElement);\n }\n if (ghostReattached) {\n this.ghostElement.setPointerCapture(this._pointerDownId);\n return;\n }\n }\n const eventArgs = {\n originalEvent: event,\n owner: this,\n startX: this._startX,\n startY: this._startY,\n pageX: event.pageX,\n pageY: event.pageY\n };\n this._pointerDownId = null;\n this._clicked = false;\n if (this._dragStarted) {\n this.zone.run(() => {\n this.dragEnd.emit(eventArgs);\n });\n if (!this.animInProgress) {\n this.onTransitionEnd(null);\n }\n }\n }\n /**\n * @hidden\n */\n onTransitionEnd(event) {\n if (!this._dragStarted && !this.animInProgress || this._clicked) {\n // Return if no dragging started and there is no animation in progress.\n return;\n }\n if (this.ghost && this.ghostElement) {\n this._ghostStartX = this.baseLeft + this.windowScrollLeft;\n this._ghostStartY = this.baseTop + this.windowScrollTop;\n const ghostDestroyArgs = {\n owner: this,\n ghostElement: this.ghostElement,\n cancel: false\n };\n this.ghostDestroy.emit(ghostDestroyArgs);\n if (ghostDestroyArgs.cancel) {\n return;\n }\n this.ghostElement.remove();\n this.ghostElement = null;\n if (this._dynamicGhostRef) {\n this._dynamicGhostRef.destroy();\n this._dynamicGhostRef = null;\n }\n } else if (!this.ghost) {\n this.element.nativeElement.style.transitionProperty = '';\n this.element.nativeElement.style.transitionDuration = '0.0s';\n this.element.nativeElement.style.transitionTimingFunction = '';\n this.element.nativeElement.style.transitionDelay = '';\n }\n this.animInProgress = false;\n this._dragStarted = false;\n // Execute transitioned after everything is reset so if the user sets new location on the base now it would work as expected.\n this.zone.run(() => {\n this.transitioned.emit({\n originalEvent: event,\n owner: this,\n startX: this._startX,\n startY: this._startY,\n pageX: this._startX,\n pageY: this._startY\n });\n });\n }\n /**\n * @hidden\n * Create ghost element - if a Node object is provided it creates a clone of that node,\n * otherwise it clones the host element.\n * Bind all needed events.\n * @param pageX Latest pointer position on the X axis relative to the page.\n * @param pageY Latest pointer position on the Y axis relative to the page.\n * @param node The Node object to be cloned.\n */\n createGhost(pageX, pageY, node = null) {\n if (!this.ghost) {\n return;\n }\n if (this.ghostTemplate) {\n this.zone.run(() => {\n // Create template in zone, so it gets updated by it automatically.\n this._dynamicGhostRef = this.viewContainer.createEmbeddedView(this.ghostTemplate, this.ghostContext);\n });\n if (this._dynamicGhostRef.rootNodes[0].style.display === 'contents') {\n // Change the display to default since display contents does not position the element absolutely.\n this._dynamicGhostRef.rootNodes[0].style.display = 'block';\n }\n this.ghostElement = this._dynamicGhostRef.rootNodes[0];\n } else {\n this.ghostElement = node ? node.cloneNode(true) : this.element.nativeElement.cloneNode(true);\n }\n const totalMovedX = pageX - this._startX;\n const totalMovedY = pageY - this._startY;\n this._ghostHostX = this.getGhostHostBaseOffsetX();\n this._ghostHostY = this.getGhostHostBaseOffsetY();\n this.ghostElement.style.transitionDuration = '0.0s';\n this.ghostElement.style.position = 'absolute';\n if (this.ghostClass) {\n this.ghostElement.classList.add(this.ghostClass);\n }\n if (this.ghostStyle) {\n Object.entries(this.ghostStyle).map(([name, value]) => {\n this.renderer.setStyle(this.ghostElement, name, value, RendererStyleFlags2.DashCase);\n });\n }\n const createEventArgs = {\n owner: this,\n ghostElement: this.ghostElement,\n cancel: false\n };\n this.ghostCreate.emit(createEventArgs);\n if (createEventArgs.cancel) {\n this.ghostElement = null;\n if (this.ghostTemplate && this._dynamicGhostRef) {\n this._dynamicGhostRef.destroy();\n }\n return;\n }\n if (this.ghostHost) {\n this.ghostHost.appendChild(this.ghostElement);\n } else {\n document.body.appendChild(this.ghostElement);\n }\n const ghostMarginLeft = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);\n const ghostMarginTop = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);\n this.ghostElement.style.left = this._ghostStartX - ghostMarginLeft + totalMovedX - this._ghostHostX + 'px';\n this.ghostElement.style.top = this._ghostStartY - ghostMarginTop + totalMovedY - this._ghostHostY + 'px';\n if (this.pointerEventsEnabled) {\n // The ghostElement takes control for moving and dragging after it has been rendered.\n if (this._pointerDownId !== null) {\n this.ghostElement.setPointerCapture(this._pointerDownId);\n }\n this.ghostElement.addEventListener('pointermove', args => {\n this.onPointerMove(args);\n });\n this.ghostElement.addEventListener('pointerup', args => {\n this.onPointerUp(args);\n });\n this.ghostElement.addEventListener('lostpointercapture', args => {\n this.onPointerLost(args);\n });\n }\n // Transition animation when the ghostElement is released and it returns to it's original position.\n this.ghostElement.addEventListener('transitionend', args => {\n this.onTransitionEnd(args);\n });\n this.cdr.detectChanges();\n }\n /**\n * @hidden\n * Dispatch custom igxDragEnter/igxDragLeave events based on current pointer position and if drop area is under.\n */\n dispatchDragEvents(pageX, pageY, originalEvent) {\n let topDropArea;\n const customEventArgs = {\n startX: this._startX,\n startY: this._startY,\n pageX,\n pageY,\n owner: this,\n originalEvent\n };\n const elementsFromPoint = this.getElementsAtPoint(pageX, pageY);\n let targetElements = [];\n // Check for shadowRoot instance and use it if present\n for (const elFromPoint of elementsFromPoint) {\n if (elFromPoint?.shadowRoot) {\n targetElements = targetElements.concat(this.getFromShadowRoot(elFromPoint, pageX, pageY, elementsFromPoint));\n } else if (targetElements.indexOf(elFromPoint) === -1) {\n targetElements.push(elFromPoint);\n }\n }\n for (const element of targetElements) {\n if (element.getAttribute('droppable') === 'true' && element !== this.ghostElement && element !== this.element.nativeElement) {\n topDropArea = element;\n break;\n }\n }\n if (topDropArea && (!this._lastDropArea || this._lastDropArea && this._lastDropArea !== topDropArea)) {\n if (this._lastDropArea) {\n this.dispatchEvent(this._lastDropArea, 'igxDragLeave', customEventArgs);\n }\n this._lastDropArea = topDropArea;\n this.dispatchEvent(this._lastDropArea, 'igxDragEnter', customEventArgs);\n } else if (!topDropArea && this._lastDropArea) {\n this.dispatchEvent(this._lastDropArea, 'igxDragLeave', customEventArgs);\n this._lastDropArea = null;\n return;\n }\n if (topDropArea) {\n this.dispatchEvent(topDropArea, 'igxDragOver', customEventArgs);\n }\n }\n /**\n * @hidden\n * Traverse shadow dom in depth.\n */\n getFromShadowRoot(elem, pageX, pageY, parentDomElems) {\n const elementsFromPoint = elem.shadowRoot.elementsFromPoint(pageX, pageY);\n const shadowElements = elementsFromPoint.filter(cur => parentDomElems.indexOf(cur) === -1);\n let res = [];\n for (const elFromPoint of shadowElements) {\n if (!!elFromPoint?.shadowRoot && elFromPoint.shadowRoot !== elem.shadowRoot) {\n res = res.concat(this.getFromShadowRoot(elFromPoint, pageX, pageY, elementsFromPoint));\n }\n res.push(elFromPoint);\n }\n return res;\n }\n /**\n * @hidden\n * Dispatch custom igxDrop event based on current pointer position if there is last recorder drop area under the pointer.\n * Last recorder drop area is updated in @dispatchDragEvents method.\n */\n dispatchDropEvent(pageX, pageY, originalEvent) {\n const eventArgs = {\n startX: this._startX,\n startY: this._startY,\n pageX,\n pageY,\n owner: this,\n originalEvent\n };\n this.dispatchEvent(this._lastDropArea, 'igxDrop', eventArgs);\n this.dispatchEvent(this._lastDropArea, 'igxDragLeave', eventArgs);\n this._lastDropArea = null;\n }\n /**\n * @hidden\n */\n getElementsAtPoint(pageX, pageY) {\n // correct the coordinates with the current scroll position, because\n // document.elementsFromPoint consider position within the current viewport\n // window.pageXOffset == window.scrollX; // always true\n // using window.pageXOffset for IE9 compatibility\n const viewPortX = pageX - window.pageXOffset;\n const viewPortY = pageY - window.pageYOffset;\n if (document['msElementsFromPoint']) {\n // Edge and IE special snowflakes\n const elements = document['msElementsFromPoint'](viewPortX, viewPortY);\n return elements === null ? [] : elements;\n } else {\n // Other browsers like Chrome, Firefox, Opera\n return document.elementsFromPoint(viewPortX, viewPortY);\n }\n }\n /**\n * @hidden\n */\n dispatchEvent(target, eventName, eventArgs) {\n // This way is IE11 compatible.\n // const dragLeaveEvent = document.createEvent('CustomEvent');\n // dragLeaveEvent.initCustomEvent(eventName, false, false, eventArgs);\n // target.dispatchEvent(dragLeaveEvent);\n // Otherwise can be used `target.dispatchEvent(new CustomEvent(eventName, eventArgs));`\n target.dispatchEvent(new CustomEvent(eventName, {\n detail: eventArgs\n }));\n }\n getTransformX(elem) {\n let posX = 0;\n if (elem.style.transform) {\n const matrix = elem.style.transform;\n const values = matrix ? matrix.match(/-?[\\d\\.]+/g) : undefined;\n posX = values ? Number(values[1]) : 0;\n }\n return posX;\n }\n getTransformY(elem) {\n let posY = 0;\n if (elem.style.transform) {\n const matrix = elem.style.transform;\n const values = matrix ? matrix.match(/-?[\\d\\.]+/g) : undefined;\n posY = values ? Number(values[2]) : 0;\n }\n return posY;\n }\n /** Method setting transformation to the base draggable element. */\n setTransformXY(x, y) {\n if (x === 0 && y === 0) {\n this.element.nativeElement.style.transform = '';\n return;\n }\n this.element.nativeElement.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0px)';\n }\n /**\n * Since we are using absolute position to move the ghost, the ghost host might not have position: relative.\n * Combined with position static, this means that the absolute position in the browser is relative to the offsetParent.\n * The offsetParent is pretty much the closes parent that has position: relative, or if no such until it reaches the body.\n * That's why if this is the case, we need to know how much we should compensate for the ghostHost being offset from\n * its offsetParent.\n *\n * OffsetParent can be null in the case of position: fixed applied to the ghost host or display: none. In that case\n * just get the clientRects of the ghost host.\n */\n getGhostHostBaseOffsetX() {\n if (!this.ghostHost) return 0;\n const ghostPosition = document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');\n if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === document.body) {\n return 0;\n } else if (ghostPosition === 'static' && this.ghostHost.offsetParent) {\n return this.ghostHost.offsetParent.getBoundingClientRect().left + this.windowScrollLeft;\n }\n return this.ghostHost.getBoundingClientRect().left + this.windowScrollLeft;\n }\n getGhostHostBaseOffsetY() {\n if (!this.ghostHost) return 0;\n const ghostPosition = document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');\n if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === document.body) {\n return 0;\n } else if (ghostPosition === 'static' && this.ghostHost.offsetParent) {\n return this.ghostHost.offsetParent.getBoundingClientRect().top + this.windowScrollTop;\n }\n return this.ghostHost.getBoundingClientRect().top + this.windowScrollTop;\n }\n getContainerScrollDirection() {\n const containerBounds = this.scrollContainer ? this.scrollContainer.getBoundingClientRect() : null;\n const scrolledX = !this.scrollContainer ? this.windowScrollLeft > 0 : this.scrollContainer.scrollLeft > 0;\n const scrolledY = !this.scrollContainer ? this.windowScrollTop > 0 : this.scrollContainer.scrollTop > 0;\n // Take into account window scroll top because we do not use fixed positioning to the window.\n const topBorder = (!this.scrollContainer ? 0 : containerBounds.top) + this.windowScrollTop + this._scrollContainerThreshold;\n // Subtract the element height because we position it from top left corner.\n const elementHeight = this.ghost && this.ghostElement ? this.ghostElement.offsetHeight : this.element.nativeElement.offsetHeight;\n const bottomBorder = (!this.scrollContainer ? window.innerHeight : containerBounds.bottom) + this.windowScrollTop - this._scrollContainerThreshold - elementHeight;\n // Same for window scroll left\n const leftBorder = (!this.scrollContainer ? 0 : containerBounds.left) + this.windowScrollLeft + this._scrollContainerThreshold;\n // Subtract the element width again because we position it from top left corner.\n const elementWidth = this.ghost && this.ghostElement ? this.ghostElement.offsetWidth : this.element.nativeElement.offsetWidth;\n const rightBorder = (!this.scrollContainer ? window.innerWidth : containerBounds.right) + this.windowScrollLeft - this._scrollContainerThreshold - elementWidth;\n if (this.pageY <= topBorder && scrolledY) {\n return DragScrollDirection$1.UP;\n } else if (this.pageY > bottomBorder) {\n return DragScrollDirection$1.DOWN;\n } else if (this.pageX < leftBorder && scrolledX) {\n return DragScrollDirection$1.LEFT;\n } else if (this.pageX > rightBorder) {\n return DragScrollDirection$1.RIGHT;\n }\n return null;\n }\n onScrollContainerStep(scrollDir) {\n animationFrameScheduler.schedule(() => {\n let xDir = scrollDir == DragScrollDirection$1.LEFT ? -1 : scrollDir == DragScrollDirection$1.RIGHT ? 1 : 0;\n let yDir = scrollDir == DragScrollDirection$1.UP ? -1 : scrollDir == DragScrollDirection$1.DOWN ? 1 : 0;\n if (!this.scrollContainer) {\n // Cap scrolling so we don't scroll past the window max scroll position.\n const maxScrollX = this._originalScrollContainerWidth - document.documentElement.clientWidth;\n const maxScrollY = this._originalScrollContainerHeight - document.documentElement.clientHeight;\n xDir = this.windowScrollLeft <= 0 && xDir < 0 || this.windowScrollLeft >= maxScrollX && xDir > 0 ? 0 : xDir;\n yDir = this.windowScrollTop <= 0 && yDir < 0 || this.windowScrollTop >= maxScrollY && yDir > 0 ? 0 : yDir;\n } else {\n // Cap scrolling so we don't scroll past the container max scroll position.\n const maxScrollX = this._originalScrollContainerWidth - this.scrollContainer.clientWidth;\n const maxScrollY = this._originalScrollContainerHeight - this.scrollContainer.clientHeight;\n xDir = this.scrollContainer.scrollLeft <= 0 && xDir < 0 || this.scrollContainer.scrollLeft >= maxScrollX && xDir > 0 ? 0 : xDir;\n yDir = this.scrollContainer.scrollTop <= 0 && yDir < 0 || this.scrollContainer.scrollTop >= maxScrollY && yDir > 0 ? 0 : yDir;\n }\n const scrollByX = xDir * this._scrollContainerStep;\n const scrollByY = yDir * this._scrollContainerStep;\n // Scroll the corresponding window or container.\n if (!this.scrollContainer) {\n window.scrollBy(scrollByX, scrollByY);\n } else {\n this.scrollContainer.scrollLeft += scrollByX;\n this.scrollContainer.scrollTop += scrollByY;\n }\n if (this.ghost && !this.scrollContainer) {\n // Scroll the ghost only when there is no container specifies.\n // If it has container the ghost pretty much stays in the same position while the container is scrolled since e use top/left position.\n // Otherwise increase the position the same amount we have scrolled the window\n this.ghostLeft += scrollByX;\n this.ghostTop += scrollByY;\n } else if (!this.ghost) {\n // Move the base element the same amount we moved the window/container because we use transformations.\n const translateX = this.getTransformX(this.element.nativeElement) + scrollByX;\n const translateY = this.getTransformY(this.element.nativeElement) + scrollByY;\n this.setTransformXY(translateX, translateY);\n if (!this.scrollContainer) {\n this._lastX += scrollByX;\n this._lastY += scrollByY;\n }\n }\n });\n }\n onScrollContainer() {\n const scrollDir = this.getContainerScrollDirection();\n if (scrollDir !== null && scrollDir !== undefined && !this._containerScrollIntervalId) {\n // Save original container sizes to ensure that we don't increase scroll sizes infinitely when out of bounds.\n this._originalScrollContainerWidth = this.scrollContainer ? this.scrollContainer.scrollWidth : this.windowScrollWidth;\n this._originalScrollContainerHeight = this.scrollContainer ? this.scrollContainer.scrollHeight : this.windowScrollHeight;\n this._containerScrollIntervalId = setInterval(() => this.onScrollContainerStep(scrollDir), this._scrollContainerStepMs);\n } else if ((scrollDir === null || scrollDir === undefined) && this._containerScrollIntervalId) {\n // We moved out of end bounds and there is interval started\n clearInterval(this._containerScrollIntervalId);\n this._containerScrollIntervalId = null;\n }\n }\n static {\n this.ɵfac = function IgxDragDirective_Factory(t) {\n return new (t || IgxDragDirective)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PlatformUtil));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: IgxDragDirective,\n selectors: [[\"\", \"igxDrag\", \"\"]],\n contentQueries: function IgxDragDirective_ContentQueries(rf, ctx, dirIndex) {\n if (rf & 1) {\n i0.ɵɵcontentQuery(dirIndex, IgxDragHandleDirective, 5);\n i0.ɵɵcontentQuery(dirIndex, IgxDragIgnoreDirective, 5);\n }\n if (rf & 2) {\n let _t;\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dragHandles = _t);\n i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dragIgnoredElems = _t);\n }\n },\n hostVars: 4,\n hostBindings: function IgxDragDirective_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵclassProp(\"igx-drag\", ctx.baseClass)(\"igx-drag--select-disabled\", ctx.selectDisabled);\n }\n },\n inputs: {\n data: [i0.ɵɵInputFlags.None, \"igxDrag\", \"data\"],\n dragTolerance: \"dragTolerance\",\n dragDirection: \"dragDirection\",\n dragChannel: \"dragChannel\",\n ghost: [i0.ɵɵInputFlags.HasDecoratorInputTransform, \"ghost\", \"ghost\", booleanAttribute],\n ghostClass: \"ghostClass\",\n ghostStyle: \"ghostStyle\",\n ghostTemplate: \"ghostTemplate\",\n ghostHost: \"ghostHost\",\n scrollContainer: \"scrollContainer\",\n ghostOffsetX: \"ghostOffsetX\",\n ghostOffsetY: \"ghostOffsetY\"\n },\n outputs: {\n dragStart: \"dragStart\",\n dragMove: \"dragMove\",\n dragEnd: \"dragEnd\",\n dragClick: \"dragClick\",\n ghostCreate: \"ghostCreate\",\n ghostDestroy: \"ghostDestroy\",\n transitioned: \"transitioned\"\n },\n exportAs: [\"drag\"],\n standalone: true,\n features: [i0.ɵɵInputTransformsFeature]\n });\n }\n }\n return IgxDragDirective;\n})();\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet IgxDropDirective = /*#__PURE__*/(() => {\n class IgxDropDirective {\n /**\n * - Save data inside the `igxDrop` directive. This can be set when instancing `igxDrop` on an element.\n * ```html\n * \n * ```\n *\n * @memberof IgxDropDirective\n */\n set data(v) {\n this._data = v;\n }\n get data() {\n return this._data;\n }\n /**\n * Sets a drop strategy type that will be executed when an `IgxDrag` element is released inside\n * the current drop area. The provided strategies are:\n * - IgxDefaultDropStrategy - This is the default base strategy and it doesn't perform any actions.\n * - IgxAppendDropStrategy - Appends the dropped element to last position as a direct child to the `igxDrop`.\n * - IgxPrependDropStrategy - Prepends the dropped element to first position as a direct child to the `igxDrop`.\n * - IgxInsertDropStrategy - If the dropped element is released above a child element of the `igxDrop`, it will be inserted\n * at that position. Otherwise the dropped element will be appended if released outside any child of the `igxDrop`.\n * ```html\n * \n * DragMe\n *
\n * \n * Numbers drop area!\n *
\n * ```\n * ```typescript\n * import { IgxAppendDropStrategy } from 'igniteui-angular';\n *\n * export class App {\n * public myDropStrategy = IgxAppendDropStrategy;\n * }\n * ```\n *\n * @memberof IgxDropDirective\n */\n set dropStrategy(classRef) {\n this._dropStrategy = new classRef(this._renderer);\n }\n get dropStrategy() {\n return this._dropStrategy;\n }\n constructor(element, _renderer, _zone) {\n this.element = element;\n this._renderer = _renderer;\n this._zone = _zone;\n /**\n * Event triggered when dragged element enters the area of the element.\n * ```html\n * \n *
\n * ```\n * ```typescript\n * public dragEnter(){\n * alert(\"A draggable element has entered the chip area!\");\n * }\n * ```\n *\n * @memberof IgxDropDirective\n */\n this.enter = new EventEmitter();\n /**\n * Event triggered when dragged element enters the area of the element.\n * ```html\n * \n *
\n * ```\n * ```typescript\n * public dragEnter(){\n * alert(\"A draggable element has entered the chip area!\");\n * }\n * ```\n *\n * @memberof IgxDropDirective\n */\n this.over = new EventEmitter();\n /**\n * Event triggered when dragged element leaves the area of the element.\n * ```html\n * \n *
\n * ```\n * ```typescript\n * public dragLeave(){\n * alert(\"A draggable element has left the chip area!\");\n * }\n * ```\n *\n * @memberof IgxDropDirective\n */\n this.leave = new EventEmitter();\n /**\n * Event triggered when dragged element is dropped in the area of the element.\n * Since the `igxDrop` has default logic that appends the dropped element as a child, it can be canceled here.\n * To cancel the default logic the `cancel` property of the event needs to be set to true.\n * ```html\n * \n *
\n * ```\n * ```typescript\n * public dragDrop(){\n * alert(\"A draggable element has been dropped in the chip area!\");\n * }\n * ```\n *\n * @memberof IgxDropDirective\n */\n this.dropped = new EventEmitter();\n /**\n * @hidden\n */\n this.droppable = true;\n /**\n * @hidden\n */\n this.dragover = false;\n /**\n * @hidden\n */\n this._destroy = new Subject();\n this._dropStrategy = new IgxDefaultDropStrategy();\n }\n /**\n * @hidden\n */\n onDragDrop(event) {\n if (!this.isDragLinked(event.detail.owner)) {\n return;\n }\n const elementPosX = this.element.nativeElement.getBoundingClientRect().left + this.getWindowScrollLeft();\n const elementPosY = this.element.nativeElement.getBoundingClientRect().top + this.getWindowScrollTop();\n const offsetX = event.detail.pageX - elementPosX;\n const offsetY = event.detail.pageY - elementPosY;\n const args = {\n owner: this,\n originalEvent: event.detail.originalEvent,\n drag: event.detail.owner,\n dragData: event.detail.owner.data,\n startX: event.detail.startX,\n startY: event.detail.startY,\n pageX: event.detail.pageX,\n pageY: event.detail.pageY,\n offsetX,\n offsetY,\n cancel: false\n };\n this._zone.run(() => {\n this.dropped.emit(args);\n });\n if (this._dropStrategy && !args.cancel) {\n const elementsAtPoint = event.detail.owner.getElementsAtPoint(event.detail.pageX, event.detail.pageY);\n const insertIndex = this.getInsertIndexAt(event.detail.owner, elementsAtPoint);\n this._dropStrategy.dropAction(event.detail.owner, this, insertIndex);\n }\n }\n /**\n * @hidden\n */\n ngOnInit() {\n this._zone.runOutsideAngular(() => {\n fromEvent(this.element.nativeElement, 'igxDragEnter').pipe(takeUntil(this._destroy)).subscribe(res => this.onDragEnter(res));\n fromEvent(this.element.nativeElement, 'igxDragLeave').pipe(takeUntil(this._destroy)).subscribe(res => this.onDragLeave(res));\n fromEvent(this.element.nativeElement, 'igxDragOver').pipe(takeUntil(this._destroy)).subscribe(res => this.onDragOver(res));\n });\n }\n /**\n * @hidden\n */\n ngOnDestroy() {\n this._destroy.next(true);\n this._destroy.complete();\n }\n /**\n * @hidden\n */\n onDragOver(event) {\n const elementPosX = this.element.nativeElement.getBoundingClientRect().left + this.getWindowScrollLeft();\n const elementPosY = this.element.nativeElement.getBoundingClientRect().top + this.getWindowScrollTop();\n const offsetX = event.detail.pageX - elementPosX;\n const offsetY = event.detail.pageY - elementPosY;\n const eventArgs = {\n originalEvent: event.detail.originalEvent,\n owner: this,\n drag: event.detail.owner,\n dragData: event.detail.owner.data,\n startX: event.detail.startX,\n startY: event.detail.startY,\n pageX: event.detail.pageX,\n pageY: event.detail.pageY,\n offsetX,\n offsetY\n };\n this.over.emit(eventArgs);\n }\n /**\n * @hidden\n */\n onDragEnter(event) {\n if (!this.isDragLinked(event.detail.owner)) {\n return;\n }\n this.dragover = true;\n const elementPosX = this.element.nativeElement.getBoundingClientRect().left + this.getWindowScrollLeft();\n const elementPosY = this.element.nativeElement.getBoundingClientRect().top + this.getWindowScrollTop();\n const offsetX = event.detail.pageX - elementPosX;\n const offsetY = event.detail.pageY - elementPosY;\n const eventArgs = {\n originalEvent: event.detail.originalEvent,\n owner: this,\n drag: event.detail.owner,\n dragData: event.detail.owner.data,\n startX: event.detail.startX,\n startY: event.detail.startY,\n pageX: event.detail.pageX,\n pageY: event.detail.pageY,\n offsetX,\n offsetY\n };\n this._zone.run(() => {\n this.enter.emit(eventArgs);\n });\n }\n /**\n * @hidden\n */\n onDragLeave(event) {\n if (!this.isDragLinked(event.detail.owner)) {\n return;\n }\n this.dragover = false;\n const elementPosX = this.element.nativeElement.getBoundingClientRect().left + this.getWindowScrollLeft();\n const elementPosY = this.element.nativeElement.getBoundingClientRect().top + this.getWindowScrollTop();\n const offsetX = event.detail.pageX - elementPosX;\n const offsetY = event.detail.pageY - elementPosY;\n const eventArgs = {\n originalEvent: event.detail.originalEvent,\n owner: this,\n drag: event.detail.owner,\n dragData: event.detail.owner.data,\n startX: event.detail.startX,\n startY: event.detail.startY,\n pageX: event.detail.pageX,\n pageY: event.detail.pageY,\n offsetX,\n offsetY\n };\n this._zone.run(() => {\n this.leave.emit(eventArgs);\n });\n }\n getWindowScrollTop() {\n return window.scrollY ? window.scrollY : window.pageYOffset ? window.pageYOffset : 0;\n }\n getWindowScrollLeft() {\n return window.scrollX ? window.scrollX : window.pageXOffset ? window.pageXOffset : 0;\n }\n isDragLinked(drag) {\n const dragLinkArray = drag.dragChannel instanceof Array;\n const dropLinkArray = this.dropChannel instanceof Array;\n if (!dragLinkArray && !dropLinkArray) {\n return this.dropChannel === drag.dragChannel;\n } else if (!dragLinkArray && dropLinkArray) {\n const dropLinks = this.dropChannel;\n for (const link of dropLinks) {\n if (link === drag.dragChannel) {\n return true;\n }\n }\n } else if (dragLinkArray && !dropLinkArray) {\n const dragLinks = drag.dragChannel;\n for (const link of dragLinks) {\n if (link === this.dropChannel) {\n return true;\n }\n }\n } else {\n const dragLinks = drag.dragChannel;\n const dropLinks = this.dropChannel;\n for (const draglink of dragLinks) {\n for (const droplink of dropLinks) {\n if (draglink === droplink) {\n return true;\n }\n }\n }\n }\n return false;\n }\n getInsertIndexAt(draggedDir, elementsAtPoint) {\n let insertIndex = -1;\n const dropChildren = Array.prototype.slice.call(this.element.nativeElement.children);\n if (!dropChildren.length) {\n return insertIndex;\n }\n let i = 0;\n let childUnder = null;\n while (!childUnder && i < elementsAtPoint.length) {\n if (elementsAtPoint[i].parentElement === this.element.nativeElement) {\n childUnder = elementsAtPoint[i];\n }\n i++;\n }\n const draggedElemIndex = dropChildren.indexOf(draggedDir.element.nativeElement);\n insertIndex = dropChildren.indexOf(childUnder);\n if (draggedElemIndex !== -1 && draggedElemIndex < insertIndex) {\n insertIndex++;\n }\n return insertIndex;\n }\n static {\n this.ɵfac = function IgxDropDirective_Factory(t) {\n return new (t || IgxDropDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.NgZone));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: IgxDropDirective,\n selectors: [[\"\", \"igxDrop\", \"\"]],\n hostVars: 3,\n hostBindings: function IgxDropDirective_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵlistener(\"igxDrop\", function IgxDropDirective_igxDrop_HostBindingHandler($event) {\n return ctx.onDragDrop($event);\n });\n }\n if (rf & 2) {\n i0.ɵɵattribute(\"droppable\", ctx.droppable);\n i0.ɵɵclassProp(\"dragOver\", ctx.dragover);\n }\n },\n inputs: {\n data: [i0.ɵɵInputFlags.None, \"igxDrop\", \"data\"],\n dropChannel: \"dropChannel\",\n dropStrategy: \"dropStrategy\"\n },\n outputs: {\n enter: \"enter\",\n over: \"over\",\n leave: \"leave\",\n dropped: \"dropped\"\n },\n exportAs: [\"drop\"],\n standalone: true\n });\n }\n }\n return IgxDropDirective;\n})();\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/* NOTE: Drag and drop directives collection for ease-of-use import in standalone components scenario */\nconst IGX_DRAG_DROP_DIRECTIVES = [IgxDragDirective, IgxDropDirective, IgxDragHandleDirective, IgxDragIgnoreDirective];\nclass IgxFilterOptions {\n constructor() {\n // Input text value that will be used as a filtering pattern (matching condition is based on it)\n this.inputValue = '';\n }\n // Function - get value to be tested from the item\n // item - single item of the list to be filtered\n // key - property name of item, which value should be tested\n // Default behavior - returns \"key\"- named property value of item if key is provided,\n // otherwise textContent of the item's html element\n get_value(item, key) {\n let result = '';\n if (key && item[key]) {\n result = item[key].toString();\n } else if (item.element) {\n if (item.element.nativeElement) {\n result = item.element.nativeElement.textContent.trim();\n // Check if element doesn't return the DOM element directly\n } else if (item.element.textContent) {\n result = item.element.textContent.trim();\n }\n }\n return result;\n }\n // Function - formats the original text before matching process\n // Default behavior - returns text to lower case\n formatter(valueToTest) {\n return valueToTest.toLowerCase();\n }\n // Function - determines whether the item met the condition\n // valueToTest - text value that should be tested\n // inputValue - text value from input that condition is based on\n // Default behavior - \"contains\"\n matchFn(valueToTest, inputValue) {\n return valueToTest.indexOf(inputValue && inputValue.toLowerCase() || '') > -1;\n }\n // Function - executed after matching test for every matched item\n // Default behavior - shows the item\n metConditionFn(item) {\n if (item.hasOwnProperty('hidden')) {\n item.hidden = false;\n }\n }\n // Function - executed for every NOT matched item after matching test\n // Default behavior - hides the item\n overdueConditionFn(item) {\n if (item.hasOwnProperty('hidden')) {\n item.hidden = true;\n }\n }\n}\nlet IgxFilterDirective = /*#__PURE__*/(() => {\n class IgxFilterDirective {\n constructor() {\n this.filtering = new EventEmitter(false); // synchronous event emitter\n this.filtered = new EventEmitter();\n }\n ngOnChanges(changes) {\n // Detect only changes of input value\n if (changes.filterOptions && changes.filterOptions.currentValue && changes.filterOptions.currentValue.inputValue !== undefined && changes.filterOptions.previousValue && changes.filterOptions.currentValue.inputValue !== changes.filterOptions.previousValue.inputValue) {\n this.filter();\n }\n }\n filter() {\n if (!this.filterOptions.items) {\n return;\n }\n const args = {\n cancel: false,\n items: this.filterOptions.items\n };\n this.filtering.emit(args);\n if (args.cancel) {\n return;\n }\n const pipe = new IgxFilterPipe();\n const filtered = pipe.transform(this.filterOptions.items, this.filterOptions);\n this.filtered.emit({\n filteredItems: filtered\n });\n }\n static {\n this.ɵfac = function IgxFilterDirective_Factory(t) {\n return new (t || IgxFilterDirective)();\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: IgxFilterDirective,\n selectors: [[\"\", \"igxFilter\", \"\"]],\n inputs: {\n filterOptions: [i0.ɵɵInputFlags.None, \"igxFilter\", \"filterOptions\"]\n },\n outputs: {\n filtering: \"filtering\",\n filtered: \"filtered\"\n },\n standalone: true,\n features: [i0.ɵɵNgOnChangesFeature]\n });\n }\n }\n return IgxFilterDirective;\n})();\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet IgxFilterPipe = /*#__PURE__*/(() => {\n class IgxFilterPipe {\n findMatchByKey(item, options, key) {\n const match = options.matchFn(options.formatter(options.get_value(item, key)), options.inputValue);\n if (match) {\n if (options.metConditionFn) {\n options.metConditionFn(item);\n }\n } else {\n if (options.overdueConditionFn) {\n options.overdueConditionFn(item);\n }\n }\n return match;\n }\n transform(items,\n // options - initial settings of filter functionality\n options) {\n let result = [];\n if (!items || !items.length || !options) {\n return;\n }\n if (options.items) {\n items = options.items;\n }\n result = items.filter(item => {\n if (!Array.isArray(options.key)) {\n return this.findMatchByKey(item, options, options.key);\n } else {\n let isMatch = false;\n options.key.forEach(key => {\n if (this.findMatchByKey(item, options, key)) {\n isMatch = true;\n }\n });\n return isMatch;\n }\n });\n return result;\n }\n static {\n this.ɵfac = function IgxFilterPipe_Factory(t) {\n return new (t || IgxFilterPipe)();\n };\n }\n static {\n this.ɵpipe = /* @__PURE__ */i0.ɵɵdefinePipe({\n name: \"igxFilter\",\n type: IgxFilterPipe,\n pure: false,\n standalone: true\n });\n }\n }\n return IgxFilterPipe;\n})();\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\n\n/**\n * Injection token is used to inject the EditorProvider token into components\n *\n * @hidden @internal\n */\nconst EDITOR_PROVIDER = new InjectionToken('EditorProvider');\nlet IgxFocusDirective = /*#__PURE__*/(() => {\n class IgxFocusDirective {\n /**\n * Returns the state of the igxFocus.\n * ```typescript\n * @ViewChild('focusContainer', {read: IgxFocusDirective})\n * public igxFocus: IgxFocusDirective;\n * let isFocusOn = this.igxFocus.focused;\n * ```\n *\n * @memberof IgxFocusDirective\n */\n get focused() {\n return this.focusState;\n }\n /**\n * Sets the state of the igxFocus.\n * ```html\n * 1
\n * 2
\n * 3
\n * \n * ```\n */\n this.dir = 'row';\n /**\n * Defines the direction flex children are placed in the flex container.\n *\n * When set to `true`, the `rows` direction goes right to left and `columns` goes bottom to top.\n *\n * ```html\n * 1
\n * 2
\n * 3
\n * \n * ```\n */\n this.reverse = false;\n /**\n * By default the immediate children will all try to fit onto one line.\n *\n * The default value `nowrap` sets this behavior.\n *\n * Other accepted values are `wrap` and `wrap-reverse`.\n *\n * ```html\n * 1
\n * 2
\n * 3
\n * \n * ```\n */\n this.wrap = 'nowrap';\n /**\n * Defines the alignment along the main axis.\n *\n * Defaults to `flex-start` which packs the children toward the start line.\n *\n * Other possible values are `flex-end`, `center`, `space-between`, `space-around`.\n *\n * ```html\n * 1
\n * 2
\n * 3
\n * \n * ```\n */\n this.justify = 'flex-start';\n /**\n * Defines the default behavior for how children are laid out along the corss axis of the current line.\n *\n * Defaults to `flex-start`.\n *\n * Other possible values are `flex-end`, `center`, `baseline`, and `stretch`.\n *\n * ```html\n * 1
\n * 2
\n * 3
\n * \n * ```\n */\n this.itemAlign = 'stretch';\n /**\n * @hidden\n */\n this.display = 'flex';\n }\n /**\n * @hidden\n */\n get flexwrap() {\n return this.wrap;\n }\n /**\n * @hidden\n */\n get justifycontent() {\n return this.justify;\n }\n /**\n * @hidden\n */\n get align() {\n return this.itemAlign;\n }\n /**\n * @hidden\n */\n get direction() {\n if (this.reverse) {\n return this.dir === 'row' ? 'row-reverse' : 'column-reverse';\n }\n return this.dir === 'row' ? 'row' : 'column';\n }\n static {\n this.ɵfac = function IgxLayoutDirective_Factory(t) {\n return new (t || IgxLayoutDirective)();\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: IgxLayoutDirective,\n selectors: [[\"\", \"igxLayout\", \"\"]],\n hostVars: 10,\n hostBindings: function IgxLayoutDirective_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵstyleProp(\"display\", ctx.display)(\"flex-wrap\", ctx.flexwrap)(\"justify-content\", ctx.justifycontent)(\"align-items\", ctx.align)(\"flex-direction\", ctx.direction);\n }\n },\n inputs: {\n dir: [i0.ɵɵInputFlags.None, \"igxLayoutDir\", \"dir\"],\n reverse: [i0.ɵɵInputFlags.HasDecoratorInputTransform, \"igxLayoutReverse\", \"reverse\", booleanAttribute],\n wrap: [i0.ɵɵInputFlags.None, \"igxLayoutWrap\", \"wrap\"],\n justify: [i0.ɵɵInputFlags.None, \"igxLayoutJustify\", \"justify\"],\n itemAlign: [i0.ɵɵInputFlags.None, \"igxLayoutItemAlign\", \"itemAlign\"]\n },\n standalone: true,\n features: [i0.ɵɵInputTransformsFeature]\n });\n }\n }\n return IgxLayoutDirective;\n})();\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet IgxFlexDirective = /*#__PURE__*/(() => {\n class IgxFlexDirective {\n constructor() {\n /**\n * Applies the `grow` attribute to an element that uses the directive.\n *\n * Default value is `1`.\n *\n * ```html\n * \n *
\n * ```\n */\n this.grow = 1;\n /**\n * Applies the `shrink` attribute to an element that uses the directive.\n *\n * Default value is `1`.\n *\n * ```html\n * Content1
\n * Content2
\n * Content3
\n * \n *
\n * ```\n */\n this.shrink = 1;\n /**\n * Applies the directive to an element.\n *\n * Possible values include `igxFlexGrow`, `igxFlexShrink`, `igxFlexOrder`, `igxFlexBasis`.\n *\n * ```html\n * Content1
\n * Content2
\n * Content3
\n * Content
\n * ```\n */\n this.flex = '';\n /**\n * Applies the `order` attribute to an element that uses the directive.\n *\n * Default value is `0`.\n *\n * ```html\n * \n *
\n * ```\n */\n this.order = 0;\n /**\n * Applies the `flex-basis` attribute to an element that uses the directive.\n *\n * Default value is `auto`.\n *\n * Other possible values include `content`, `max-content`, `min-content`, `fit-content`.\n *\n * ```html\n * Content1
\n * Content2
\n * Content3
\n * Content
\n * ```\n */\n this.basis = 'auto';\n }\n /**\n * @hidden\n */\n get style() {\n if (this.flex) {\n return `${this.flex}`;\n }\n return `${this.grow} ${this.shrink} ${this.basis}`;\n }\n /**\n * @hidden\n */\n get itemorder() {\n return this.order || 0;\n }\n static {\n this.ɵfac = function IgxFlexDirective_Factory(t) {\n return new (t || IgxFlexDirective)();\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: IgxFlexDirective,\n selectors: [[\"\", \"igxFlex\", \"\"]],\n hostVars: 4,\n hostBindings: function IgxFlexDirective_HostBindings(rf, ctx) {\n if (rf & 2) {\n i0.ɵɵstyleProp(\"flex\", ctx.style)(\"order\", ctx.itemorder);\n }\n },\n inputs: {\n grow: [i0.ɵɵInputFlags.None, \"igxFlexGrow\", \"grow\"],\n shrink: [i0.ɵɵInputFlags.None, \"igxFlexShrink\", \"shrink\"],\n flex: [i0.ɵɵInputFlags.None, \"igxFlex\", \"flex\"],\n order: [i0.ɵɵInputFlags.None, \"igxFlexOrder\", \"order\"],\n basis: [i0.ɵɵInputFlags.None, \"igxFlexBasis\", \"basis\"]\n },\n standalone: true\n });\n }\n }\n return IgxFlexDirective;\n})();\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nconst FLAGS = new Set('aACL09#&?');\nconst REGEX = new Map([['C', /(?!^$)/u], ['&', /[^\\p{Separator}]/u], ['a', /[\\p{Letter}\\d\\p{Separator}]/u], ['A', /[\\p{Letter}\\d]/u], ['?', /[\\p{Letter}\\p{Separator}]/u], ['L', /\\p{Letter}/u], ['0', /\\d/], ['9', /[\\d\\p{Separator}]/u], ['#', /[\\d\\-+]/] // Numeric and sign\n]);\nconst replaceCharAt = (string, idx, char) => `${string.substring(0, idx)}${char}${string.substring(idx + 1)}`;\nfunction parseMask(format) {\n const literals = new Map();\n let mask = format;\n for (let i = 0, j = 0; i < format.length; i++, j++) {\n const [current, next] = [format.charAt(i), format.charAt(i + 1)];\n if (current === '\\\\' && FLAGS.has(next)) {\n mask = replaceCharAt(mask, j, '');\n literals.set(j, next);\n i++;\n } else {\n if (!FLAGS.has(current)) {\n literals.set(j, current);\n }\n }\n }\n return {\n literals,\n mask\n };\n}\n/** @hidden */\nlet MaskParsingService = /*#__PURE__*/(() => {\n class MaskParsingService {\n applyMask(inputVal, maskOptions, pos = 0) {\n let outputVal = '';\n let value = '';\n const {\n literals,\n mask\n } = parseMask(maskOptions.format);\n const literalKeys = Array.from(literals.keys());\n const nonLiteralIndices = this.getNonLiteralIndices(mask, literalKeys);\n const literalValues = Array.from(literals.values());\n if (inputVal != null) {\n value = inputVal.toString();\n }\n for (const _maskSym of mask) {\n outputVal += maskOptions.promptChar;\n }\n literals.forEach((val, key) => {\n outputVal = replaceCharAt(outputVal, key, val);\n });\n if (!value) {\n return outputVal;\n }\n const nonLiteralValues = this.getNonLiteralValues(value, literalValues);\n for (let i = 0; i < nonLiteralValues.length; i++) {\n const char = nonLiteralValues[i];\n const isCharValid = this.validateCharOnPosition(char, nonLiteralIndices[i], mask);\n if (!isCharValid && char !== maskOptions.promptChar) {\n nonLiteralValues[i] = maskOptions.promptChar;\n }\n }\n if (nonLiteralValues.length > nonLiteralIndices.length) {\n nonLiteralValues.splice(nonLiteralIndices.length);\n }\n for (const nonLiteralValue of nonLiteralValues) {\n const char = nonLiteralValue;\n outputVal = replaceCharAt(outputVal, nonLiteralIndices[pos++], char);\n }\n return outputVal;\n }\n parseValueFromMask(maskedValue, maskOptions) {\n let outputVal = '';\n const literalValues = Array.from(parseMask(maskOptions.format).literals.values());\n for (const val of maskedValue) {\n if (literalValues.indexOf(val) === -1) {\n if (val !== maskOptions.promptChar) {\n outputVal += val;\n }\n }\n }\n return outputVal;\n }\n replaceInMask(maskedValue, value, maskOptions, start, end) {\n const {\n literals,\n mask\n } = parseMask(maskOptions.format);\n const literalsPositions = Array.from(literals.keys());\n value = this.replaceIMENumbers(value);\n const chars = Array.from(value);\n let cursor = start;\n end = Math.min(end, maskedValue.length);\n for (let i = start; i < end || chars.length && i < maskedValue.length; i++) {\n if (literalsPositions.indexOf(i) !== -1) {\n if (chars[0] === maskedValue[i] || value.length < 1) {\n cursor = i + 1;\n chars.shift();\n }\n continue;\n }\n if (chars[0] && !this.validateCharOnPosition(chars[0], i, mask) && chars[0] !== maskOptions.promptChar) {\n break;\n }\n let char = maskOptions.promptChar;\n if (chars.length) {\n cursor = i + 1;\n char = chars.shift();\n }\n if (value.length < 1) {\n // on `delete` the cursor should move forward\n cursor++;\n }\n maskedValue = replaceCharAt(maskedValue, i, char);\n }\n return {\n value: maskedValue,\n end: cursor\n };\n }\n /** Validates only non literal positions. */\n validateCharOnPosition(inputChar, position, mask) {\n const regex = REGEX.get(mask.charAt(position));\n return regex ? regex.test(inputChar) : false;\n }\n getNonLiteralIndices(mask, literalKeys) {\n const nonLiteralsIndices = [];\n for (let i = 0; i < mask.length; i++) {\n if (literalKeys.indexOf(i) === -1) {\n nonLiteralsIndices.push(i);\n }\n }\n return nonLiteralsIndices;\n }\n getNonLiteralValues(value, literalValues) {\n const nonLiteralValues = [];\n for (const val of value) {\n if (literalValues.indexOf(val) === -1) {\n nonLiteralValues.push(val);\n }\n }\n return nonLiteralValues;\n }\n replaceIMENumbers(value) {\n return value.replace(/[０１２３４５６７８９]/g, num => ({\n '１': '1',\n '２': '2',\n '３': '3',\n '４': '4',\n '５': '5',\n '６': '6',\n '７': '7',\n '８': '8',\n '９': '9',\n '０': '0'\n })[num]);\n }\n static {\n this.ɵfac = function MaskParsingService_Factory(t) {\n return new (t || MaskParsingService)();\n };\n }\n static {\n this.ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: MaskParsingService,\n factory: MaskParsingService.ɵfac,\n providedIn: 'root'\n });\n }\n }\n return MaskParsingService;\n})();\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet IgxMaskDirective = /*#__PURE__*/(() => {\n class IgxMaskDirective {\n /**\n * Sets the input mask.\n * ```html\n * \n * ```\n */\n get mask() {\n return this._mask || this.defaultMask;\n }\n set mask(val) {\n // B.P. 9th June 2021 #7490\n if (val !== this._mask) {\n const cleanInputValue = this.maskParser.parseValueFromMask(this.inputValue, this.maskOptions);\n this.setPlaceholder(val);\n this._mask = val;\n this.updateInputValue(cleanInputValue);\n }\n }\n /** @hidden */\n get nativeElement() {\n return this.elementRef.nativeElement;\n }\n /** @hidden @internal; */\n get inputValue() {\n return this.nativeElement.value;\n }\n /** @hidden @internal */\n set inputValue(val) {\n this.nativeElement.value = val;\n }\n /** @hidden */\n get maskOptions() {\n const format = this.mask || this.defaultMask;\n const promptChar = this.promptChar && this.promptChar.substring(0, 1);\n return {\n format,\n promptChar\n };\n }\n /** @hidden */\n get selectionStart() {\n // Edge(classic) and FF don't select text on drop\n return this.nativeElement.selectionStart === this.nativeElement.selectionEnd && this._hasDropAction ? this.nativeElement.selectionEnd - this._droppedData.length : this.nativeElement.selectionStart;\n }\n /** @hidden */\n get selectionEnd() {\n return this.nativeElement.selectionEnd;\n }\n /** @hidden */\n get start() {\n return this._start;\n }\n /** @hidden */\n get end() {\n return this._end;\n }\n constructor(elementRef, maskParser, renderer, platform) {\n this.elementRef = elementRef;\n this.maskParser = maskParser;\n this.renderer = renderer;\n this.platform = platform;\n /**\n * Sets the character representing a fillable spot in the input mask.\n * Default value is \"'_'\".\n * ```html\n * \n * ```\n */\n this.promptChar = '_';\n /**\n * Emits an event each time the value changes.\n * Provides `rawValue: string` and `formattedValue: string` as event arguments.\n * ```html\n * \n * ```\n */\n this.valueChanged = new EventEmitter();\n this._focused = false;\n this._end = 0;\n this._start = 0;\n this._oldText = '';\n this._dataValue = '';\n this.defaultMask = 'CCCCCCCCCC';\n this._onTouchedCallback = noop;\n this._onChangeCallback = noop;\n }\n /** @hidden */\n onKeyDown(event) {\n const key = event.key;\n if (!key) {\n return;\n }\n if (event.ctrlKey && (key === this.platform.KEYMAP.Z || key === this.platform.KEYMAP.Y)) {\n event.preventDefault();\n }\n this._key = key;\n this._start = this.selectionStart;\n this._end = this.selectionEnd;\n }\n /** @hidden @internal */\n onCompositionStart() {\n if (!this._composing) {\n this._compositionStartIndex = this._start;\n this._composing = true;\n }\n }\n /** @hidden @internal */\n onCompositionEnd() {\n this._start = this._compositionStartIndex;\n const end = this.selectionEnd;\n const valueToParse = this.inputValue.substring(this._start, end);\n this.updateInput(valueToParse);\n this._end = this.selectionEnd;\n this._compositionValue = this.inputValue;\n }\n /** @hidden @internal */\n onInputChanged(event) {\n /**\n * '!this._focused' is a fix for #8165\n * On page load IE triggers input events before focus events and\n * it does so for every single input on the page.\n * The mask needs to be prevented from doing anything while this is happening because\n * the end user will be unable to blur the input.\n * https://stackoverflow.com/questions/21406138/input-event-triggered-on-internet-explorer-when-placeholder-changed\n */\n if (this._composing) {\n if (this.inputValue.length < this._oldText.length) {\n // software keyboard input delete\n this._key = this.platform.KEYMAP.BACKSPACE;\n }\n return;\n }\n // After the compositionend event Chromium triggers input events of type 'deleteContentBackward' and\n // we need to adjust the start and end indexes to include mask literals\n if (event.inputType === 'deleteContentBackward' && this._key !== this.platform.KEYMAP.BACKSPACE) {\n const isInputComplete = this._compositionStartIndex === 0 && this._end === this.mask.length;\n let numberOfMaskLiterals = 0;\n const literalPos = parseMask(this.maskOptions.format).literals.keys();\n for (const index of literalPos) {\n if (index >= this._compositionStartIndex && index <= this._end) {\n numberOfMaskLiterals++;\n }\n }\n this.inputValue = isInputComplete ? this.inputValue.substring(0, this.selectionEnd - numberOfMaskLiterals) + this.inputValue.substring(this.selectionEnd) : this._compositionValue?.substring(0, this._compositionStartIndex) || this.inputValue;\n if (this._compositionValue) {\n this._start = this.selectionStart;\n this._end = this.selectionEnd;\n this.nativeElement.selectionStart = isInputComplete ? this._start - numberOfMaskLiterals : this._compositionStartIndex;\n this.nativeElement.selectionEnd = this._end - numberOfMaskLiterals;\n this.nativeElement.selectionEnd = this._end;\n this._start = this.selectionStart;\n this._end = this.selectionEnd;\n }\n }\n if (this._hasDropAction) {\n this._start = this.selectionStart;\n }\n let valueToParse = '';\n switch (this._key) {\n case this.platform.KEYMAP.DELETE:\n this._end = this._start === this._end ? ++this._end : this._end;\n break;\n case this.platform.KEYMAP.BACKSPACE:\n this._start = this.selectionStart;\n break;\n default:\n valueToParse = this.inputValue.substring(this._start, this.selectionEnd);\n break;\n }\n this.updateInput(valueToParse);\n }\n /** @hidden */\n onPaste() {\n this._oldText = this.inputValue;\n this._start = this.selectionStart;\n }\n /** @hidden */\n onFocus() {\n if (this.nativeElement.readOnly) {\n return;\n }\n this._focused = true;\n this.showMask(this.inputValue);\n }\n /** @hidden */\n onBlur(value) {\n this._focused = false;\n this.showDisplayValue(value);\n this._onTouchedCallback();\n }\n /** @hidden */\n onDragEnter() {\n if (!this._focused && !this._dataValue) {\n this.showMask(this._dataValue);\n }\n }\n /** @hidden */\n onDragLeave() {\n if (!this._focused) {\n this.showDisplayValue(this.inputValue);\n }\n }\n /** @hidden */\n onDrop(event) {\n this._hasDropAction = true;\n this._droppedData = event.dataTransfer.getData('text');\n }\n /** @hidden */\n ngOnInit() {\n this.setPlaceholder(this.maskOptions.format);\n }\n /**\n * TODO: Remove after date/time picker integration refactor\n *\n * @hidden\n */\n ngAfterViewChecked() {\n if (this._composing) {\n return;\n }\n this._oldText = this.inputValue;\n }\n /** @hidden */\n writeValue(value) {\n if (this.promptChar && this.promptChar.length > 1) {\n this.maskOptions.promptChar = this.promptChar.substring(0, 1);\n }\n this.inputValue = value ? this.maskParser.applyMask(value, this.maskOptions) : '';\n if (this.displayValuePipe) {\n this.inputValue = this.displayValuePipe.transform(this.inputValue);\n }\n this._dataValue = this.includeLiterals ? this.inputValue : value;\n this.valueChanged.emit({\n rawValue: value,\n formattedValue: this.inputValue\n });\n }\n /** @hidden */\n registerOnChange(fn) {\n this._onChangeCallback = fn;\n }\n /** @hidden */\n registerOnTouched(fn) {\n this._onTouchedCallback = fn;\n }\n /** @hidden */\n showMask(value) {\n if (this.focusedValuePipe) {\n // TODO(D.P.): focusedValuePipe should be deprecated or force-checked to match mask format\n this.inputValue = this.focusedValuePipe.transform(value);\n } else {\n this.inputValue = this.maskParser.applyMask(value, this.maskOptions);\n }\n this._oldText = this.inputValue;\n }\n /** @hidden */\n setSelectionRange(start, end = start) {\n this.nativeElement.setSelectionRange(start, end);\n }\n /** @hidden */\n afterInput() {\n this._oldText = this.inputValue;\n this._hasDropAction = false;\n this._start = 0;\n this._end = 0;\n this._key = null;\n this._composing = false;\n }\n /** @hidden */\n setPlaceholder(value) {\n const placeholder = this.nativeElement.placeholder;\n if (!placeholder || placeholder === this.mask) {\n this.renderer.setAttribute(this.nativeElement, 'placeholder', parseMask(value ?? '').mask || this.defaultMask);\n }\n }\n updateInputValue(value) {\n if (this._focused) {\n this.showMask(value);\n } else if (!this.displayValuePipe) {\n this.inputValue = this.inputValue ? this.maskParser.applyMask(value, this.maskOptions) : '';\n }\n }\n updateInput(valueToParse) {\n const replacedData = this.maskParser.replaceInMask(this._oldText, valueToParse, this.maskOptions, this._start, this._end);\n this.inputValue = replacedData.value;\n if (this._key === this.platform.KEYMAP.BACKSPACE) {\n replacedData.end = this._start;\n }\n this.setSelectionRange(replacedData.end);\n const rawVal = this.maskParser.parseValueFromMask(this.inputValue, this.maskOptions);\n this._dataValue = this.includeLiterals ? this.inputValue : rawVal;\n this._onChangeCallback(this._dataValue);\n this.valueChanged.emit({\n rawValue: rawVal,\n formattedValue: this.inputValue\n });\n this.afterInput();\n }\n showDisplayValue(value) {\n if (this.displayValuePipe) {\n this.inputValue = this.displayValuePipe.transform(value);\n } else if (value === this.maskParser.applyMask(null, this.maskOptions)) {\n this.inputValue = '';\n }\n }\n static {\n this.ɵfac = function IgxMaskDirective_Factory(t) {\n return new (t || IgxMaskDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(MaskParsingService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(PlatformUtil));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: IgxMaskDirective,\n selectors: [[\"\", \"igxMask\", \"\"]],\n hostBindings: function IgxMaskDirective_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵlistener(\"keydown\", function IgxMaskDirective_keydown_HostBindingHandler($event) {\n return ctx.onKeyDown($event);\n })(\"compositionstart\", function IgxMaskDirective_compositionstart_HostBindingHandler() {\n return ctx.onCompositionStart();\n })(\"compositionend\", function IgxMaskDirective_compositionend_HostBindingHandler() {\n return ctx.onCompositionEnd();\n })(\"input\", function IgxMaskDirective_input_HostBindingHandler($event) {\n return ctx.onInputChanged($event);\n })(\"paste\", function IgxMaskDirective_paste_HostBindingHandler() {\n return ctx.onPaste();\n })(\"focus\", function IgxMaskDirective_focus_HostBindingHandler() {\n return ctx.onFocus();\n })(\"blur\", function IgxMaskDirective_blur_HostBindingHandler($event) {\n return ctx.onBlur($event.target.value);\n })(\"dragenter\", function IgxMaskDirective_dragenter_HostBindingHandler() {\n return ctx.onDragEnter();\n })(\"dragleave\", function IgxMaskDirective_dragleave_HostBindingHandler() {\n return ctx.onDragLeave();\n })(\"drop\", function IgxMaskDirective_drop_HostBindingHandler($event) {\n return ctx.onDrop($event);\n });\n }\n },\n inputs: {\n mask: [i0.ɵɵInputFlags.None, \"igxMask\", \"mask\"],\n promptChar: \"promptChar\",\n includeLiterals: [i0.ɵɵInputFlags.HasDecoratorInputTransform, \"includeLiterals\", \"includeLiterals\", booleanAttribute],\n displayValuePipe: \"displayValuePipe\",\n focusedValuePipe: \"focusedValuePipe\"\n },\n outputs: {\n valueChanged: \"valueChanged\"\n },\n exportAs: [\"igxMask\"],\n standalone: true,\n features: [i0.ɵɵProvidersFeature([{\n provide: NG_VALUE_ACCESSOR,\n useExisting: IgxMaskDirective,\n multi: true\n }]), i0.ɵɵInputTransformsFeature]\n });\n }\n }\n return IgxMaskDirective;\n})();\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nlet IgxRippleDirective = /*#__PURE__*/(() => {\n class IgxRippleDirective {\n /**\n * Enables/disables the ripple to be centered.\n * ```html\n * \n * ```\n *\n * @memberof IgxRippleDirective\n */\n set centered(value) {\n this._centered = value || this.centered;\n }\n get nativeElement() {\n return this.elementRef.nativeElement;\n }\n constructor(builder, elementRef, renderer, zone) {\n this.builder = builder;\n this.elementRef = elementRef;\n this.renderer = renderer;\n this.zone = zone;\n /**\n * Sets/gets the ripple target.\n * ```html\n * \n * ```\n * ```typescript\n * @ViewChild('rippleContainer', {read: IgxRippleDirective})\n * public ripple: IgxRippleDirective;\n * let rippleTarget = this.ripple.rippleTarget;\n * ```\n * Can set the ripple to activate on a child element inside the parent where igxRipple is defined.\n * ```html\n * \n * \n *
\n * ```\n *\n * @memberof IgxRippleDirective\n */\n this.rippleTarget = '';\n /**\n * Sets/gets the ripple duration(in milliseconds).\n * Default value is `600`.\n * ```html\n * \n * ```\n * ```typescript\n * @ViewChild('rippleContainer', {read: IgxRippleDirective})\n * public ripple: IgxRippleDirective;\n * let rippleDuration = this.ripple.rippleDuration;\n * ```\n *\n * @memberof IgxRippleDirective\n */\n this.rippleDuration = 600;\n /**\n * Sets/gets whether the ripple is disabled.\n * Default value is `false`.\n * ```html\n * \n * ```\n * ```typescript\n * @ViewChild('rippleContainer', {read: IgxRippleDirective})\n * public ripple: IgxRippleDirective;\n * let isRippleDisabled = this.ripple.rippleDisabled;\n * ```\n *\n * @memberof IgxRippleDirective\n */\n this.rippleDisabled = false;\n this.rippleElementClass = 'igx-ripple__inner';\n this.rippleHostClass = 'igx-ripple';\n this._centered = false;\n this.animationQueue = [];\n }\n /**\n * @hidden\n */\n onMouseDown(event) {\n this.zone.runOutsideAngular(() => this._ripple(event));\n }\n setStyles(rippleElement, styleParams) {\n this.renderer.addClass(rippleElement, this.rippleElementClass);\n this.renderer.setStyle(rippleElement, 'width', `${styleParams.radius}px`);\n this.renderer.setStyle(rippleElement, 'height', `${styleParams.radius}px`);\n this.renderer.setStyle(rippleElement, 'top', `${styleParams.top}px`);\n this.renderer.setStyle(rippleElement, 'left', `${styleParams.left}px`);\n if (this.rippleColor) {\n this.renderer.setStyle(rippleElement, 'background', this.rippleColor);\n }\n }\n _ripple(event) {\n if (this.rippleDisabled) {\n return;\n }\n const target = this.rippleTarget ? this.nativeElement.querySelector(this.rippleTarget) || this.nativeElement : this.nativeElement;\n const rectBounds = target.getBoundingClientRect();\n const radius = Math.max(rectBounds.width, rectBounds.height);\n let left = Math.round(event.clientX - rectBounds.left - radius / 2);\n let top = Math.round(event.clientY - rectBounds.top - radius / 2);\n if (this._centered) {\n left = top = 0;\n }\n const dimensions = {\n radius,\n top,\n left\n };\n const rippleElement = this.renderer.createElement('span');\n this.setStyles(rippleElement, dimensions);\n this.renderer.addClass(target, this.rippleHostClass);\n this.renderer.appendChild(target, rippleElement);\n const animation = this.builder.build([style({\n opacity: 0.5,\n transform: 'scale(.3)'\n }), animate(this.rippleDuration, style({\n opacity: 0,\n transform: 'scale(2)'\n }))]).create(rippleElement);\n this.animationQueue.push(animation);\n animation.onDone(() => {\n this.animationQueue.splice(this.animationQueue.indexOf(animation), 1);\n target.removeChild(rippleElement);\n if (this.animationQueue.length < 1) {\n this.renderer.removeClass(target, this.rippleHostClass);\n }\n });\n animation.play();\n }\n static {\n this.ɵfac = function IgxRippleDirective_Factory(t) {\n return new (t || IgxRippleDirective)(i0.ɵɵdirectiveInject(i1.AnimationBuilder), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.NgZone));\n };\n }\n static {\n this.ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: IgxRippleDirective,\n selectors: [[\"\", \"igxRipple\", \"\"]],\n hostBindings: function IgxRippleDirective_HostBindings(rf, ctx) {\n if (rf & 1) {\n i0.ɵɵlistener(\"mousedown\", function IgxRippleDirective_mousedown_HostBindingHandler($event) {\n return ctx.onMouseDown($event);\n });\n }\n },\n inputs: {\n rippleTarget: [i0.ɵɵInputFlags.None, \"igxRippleTarget\", \"rippleTarget\"],\n rippleColor: [i0.ɵɵInputFlags.None, \"igxRipple\", \"rippleColor\"],\n rippleDuration: [i0.ɵɵInputFlags.None, \"igxRippleDuration\", \"rippleDuration\"],\n centered: [i0.ɵɵInputFlags.HasDecoratorInputTransform, \"igxRippleCentered\", \"centered\", booleanAttribute],\n rippleDisabled: [i0.ɵɵInputFlags.HasDecoratorInputTransform, \"igxRippleDisabled\", \"rippleDisabled\", booleanAttribute]\n },\n standalone: true,\n features: [i0.ɵɵInputTransformsFeature]\n });\n }\n }\n return IgxRippleDirective;\n})();\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && void 0;\n})();\nconst LabelPosition = /*@__PURE__*/mkenum({\n BEFORE: 'before',\n AFTER: 'after'\n});\nlet nextId$1 = 0;\n/**\n * Allows users to make a binary choice for a certain condition.\n *\n * @igxModule IgxCheckboxModule\n *\n * @igxTheme igx-checkbox-theme\n *\n * @igxKeywords checkbox, label\n *\n * @igxGroup Data entry and display\n *\n * @remarks\n * The Ignite UI Checkbox is a selection control that allows users to make a binary choice for a certain condition.It behaves similarly\n * to the native browser checkbox.\n *\n * @example\n * ```html\n * \n * {{item.field}}\n *
\n * \n * {{item.field}}\n *
\n * {{title}}
\n *{{subtitle}}
\n *First Slide Header
\n *First slide Content
\n *Second Slide Header
\n *Second Slide Content
\n *Custom header
\n * \n *\t\t\tState: {{ display[key] }}\n *\t \t\tRegion: {{ display.region }}\n *\t \t
\n *\t \n * There are no items to display\n *
\n * Group header for {{ item[key] }}
\n * \n *
\n * {{ item[key] }}
\n * {{ item.cost }}
\n * \n * This is a custom header\n *
\n * Group header for {{ item[key] }}
\n * \n * There are no items to display\n *
\n * \n * \n * \n * \n * \n *
\n * \n * \n * \n * \n * \n *
\n * \n * The `contained` type button is also a rectangle but has a shadow.
\n * The `fab` type button is a circle with a shadow.
\n * The default value is `flat`.\n * ```html\n *
\n * The `contained` type button is also a rectangle but has a shadow.
\n * The `fab` type button is a circle with a shadow.
\n * The default value is `flat`.\n * ```html\n *
{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}
\n *{{ summaryResults[1].label }}: {{ summaryResults[1].summaryResult }}
\n *\n * {{val}} \n *
\n * \n * {{column.field}}\n *
\n * \n * This name is forbidden.\n *
\n * \n * This is a custom header\n *
\n *