barsa-user-workspace 0.0.0-watch

package/fesm2022/barsa-user-workspace.mjs

@@ -0,0 +1,2469 @@
+import { iif, fromEvent, merge, Observable, Subject, BehaviorSubject, NEVER, interval, animationFrameScheduler, combineLatest, of, debounceTime, filter as filter$1 } from 'rxjs';
+import { filter, switchMap, startWith, exhaustMap, takeUntil, take, map, tap, distinctUntilChanged } from 'rxjs/operators';
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive, Input, Injectable, ElementRef, Component, ChangeDetectionStrategy, Inject, ContentChildren, ViewChild, ContentChild, EventEmitter, ViewEncapsulation, Output, inject, Pipe, NgModule } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import * as i1$2 from 'barsa-novin-ray-core';
+import { BaseComponent, ReportViewBaseComponent, BaseModule, BarsaNovinRayCoreModule } from 'barsa-novin-ray-core';
+import * as i1 from '@fundamental-ngx/platform/icon-tab-bar';
+import { coerceNumberProperty as coerceNumberProperty$1 } from '@angular/cdk/coercion';
+import * as i1$1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { CdkTableModule } from '@angular/cdk/table';
+import { FundamentalNgxCoreModule } from '@fundamental-ngx/core';
+import { FundamentalNgxPlatformModule } from '@fundamental-ngx/platform';
+
+/**
+ * IMPORTANT:
+ * This utils are taken from the project: https://github.com/STRML/react-grid-layout.
+ * The code should be as less modified as possible for easy maintenance.
+ */
+const DEBUG = false;
+/**
+ * Return the bottom coordinate of the layout.
+ *
+ * @param  {Array} layout Layout array.
+ * @return {Number}       Bottom coordinate.
+ */
+function bottom(layout) {
+    let max = 0, bottomY;
+    for (let i = 0, len = layout.length; i < len; i++) {
+        bottomY = layout[i].y + layout[i].h;
+        if (bottomY > max) {
+            max = bottomY;
+        }
+    }
+    return max;
+}
+function cloneLayout(layout) {
+    const newLayout = Array(layout.length);
+    for (let i = 0, len = layout.length; i < len; i++) {
+        newLayout[i] = cloneLayoutItem(layout[i]);
+    }
+    return newLayout;
+}
+// Fast path to cloning, since this is monomorphic
+/** NOTE: This code has been modified from the original source */
+function cloneLayoutItem(layoutItem) {
+    const clonedLayoutItem = {
+        w: layoutItem.w,
+        h: layoutItem.h,
+        x: layoutItem.x,
+        y: layoutItem.y,
+        id: layoutItem.id,
+        moved: !!layoutItem.moved,
+        static: !!layoutItem.static,
+    };
+    if (layoutItem.minW !== undefined) {
+        clonedLayoutItem.minW = layoutItem.minW;
+    }
+    if (layoutItem.maxW !== undefined) {
+        clonedLayoutItem.maxW = layoutItem.maxW;
+    }
+    if (layoutItem.minH !== undefined) {
+        clonedLayoutItem.minH = layoutItem.minH;
+    }
+    if (layoutItem.maxH !== undefined) {
+        clonedLayoutItem.maxH = layoutItem.maxH;
+    }
+    // These can be null
+    if (layoutItem.isDraggable !== undefined) {
+        clonedLayoutItem.isDraggable = layoutItem.isDraggable;
+    }
+    if (layoutItem.isResizable !== undefined) {
+        clonedLayoutItem.isResizable = layoutItem.isResizable;
+    }
+    return clonedLayoutItem;
+}
+/**
+ * Given two layoutitems, check if they collide.
+ */
+function collides(l1, l2) {
+    if (l1.id === l2.id) {
+        return false;
+    } // same element
+    if (l1.x + l1.w <= l2.x) {
+        return false;
+    } // l1 is left of l2
+    if (l1.x >= l2.x + l2.w) {
+        return false;
+    } // l1 is right of l2
+    if (l1.y + l1.h <= l2.y) {
+        return false;
+    } // l1 is above l2
+    if (l1.y >= l2.y + l2.h) {
+        return false;
+    } // l1 is below l2
+    return true; // boxes overlap
+}
+/**
+ * Given a layout, compact it. This involves going down each y coordinate and removing gaps
+ * between items.
+ *
+ * @param  {Array} layout Layout.
+ * @param  {Boolean} verticalCompact Whether or not to compact the layout
+ *   vertically.
+ * @return {Array}       Compacted Layout.
+ */
+function compact(layout, compactType, cols) {
+    // Statics go in the compareWith array right away so items flow around them.
+    const compareWith = getStatics(layout);
+    // We go through the items by row and column.
+    const sorted = sortLayoutItems(layout, compactType);
+    // Holding for new items.
+    const out = Array(layout.length);
+    for (let i = 0, len = sorted.length; i < len; i++) {
+        let l = cloneLayoutItem(sorted[i]);
+        // Don't move static elements
+        if (!l.static) {
+            l = compactItem(compareWith, l, compactType, cols, sorted);
+            // Add to comparison array. We only collide with items before this one.
+            // Statics are already in this array.
+            compareWith.push(l);
+        }
+        // Add to output array to make sure they still come out in the right order.
+        out[layout.indexOf(sorted[i])] = l;
+        // Clear moved flag, if it exists.
+        l.moved = false;
+    }
+    return out;
+}
+const heightWidth = { x: 'w', y: 'h' };
+/**
+ * Before moving item down, it will check if the movement will cause collisions and move those items down before.
+ */
+function resolveCompactionCollision(layout, item, moveToCoord, axis) {
+    const sizeProp = heightWidth[axis];
+    item[axis] += 1;
+    const itemIndex = layout
+        .map(layoutItem => {
+        return layoutItem.id;
+    })
+        .indexOf(item.id);
+    // Go through each item we collide with.
+    for (let i = itemIndex + 1; i < layout.length; i++) {
+        const otherItem = layout[i];
+        // Ignore static items
+        if (otherItem.static) {
+            continue;
+        }
+        // Optimization: we can break early if we know we're past this el
+        // We can do this b/c it's a sorted layout
+        if (otherItem.y > item.y + item.h) {
+            break;
+        }
+        if (collides(item, otherItem)) {
+            resolveCompactionCollision(layout, otherItem, moveToCoord + item[sizeProp], axis);
+        }
+    }
+    item[axis] = moveToCoord;
+}
+/**
+ * Compact an item in the layout.
+ */
+function compactItem(compareWith, l, compactType, cols, fullLayout) {
+    const compactV = compactType === 'vertical';
+    const compactH = compactType === 'horizontal';
+    if (compactV) {
+        // Bottom 'y' possible is the bottom of the layout.
+        // This allows you to do nice stuff like specify {y: Infinity}
+        // This is here because the layout must be sorted in order to get the correct bottom `y`.
+        l.y = Math.min(bottom(compareWith), l.y);
+        // Move the element up as far as it can go without colliding.
+        while (l.y > 0 && !getFirstCollision(compareWith, l)) {
+            l.y--;
+        }
+    }
+    else if (compactH) {
+        // Move the element left as far as it can go without colliding.
+        while (l.x > 0 && !getFirstCollision(compareWith, l)) {
+            l.x--;
+        }
+    }
+    // Move it down, and keep moving it down if it's colliding.
+    let collides;
+    while ((collides = getFirstCollision(compareWith, l))) {
+        if (compactH) {
+            resolveCompactionCollision(fullLayout, l, collides.x + collides.w, 'x');
+        }
+        else {
+            resolveCompactionCollision(fullLayout, l, collides.y + collides.h, 'y');
+        }
+        // Since we can't grow without bounds horizontally, if we've overflown, let's move it down and try again.
+        if (compactH && l.x + l.w > cols) {
+            l.x = cols - l.w;
+            l.y++;
+            // ALso move element as left as much as we can (buw-custom-change)
+            while (l.x > 0 && !getFirstCollision(compareWith, l)) {
+                l.x--;
+            }
+        }
+    }
+    // Ensure that there are no negative positions
+    l.y = Math.max(l.y, 0);
+    l.x = Math.max(l.x, 0);
+    return l;
+}
+/**
+ * Given a layout, make sure all elements fit within its bounds.
+ *
+ * @param  {Array} layout Layout array.
+ * @param  {Number} bounds Number of columns.
+ */
+function correctBounds(layout, bounds) {
+    const collidesWith = getStatics(layout);
+    for (let i = 0, len = layout.length; i < len; i++) {
+        const l = layout[i];
+        // Overflows right
+        if (l.x + l.w > bounds.cols) {
+            l.x = bounds.cols - l.w;
+        }
+        // Overflows left
+        if (l.x < 0) {
+            l.x = 0;
+            l.w = bounds.cols;
+        }
+        if (!l.static) {
+            collidesWith.push(l);
+        }
+        else {
+            // If this is static and collides with other statics, we must move it down.
+            // We have to do something nicer than just letting them overlap.
+            while (getFirstCollision(collidesWith, l)) {
+                l.y++;
+            }
+        }
+    }
+    return layout;
+}
+/**
+ * Get a layout item by ID. Used so we can override later on if necessary.
+ *
+ * @param  {Array}  layout Layout array.
+ * @param  {String} id     ID
+ * @return {LayoutItem}    Item at ID.
+ */
+function getLayoutItem(layout, id) {
+    for (let i = 0, len = layout.length; i < len; i++) {
+        if (layout[i].id === id) {
+            return layout[i];
+        }
+    }
+    return null;
+}
+/**
+ * Returns the first item this layout collides with.
+ * It doesn't appear to matter which order we approach this from, although
+ * perhaps that is the wrong thing to do.
+ *
+ * @param  {Object} layoutItem Layout item.
+ * @return {Object|undefined}  A colliding layout item, or undefined.
+ */
+function getFirstCollision(layout, layoutItem) {
+    for (let i = 0, len = layout.length; i < len; i++) {
+        if (collides(layout[i], layoutItem)) {
+            return layout[i];
+        }
+    }
+    return null;
+}
+function getAllCollisions(layout, layoutItem) {
+    return layout.filter(l => collides(l, layoutItem));
+}
+/**
+ * Get all static elements.
+ * @param  {Array} layout Array of layout objects.
+ * @return {Array}        Array of static layout items..
+ */
+function getStatics(layout) {
+    return layout.filter(l => l.static);
+}
+/**
+ * Move an element. Responsible for doing cascading movements of other elements.
+ *
+ * @param  {Array}      layout            Full layout to modify.
+ * @param  {LayoutItem} l                 element to move.
+ * @param  {Number}     [x]               X position in grid units.
+ * @param  {Number}     [y]               Y position in grid units.
+ */
+function moveElement(layout, l, x, y, isUserAction, preventCollision, compactType, cols) {
+    // If this is static and not explicitly enabled as draggable,
+    // no move is possible, so we can short-circuit this immediately.
+    if (l.static && l.isDraggable !== true) {
+        return layout;
+    }
+    // Short-circuit if nothing to do.
+    if (l.y === y && l.x === x) {
+        return layout;
+    }
+    log(`Moving element ${l.id} to [${String(x)},${String(y)}] from [${l.x},${l.y}]`);
+    const oldX = l.x;
+    const oldY = l.y;
+    // This is quite a bit faster than extending the object
+    if (typeof x === 'number') {
+        l.x = x;
+    }
+    if (typeof y === 'number') {
+        l.y = y;
+    }
+    l.moved = true;
+    // If this collides with anything, move it.
+    // When doing this comparison, we have to sort the items we compare with
+    // to ensure, in the case of multiple collisions, that we're getting the
+    // nearest collision.
+    let sorted = sortLayoutItems(layout, compactType);
+    const movingUp = compactType === 'vertical' && typeof y === 'number'
+        ? oldY >= y
+        : compactType === 'horizontal' && typeof x === 'number'
+            ? oldX >= x
+            : false;
+    if (movingUp) {
+        sorted = sorted.reverse();
+    }
+    const collisions = getAllCollisions(sorted, l);
+    // There was a collision; abort
+    if (preventCollision && collisions.length) {
+        log(`Collision prevented on ${l.id}, reverting.`);
+        l.x = oldX;
+        l.y = oldY;
+        l.moved = false;
+        return layout;
+    }
+    // Move each item that collides away from this element.
+    for (let i = 0, len = collisions.length; i < len; i++) {
+        const collision = collisions[i];
+        log(`Resolving collision between ${l.id} at [${l.x},${l.y}] and ${collision.id} at [${collision.x},${collision.y}]`);
+        // Short circuit so we can't infinite loop
+        if (collision.moved) {
+            continue;
+        }
+        // Don't move static items - we have to move *this* element away
+        if (collision.static) {
+            layout = moveElementAwayFromCollision(layout, collision, l, isUserAction, compactType, cols);
+        }
+        else {
+            layout = moveElementAwayFromCollision(layout, l, collision, isUserAction, compactType, cols);
+        }
+    }
+    return layout;
+}
+/**
+ * This is where the magic needs to happen - given a collision, move an element away from the collision.
+ * We attempt to move it up if there's room, otherwise it goes below.
+ *
+ * @param  {Array} layout            Full layout to modify.
+ * @param  {LayoutItem} collidesWith Layout item we're colliding with.
+ * @param  {LayoutItem} itemToMove   Layout item we're moving.
+ */
+function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAction, compactType, cols) {
+    const compactH = compactType === 'horizontal';
+    // Compact vertically if not set to horizontal
+    const compactV = compactType !== 'horizontal';
+    const preventCollision = collidesWith.static; // we're already colliding (not for static items)
+    // If there is enough space above the collision to put this element, move it there.
+    // We only do this on the main collision as this can get funky in cascades and cause
+    // unwanted swapping behavior.
+    if (isUserAction) {
+        // Reset isUserAction flag because we're not in the main collision anymore.
+        isUserAction = false;
+        // Make a mock item so we don't modify the item here, only modify in moveElement.
+        const fakeItem = {
+            x: compactH
+                ? Math.max(collidesWith.x - itemToMove.w, 0)
+                : itemToMove.x,
+            y: compactV
+                ? Math.max(collidesWith.y - itemToMove.h, 0)
+                : itemToMove.y,
+            w: itemToMove.w,
+            h: itemToMove.h,
+            id: '-1',
+        };
+        // No collision? If so, we can go up there; otherwise, we'll end up moving down as normal
+        if (!getFirstCollision(layout, fakeItem)) {
+            log(`Doing reverse collision on ${itemToMove.id} up to [${fakeItem.x},${fakeItem.y}].`);
+            return moveElement(layout, itemToMove, compactH ? fakeItem.x : undefined, compactV ? fakeItem.y : undefined, isUserAction, preventCollision, compactType, cols);
+        }
+    }
+    return moveElement(layout, itemToMove, compactH ? itemToMove.x + 1 : undefined, compactV ? itemToMove.y + 1 : undefined, isUserAction, preventCollision, compactType, cols);
+}
+/**
+ * Helper to convert a number to a percentage string.
+ *
+ * @param  {Number} num Any number
+ * @return {String}     That number as a percentage.
+ */
+function perc(num) {
+    return num * 100 + '%';
+}
+function setTransform({ top, left, width, height }) {
+    // Replace unitless items with px
+    const translate = `translate(${left}px,${top}px)`;
+    return {
+        transform: translate,
+        WebkitTransform: translate,
+        MozTransform: translate,
+        msTransform: translate,
+        OTransform: translate,
+        width: `${width}px`,
+        height: `${height}px`,
+        position: 'absolute',
+    };
+}
+function setTopLeft({ top, left, width, height }) {
+    return {
+        top: `${top}px`,
+        left: `${left}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+        position: 'absolute',
+    };
+}
+/**
+ * Get layout items sorted from top left to right and down.
+ *
+ * @return {Array} Array of layout objects.
+ * @return {Array}        Layout, sorted static items first.
+ */
+function sortLayoutItems(layout, compactType) {
+    if (compactType === 'horizontal') {
+        return sortLayoutItemsByColRow(layout);
+    }
+    else {
+        return sortLayoutItemsByRowCol(layout);
+    }
+}
+function sortLayoutItemsByRowCol(layout) {
+    return [].concat(layout).sort(function (a, b) {
+        if (a.y > b.y || (a.y === b.y && a.x > b.x)) {
+            return 1;
+        }
+        else if (a.y === b.y && a.x === b.x) {
+            // Without this, we can get different sort results in IE vs. Chrome/FF
+            return 0;
+        }
+        return -1;
+    });
+}
+function sortLayoutItemsByColRow(layout) {
+    return [].concat(layout).sort(function (a, b) {
+        if (a.x > b.x || (a.x === b.x && a.y > b.y)) {
+            return 1;
+        }
+        return -1;
+    });
+}
+/**
+ * Validate a layout. Throws errors.
+ *
+ * @param  {Array}  layout        Array of layout items.
+ * @param  {String} [contextName] Context name for errors.
+ * @throw  {Error}                Validation error.
+ */
+function validateLayout(layout, contextName = 'Layout') {
+    const subProps = ['x', 'y', 'w', 'h'];
+    if (!Array.isArray(layout)) {
+        throw new Error(contextName + ' must be an array!');
+    }
+    for (let i = 0, len = layout.length; i < len; i++) {
+        const item = layout[i];
+        for (let j = 0; j < subProps.length; j++) {
+            if (typeof item[subProps[j]] !== 'number') {
+                throw new Error('ReactGridLayout: ' +
+                    contextName +
+                    '[' +
+                    i +
+                    '].' +
+                    subProps[j] +
+                    ' must be a number!');
+            }
+        }
+        if (item.id && typeof item.id !== 'string') {
+            throw new Error('ReactGridLayout: ' +
+                contextName +
+                '[' +
+                i +
+                '].i must be a string!');
+        }
+        if (item.static !== undefined && typeof item.static !== 'boolean') {
+            throw new Error('ReactGridLayout: ' +
+                contextName +
+                '[' +
+                i +
+                '].static must be a boolean!');
+        }
+    }
+}
+// Flow can't really figure this out, so we just use Object
+function autoBindHandlers(el, fns) {
+    fns.forEach(key => (el[key] = el[key].bind(el)));
+}
+function log(...args) {
+    if (!DEBUG) {
+        return;
+    }
+    // eslint-disable-next-line no-console
+    console.log(...args);
+}
+const noop = () => { };
+
+/** Cached result of whether the user's browser supports passive event listeners. */
+let supportsPassiveEvents;
+/**
+ * Checks whether the user's browser supports passive event listeners.
+ * See: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+ */
+function ktdSupportsPassiveEventListeners() {
+    if (supportsPassiveEvents == null && typeof window !== 'undefined') {
+        try {
+            window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
+                get: () => supportsPassiveEvents = true
+            }));
+        }
+        finally {
+            supportsPassiveEvents = supportsPassiveEvents || false;
+        }
+    }
+    return supportsPassiveEvents;
+}
+/**
+ * Normalizes an `AddEventListener` object to something that can be passed
+ * to `addEventListener` on any browser, no matter whether it supports the
+ * `options` parameter.
+ * @param options Object to be normalized.
+ */
+function ktdNormalizePassiveListenerOptions(options) {
+    return ktdSupportsPassiveEventListeners() ? options : !!options.capture;
+}
+
+/** Options that can be used to bind a passive event listener. */
+const passiveEventListenerOptions = ktdNormalizePassiveListenerOptions({ passive: true });
+/** Options that can be used to bind an active event listener. */
+const activeEventListenerOptions = ktdNormalizePassiveListenerOptions({ passive: false });
+let isMobile = null;
+function ktdIsMobileOrTablet() {
+    if (isMobile != null) {
+        return isMobile;
+    }
+    // Generic match pattern to identify mobile or tablet devices
+    const isMobileDevice = /Android|webOS|BlackBerry|Windows Phone|iPad|iPhone|iPod/i.test(navigator.userAgent);
+    // Since IOS 13 is not safe to just check for the generic solution. See: https://stackoverflow.com/questions/58019463/how-to-detect-device-name-in-safari-on-ios-13-while-it-doesnt-show-the-correct
+    const isIOSMobileDevice = /iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+    isMobile = isMobileDevice || isIOSMobileDevice;
+    return isMobile;
+}
+function ktdIsMouseEvent(event) {
+    return event.clientX != null;
+}
+function ktdIsTouchEvent(event) {
+    return event.touches != null && event.touches.length != null;
+}
+function ktdPointerClientX(event) {
+    return ktdIsMouseEvent(event) ? event.clientX : event.touches[0].clientX;
+}
+function ktdPointerClientY(event) {
+    return ktdIsMouseEvent(event) ? event.clientY : event.touches[0].clientY;
+}
+function ktdPointerClient(event) {
+    return {
+        clientX: ktdIsMouseEvent(event) ? event.clientX : event.touches[0].clientX,
+        clientY: ktdIsMouseEvent(event) ? event.clientY : event.touches[0].clientY
+    };
+}
+function ktdIsMouseEventOrMousePointerEvent(event) {
+    return event.type === 'mousedown'
+        || (event.type === 'pointerdown' && event.pointerType === 'mouse');
+}
+/** Returns true if browser supports pointer events */
+function ktdSupportsPointerEvents() {
+    return !!window.PointerEvent;
+}
+/**
+ * Emits when a mousedown or touchstart emits. Avoids conflicts between both events.
+ * @param element, html element where to  listen the events.
+ * @param touchNumber number of the touch to track the event, default to the first one.
+ */
+function ktdMouseOrTouchDown(element, touchNumber = 1) {
+    return iif(() => ktdIsMobileOrTablet(), fromEvent(element, 'touchstart', passiveEventListenerOptions).pipe(filter((touchEvent) => touchEvent.touches.length === touchNumber)), fromEvent(element, 'mousedown', activeEventListenerOptions).pipe(filter((mouseEvent) => {
+        /**
+         * 0 : Left mouse button
+         * 1 : Wheel button or middle button (if present)
+         * 2 : Right mouse button
+         */
+        return mouseEvent.button === 0; // Mouse down to be only fired if is left click
+    })));
+}
+/**
+ * Emits when a 'mousemove' or a 'touchmove' event gets fired.
+ * @param element, html element where to  listen the events.
+ * @param touchNumber number of the touch to track the event, default to the first one.
+ */
+function ktdMouseOrTouchMove(element, touchNumber = 1) {
+    return iif(() => ktdIsMobileOrTablet(), fromEvent(element, 'touchmove', activeEventListenerOptions).pipe(filter((touchEvent) => touchEvent.touches.length === touchNumber)), fromEvent(element, 'mousemove', activeEventListenerOptions));
+}
+function ktdTouchEnd(element, touchNumber = 1) {
+    return merge(fromEvent(element, 'touchend').pipe(filter((touchEvent) => touchEvent.touches.length === touchNumber - 1)), fromEvent(element, 'touchcancel').pipe(filter((touchEvent) => touchEvent.touches.length === touchNumber - 1)));
+}
+/**
+ * Emits when a there is a 'mouseup' or the touch ends.
+ * @param element, html element where to  listen the events.
+ * @param touchNumber number of the touch to track the event, default to the first one.
+ */
+function ktdMouserOrTouchEnd(element, touchNumber = 1) {
+    return iif(() => ktdIsMobileOrTablet(), ktdTouchEnd(element, touchNumber), fromEvent(element, 'mouseup'));
+}
+/**
+ * Emits when a 'pointerdown' event occurs (only for the primary pointer). Fallbacks to 'mousemove' or a 'touchmove' if pointer events are not supported.
+ * @param element, html element where to listen the events.
+ */
+function ktdPointerDown(element) {
+    if (!ktdSupportsPointerEvents()) {
+        return ktdMouseOrTouchDown(element);
+    }
+    return fromEvent(element, 'pointerdown', activeEventListenerOptions).pipe(filter((pointerEvent) => pointerEvent.isPrimary));
+}
+/**
+ * Emits when a 'pointermove' event occurs (only for the primary pointer). Fallbacks to 'mousemove' or a 'touchmove' if pointer events are not supported.
+ * @param element, html element where to listen the events.
+ */
+function ktdPointerMove(element) {
+    if (!ktdSupportsPointerEvents()) {
+        return ktdMouseOrTouchMove(element);
+    }
+    return fromEvent(element, 'pointermove', activeEventListenerOptions).pipe(filter((pointerEvent) => pointerEvent.isPrimary));
+}
+/**
+ * Emits when a 'pointerup' event occurs (only for the primary pointer). Fallbacks to 'mousemove' or a 'touchmove' if pointer events are not supported.
+ * @param element, html element where to listen the events.
+ */
+function ktdPointerUp(element) {
+    if (!ktdSupportsPointerEvents()) {
+        return ktdMouserOrTouchEnd(element);
+    }
+    return fromEvent(element, 'pointerup').pipe(filter(pointerEvent => pointerEvent.isPrimary));
+}
+
+/** Tracks items by id. This function is mean to be used in conjunction with the ngFor that renders the 'buw-grid-items' */
+function ktdTrackById(index, item) {
+    return item.id;
+}
+/** Given a layout, the gridHeight and the gap return the resulting rowHeight */
+function ktdGetGridItemRowHeight(layout, gridHeight, gap) {
+    const numberOfRows = layout.reduce((acc, cur) => Math.max(acc, Math.max(cur.y + cur.h, 0)), 0);
+    const gapTotalHeight = (numberOfRows - 1) * gap;
+    const gridHeightMinusGap = gridHeight - gapTotalHeight;
+    return gridHeightMinusGap / numberOfRows;
+}
+/**
+ * Call react-grid-layout utils 'compact()' function and return the compacted layout.
+ * @param layout to be compacted.
+ * @param compactType, type of compaction.
+ * @param cols, number of columns of the grid.
+ */
+function ktdGridCompact(layout, compactType, cols) {
+    return (compact(layout, compactType, cols)
+        // Prune react-grid-layout compact extra properties.
+        .map((item) => ({
+        id: item.id,
+        x: item.x,
+        y: item.y,
+        w: item.w,
+        h: item.h,
+        minW: item.minW,
+        minH: item.minH,
+        maxW: item.maxW,
+        maxH: item.maxH
+    })));
+}
+function screenXToGridX(screenXPos, cols, width, gap) {
+    const widthMinusGaps = width - gap * (cols - 1);
+    const itemWidth = widthMinusGaps / cols;
+    const widthMinusOneItem = width - itemWidth;
+    const colWidthWithGap = widthMinusOneItem / (cols - 1);
+    return Math.round(screenXPos / colWidthWithGap);
+}
+function screenYToGridY(screenYPos, rowHeight, height, gap) {
+    return Math.round(screenYPos / (rowHeight + gap));
+}
+function screenWidthToGridWidth(gridScreenWidth, cols, width, gap) {
+    const widthMinusGaps = width - gap * (cols - 1);
+    const itemWidth = widthMinusGaps / cols;
+    const gridScreenWidthMinusFirst = gridScreenWidth - itemWidth;
+    return Math.round(gridScreenWidthMinusFirst / (itemWidth + gap)) + 1;
+}
+function screenHeightToGridHeight(gridScreenHeight, rowHeight, height, gap) {
+    const gridScreenHeightMinusFirst = gridScreenHeight - rowHeight;
+    return Math.round(gridScreenHeightMinusFirst / (rowHeight + gap)) + 1;
+}
+/** Returns a Dictionary where the key is the id and the value is the change applied to that item. If no changes Dictionary is empty. */
+function ktdGetGridLayoutDiff(gridLayoutA, gridLayoutB) {
+    const diff = {};
+    gridLayoutA.forEach((itemA) => {
+        const itemB = gridLayoutB.find((_itemB) => _itemB.id === itemA.id);
+        if (itemB != null) {
+            const posChanged = itemA.x !== itemB.x || itemA.y !== itemB.y;
+            const sizeChanged = itemA.w !== itemB.w || itemA.h !== itemB.h;
+            const change = posChanged && sizeChanged ? 'moveresize' : posChanged ? 'move' : sizeChanged ? 'resize' : null;
+            if (change) {
+                diff[itemB.id] = { change };
+            }
+        }
+    });
+    return diff;
+}
+/**
+ * Given the grid config & layout data and the current drag position & information, returns the corresponding layout and drag item position
+ * @param gridItem grid item that is been dragged
+ * @param config current grid configuration
+ * @param compactionType type of compaction that will be performed
+ * @param draggingData contains all the information about the drag
+ */
+function ktdGridItemDragging(gridItem, config, compactionType, draggingData) {
+    const { pointerDownEvent, pointerDragEvent, gridElemClientRect, dragElemClientRect, scrollDifference } = draggingData;
+    const gridItemId = gridItem.id;
+    const draggingElemPrevItem = config.layout.find((item) => item.id === gridItemId);
+    const clientStartX = ktdPointerClientX(pointerDownEvent);
+    const clientStartY = ktdPointerClientY(pointerDownEvent);
+    const clientX = ktdPointerClientX(pointerDragEvent);
+    const clientY = ktdPointerClientY(pointerDragEvent);
+    const offsetX = clientStartX - dragElemClientRect.left;
+    const offsetY = clientStartY - dragElemClientRect.top;
+    // Grid element positions taking into account the possible scroll total difference from the beginning.
+    const gridElementLeftPosition = gridElemClientRect.left + scrollDifference.left;
+    const gridElementTopPosition = gridElemClientRect.top + scrollDifference.top;
+    // Calculate position relative to the grid element.
+    const gridRelXPos = clientX - gridElementLeftPosition - offsetX;
+    const gridRelYPos = clientY - gridElementTopPosition - offsetY;
+    const rowHeightInPixels = config.rowHeight === 'fit'
+        ? ktdGetGridItemRowHeight(config.layout, config.height ?? gridElemClientRect.height, config.gap)
+        : config.rowHeight;
+    // Get layout item position
+    const layoutItem = {
+        ...draggingElemPrevItem,
+        x: screenXToGridX(gridRelXPos, config.cols, gridElemClientRect.width, config.gap),
+        y: screenYToGridY(gridRelYPos, rowHeightInPixels, gridElemClientRect.height, config.gap)
+    };
+    // Correct the values if they overflow, since 'moveElement' function doesn't do it
+    layoutItem.x = Math.max(0, layoutItem.x);
+    layoutItem.y = Math.max(0, layoutItem.y);
+    if (layoutItem.x + layoutItem.w > config.cols) {
+        layoutItem.x = Math.max(0, config.cols - layoutItem.w);
+    }
+    // Parse to LayoutItem array data in order to use 'react.grid-layout' utils
+    const layoutItems = config.layout;
+    const draggedLayoutItem = layoutItems.find((item) => item.id === gridItemId);
+    let newLayoutItems = moveElement(layoutItems, draggedLayoutItem, layoutItem.x, layoutItem.y, true, config.preventCollision, compactionType, config.cols);
+    newLayoutItems = compact(newLayoutItems, compactionType, config.cols);
+    return {
+        layout: newLayoutItems,
+        draggedItemPos: {
+            top: gridRelYPos,
+            left: gridRelXPos,
+            width: dragElemClientRect.width,
+            height: dragElemClientRect.height
+        }
+    };
+}
+/**
+ * Given the grid config & layout data and the current drag position & information, returns the corresponding layout and drag item position
+ * @param gridItem grid item that is been dragged
+ * @param config current grid configuration
+ * @param compactionType type of compaction that will be performed
+ * @param draggingData contains all the information about the drag
+ */
+function ktdGridItemResizing(gridItem, config, compactionType, draggingData) {
+    const { pointerDownEvent, pointerDragEvent, gridElemClientRect, dragElemClientRect, scrollDifference } = draggingData;
+    const gridItemId = gridItem.id;
+    const clientStartX = ktdPointerClientX(pointerDownEvent);
+    const clientStartY = ktdPointerClientY(pointerDownEvent);
+    const clientX = ktdPointerClientX(pointerDragEvent);
+    const clientY = ktdPointerClientY(pointerDragEvent);
+    // Get the difference between the mouseDown and the position 'right' of the resize element.
+    const resizeElemOffsetX = dragElemClientRect.width - (clientStartX - dragElemClientRect.left);
+    const resizeElemOffsetY = dragElemClientRect.height - (clientStartY - dragElemClientRect.top);
+    const draggingElemPrevItem = config.layout.find((item) => item.id === gridItemId);
+    const width = clientX + resizeElemOffsetX - (dragElemClientRect.left + scrollDifference.left);
+    const height = clientY + resizeElemOffsetY - (dragElemClientRect.top + scrollDifference.top);
+    const rowHeightInPixels = config.rowHeight === 'fit'
+        ? ktdGetGridItemRowHeight(config.layout, config.height ?? gridElemClientRect.height, config.gap)
+        : config.rowHeight;
+    // Get layout item grid position
+    const layoutItem = {
+        ...draggingElemPrevItem,
+        w: screenWidthToGridWidth(width, config.cols, gridElemClientRect.width, config.gap),
+        h: screenHeightToGridHeight(height, rowHeightInPixels, gridElemClientRect.height, config.gap)
+    };
+    layoutItem.w = limitNumberWithinRange(layoutItem.w, gridItem.minW ?? layoutItem.minW, gridItem.maxW ?? layoutItem.maxW);
+    layoutItem.h = limitNumberWithinRange(layoutItem.h, gridItem.minH ?? layoutItem.minH, gridItem.maxH ?? layoutItem.maxH);
+    if (layoutItem.x + layoutItem.w > config.cols) {
+        layoutItem.w = Math.max(1, config.cols - layoutItem.x);
+    }
+    if (config.preventCollision) {
+        const maxW = layoutItem.w;
+        const maxH = layoutItem.h;
+        let colliding = hasCollision(config.layout, layoutItem);
+        let shrunkDimension;
+        while (colliding) {
+            shrunkDimension = getDimensionToShrink(layoutItem, shrunkDimension);
+            layoutItem[shrunkDimension]--;
+            colliding = hasCollision(config.layout, layoutItem);
+        }
+        if (shrunkDimension === 'w') {
+            layoutItem.h = maxH;
+            colliding = hasCollision(config.layout, layoutItem);
+            while (colliding) {
+                layoutItem.h--;
+                colliding = hasCollision(config.layout, layoutItem);
+            }
+        }
+        if (shrunkDimension === 'h') {
+            layoutItem.w = maxW;
+            colliding = hasCollision(config.layout, layoutItem);
+            while (colliding) {
+                layoutItem.w--;
+                colliding = hasCollision(config.layout, layoutItem);
+            }
+        }
+    }
+    const newLayoutItems = config.layout.map((item) => (item.id === gridItemId ? layoutItem : item));
+    return {
+        layout: compact(newLayoutItems, compactionType, config.cols),
+        draggedItemPos: {
+            top: dragElemClientRect.top - gridElemClientRect.top,
+            left: dragElemClientRect.left - gridElemClientRect.left,
+            width,
+            height
+        }
+    };
+}
+function hasCollision(layout, layoutItem) {
+    return !!getFirstCollision(layout, layoutItem);
+}
+function getDimensionToShrink(layoutItem, lastShrunk) {
+    if (layoutItem.h <= 1) {
+        return 'w';
+    }
+    if (layoutItem.w <= 1) {
+        return 'h';
+    }
+    return lastShrunk === 'w' ? 'h' : 'w';
+}
+/**
+ * Given the current number and min/max values, returns the number within the range
+ * @param number can be any numeric value
+ * @param min minimum value of range
+ * @param max maximum value of range
+ */
+function limitNumberWithinRange(num, min = 1, max = Infinity) {
+    return Math.min(Math.max(num, min < 1 ? 1 : min), max);
+}
+/** Returns true if both item1 and item2 KtdGridLayoutItems are equivalent. */
+function ktdGridItemLayoutItemAreEqual(item1, item2) {
+    return (item1.id === item2.id &&
+        item1.x === item2.x &&
+        item1.y === item2.y &&
+        item1.w === item2.w &&
+        item1.h === item2.h);
+}
+
+/**
+ * Injection token that can be used to reference instances of `KtdGridDragHandle`. It serves as
+ * alternative token to the actual `KtdGridDragHandle` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const KTD_GRID_DRAG_HANDLE = new InjectionToken('KtdGridDragHandle');
+/** Handle that can be used to drag a KtdGridItem instance. */
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+class KtdGridDragHandle {
+    constructor(element) {
+        this.element = element;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KtdGridDragHandle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KtdGridDragHandle, selector: "[buwGridDragHandle]", host: { classAttribute: "buw-grid-drag-handle" }, providers: [{ provide: KTD_GRID_DRAG_HANDLE, useExisting: KtdGridDragHandle }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KtdGridDragHandle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buwGridDragHandle]',
+                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+                    host: {
+                        class: 'buw-grid-drag-handle'
+                    },
+                    providers: [{ provide: KTD_GRID_DRAG_HANDLE, useExisting: KtdGridDragHandle }]
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+/**
+ * Injection token that can be used to reference instances of `KtdGridResizeHandle`. It serves as
+ * alternative token to the actual `KtdGridResizeHandle` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const KTD_GRID_RESIZE_HANDLE = new InjectionToken('KtdGridResizeHandle');
+/** Handle that can be used to drag a KtdGridItem instance. */
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+class KtdGridResizeHandle {
+    constructor(element) {
+        this.element = element;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KtdGridResizeHandle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KtdGridResizeHandle, selector: "[buwGridResizeHandle]", host: { classAttribute: "buw-grid-resize-handle" }, providers: [{ provide: KTD_GRID_RESIZE_HANDLE, useExisting: KtdGridResizeHandle }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KtdGridResizeHandle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buwGridResizeHandle]',
+                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+                    host: {
+                        class: 'buw-grid-resize-handle'
+                    },
+                    providers: [{ provide: KTD_GRID_RESIZE_HANDLE, useExisting: KtdGridResizeHandle }]
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+/**
+ * Injection token that can be used to reference instances of `KtdGridItemPlaceholder`. It serves as
+ * alternative token to the actual `KtdGridItemPlaceholder` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const KTD_GRID_ITEM_PLACEHOLDER = new InjectionToken('KtdGridItemPlaceholder');
+/** Directive that can be used to create a custom placeholder for a KtdGridItem instance. */
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+class KtdGridItemPlaceholder {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KtdGridItemPlaceholder, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KtdGridItemPlaceholder, selector: "ng-template[buwGridItemPlaceholder]", inputs: { data: "data" }, host: { classAttribute: "buw-grid-item-placeholder-content" }, providers: [{ provide: KTD_GRID_ITEM_PLACEHOLDER, useExisting: KtdGridItemPlaceholder }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KtdGridItemPlaceholder, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[buwGridItemPlaceholder]',
+                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+                    host: {
+                        class: 'buw-grid-item-placeholder-content'
+                    },
+                    providers: [{ provide: KTD_GRID_ITEM_PLACEHOLDER, useExisting: KtdGridItemPlaceholder }]
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+/** Coerces a data-bound value (typically a string) to a boolean. */
+function coerceBooleanProperty(value) {
+    return value != null && `${value}` !== 'false';
+}
+
+function coerceNumberProperty(value, fallbackValue = 0) {
+    return _isNumberValue(value) ? Number(value) : fallbackValue;
+}
+/**
+ * Whether the provided value is considered a number.
+ * @docs-private
+ */
+function _isNumberValue(value) {
+    // parseFloat(value) handles most of the cases we're interested in (it treats null, empty string,
+    // and other non-number values as NaN, where Number just uses 0) but it considers the string
+    // '123hello' to be a valid number. Therefore we also check if Number(value) is NaN.
+    return !isNaN(parseFloat(value)) && !isNaN(Number(value));
+}
+
+const GRID_ITEM_GET_RENDER_DATA_TOKEN = new InjectionToken('GRID_ITEM_GET_RENDER_DATA_TOKEN');
+
+/** Runs source observable outside the zone */
+function ktdOutsideZone(zone) {
+    return (source) => {
+        return new Observable(observer => {
+            return zone.runOutsideAngular(() => source.subscribe(observer));
+        });
+    };
+}
+/** Rxjs operator that makes source observable to no emit any data */
+function ktdNoEmit() {
+    return (source$) => {
+        return source$.pipe(filter(() => false));
+    };
+}
+
+/** Event options that can be used to bind an active, capturing event. */
+const activeCapturingEventOptions = ktdNormalizePassiveListenerOptions({
+    passive: false,
+    capture: true
+});
+class KtdGridService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.touchMoveSubject = new Subject();
+        this.touchMove$ = this.touchMoveSubject.asObservable();
+        this.registerTouchMoveSubscription();
+    }
+    ngOnDestroy() {
+        this.touchMoveSubscription.unsubscribe();
+    }
+    mouseOrTouchMove$(element) {
+        if (!ktdSupportsPointerEvents()) {
+            return iif(() => ktdIsMobileOrTablet(), this.touchMove$, fromEvent(element, 'mousemove', activeCapturingEventOptions)
+            // TODO: Fix rxjs typings, boolean should be a good param too.
+            );
+        }
+        return fromEvent(element, 'pointermove', activeCapturingEventOptions);
+    }
+    registerTouchMoveSubscription() {
+        // The `touchmove` event gets bound once, ahead of time, because WebKit
+        // won't preventDefault on a dynamically-added `touchmove` listener.
+        // See https://bugs.webkit.org/show_bug.cgi?id=184250.
+        this.touchMoveSubscription = this.ngZone.runOutsideAngular(() => 
+        // The event handler has to be explicitly active,
+        // because newer browsers make it passive by default.
+        fromEvent(document, 'touchmove', activeCapturingEventOptions)
+            // TODO: Fix rxjs typings, boolean should be a good param too.
+            .pipe(filter((touchEvent) => touchEvent.touches.length === 1))
+            .subscribe((touchEvent) => this.touchMoveSubject.next(touchEvent)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KtdGridService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KtdGridService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KtdGridService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
+class KtdGridItemComponent {
+    /** Id of the grid item. This property is strictly compulsory. */
+    get id() {
+        return this._id;
+    }
+    set id(val) {
+        this._id = val;
+    }
+    /** Minimum amount of pixels that the user should move before it starts the drag sequence. */
+    get dragStartThreshold() {
+        return this._dragStartThreshold;
+    }
+    set dragStartThreshold(val) {
+        this._dragStartThreshold = coerceNumberProperty(val);
+    }
+    /** Whether the item is draggable or not. Defaults to true. Does not affect manual dragging using the startDragManually method. */
+    get draggable() {
+        return this._draggable;
+    }
+    set draggable(val) {
+        this._draggable = coerceBooleanProperty(val);
+        this._draggable$.next(this._draggable);
+    }
+    /** Whether the item is resizable or not. Defaults to true. */
+    get resizable() {
+        return this._resizable;
+    }
+    set resizable(val) {
+        this._resizable = coerceBooleanProperty(val);
+        this._resizable$.next(this._resizable);
+    }
+    constructor(elementRef, gridService, renderer, ngZone, getItemRenderData) {
+        this.elementRef = elementRef;
+        this.gridService = gridService;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.getItemRenderData = getItemRenderData;
+        /** CSS transition style. Note that for more performance is preferable only make transition on transform property. */
+        this.transition = 'transform 500ms ease, width 500ms ease, height 500ms ease';
+        this._dragStartThreshold = 0;
+        this._draggable = true;
+        this._draggable$ = new BehaviorSubject(this._draggable);
+        this._manualDragEvents$ = new Subject();
+        this._resizable = true;
+        this._resizable$ = new BehaviorSubject(this._resizable);
+        this.dragStartSubject = new Subject();
+        this.resizeStartSubject = new Subject();
+        this.subscriptions = [];
+        this.dragStart$ = this.dragStartSubject.asObservable();
+        this.resizeStart$ = this.resizeStartSubject.asObservable();
+    }
+    ngOnInit() {
+        const gridItemRenderData = this.getItemRenderData(this.id);
+        this.setStyles(gridItemRenderData);
+    }
+    ngAfterContentInit() {
+        this.subscriptions.push(this._dragStart$().subscribe(this.dragStartSubject), this._resizeStart$().subscribe(this.resizeStartSubject));
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((sub) => sub.unsubscribe());
+    }
+    /**
+     * To manually start dragging, route the desired pointer events to this method.
+     * Dragging initiated by this method will work regardless of the value of the draggable Input.
+     * It is the caller's responsibility to call this method with only the events that are desired to cause a drag.
+     * For example, if you only want left clicks to cause a drag, it is your responsibility to filter out other mouse button events.
+     * @param startEvent The pointer event that should initiate the drag.
+     */
+    startDragManually(startEvent) {
+        this._manualDragEvents$.next(startEvent);
+    }
+    setStyles({ top, left, width, height }) {
+        // transform is 6x times faster than top/left
+        this.renderer.setStyle(this.elementRef.nativeElement, 'transform', `translateX(${left}) translateY(${top})`);
+        this.renderer.setStyle(this.elementRef.nativeElement, 'display', `block`);
+        this.renderer.setStyle(this.elementRef.nativeElement, 'transition', this.transition);
+        if (width != null) {
+            this.renderer.setStyle(this.elementRef.nativeElement, 'width', width);
+        }
+        if (height != null) {
+            this.renderer.setStyle(this.elementRef.nativeElement, 'height', height);
+        }
+    }
+    _dragStart$() {
+        return merge(this._manualDragEvents$, this._draggable$.pipe(switchMap((draggable) => {
+            if (!draggable) {
+                return NEVER;
+            }
+            return this._dragHandles.changes.pipe(startWith(this._dragHandles), switchMap((dragHandles) => iif(() => dragHandles.length > 0, merge(...dragHandles
+                .toArray()
+                .map((dragHandle) => ktdPointerDown(dragHandle.element.nativeElement))), ktdPointerDown(this.elementRef.nativeElement))));
+        }))).pipe(exhaustMap((startEvent) => {
+            // If the event started from an element with the native HTML drag&drop, it'll interfere
+            // with our own dragging (e.g. `img` tags do it by default). Prevent the default action
+            // to stop it from happening. Note that preventing on `dragstart` also seems to work, but
+            // it's flaky and it fails if the user drags it away quickly. Also note that we only want
+            // to do this for `mousedown` and `pointerdown` since doing the same for `touchstart` will
+            // stop any `click` events from firing on touch devices.
+            if (ktdIsMouseEventOrMousePointerEvent(startEvent)) {
+                startEvent.preventDefault();
+            }
+            const startPointer = ktdPointerClient(startEvent);
+            return this.gridService.mouseOrTouchMove$(document).pipe(takeUntil(ktdPointerUp(document)), ktdOutsideZone(this.ngZone), filter((moveEvent) => {
+                moveEvent.preventDefault();
+                const movePointer = ktdPointerClient(moveEvent);
+                const distanceX = Math.abs(startPointer.clientX - movePointer.clientX);
+                const distanceY = Math.abs(startPointer.clientY - movePointer.clientY);
+                // When this conditions returns true mean that we are over threshold.
+                return distanceX + distanceY >= this.dragStartThreshold;
+            }), take(1), 
+            // Return the original start event
+            map(() => startEvent));
+        }));
+    }
+    _resizeStart$() {
+        return this._resizable$.pipe(switchMap((resizable) => {
+            if (!resizable) {
+                // Side effect to hide the resizeElem if resize is disabled.
+                this.renderer.setStyle(this.resizeElem.nativeElement, 'display', 'none');
+                return NEVER;
+            }
+            else {
+                return this._resizeHandles.changes.pipe(startWith(this._resizeHandles), switchMap((resizeHandles) => {
+                    if (resizeHandles.length > 0) {
+                        // Side effect to hide the resizeElem if there are resize handles.
+                        this.renderer.setStyle(this.resizeElem.nativeElement, 'display', 'none');
+                        return merge(...resizeHandles
+                            .toArray()
+                            .map((resizeHandle) => ktdPointerDown(resizeHandle.element.nativeElement)));
+                    }
+                    else {
+                        this.renderer.setStyle(this.resizeElem.nativeElement, 'display', 'block');
+                        return ktdPointerDown(this.resizeElem.nativeElement);
+                    }
+                }), tap((startEvent) => {
+                    if (ktdIsMouseEventOrMousePointerEvent(startEvent)) {
+                        startEvent.preventDefault();
+                    }
+                }));
+            }
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KtdGridItemComponent, deps: [{ token: i0.ElementRef }, { token: KtdGridService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: GRID_ITEM_GET_RENDER_DATA_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KtdGridItemComponent, selector: "buw-grid-item", inputs: { minW: "minW", minH: "minH", maxW: "maxW", maxH: "maxH", transition: "transition", id: "id", dragStartThreshold: "dragStartThreshold", draggable: "draggable", resizable: "resizable" }, queries: [{ propertyName: "placeholder", first: true, predicate: KTD_GRID_ITEM_PLACEHOLDER, descendants: true }, { propertyName: "_dragHandles", predicate: KTD_GRID_DRAG_HANDLE, descendants: true }, { propertyName: "_resizeHandles", predicate: KTD_GRID_RESIZE_HANDLE, descendants: true }], viewQueries: [{ propertyName: "resizeElem", first: true, predicate: ["resizeElem"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ng-content></ng-content>\n<div #resizeElem class=\"grid-item-resize-icon\"></div>", styles: [":host{display:none;position:absolute;z-index:1;overflow:hidden;touch-action:none;border:1px dashed #000}:host div{position:absolute;-webkit-user-select:none;user-select:none;z-index:10}:host div.grid-item-resize-icon{cursor:se-resize;width:20px;height:20px;bottom:0;right:0;color:inherit}:host div.grid-item-resize-icon:after{content:\"\";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid;border-bottom:2px solid}.display-none{display:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KtdGridItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'buw-grid-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div #resizeElem class=\"grid-item-resize-icon\"></div>", styles: [":host{display:none;position:absolute;z-index:1;overflow:hidden;touch-action:none;border:1px dashed #000}:host div{position:absolute;-webkit-user-select:none;user-select:none;z-index:10}:host div.grid-item-resize-icon{cursor:se-resize;width:20px;height:20px;bottom:0;right:0;color:inherit}:host div.grid-item-resize-icon:after{content:\"\";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid;border-bottom:2px solid}.display-none{display:none!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: KtdGridService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GRID_ITEM_GET_RENDER_DATA_TOKEN]
+                }] }], propDecorators: { _dragHandles: [{
+                type: ContentChildren,
+                args: [KTD_GRID_DRAG_HANDLE, { descendants: true }]
+            }], _resizeHandles: [{
+                type: ContentChildren,
+                args: [KTD_GRID_RESIZE_HANDLE, { descendants: true }]
+            }], resizeElem: [{
+                type: ViewChild,
+                args: ['resizeElem', { static: true, read: ElementRef }]
+            }], placeholder: [{
+                type: ContentChild,
+                args: [KTD_GRID_ITEM_PLACEHOLDER]
+            }], minW: [{
+                type: Input
+            }], minH: [{
+                type: Input
+            }], maxW: [{
+                type: Input
+            }], maxH: [{
+                type: Input
+            }], transition: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], dragStartThreshold: [{
+                type: Input
+            }], draggable: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }] } });
+
+/**
+ * Client rect utilities.
+ * This file is taken from Angular Material repository.
+ */
+/** Gets a mutable version of an element's bounding `ClientRect`. */
+function getMutableClientRect(element) {
+    const clientRect = element.getBoundingClientRect();
+    // We need to clone the `clientRect` here, because all the values on it are readonly
+    // and we need to be able to update them. Also we can't use a spread here, because
+    // the values on a `ClientRect` aren't own properties. See:
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Notes
+    return {
+        top: clientRect.top,
+        right: clientRect.right,
+        bottom: clientRect.bottom,
+        left: clientRect.left,
+        width: clientRect.width,
+        height: clientRect.height
+    };
+}
+/**
+ * Checks whether some coordinates are within a `ClientRect`.
+ * @param clientRect ClientRect that is being checked.
+ * @param x Coordinates along the X axis.
+ * @param y Coordinates along the Y axis.
+ */
+function isInsideClientRect(clientRect, x, y) {
+    const { top, bottom, left, right } = clientRect;
+    return y >= top && y <= bottom && x >= left && x <= right;
+}
+/**
+ * Updates the top/left positions of a `ClientRect`, as well as their bottom/right counterparts.
+ * @param clientRect `ClientRect` that should be updated.
+ * @param top Amount to add to the `top` position.
+ * @param left Amount to add to the `left` position.
+ */
+function adjustClientRect(clientRect, top, left) {
+    clientRect.top += top;
+    clientRect.bottom = clientRect.top + clientRect.height;
+    clientRect.left += left;
+    clientRect.right = clientRect.left + clientRect.width;
+}
+/**
+ * Checks whether the pointer coordinates are close to a ClientRect.
+ * @param rect ClientRect to check against.
+ * @param threshold Threshold around the ClientRect.
+ * @param pointerX Coordinates along the X axis.
+ * @param pointerY Coordinates along the Y axis.
+ */
+function isPointerNearClientRect(rect, threshold, pointerX, pointerY) {
+    const { top, right, bottom, left, width, height } = rect;
+    const xThreshold = width * threshold;
+    const yThreshold = height * threshold;
+    return pointerY > top - yThreshold && pointerY < bottom + yThreshold &&
+        pointerX > left - xThreshold && pointerX < right + xThreshold;
+}
+
+/**
+ * Proximity, as a ratio to width/height at which to start auto-scrolling.
+ * The value comes from trying it out manually until it feels right.
+ */
+const SCROLL_PROXIMITY_THRESHOLD = 0.05;
+/**
+ * Increments the vertical scroll position of a node.
+ * @param node Node whose scroll position should change.
+ * @param amount Amount of pixels that the `node` should be scrolled.
+ */
+function incrementVerticalScroll(node, amount) {
+    if (node === window) {
+        node.scrollBy(0, amount);
+    }
+    else {
+        // Ideally we could use `Element.scrollBy` here as well, but IE and Edge don't support it.
+        node.scrollTop += amount;
+    }
+}
+/**
+ * Increments the horizontal scroll position of a node.
+ * @param node Node whose scroll position should change.
+ * @param amount Amount of pixels that the `node` should be scrolled.
+ */
+function incrementHorizontalScroll(node, amount) {
+    if (node === window) {
+        node.scrollBy(amount, 0);
+    }
+    else {
+        // Ideally we could use `Element.scrollBy` here as well, but IE and Edge don't support it.
+        node.scrollLeft += amount;
+    }
+}
+/**
+ * Gets whether the vertical auto-scroll direction of a node.
+ * @param clientRect Dimensions of the node.
+ * @param pointerY Position of the user's pointer along the y axis.
+ */
+function getVerticalScrollDirection(clientRect, pointerY) {
+    const { top, bottom, height } = clientRect;
+    const yThreshold = height * SCROLL_PROXIMITY_THRESHOLD;
+    if (pointerY >= top - yThreshold && pointerY <= top + yThreshold) {
+        return 1 /* AutoScrollVerticalDirection.UP */;
+    }
+    else if (pointerY >= bottom - yThreshold && pointerY <= bottom + yThreshold) {
+        return 2 /* AutoScrollVerticalDirection.DOWN */;
+    }
+    return 0 /* AutoScrollVerticalDirection.NONE */;
+}
+/**
+ * Gets whether the horizontal auto-scroll direction of a node.
+ * @param clientRect Dimensions of the node.
+ * @param pointerX Position of the user's pointer along the x axis.
+ */
+function getHorizontalScrollDirection(clientRect, pointerX) {
+    const { left, right, width } = clientRect;
+    const xThreshold = width * SCROLL_PROXIMITY_THRESHOLD;
+    if (pointerX >= left - xThreshold && pointerX <= left + xThreshold) {
+        return 1 /* AutoScrollHorizontalDirection.LEFT */;
+    }
+    else if (pointerX >= right - xThreshold && pointerX <= right + xThreshold) {
+        return 2 /* AutoScrollHorizontalDirection.RIGHT */;
+    }
+    return 0 /* AutoScrollHorizontalDirection.NONE */;
+}
+/**
+ * Returns an observable that schedules a loop and apply scroll on the scrollNode into the specified direction/s.
+ * This observable doesn't emit, it just performs the 'scroll' side effect.
+ * @param scrollNode, node where the scroll would be applied.
+ * @param verticalScrollDirection, vertical direction of the scroll.
+ * @param horizontalScrollDirection, horizontal direction of the scroll.
+ * @param scrollStep, scroll step in CSS pixels that would be applied in every loop.
+ */
+function scrollToDirectionInterval$(scrollNode, verticalScrollDirection, horizontalScrollDirection, scrollStep = 2) {
+    return interval(0, animationFrameScheduler)
+        .pipe(tap(() => {
+        if (verticalScrollDirection === 1 /* AutoScrollVerticalDirection.UP */) {
+            incrementVerticalScroll(scrollNode, -scrollStep);
+        }
+        else if (verticalScrollDirection === 2 /* AutoScrollVerticalDirection.DOWN */) {
+            incrementVerticalScroll(scrollNode, scrollStep);
+        }
+        if (horizontalScrollDirection === 1 /* AutoScrollHorizontalDirection.LEFT */) {
+            incrementHorizontalScroll(scrollNode, -scrollStep);
+        }
+        else if (horizontalScrollDirection === 2 /* AutoScrollHorizontalDirection.RIGHT */) {
+            incrementHorizontalScroll(scrollNode, scrollStep);
+        }
+    }), ktdNoEmit());
+}
+/**
+ * Given a source$ observable with pointer location, scroll the scrollNode if the pointer is near to it.
+ * This observable doesn't emit, it just performs a 'scroll' side effect.
+ * @param scrollableParent, parent node in which the scroll would be performed.
+ * @param options, configuration options.
+ */
+function ktdScrollIfNearElementClientRect$(scrollableParent, options) {
+    let scrollNode;
+    let scrollableParentClientRect;
+    let scrollableParentScrollWidth;
+    if (scrollableParent === document) {
+        scrollNode = document.defaultView;
+        const { width, height } = getViewportSize();
+        scrollableParentClientRect = { width, height, top: 0, right: width, bottom: height, left: 0 };
+        scrollableParentScrollWidth = getDocumentScrollWidth();
+    }
+    else {
+        scrollNode = scrollableParent;
+        scrollableParentClientRect = getMutableClientRect(scrollableParent);
+        scrollableParentScrollWidth = scrollableParent.scrollWidth;
+    }
+    /**
+     * IMPORTANT: By design, only let scroll horizontal if the scrollable parent has explicitly an scroll horizontal.
+     * This layout solution is not designed in mind to have any scroll horizontal, but exceptionally we allow it in this
+     * specific use case.
+     */
+    options = options || {};
+    if (options.disableHorizontal == null && scrollableParentScrollWidth <= scrollableParentClientRect.width) {
+        options.disableHorizontal = true;
+    }
+    return (source$) => source$.pipe(map(({ pointerX, pointerY }) => {
+        let verticalScrollDirection = getVerticalScrollDirection(scrollableParentClientRect, pointerY);
+        let horizontalScrollDirection = getHorizontalScrollDirection(scrollableParentClientRect, pointerX);
+        // Check if scroll directions are disabled.
+        if (options?.disableVertical) {
+            verticalScrollDirection = 0 /* AutoScrollVerticalDirection.NONE */;
+        }
+        if (options?.disableHorizontal) {
+            horizontalScrollDirection = 0 /* AutoScrollHorizontalDirection.NONE */;
+        }
+        return { verticalScrollDirection, horizontalScrollDirection };
+    }), distinctUntilChanged((prev, actual) => {
+        return prev.verticalScrollDirection === actual.verticalScrollDirection
+            && prev.horizontalScrollDirection === actual.horizontalScrollDirection;
+    }), switchMap(({ verticalScrollDirection, horizontalScrollDirection }) => {
+        if (verticalScrollDirection || horizontalScrollDirection) {
+            return scrollToDirectionInterval$(scrollNode, verticalScrollDirection, horizontalScrollDirection, options?.scrollStep);
+        }
+        else {
+            return NEVER;
+        }
+    }));
+}
+/**
+ * Emits on EVERY scroll event and returns the accumulated scroll offset relative to the initial scroll position.
+ * @param scrollableParent, node in which scroll events would be listened.
+ */
+function ktdGetScrollTotalRelativeDifference$(scrollableParent) {
+    let scrollInitialPosition;
+    // Calculate initial scroll position
+    if (scrollableParent === document) {
+        scrollInitialPosition = getViewportScrollPosition();
+    }
+    else {
+        scrollInitialPosition = {
+            top: scrollableParent.scrollTop,
+            left: scrollableParent.scrollLeft
+        };
+    }
+    return fromEvent(scrollableParent, 'scroll', ktdNormalizePassiveListenerOptions({ capture: true })).pipe(map(() => {
+        let newTop;
+        let newLeft;
+        if (scrollableParent === document) {
+            const viewportScrollPosition = getViewportScrollPosition();
+            newTop = viewportScrollPosition.top;
+            newLeft = viewportScrollPosition.left;
+        }
+        else {
+            newTop = scrollableParent.scrollTop;
+            newLeft = scrollableParent.scrollLeft;
+        }
+        const topDifference = scrollInitialPosition.top - newTop;
+        const leftDifference = scrollInitialPosition.left - newLeft;
+        return { top: topDifference, left: leftDifference };
+    }));
+}
+/** Returns the viewport's width and height. */
+function getViewportSize() {
+    const _window = document.defaultView || window;
+    return {
+        width: _window.innerWidth,
+        height: _window.innerHeight
+    };
+}
+/** Gets a ClientRect for the viewport's bounds. */
+function getViewportRect() {
+    // Use the document element's bounding rect rather than the window scroll properties
+    // (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll
+    // properties and client coordinates (boundingClientRect, clientX/Y, etc.) are in different
+    // conceptual viewports. Under most circumstances these viewports are equivalent, but they
+    // can disagree when the page is pinch-zoomed (on devices that support touch).
+    // See https://bugs.chromium.org/p/chromium/issues/detail?id=489206#c4
+    // We use the documentElement instead of the body because, by default (without a css reset)
+    // browsers typically give the document body an 8px margin, which is not included in
+    // getBoundingClientRect().
+    const scrollPosition = getViewportScrollPosition();
+    const { width, height } = getViewportSize();
+    return {
+        top: scrollPosition.top,
+        left: scrollPosition.left,
+        bottom: scrollPosition.top + height,
+        right: scrollPosition.left + width,
+        height,
+        width,
+    };
+}
+/** Gets the (top, left) scroll position of the viewport. */
+function getViewportScrollPosition() {
+    // The top-left-corner of the viewport is determined by the scroll position of the document
+    // body, normally just (scrollLeft, scrollTop). However, Chrome and Firefox disagree about
+    // whether `document.body` or `document.documentElement` is the scrolled element, so reading
+    // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of
+    // `document.documentElement` works consistently, where the `top` and `left` values will
+    // equal negative the scroll position.
+    const windowRef = document.defaultView || window;
+    const documentElement = document.documentElement;
+    const documentRect = documentElement.getBoundingClientRect();
+    const top = -documentRect.top || document.body.scrollTop || windowRef.scrollY ||
+        documentElement.scrollTop || 0;
+    const left = -documentRect.left || document.body.scrollLeft || windowRef.scrollX ||
+        documentElement.scrollLeft || 0;
+    return { top, left };
+}
+/** Returns the document scroll width */
+function getDocumentScrollWidth() {
+    return Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
+}
+
+/**
+ * Transition duration utilities.
+ * This file is taken from Angular Material repository.
+ */
+/* eslint-disable @katoid/prefix-exported-code */
+/** Parses a CSS time value to milliseconds. */
+function parseCssTimeUnitsToMs(value) {
+    // Some browsers will return it in seconds, whereas others will return milliseconds.
+    const multiplier = value.toLowerCase().indexOf('ms') > -1 ? 1 : 1000;
+    return parseFloat(value) * multiplier;
+}
+/** Gets the transform transition duration, including the delay, of an element in milliseconds. */
+function getTransformTransitionDurationInMs(element) {
+    const computedStyle = getComputedStyle(element);
+    const transitionedProperties = parseCssPropertyValue(computedStyle, 'transition-property');
+    const property = transitionedProperties.find(prop => prop === 'transform' || prop === 'all');
+    // If there's no transition for `all` or `transform`, we shouldn't do anything.
+    if (!property) {
+        return 0;
+    }
+    // Get the index of the property that we're interested in and match
+    // it up to the same index in `transition-delay` and `transition-duration`.
+    const propertyIndex = transitionedProperties.indexOf(property);
+    const rawDurations = parseCssPropertyValue(computedStyle, 'transition-duration');
+    const rawDelays = parseCssPropertyValue(computedStyle, 'transition-delay');
+    return parseCssTimeUnitsToMs(rawDurations[propertyIndex]) +
+        parseCssTimeUnitsToMs(rawDelays[propertyIndex]);
+}
+/** Parses out multiple values from a computed style into an array. */
+function parseCssPropertyValue(computedStyle, name) {
+    const value = computedStyle.getPropertyValue(name);
+    return value.split(',').map(part => part.trim());
+}
+
+function getDragResizeEventData(gridItem, layout) {
+    return {
+        layout,
+        layoutItem: layout.find((item) => item.id === gridItem.id),
+        gridItemRef: gridItem
+    };
+}
+function getColumnWidth(config, width) {
+    const { cols, gap } = config;
+    const widthExcludingGap = width - Math.max(gap * (cols - 1), 0);
+    return widthExcludingGap / cols;
+}
+function getRowHeightInPixels(config, height) {
+    const { rowHeight, layout, gap } = config;
+    return rowHeight === 'fit' ? ktdGetGridItemRowHeight(layout, height, gap) : rowHeight;
+}
+function layoutToRenderItems(config, width, height) {
+    const { layout, gap } = config;
+    const rowHeightInPixels = getRowHeightInPixels(config, height);
+    const itemWidthPerColumn = getColumnWidth(config, width);
+    const renderItems = {};
+    for (const item of layout) {
+        renderItems[item.id] = {
+            id: item.id,
+            top: item.y * rowHeightInPixels + gap * item.y,
+            left: item.x * itemWidthPerColumn + gap * item.x,
+            width: item.w * itemWidthPerColumn + gap * Math.max(item.w - 1, 0),
+            height: item.h * rowHeightInPixels + gap * Math.max(item.h - 1, 0)
+        };
+    }
+    return renderItems;
+}
+function getGridHeight(layout, rowHeight, gap) {
+    return layout.reduce((acc, cur) => Math.max(acc, (cur.y + cur.h) * rowHeight + Math.max(cur.y + cur.h - 1, 0) * gap), 0);
+}
+// eslint-disable-next-line
+function parseRenderItemToPixels(renderItem) {
+    return {
+        id: renderItem.id,
+        top: `${renderItem.top}px`,
+        left: `${renderItem.left}px`,
+        width: `${renderItem.width}px`,
+        height: `${renderItem.height}px`
+    };
+}
+// eslint-disable-next-line
+function __gridItemGetRenderDataFactoryFunc(gridCmp) {
+    return function (id) {
+        return parseRenderItemToPixels(gridCmp.getItemRenderData(id));
+    };
+}
+function ktdGridItemGetRenderDataFactoryFunc(gridCmp) {
+    // Workaround explained: https://github.com/ng-packagr/ng-packagr/issues/696#issuecomment-387114613
+    const resultFunc = __gridItemGetRenderDataFactoryFunc(gridCmp);
+    return resultFunc;
+}
+const defaultBackgroundConfig = {
+    borderColor: '#ffa72678',
+    gapColor: 'transparent',
+    rowColor: 'transparent',
+    columnColor: 'transparent',
+    borderWidth: 1
+};
+class KtdGridComponent {
+    /** Whether or not to update the internal layout when some dependent property change. */
+    get compactOnPropsChange() {
+        return this._compactOnPropsChange;
+    }
+    set compactOnPropsChange(value) {
+        this._compactOnPropsChange = coerceBooleanProperty(value);
+    }
+    /** If true, grid items won't change position when being dragged over. Handy when using no compaction */
+    get preventCollision() {
+        return this._preventCollision;
+    }
+    set preventCollision(value) {
+        this._preventCollision = coerceBooleanProperty(value);
+    }
+    /** Number of CSS pixels that would be scrolled on each 'tick' when auto scroll is performed. */
+    get scrollSpeed() {
+        return this._scrollSpeed;
+    }
+    set scrollSpeed(value) {
+        this._scrollSpeed = coerceNumberProperty(value, 2);
+    }
+    /** Type of compaction that will be applied to the layout (vertical, horizontal or free). Defaults to 'vertical' */
+    get compactType() {
+        return this._compactType;
+    }
+    set compactType(val) {
+        this._compactType = val;
+    }
+    /**
+     * Row height as number or as 'fit'.
+     * If rowHeight is a number value, it means that each row would have those css pixels in height.
+     * if rowHeight is 'fit', it means that rows will fit in the height available. If 'fit' value is set, a 'height' should be also provided.
+     */
+    get rowHeight() {
+        return this._rowHeight;
+    }
+    set rowHeight(val) {
+        this._rowHeight = val === 'fit' ? val : Math.max(1, Math.round(coerceNumberProperty(val)));
+    }
+    /** Number of columns  */
+    get cols() {
+        return this._cols;
+    }
+    set cols(val) {
+        this._cols = Math.max(1, Math.round(coerceNumberProperty(val)));
+    }
+    /** Layout of the grid. Array of all the grid items with its 'id' and position on the grid. */
+    get layout() {
+        return this._layout;
+    }
+    set layout(layout) {
+        /**
+         * Enhancement:
+         * Only set layout if it's reference has changed and use a boolean to track whenever recalculate the layout on ngOnChanges.
+         *
+         * Why:
+         * The normal use of this lib is having the variable layout in the outer component or in a store, assigning it whenever it changes and
+         * binded in the component with it's input [layout]. In this scenario, we would always calculate one unnecessary change on the layout when
+         * it is re-binded on the input.
+         */
+        this._layout = layout;
+    }
+    /** Grid gap in css pixels */
+    get gap() {
+        return this._gap;
+    }
+    set gap(val) {
+        this._gap = Math.max(coerceNumberProperty(val), 0);
+    }
+    /**
+     * If height is a number, fixes the height of the grid to it, recommended when rowHeight = 'fit' is used.
+     * If height is null, height will be automatically set according to its inner grid items.
+     * Defaults to null.
+     * */
+    get height() {
+        return this._height;
+    }
+    set height(val) {
+        this._height = typeof val === 'number' ? Math.max(val, 0) : null;
+    }
+    get backgroundConfig() {
+        return this._backgroundConfig;
+    }
+    set backgroundConfig(val) {
+        this._backgroundConfig = val;
+        // If there is background configuration, add main grid background class. Grid background class comes with opacity 0.
+        // It is done this way for adding opacity animation and to don't add any styles when grid background is null.
+        const classList = this.elementRef.nativeElement.classList;
+        this._backgroundConfig !== null
+            ? classList.add('buw-grid-background')
+            : classList.remove('buw-grid-background');
+        // Set background visibility
+        this.setGridBackgroundVisible(this._backgroundConfig?.show === 'always');
+    }
+    get config() {
+        return {
+            cols: this.cols,
+            rowHeight: this.rowHeight,
+            height: this.height,
+            layout: this.layout,
+            preventCollision: this.preventCollision,
+            gap: this.gap
+        };
+    }
+    constructor(gridService, elementRef, viewContainerRef, renderer, ngZone) {
+        this.gridService = gridService;
+        this.elementRef = elementRef;
+        this.viewContainerRef = viewContainerRef;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        /** Emits when layout change */
+        this.layoutUpdated = new EventEmitter();
+        /** Emits when drag starts */
+        this.dragStarted = new EventEmitter();
+        /** Emits when resize starts */
+        this.resizeStarted = new EventEmitter();
+        /** Emits when drag ends */
+        this.dragEnded = new EventEmitter();
+        /** Emits when resize ends */
+        this.resizeEnded = new EventEmitter();
+        /** Emits when a grid item is being resized and its bounds have changed */
+        this.gridItemResize = new EventEmitter();
+        /**
+         * Parent element that contains the scroll. If an string is provided it would search that element by id on the dom.
+         * If no data provided or null autoscroll is not performed.
+         */
+        this.scrollableParent = null;
+        this._compactOnPropsChange = true;
+        this._preventCollision = false;
+        this._scrollSpeed = 2;
+        this._compactType = 'vertical';
+        this._rowHeight = 100;
+        this._cols = 6;
+        this._gap = 0;
+        this._height = null;
+        this._backgroundConfig = null;
+        this.subscriptions = [];
+    }
+    ngOnChanges(changes) {
+        if (this.rowHeight === 'fit' && this.height == null) {
+            console.warn(`KtdGridComponent: The @Input() height should not be null when using rowHeight 'fit'`);
+        }
+        let needsCompactLayout = false;
+        let needsRecalculateRenderData = false;
+        // TODO: Does fist change need to be compacted by default?
+        // Compact layout whenever some dependent prop changes.
+        if (changes.compactType || changes.cols || changes.layout) {
+            needsCompactLayout = true;
+        }
+        // Check if wee need to recalculate rendering data.
+        if (needsCompactLayout || changes.rowHeight || changes.height || changes.gap || changes.backgroundConfig) {
+            needsRecalculateRenderData = true;
+        }
+        // Only compact layout if lib user has provided it. Lib users that want to save/store always the same layout  as it is represented (compacted)
+        // can use KtdCompactGrid utility and pre-compact the layout. This is the recommended behaviour for always having a the same layout on this component
+        // and the ones that uses it.
+        if (needsCompactLayout && this.compactOnPropsChange) {
+            this.compactLayout();
+        }
+        if (needsRecalculateRenderData) {
+            this.calculateRenderData();
+        }
+    }
+    ngAfterContentInit() {
+        this.initSubscriptions();
+    }
+    ngAfterContentChecked() {
+        this.render();
+    }
+    resize() {
+        this.calculateRenderData();
+        this.render();
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach((sub) => sub.unsubscribe());
+    }
+    compactLayout() {
+        this.layout = compact(this.layout, this.compactType, this.cols);
+    }
+    getItemsRenderData() {
+        return { ...this._gridItemsRenderData };
+    }
+    getItemRenderData(itemId) {
+        return this._gridItemsRenderData[itemId];
+    }
+    calculateRenderData() {
+        const clientRect = this.elementRef.nativeElement.getBoundingClientRect();
+        this.gridCurrentHeight =
+            this.height ??
+                (this.rowHeight === 'fit' ? clientRect.height : getGridHeight(this.layout, this.rowHeight, this.gap));
+        this._gridItemsRenderData = layoutToRenderItems(this.config, clientRect.width, this.gridCurrentHeight);
+        // Set Background CSS variables
+        this.setBackgroundCssVariables(getRowHeightInPixels(this.config, this.gridCurrentHeight));
+    }
+    render() {
+        this.renderer.setStyle(this.elementRef.nativeElement, 'height', `${this.gridCurrentHeight}px`);
+        this.updateGridItemsStyles();
+    }
+    setBackgroundCssVariables(rowHeight) {
+        const style = this.elementRef.nativeElement.style;
+        if (this._backgroundConfig) {
+            // structure
+            style.setProperty('--gap', this.gap + 'px');
+            style.setProperty('--row-height', rowHeight + 'px');
+            style.setProperty('--columns', `${this.cols}`);
+            style.setProperty('--border-width', (this._backgroundConfig.borderWidth ?? defaultBackgroundConfig.borderWidth) + 'px');
+            // colors
+            style.setProperty('--border-color', this._backgroundConfig.borderColor ?? defaultBackgroundConfig.borderColor);
+            style.setProperty('--gap-color', this._backgroundConfig.gapColor ?? defaultBackgroundConfig.gapColor);
+            style.setProperty('--row-color', this._backgroundConfig.rowColor ?? defaultBackgroundConfig.rowColor);
+            style.setProperty('--column-color', this._backgroundConfig.columnColor ?? defaultBackgroundConfig.columnColor);
+        }
+        else {
+            style.removeProperty('--gap');
+            style.removeProperty('--row-height');
+            style.removeProperty('--columns');
+            style.removeProperty('--border-width');
+            style.removeProperty('--border-color');
+            style.removeProperty('--gap-color');
+            style.removeProperty('--row-color');
+            style.removeProperty('--column-color');
+        }
+    }
+    updateGridItemsStyles() {
+        this._gridItems.forEach((item) => {
+            const gridItemRenderData = this._gridItemsRenderData[item.id];
+            if (gridItemRenderData == null) {
+                console.error(`Couldn't find the specified grid item for the id: ${item.id}`);
+            }
+            else {
+                item.setStyles(parseRenderItemToPixels(gridItemRenderData));
+            }
+        });
+    }
+    setGridBackgroundVisible(visible) {
+        const classList = this.elementRef.nativeElement.classList;
+        visible ? classList.add('buw-grid-background-visible') : classList.remove('buw-grid-background-visible');
+    }
+    initSubscriptions() {
+        this.subscriptions = [
+            this._gridItems.changes
+                .pipe(startWith(this._gridItems), switchMap((gridItems) => merge(...gridItems.map((gridItem) => gridItem.dragStart$.pipe(map((event) => ({ event, gridItem, type: 'drag' })))), ...gridItems.map((gridItem) => gridItem.resizeStart$.pipe(map((event) => ({
+                event,
+                gridItem,
+                type: 'resize'
+            }))))).pipe(exhaustMap(({ event, gridItem, type }) => {
+                // Emit drag or resize start events. Ensure that is start event is inside the zone.
+                this.ngZone.run(() => (type === 'drag' ? this.dragStarted : this.resizeStarted).emit(getDragResizeEventData(gridItem, this.layout)));
+                this.setGridBackgroundVisible(this._backgroundConfig?.show === 'whenDragging' ||
+                    this._backgroundConfig?.show === 'always');
+                // Perform drag sequence
+                return this.performDragSequence$(gridItem, event, type).pipe(map((layout) => ({ layout, gridItem, type })));
+            }))))
+                .subscribe(({ layout, gridItem, type }) => {
+                this.layout = layout;
+                // Calculate new rendering data given the new layout.
+                this.calculateRenderData();
+                // Emit drag or resize end events.
+                (type === 'drag' ? this.dragEnded : this.resizeEnded).emit(getDragResizeEventData(gridItem, layout));
+                // Notify that the layout has been updated.
+                this.layoutUpdated.emit(layout);
+                this.setGridBackgroundVisible(this._backgroundConfig?.show === 'always');
+            })
+        ];
+    }
+    /**
+     * Perform a general grid drag action, from start to end. A general grid drag action basically includes creating the placeholder element and adding
+     * some class animations. calcNewStateFunc needs to be provided in order to calculate the new state of the layout.
+     * @param gridItem that is been dragged
+     * @param pointerDownEvent event (mousedown or touchdown) where the user initiated the drag
+     * @param calcNewStateFunc function that return the new layout state and the drag element position
+     */
+    performDragSequence$(gridItem, pointerDownEvent, type) {
+        return new Observable((observer) => {
+            // Retrieve grid (parent) and gridItem (draggedElem) client rects.
+            const gridElemClientRect = getMutableClientRect(this.elementRef.nativeElement);
+            const dragElemClientRect = getMutableClientRect(gridItem.elementRef.nativeElement);
+            const scrollableParent = typeof this.scrollableParent === 'string'
+                ? document.getElementById(this.scrollableParent)
+                : this.scrollableParent;
+            this.renderer.addClass(gridItem.elementRef.nativeElement, 'no-transitions');
+            this.renderer.addClass(gridItem.elementRef.nativeElement, 'buw-grid-item-dragging');
+            const placeholderClientRect = {
+                ...dragElemClientRect,
+                left: dragElemClientRect.left - gridElemClientRect.left,
+                top: dragElemClientRect.top - gridElemClientRect.top
+            };
+            this.createPlaceholderElement(placeholderClientRect, gridItem.placeholder);
+            let newLayout;
+            // TODO (enhancement): consider move this 'side effect' observable inside the main drag loop.
+            //  - Pros are that we would not repeat subscriptions and takeUntil would shut down observables at the same time.
+            //  - Cons are that moving this functionality as a side effect inside the main drag loop would be confusing.
+            const scrollSubscription = this.ngZone.runOutsideAngular(() => (!scrollableParent
+                ? NEVER
+                : this.gridService.mouseOrTouchMove$(document).pipe(map((event) => ({
+                    pointerX: ktdPointerClientX(event),
+                    pointerY: ktdPointerClientY(event)
+                })), ktdScrollIfNearElementClientRect$(scrollableParent, { scrollStep: this.scrollSpeed })))
+                .pipe(takeUntil(ktdPointerUp(document)))
+                .subscribe());
+            /**
+             * Main subscription, it listens for 'pointer move' and 'scroll' events and recalculates the layout on each emission
+             */
+            const subscription = this.ngZone.runOutsideAngular(() => merge(combineLatest([
+                this.gridService.mouseOrTouchMove$(document),
+                ...(!scrollableParent
+                    ? [of({ top: 0, left: 0 })]
+                    : [
+                        ktdGetScrollTotalRelativeDifference$(scrollableParent).pipe(startWith({ top: 0, left: 0 }) // Force first emission to allow CombineLatest to emit even no scroll event has occurred
+                        )
+                    ])
+            ]))
+                .pipe(takeUntil(ktdPointerUp(document)))
+                .subscribe(([pointerDragEvent, scrollDifference]) => {
+                pointerDragEvent.preventDefault();
+                /**
+                 * Set the new layout to be the layout in which the calcNewStateFunc would be executed.
+                 * NOTE: using the mutated layout is the way to go by 'react-grid-layout' utils. If we don't use the previous layout,
+                 * some utilities from 'react-grid-layout' would not work as expected.
+                 */
+                const currentLayout = newLayout || this.layout;
+                // Get the correct newStateFunc depending on if we are dragging or resizing
+                const calcNewStateFunc = type === 'drag' ? ktdGridItemDragging : ktdGridItemResizing;
+                const { layout, draggedItemPos } = calcNewStateFunc(gridItem, {
+                    layout: currentLayout,
+                    rowHeight: this.rowHeight,
+                    height: this.height,
+                    cols: this.cols,
+                    preventCollision: this.preventCollision,
+                    gap: this.gap
+                }, this.compactType, {
+                    pointerDownEvent,
+                    pointerDragEvent,
+                    gridElemClientRect,
+                    dragElemClientRect,
+                    scrollDifference
+                });
+                newLayout = layout;
+                this.gridCurrentHeight =
+                    this.height ??
+                        (this.rowHeight === 'fit'
+                            ? gridElemClientRect.height
+                            : getGridHeight(newLayout, this.rowHeight, this.gap));
+                this._gridItemsRenderData = layoutToRenderItems({
+                    cols: this.cols,
+                    rowHeight: this.rowHeight,
+                    height: this.height,
+                    layout: newLayout,
+                    preventCollision: this.preventCollision,
+                    gap: this.gap
+                }, gridElemClientRect.width, gridElemClientRect.height);
+                const newGridItemRenderData = { ...this._gridItemsRenderData[gridItem.id] };
+                const placeholderStyles = parseRenderItemToPixels(newGridItemRenderData);
+                // Put the real final position to the placeholder element
+                this.placeholder.style.width = placeholderStyles.width;
+                this.placeholder.style.height = placeholderStyles.height;
+                this.placeholder.style.transform = `translateX(${placeholderStyles.left}) translateY(${placeholderStyles.top})`;
+                // modify the position of the dragged item to be the once we want (for example the mouse position or whatever)
+                this._gridItemsRenderData[gridItem.id] = {
+                    ...draggedItemPos,
+                    id: this._gridItemsRenderData[gridItem.id].id
+                };
+                this.setBackgroundCssVariables(this.rowHeight === 'fit'
+                    ? ktdGetGridItemRowHeight(newLayout, gridElemClientRect.height, this.gap)
+                    : this.rowHeight);
+                this.render();
+                // If we are performing a resize, and bounds have changed, emit event.
+                // NOTE: Only emit on resize for now. Use case for normal drag is not justified for now. Emitting on resize is,
+                // since we may want to re-render the grid item or the placeholder in order to fit the new bounds.
+                if (type === 'resize') {
+                    const prevGridItem = currentLayout.find((item) => item.id === gridItem.id);
+                    const newGridItem = newLayout.find((item) => item.id === gridItem.id);
+                    // Check if item resized has changed, if so, emit resize change event
+                    if (!ktdGridItemLayoutItemAreEqual(prevGridItem, newGridItem)) {
+                        this.gridItemResize.emit({
+                            width: newGridItemRenderData.width,
+                            height: newGridItemRenderData.height,
+                            gridItemRef: getDragResizeEventData(gridItem, newLayout).gridItemRef
+                        });
+                    }
+                }
+            }, (error) => observer.error(error), () => {
+                this.ngZone.run(() => {
+                    // Remove drag classes
+                    this.renderer.removeClass(gridItem.elementRef.nativeElement, 'no-transitions');
+                    this.renderer.removeClass(gridItem.elementRef.nativeElement, 'buw-grid-item-dragging');
+                    this.addGridItemAnimatingClass(gridItem).subscribe();
+                    // Consider destroying the placeholder after the animation has finished.
+                    this.destroyPlaceholder();
+                    if (newLayout) {
+                        // TODO: newLayout should already be pruned. If not, it should have type Layout, not KtdGridLayout as it is now.
+                        // Prune react-grid-layout compact extra properties.
+                        observer.next(newLayout.map((item) => ({
+                            id: item.id,
+                            x: item.x,
+                            y: item.y,
+                            w: item.w,
+                            h: item.h,
+                            minW: item.minW,
+                            minH: item.minH,
+                            maxW: item.maxW,
+                            maxH: item.maxH
+                        })));
+                    }
+                    else {
+                        // TODO: Need we really to emit if there is no layout change but drag started and ended?
+                        observer.next(this.layout);
+                    }
+                    observer.complete();
+                });
+            }));
+            return () => {
+                scrollSubscription.unsubscribe();
+                subscription.unsubscribe();
+            };
+        });
+    }
+    /**
+     * It adds the `buw-grid-item-animating` class and removes it when the animated transition is complete.
+     * This function is meant to be executed when the drag has ended.
+     * @param gridItem that has been dragged
+     */
+    addGridItemAnimatingClass(gridItem) {
+        return new Observable((observer) => {
+            const duration = getTransformTransitionDurationInMs(gridItem.elementRef.nativeElement);
+            if (duration === 0) {
+                observer.next();
+                observer.complete();
+                return;
+            }
+            this.renderer.addClass(gridItem.elementRef.nativeElement, 'buw-grid-item-animating');
+            const handler = ((event) => {
+                if (!event ||
+                    (event.target === gridItem.elementRef.nativeElement && event.propertyName === 'transform')) {
+                    this.renderer.removeClass(gridItem.elementRef.nativeElement, 'buw-grid-item-animating');
+                    removeEventListener();
+                    clearTimeout(timeout);
+                    observer.next();
+                    observer.complete();
+                }
+            });
+            // If a transition is short enough, the browser might not fire the `transitionend` event.
+            // Since we know how long it's supposed to take, add a timeout with a 50% buffer that'll
+            // fire if the transition hasn't completed when it was supposed to.
+            const timeout = setTimeout(handler, duration * 1.5);
+            const removeEventListener = this.renderer.listen(gridItem.elementRef.nativeElement, 'transitionend', handler);
+        });
+    }
+    /** Creates placeholder element */
+    createPlaceholderElement(clientRect, gridItemPlaceholder) {
+        this.placeholder = this.renderer.createElement('div');
+        this.placeholder.style.width = `${clientRect.width}px`;
+        this.placeholder.style.height = `${clientRect.height}px`;
+        this.placeholder.style.transform = `translateX(${clientRect.left}px) translateY(${clientRect.top}px)`;
+        this.placeholder.classList.add('buw-grid-item-placeholder');
+        this.renderer.appendChild(this.elementRef.nativeElement, this.placeholder);
+        // Create and append custom placeholder if provided.
+        // Important: Append it after creating & appending the container placeholder. This way we ensure parent bounds are set when creating the embeddedView.
+        if (gridItemPlaceholder) {
+            this.placeholderRef = this.viewContainerRef.createEmbeddedView(gridItemPlaceholder.templateRef, gridItemPlaceholder.data);
+            this.placeholderRef.rootNodes.forEach((node) => this.placeholder.appendChild(node));
+            this.placeholderRef.detectChanges();
+        }
+        else {
+            this.placeholder.classList.add('buw-grid-item-placeholder-default');
+        }
+    }
+    /** Destroys the placeholder element and its ViewRef. */
+    destroyPlaceholder() {
+        this.placeholder?.remove();
+        this.placeholderRef?.destroy();
+        this.placeholder = this.placeholderRef = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KtdGridComponent, deps: [{ token: KtdGridService }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KtdGridComponent, selector: "buw-grid", inputs: { scrollableParent: "scrollableParent", compactOnPropsChange: "compactOnPropsChange", preventCollision: "preventCollision", scrollSpeed: "scrollSpeed", compactType: "compactType", rowHeight: "rowHeight", cols: "cols", layout: "layout", gap: "gap", height: "height", backgroundConfig: "backgroundConfig" }, outputs: { layoutUpdated: "layoutUpdated", dragStarted: "dragStarted", resizeStarted: "resizeStarted", dragEnded: "dragEnded", resizeEnded: "resizeEnded", gridItemResize: "gridItemResize" }, providers: [
+            {
+                provide: GRID_ITEM_GET_RENDER_DATA_TOKEN,
+                useFactory: ktdGridItemGetRenderDataFactoryFunc,
+                deps: [KtdGridComponent]
+            }
+        ], queries: [{ propertyName: "_gridItems", predicate: KtdGridItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>", styles: ["buw-grid{display:block;position:relative;width:100%}buw-grid.buw-grid-background:before{content:\"\";border:none;position:absolute;inset:0;z-index:0;transition:opacity .2s;opacity:0;background-image:repeating-linear-gradient(var(--border-color) 0 var(--border-width),var(--row-color) var(--border-width) calc(var(--row-height) - var(--border-width)),var(--border-color) calc(var(--row-height) - var(--border-width)) calc(var(--row-height)),var(--gap-color) calc(var(--row-height)) calc(var(--row-height) + var(--gap))),repeating-linear-gradient(90deg,var(--border-color) 0 var(--border-width),var(--column-color) var(--border-width) calc(100% - (var(--border-width) + var(--gap))),var(--border-color) calc(100% - (var(--border-width) + var(--gap))) calc(100% - var(--gap)),var(--gap-color) calc(100% - var(--gap)) 100%);background-size:calc((100% + var(--gap)) / var(--columns)) calc(var(--row-height) + var(--gap));background-position:0 0}buw-grid.buw-grid-background.buw-grid-background-visible:before{opacity:1}buw-grid buw-grid-item.buw-grid-item-dragging,buw-grid buw-grid-item.buw-grid-item-animating{z-index:1000}buw-grid buw-grid-item.no-transitions{transition:none!important}buw-grid .buw-grid-item-placeholder{position:absolute;z-index:0;transition-property:transform;transition:all .15s ease}buw-grid .buw-grid-item-placeholder-default{background-color:#8b0000;opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KtdGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'buw-grid', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: GRID_ITEM_GET_RENDER_DATA_TOKEN,
+                            useFactory: ktdGridItemGetRenderDataFactoryFunc,
+                            deps: [KtdGridComponent]
+                        }
+                    ], template: "<ng-content></ng-content>", styles: ["buw-grid{display:block;position:relative;width:100%}buw-grid.buw-grid-background:before{content:\"\";border:none;position:absolute;inset:0;z-index:0;transition:opacity .2s;opacity:0;background-image:repeating-linear-gradient(var(--border-color) 0 var(--border-width),var(--row-color) var(--border-width) calc(var(--row-height) - var(--border-width)),var(--border-color) calc(var(--row-height) - var(--border-width)) calc(var(--row-height)),var(--gap-color) calc(var(--row-height)) calc(var(--row-height) + var(--gap))),repeating-linear-gradient(90deg,var(--border-color) 0 var(--border-width),var(--column-color) var(--border-width) calc(100% - (var(--border-width) + var(--gap))),var(--border-color) calc(100% - (var(--border-width) + var(--gap))) calc(100% - var(--gap)),var(--gap-color) calc(100% - var(--gap)) 100%);background-size:calc((100% + var(--gap)) / var(--columns)) calc(var(--row-height) + var(--gap));background-position:0 0}buw-grid.buw-grid-background.buw-grid-background-visible:before{opacity:1}buw-grid buw-grid-item.buw-grid-item-dragging,buw-grid buw-grid-item.buw-grid-item-animating{z-index:1000}buw-grid buw-grid-item.no-transitions{transition:none!important}buw-grid .buw-grid-item-placeholder{position:absolute;z-index:0;transition-property:transform;transition:all .15s ease}buw-grid .buw-grid-item-placeholder-default{background-color:#8b0000;opacity:.6}\n"] }]
+        }], ctorParameters: () => [{ type: KtdGridService }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { _gridItems: [{
+                type: ContentChildren,
+                args: [KtdGridItemComponent, { descendants: true }]
+            }], layoutUpdated: [{
+                type: Output
+            }], dragStarted: [{
+                type: Output
+            }], resizeStarted: [{
+                type: Output
+            }], dragEnded: [{
+                type: Output
+            }], resizeEnded: [{
+                type: Output
+            }], gridItemResize: [{
+                type: Output
+            }], scrollableParent: [{
+                type: Input
+            }], compactOnPropsChange: [{
+                type: Input
+            }], preventCollision: [{
+                type: Input
+            }], scrollSpeed: [{
+                type: Input
+            }], compactType: [{
+                type: Input
+            }], rowHeight: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], backgroundConfig: [{
+                type: Input
+            }] } });
+
+class NavContainerComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this._router = inject(Router);
+    }
+    onTabSelect(e) {
+        console.log(e);
+        if (e.label === 'صفحه اصلی') {
+            this._router.navigate(['/home']);
+        }
+        if (e.label === 'برنامه ها') {
+            this._router.navigate(['/home/launchpad']);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavContainerComponent, selector: "buw-nav-container", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"fd-shellbar fd-shellbar--xl\">\r\n    <fdp-icon-tab-bar layoutMode=\"row\" maxContentHeight=\"250px\" (iconTabSelected)=\"onTabSelect($event)\">\r\n        <fdp-icon-tab-bar-tab label=\"\u0635\u0641\u062D\u0647 \u0627\u0635\u0644\u06CC\" active> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632 \u06A9\u0627\u0631 \u0645\u0646\"> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u062A\u06CC\u06A9\u062A\u06CC\u0646\u06AF\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u0646\u0627\u0628\u0639 \u0627\u0646\u0633\u0627\u0646\u06CC\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u0631\u0647\u0627\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\"> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0627\u0628\u0632\u0627\u0631\u0647\u0627\"> </fdp-icon-tab-bar-tab>\r\n    </fdp-icon-tab-bar>\r\n</div>", styles: [":host{display:block}:host ::ng-deep>div ul{background-color:transparent}:host ::ng-deep>div ul .fd-icon-tab-bar__tag{color:#fff}:host ::ng-deep>div ul fd-icon,:host ::ng-deep>div ul .fd-icon-tab-bar__arrow{color:#fff!important}:host ::ng-deep>div ul .fd-icon-tab-bar__tab[aria-selected=true]:after{background-color:#fff}\n"], dependencies: [{ kind: "component", type: i1.IconTabBarComponent, selector: "fdp-icon-tab-bar", inputs: ["stackContent", "iconTabType", "tabsConfig", "densityMode", "iconTabFont", "enableTabReordering", "showTotalTab", "multiClick", "layoutMode", "iconTabBackground", "iconTabSize", "colorAssociations", "maxContentHeight"], outputs: ["tabsConfigChange", "densityModeChange", "iconTabSelected", "iconTabReordered", "closeTab"] }, { kind: "component", type: i1.IconTabBarTabComponent, selector: "fdp-icon-tab-bar-tab", inputs: ["label", "color", "icon", "iconFont", "counter", "active", "badge", "closable", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'buw-nav-container', providers: [], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"fd-shellbar fd-shellbar--xl\">\r\n    <fdp-icon-tab-bar layoutMode=\"row\" maxContentHeight=\"250px\" (iconTabSelected)=\"onTabSelect($event)\">\r\n        <fdp-icon-tab-bar-tab label=\"\u0635\u0641\u062D\u0647 \u0627\u0635\u0644\u06CC\" active> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632 \u06A9\u0627\u0631 \u0645\u0646\"> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u062A\u06CC\u06A9\u062A\u06CC\u0646\u06AF\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u0646\u0627\u0628\u0639 \u0627\u0646\u0633\u0627\u0646\u06CC\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u0631\u0647\u0627\">\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06311\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06312\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06313\"> </fdp-icon-tab-bar-tab>\r\n            <fdp-icon-tab-bar-tab label=\"\u0645\u06CC\u0632\u06A9\u0627\u06314\"> </fdp-icon-tab-bar-tab>\r\n        </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\"> </fdp-icon-tab-bar-tab>\r\n        <fdp-icon-tab-bar-tab label=\"\u0627\u0628\u0632\u0627\u0631\u0647\u0627\"> </fdp-icon-tab-bar-tab>\r\n    </fdp-icon-tab-bar>\r\n</div>", styles: [":host{display:block}:host ::ng-deep>div ul{background-color:transparent}:host ::ng-deep>div ul .fd-icon-tab-bar__tag{color:#fff}:host ::ng-deep>div ul fd-icon,:host ::ng-deep>div ul .fd-icon-tab-bar__arrow{color:#fff!important}:host ::ng-deep>div ul .fd-icon-tab-bar__tab[aria-selected=true]:after{background-color:#fff}\n"] }]
+        }] });
+
+/**
+ * Removes and item from an array. Returns a new array instance (it doesn't mutate the source array).
+ * @param array source array to be returned without the element to remove
+ * @param condition function that will return true for the item that we want to remove
+ */
+function ktdArrayRemoveItem(array, condition) {
+    const arrayCopy = [...array];
+    const index = array.findIndex((item) => condition(item));
+    if (index > -1) {
+        arrayCopy.splice(index, 1);
+    }
+    return arrayCopy;
+}
+
+class LayoutContainerComponent extends BaseComponent {
+    constructor(ngZone, elementRef, document) {
+        // this.ngZone.onUnstable.subscribe(() => console.log('UnStable'));
+        super();
+        this.ngZone = ngZone;
+        this.elementRef = elementRef;
+        this.document = document;
+        // @Input() layout: KtdGridLayout = [{ id: '0', x: 5, y: 0, w: 2, h: 3 }];
+        this.layout = [];
+        this.moDataList = [];
+        this.trackById = ktdTrackById;
+        this.cols = 12;
+        this.rowHeight = 50;
+        this.rowHeightFit = false;
+        this.gridHeight = null;
+        this.compactType = 'vertical';
+        this.transitions = [
+            { name: 'ease', value: 'transform 500ms ease, width 500ms ease, height 500ms ease' },
+            { name: 'ease-out', value: 'transform 500ms ease-out, width 500ms ease-out, height 500ms ease-out' },
+            { name: 'linear', value: 'transform 500ms linear, width 500ms linear, height 500ms linear' },
+            {
+                name: 'overflowing',
+                value: 'transform 500ms cubic-bezier(.28,.49,.79,1.35), width 500ms cubic-bezier(.28,.49,.79,1.35), height 500ms cubic-bezier(.28,.49,.79,1.35)'
+            },
+            { name: 'fast', value: 'transform 200ms ease, width 200ms linear, height 200ms linear' },
+            { name: 'slow-motion', value: 'transform 1000ms linear, width 1000ms linear, height 1000ms linear' },
+            { name: 'transform-only', value: 'transform 500ms ease' }
+        ];
+        this.currentTransition = this.transitions[0].value;
+        this.placeholders = ['None', 'Default', 'Custom 1', 'Custom 2', 'Custom 3'];
+        this.currentPlaceholder = 'Default';
+        this.dragStartThreshold = 0;
+        this.gap = 10;
+        this.autoScroll = true;
+        this.disableDrag = false;
+        this.disableResize = false;
+        this.disableRemove = false;
+        this.autoResize = true;
+        this.preventCollision = false;
+        this.isDragging = false;
+        this.isResizing = false;
+        this.showBackground = false;
+        this.gridBackgroundVisibilityOptions = ['never', 'always', 'whenDragging'];
+        this.gridBackgroundConfig = {
+            show: 'always',
+            borderColor: 'rgba(255, 128, 0, 0.25)',
+            gapColor: 'transparent',
+            borderWidth: 1,
+            rowColor: 'rgba(128, 128, 128, 0.10)',
+            columnColor: 'rgba(128, 128, 128, 0.10)'
+        };
+    }
+    ngOnInit() {
+        this.resizeSubscription = merge(fromEvent(window, 'resize'), fromEvent(window, 'orientationchange'))
+            .pipe(debounceTime(50), filter$1(() => this.autoResize))
+            .subscribe(() => {
+            this.grid.resize();
+        });
+    }
+    ngOnDestroy() {
+        this.resizeSubscription.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        const { layout } = changes;
+        if (layout && !layout.firstChange) {
+            this.grid.resize();
+        }
+    }
+    onDragStarted(event) {
+        this.isDragging = true;
+    }
+    onResizeStarted(event) {
+        this.isResizing = true;
+    }
+    onDragEnded(event) {
+        this.isDragging = false;
+    }
+    onResizeEnded(event) {
+        this.isResizing = false;
+    }
+    onLayoutUpdated(layout) {
+        console.log('on layout updated', layout);
+        this.layout = layout;
+    }
+    onAutoScrollChange(checked) {
+        this.autoScroll = checked;
+    }
+    onDisableDragChange(checked) {
+        this.disableDrag = checked;
+    }
+    onDisableResizeChange(checked) {
+        this.disableResize = checked;
+    }
+    onShowBackgroundChange(checked) {
+        this.showBackground = checked;
+    }
+    onDisableRemoveChange(checked) {
+        this.disableRemove = checked;
+    }
+    onAutoResizeChange(checked) {
+        this.autoResize = checked;
+    }
+    onPreventCollisionChange(checked) {
+        this.preventCollision = checked;
+    }
+    onColsChange(event) {
+        this.cols = coerceNumberProperty$1(event.target.value);
+    }
+    onRowHeightChange(event) {
+        this.rowHeight = coerceNumberProperty$1(event.target.value);
+    }
+    onGridHeightChange(event) {
+        this.gridHeight = coerceNumberProperty$1(event.target.value);
+    }
+    onDragStartThresholdChange(event) {
+        this.dragStartThreshold = coerceNumberProperty$1(event.target.value);
+    }
+    onGapChange(event) {
+        this.gap = coerceNumberProperty$1(event.target.value);
+    }
+    generateLayout() {
+        const layout = [];
+        for (let i = 0; i < this.cols; i++) {
+            const y = Math.ceil(Math.random() * 4) + 1;
+            layout.push({
+                x: Math.round(Math.random() * Math.floor(this.cols / 2 - 1)) * 2,
+                y: Math.floor(i / 6) * y,
+                w: 2,
+                h: y,
+                id: i.toString()
+                // static: Math.random() < 0.05
+            });
+        }
+        this.layout = ktdGridCompact(layout, this.compactType, this.cols);
+        console.log('generateLayout', this.layout);
+    }
+    /** Adds a grid item to the layout */
+    addItemToLayout() {
+        const maxId = this.layout.reduce((acc, cur) => Math.max(acc, parseInt(cur.id, 10)), -1);
+        const nextId = maxId + 1;
+        const newLayoutItem = {
+            id: nextId.toString(),
+            x: -1,
+            y: -1,
+            w: 2,
+            h: 2
+        };
+        // Important: Don't mutate the array, create new instance. This way notifies the Grid component that the layout has changed.
+        this.layout = [newLayoutItem, ...this.layout];
+        this.layout = ktdGridCompact(this.layout, this.compactType, this.cols);
+    }
+    /**
+     * Fired when a mousedown happens on the remove grid item button.
+     * Stops the event from propagating an causing the drag to start.
+     * We don't want to drag when mousedown is fired on remove icon button.
+     */
+    stopEventPropagation(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /** Removes the item from the layout */
+    removeItem(id) {
+        // Important: Don't mutate the array. Let Angular know that the layout has changed creating a new reference.
+        this.layout = ktdArrayRemoveItem(this.layout, (item) => item.id === id);
+    }
+    updateGridBgBorderWidth(borderWidth) {
+        this.gridBackgroundConfig = {
+            ...this.gridBackgroundConfig,
+            borderWidth: Number(borderWidth)
+        };
+    }
+    updateGridBgColor(color, property) {
+        this.gridBackgroundConfig = {
+            ...this.gridBackgroundConfig,
+            [property]: color
+        };
+    }
+    getCurrentBackgroundVisibility() {
+        return this.gridBackgroundConfig?.show ?? 'never';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutContainerComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LayoutContainerComponent, selector: "buw-layout-container", inputs: { layout: "layout", moDataList: "moDataList" }, providers: [], viewQueries: [{ propertyName: "grid", first: true, predicate: KtdGridComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div style=\"position: relative\" dir=\"ltr\" fillEmptySpace [setMinHeight]=\"true\">\r\n    <buw-grid\r\n        [cols]=\"cols\"\r\n        [backgroundConfig]=\"gridBackgroundConfig\"\r\n        [height]=\"rowHeightFit && gridHeight ? gridHeight : null\"\r\n        [rowHeight]=\"rowHeightFit ? 'fit' : rowHeight\"\r\n        [layout]=\"layout\"\r\n        [compactType]=\"compactType\"\r\n        [preventCollision]=\"preventCollision\"\r\n        [scrollableParent]=\"autoScroll ? document : null\"\r\n        [gap]=\"gap\"\r\n        [scrollSpeed]=\"4\"\r\n        (dragStarted)=\"onDragStarted($event)\"\r\n        (resizeStarted)=\"onResizeStarted($event)\"\r\n        (dragEnded)=\"onDragEnded($event)\"\r\n        (resizeEnded)=\"onResizeEnded($event)\"\r\n        (layoutUpdated)=\"onLayoutUpdated($event)\"\r\n    >\r\n        <buw-grid-item\r\n            *ngFor=\"let item of layout; trackBy: trackById; let i = index\"\r\n            [id]=\"item.id\"\r\n            [transition]=\"currentTransition\"\r\n            [dragStartThreshold]=\"dragStartThreshold\"\r\n            [draggable]=\"!disableDrag\"\r\n            [resizable]=\"!disableResize\"\r\n        >\r\n            <div class=\"grid-item-content\">\r\n                @if(moDataList?.length && moDataList[i]?.EjrayOlgo ){\r\n                <bnrc-dynamic-item-component [component]=\"moDataList[i].EjrayOlgo\"> </bnrc-dynamic-item-component>\r\n                }\r\n  \r\n            </div>\r\n            <div\r\n                class=\"grid-item-remove-handle\"\r\n                *ngIf=\"!disableRemove\"\r\n                (mousedown)=\"stopEventPropagation($event)\"\r\n                (click)=\"removeItem(item.id)\"\r\n            ></div>\r\n            <ng-template *ngIf=\"currentPlaceholder !== 'Default'\" buwGridItemPlaceholder>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 1'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-1\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 2'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-2\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 3'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-3\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n            </ng-template>\r\n        </buw-grid-item>\r\n    </buw-grid>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep .grid-item-content{box-sizing:border-box;background:#ccc;border:1px solid;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-item-remove-handle{position:absolute;cursor:pointer;display:flex;justify-content:center;width:20px;height:20px;top:0;right:0}:host ::ng-deep .grid-item-remove-handle:after{content:\"x\";color:#121212;font-size:16px;font-weight:300;font-family:Arial,sans-serif}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "hideOpenIcon", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "directive", type: i1$2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: KtdGridComponent, selector: "buw-grid", inputs: ["scrollableParent", "compactOnPropsChange", "preventCollision", "scrollSpeed", "compactType", "rowHeight", "cols", "layout", "gap", "height", "backgroundConfig"], outputs: ["layoutUpdated", "dragStarted", "resizeStarted", "dragEnded", "resizeEnded", "gridItemResize"] }, { kind: "component", type: KtdGridItemComponent, selector: "buw-grid-item", inputs: ["minW", "minH", "maxW", "maxH", "transition", "id", "dragStartThreshold", "draggable", "resizable"] }, { kind: "directive", type: KtdGridItemPlaceholder, selector: "ng-template[buwGridItemPlaceholder]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'buw-layout-container', providers: [], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div style=\"position: relative\" dir=\"ltr\" fillEmptySpace [setMinHeight]=\"true\">\r\n    <buw-grid\r\n        [cols]=\"cols\"\r\n        [backgroundConfig]=\"gridBackgroundConfig\"\r\n        [height]=\"rowHeightFit && gridHeight ? gridHeight : null\"\r\n        [rowHeight]=\"rowHeightFit ? 'fit' : rowHeight\"\r\n        [layout]=\"layout\"\r\n        [compactType]=\"compactType\"\r\n        [preventCollision]=\"preventCollision\"\r\n        [scrollableParent]=\"autoScroll ? document : null\"\r\n        [gap]=\"gap\"\r\n        [scrollSpeed]=\"4\"\r\n        (dragStarted)=\"onDragStarted($event)\"\r\n        (resizeStarted)=\"onResizeStarted($event)\"\r\n        (dragEnded)=\"onDragEnded($event)\"\r\n        (resizeEnded)=\"onResizeEnded($event)\"\r\n        (layoutUpdated)=\"onLayoutUpdated($event)\"\r\n    >\r\n        <buw-grid-item\r\n            *ngFor=\"let item of layout; trackBy: trackById; let i = index\"\r\n            [id]=\"item.id\"\r\n            [transition]=\"currentTransition\"\r\n            [dragStartThreshold]=\"dragStartThreshold\"\r\n            [draggable]=\"!disableDrag\"\r\n            [resizable]=\"!disableResize\"\r\n        >\r\n            <div class=\"grid-item-content\">\r\n                @if(moDataList?.length && moDataList[i]?.EjrayOlgo ){\r\n                <bnrc-dynamic-item-component [component]=\"moDataList[i].EjrayOlgo\"> </bnrc-dynamic-item-component>\r\n                }\r\n  \r\n            </div>\r\n            <div\r\n                class=\"grid-item-remove-handle\"\r\n                *ngIf=\"!disableRemove\"\r\n                (mousedown)=\"stopEventPropagation($event)\"\r\n                (click)=\"removeItem(item.id)\"\r\n            ></div>\r\n            <ng-template *ngIf=\"currentPlaceholder !== 'Default'\" buwGridItemPlaceholder>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 1'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-1\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 2'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-2\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n                <div\r\n                    *ngIf=\"currentPlaceholder === 'Custom 3'\"\r\n                    class=\"grid-item-content custom-placeholder custom-placeholder-3\"\r\n                >\r\n                    {{ item.id }}\r\n                </div>\r\n            </ng-template>\r\n        </buw-grid-item>\r\n    </buw-grid>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep .grid-item-content{box-sizing:border-box;background:#ccc;border:1px solid;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-item-remove-handle{position:absolute;cursor:pointer;display:flex;justify-content:center;width:20px;height:20px;top:0;right:0}:host ::ng-deep .grid-item-remove-handle:after{content:\"x\";color:#121212;font-size:16px;font-weight:300;font-family:Arial,sans-serif}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { grid: [{
+                type: ViewChild,
+                args: [KtdGridComponent, { static: true }]
+            }], layout: [{
+                type: Input
+            }], moDataList: [{
+                type: Input
+            }] } });
+
+class LayoutGridMapperPipe {
+    transform(molist) {
+        const x = molist.map((c) => ({
+            id: c.Id,
+            x: +c.x,
+            y: +c.y,
+            w: +c.w,
+            h: +c.h,
+            minW: c.minW,
+            minH: c.minH,
+            maxW: c.maxW,
+            maxH: c.maxH,
+            ejrayOlgo: c.EjrayOlgo
+        }));
+        return x;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutGridMapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LayoutGridMapperPipe, name: "layoutGridMapper" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutGridMapperPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'layoutGridMapper',
+                    standalone: false
+                }]
+        }] });
+
+class ReportGridLayoutComponent extends ReportViewBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReportGridLayoutComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReportGridLayoutComponent, selector: "buw-report-grid-layout", providers: [], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\" dir=\"ltr\" fillEmptySpace [setMinHeight]=\"true\">\r\n    <buw-layout-container [moDataList]=\"moDataList\" [layout]=\"moDataList | layoutGridMapper\"> </buw-layout-container>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep .grid-item-content{box-sizing:border-box;background:#ccc;border:1px solid;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-item-remove-handle{position:absolute;cursor:pointer;display:flex;justify-content:center;width:20px;height:20px;top:0;right:0}:host ::ng-deep .grid-item-remove-handle:after{content:\"x\";color:#121212;font-size:16px;font-weight:300;font-family:Arial,sans-serif}\n"], dependencies: [{ kind: "directive", type: i1$2.FillEmptySpaceDirective, selector: "[fillEmptySpace]", inputs: ["containerDom", "decrement", "disable", "height", "dontUseTopBound", "setMinHeight"], exportAs: ["fillEmptySpace"] }, { kind: "component", type: LayoutContainerComponent, selector: "buw-layout-container", inputs: ["layout", "moDataList"] }, { kind: "pipe", type: LayoutGridMapperPipe, name: "layoutGridMapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReportGridLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'buw-report-grid-layout', providers: [], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div style=\"position: relative\" dir=\"ltr\" fillEmptySpace [setMinHeight]=\"true\">\r\n    <buw-layout-container [moDataList]=\"moDataList\" [layout]=\"moDataList | layoutGridMapper\"> </buw-layout-container>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep .grid-item-content{box-sizing:border-box;background:#ccc;border:1px solid;width:100%;height:100%;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}:host ::ng-deep .grid-item-remove-handle{position:absolute;cursor:pointer;display:flex;justify-content:center;width:20px;height:20px;top:0;right:0}:host ::ng-deep .grid-item-remove-handle:after{content:\"x\";color:#121212;font-size:16px;font-weight:300;font-family:Arial,sans-serif}\n"] }]
+        }] });
+
+const components = [
+    KtdGridComponent,
+    KtdGridItemComponent,
+    NavContainerComponent,
+    LayoutContainerComponent,
+    ReportGridLayoutComponent
+];
+const pipes = [LayoutGridMapperPipe];
+const directives = [KtdGridDragHandle, KtdGridResizeHandle, KtdGridItemPlaceholder];
+class BarsaUserWorkspaceModule extends BaseModule {
+    constructor(dcm, componentFactoryResolver) {
+        super(dcm, componentFactoryResolver, 'BarsaUserWorkspaceModule');
+        this.dcm = dcm;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.dynamicComponents = [...components];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaUserWorkspaceModule, deps: [{ token: i1$2.DynamicComponentService }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: BarsaUserWorkspaceModule, declarations: [KtdGridComponent,
+            KtdGridItemComponent,
+            NavContainerComponent,
+            LayoutContainerComponent,
+            ReportGridLayoutComponent, KtdGridDragHandle, KtdGridResizeHandle, KtdGridItemPlaceholder, LayoutGridMapperPipe], imports: [CommonModule,
+            FormsModule,
+            RouterModule,
+            DragDropModule,
+            CdkTableModule,
+            FundamentalNgxCoreModule,
+            FundamentalNgxPlatformModule,
+            BarsaNovinRayCoreModule], exports: [KtdGridComponent,
+            KtdGridItemComponent,
+            NavContainerComponent,
+            LayoutContainerComponent,
+            ReportGridLayoutComponent, KtdGridDragHandle, KtdGridResizeHandle, KtdGridItemPlaceholder] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaUserWorkspaceModule, providers: [KtdGridService, ...pipes], imports: [CommonModule,
+            FormsModule,
+            RouterModule,
+            DragDropModule,
+            CdkTableModule,
+            FundamentalNgxCoreModule,
+            FundamentalNgxPlatformModule,
+            BarsaNovinRayCoreModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BarsaUserWorkspaceModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        DragDropModule,
+                        CdkTableModule,
+                        FundamentalNgxCoreModule,
+                        FundamentalNgxPlatformModule,
+                        BarsaNovinRayCoreModule
+                    ],
+                    declarations: [...components, ...directives, ...pipes],
+                    providers: [KtdGridService, ...pipes],
+                    exports: [...components, ...directives]
+                }]
+        }], ctorParameters: () => [{ type: i1$2.DynamicComponentService }, { type: i0.ComponentFactoryResolver }] });
+
+/*
+ * Public API Surface of grid
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BarsaUserWorkspaceModule, GRID_ITEM_GET_RENDER_DATA_TOKEN, KTD_GRID_DRAG_HANDLE, KTD_GRID_ITEM_PLACEHOLDER, KTD_GRID_RESIZE_HANDLE, KtdGridComponent, KtdGridDragHandle, KtdGridItemComponent, KtdGridItemPlaceholder, KtdGridResizeHandle, LayoutContainerComponent, NavContainerComponent, ReportGridLayoutComponent, __gridItemGetRenderDataFactoryFunc, ktdGridCompact, ktdGridItemGetRenderDataFactoryFunc, ktdTrackById, parseRenderItemToPixels };
+//# sourceMappingURL=barsa-user-workspace.mjs.map