@sankhyalabs/ezui 5.17.2 → 5.18.0-dev.2

package/dist/custom-elements/index.js

@@ -54112,7 +54112,7 @@ var __spread$1$1 = function () {
 };
 // creates JavaScript vanilla Grid, including JavaScript (ag-stack) components, which can
 // be wrapped by the framework wrappers
-var Grid = /** @class */ (function () {
+var Grid$1 = /** @class */ (function () {
     function Grid(eGridDiv, gridOptions, params) {
         if (!gridOptions) {
             console.error('AG Grid: no gridOptions provided to the grid');
@@ -106455,7 +106455,7 @@ var DetailCellRenderer = /** @class */ (function (_super) {
         var frameworkComponentWrapper = this.context.getBean('frameworkComponentWrapper');
         var frameworkOverrides = this.getFrameworkOverrides();
         // tslint:disable-next-line
-        new Grid(this.eDetailGrid, gridOptions, {
+        new Grid$1(this.eDetailGrid, gridOptions, {
             frameworkOverrides: frameworkOverrides,
             providedBeanInstances: {
                 agGridReact: agGridReactCloned,
@@ -124731,10 +124731,10 @@ class AgGridController {
       this.setOptionsSupress(this._gridOptions);
       this._gridOptions = this._editionManager.configureGrid(this._gridOptions);
       if (this._enterprise) {
-        this._grid = new Grid(container, this._gridOptions);
+        this._grid = new Grid$1(container, this._gridOptions);
       }
       else {
-        this._grid = new Grid(container, this._gridOptions);
+        this._grid = new Grid$1(container, this._gridOptions);
       }
       container.addEventListener('focusout', (event) => {
         if (!container.contains(event.relatedTarget))
@@ -127735,6 +127735,788 @@ const EzSkeleton$1 = class extends HTMLElement$1 {
   static get style() { return ezSkeletonCss; }
 };
 
+const ezSplitItemCss = ".box_split-item{background-color:var(--background--xlight);padding:var(--space--nano);width:100%;height:100%;border-radius:var(--border--radius-medium);box-shadow:var(--shadow)}";
+
+const SplitItem = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, { class: 'box_split-item' }));
+  }
+  static get style() { return ezSplitItemCss; }
+};
+
+var numeric = function (value, unit) { return Number(value.slice(0, -1 * unit.length)); };
+
+var parseValue = function (value) {
+    if (value.endsWith('px'))
+        { return { value: value, type: 'px', numeric: numeric(value, 'px') } }
+    if (value.endsWith('fr'))
+        { return { value: value, type: 'fr', numeric: numeric(value, 'fr') } }
+    if (value.endsWith('%'))
+        { return { value: value, type: '%', numeric: numeric(value, '%') } }
+    if (value === 'auto') { return { value: value, type: 'auto' } }
+    return null
+};
+
+var parse = function (rule) { return rule.split(' ').map(parseValue); };
+
+var getSizeAtTrack = function (index, tracks, gap, end) {
+    if ( gap === void 0 ) { gap = 0; }
+    if ( end === void 0 ) { end = false; }
+
+    var newIndex = end ? index + 1 : index;
+    var trackSum = tracks
+        .slice(0, newIndex)
+        .reduce(function (accum, value) { return accum + value.numeric; }, 0);
+    var gapSum = gap ? index * gap : 0;
+
+    return trackSum + gapSum
+};
+
+var getStyles = function (rule, ownRules, matchedRules) { return ownRules.concat( matchedRules)
+        .map(function (r) { return r.style[rule]; })
+        .filter(function (style) { return style !== undefined && style !== ''; }); };
+
+var getGapValue = function (unit, size) {
+    if (size.endsWith(unit)) {
+        return Number(size.slice(0, -1 * unit.length))
+    }
+    return null
+};
+
+var firstNonZero = function (tracks) {
+    // eslint-disable-next-line no-plusplus
+    for (var i = 0; i < tracks.length; i++) {
+        if (tracks[i].numeric > 0) {
+            return i
+        }
+    }
+    return null
+};
+
+var NOOP = function () { return false; };
+
+var defaultWriteStyle = function (element, gridTemplateProp, style) {
+    // eslint-disable-next-line no-param-reassign
+    element.style[gridTemplateProp] = style;
+};
+
+var getOption = function (options, propName, def) {
+    var value = options[propName];
+    if (value !== undefined) {
+        return value
+    }
+    return def
+};
+
+function getMatchedCSSRules (el) {
+        var ref;
+
+        return (ref = [])
+        .concat.apply(
+            ref, Array.from(el.ownerDocument.styleSheets).map(function (s) {
+                var rules = [];
+
+                try {
+                    rules = Array.from(s.cssRules || []);
+                } catch (e) {
+                    // Ignore results on security error
+                }
+
+                return rules
+            })
+        )
+        .filter(function (r) {
+            var matches = false;
+            try {
+                matches = el.matches(r.selectorText);
+            } catch (e) {
+                // Ignore matching erros
+            }
+
+            return matches
+        });
+}
+
+var gridTemplatePropColumns = 'grid-template-columns';
+var gridTemplatePropRows = 'grid-template-rows';
+
+var Gutter = function Gutter(direction, options, parentOptions) {
+    this.direction = direction;
+    this.element = options.element;
+    this.track = options.track;
+
+    if (direction === 'column') {
+        this.gridTemplateProp = gridTemplatePropColumns;
+        this.gridGapProp = 'grid-column-gap';
+        this.cursor = getOption(
+            parentOptions,
+            'columnCursor',
+            getOption(parentOptions, 'cursor', 'col-resize')
+        );
+        this.snapOffset = getOption(
+            parentOptions,
+            'columnSnapOffset',
+            getOption(parentOptions, 'snapOffset', 30)
+        );
+        this.dragInterval = getOption(
+            parentOptions,
+            'columnDragInterval',
+            getOption(parentOptions, 'dragInterval', 1)
+        );
+        this.clientAxis = 'clientX';
+        this.optionStyle = getOption(parentOptions, 'gridTemplateColumns');
+    } else if (direction === 'row') {
+        this.gridTemplateProp = gridTemplatePropRows;
+        this.gridGapProp = 'grid-row-gap';
+        this.cursor = getOption(
+            parentOptions,
+            'rowCursor',
+            getOption(parentOptions, 'cursor', 'row-resize')
+        );
+        this.snapOffset = getOption(
+            parentOptions,
+            'rowSnapOffset',
+            getOption(parentOptions, 'snapOffset', 30)
+        );
+        this.dragInterval = getOption(
+            parentOptions,
+            'rowDragInterval',
+            getOption(parentOptions, 'dragInterval', 1)
+        );
+        this.clientAxis = 'clientY';
+        this.optionStyle = getOption(parentOptions, 'gridTemplateRows');
+    }
+
+    this.onDragStart = getOption(parentOptions, 'onDragStart', NOOP);
+    this.onDragEnd = getOption(parentOptions, 'onDragEnd', NOOP);
+    this.onDrag = getOption(parentOptions, 'onDrag', NOOP);
+    this.writeStyle = getOption(
+        parentOptions,
+        'writeStyle',
+        defaultWriteStyle
+    );
+
+    this.startDragging = this.startDragging.bind(this);
+    this.stopDragging = this.stopDragging.bind(this);
+    this.drag = this.drag.bind(this);
+
+    this.minSizeStart = options.minSizeStart;
+    this.minSizeEnd = options.minSizeEnd;
+
+    if (options.element) {
+        this.element.addEventListener('mousedown', this.startDragging);
+        this.element.addEventListener('touchstart', this.startDragging);
+    }
+};
+
+Gutter.prototype.getDimensions = function getDimensions () {
+    var ref = this.grid.getBoundingClientRect();
+        var width = ref.width;
+        var height = ref.height;
+        var top = ref.top;
+        var bottom = ref.bottom;
+        var left = ref.left;
+        var right = ref.right;
+
+    if (this.direction === 'column') {
+        this.start = top;
+        this.end = bottom;
+        this.size = height;
+    } else if (this.direction === 'row') {
+        this.start = left;
+        this.end = right;
+        this.size = width;
+    }
+};
+
+Gutter.prototype.getSizeAtTrack = function getSizeAtTrack$1 (track, end) {
+    return getSizeAtTrack(
+        track,
+        this.computedPixels,
+        this.computedGapPixels,
+        end
+    )
+};
+
+Gutter.prototype.getSizeOfTrack = function getSizeOfTrack (track) {
+    return this.computedPixels[track].numeric
+};
+
+Gutter.prototype.getRawTracks = function getRawTracks () {
+    var tracks = getStyles(
+        this.gridTemplateProp,
+        [this.grid],
+        getMatchedCSSRules(this.grid)
+    );
+    if (!tracks.length) {
+        if (this.optionStyle) { return this.optionStyle }
+
+        throw Error('Unable to determine grid template tracks from styles.')
+    }
+    return tracks[0]
+};
+
+Gutter.prototype.getGap = function getGap () {
+    var gap = getStyles(
+        this.gridGapProp,
+        [this.grid],
+        getMatchedCSSRules(this.grid)
+    );
+    if (!gap.length) {
+        return null
+    }
+    return gap[0]
+};
+
+Gutter.prototype.getRawComputedTracks = function getRawComputedTracks () {
+    return window.getComputedStyle(this.grid)[this.gridTemplateProp]
+};
+
+Gutter.prototype.getRawComputedGap = function getRawComputedGap () {
+    return window.getComputedStyle(this.grid)[this.gridGapProp]
+};
+
+Gutter.prototype.setTracks = function setTracks (raw) {
+    this.tracks = raw.split(' ');
+    this.trackValues = parse(raw);
+};
+
+Gutter.prototype.setComputedTracks = function setComputedTracks (raw) {
+    this.computedTracks = raw.split(' ');
+    this.computedPixels = parse(raw);
+};
+
+Gutter.prototype.setGap = function setGap (raw) {
+    this.gap = raw;
+};
+
+Gutter.prototype.setComputedGap = function setComputedGap (raw) {
+    this.computedGap = raw;
+    this.computedGapPixels = getGapValue('px', this.computedGap) || 0;
+};
+
+Gutter.prototype.getMousePosition = function getMousePosition (e) {
+    if ('touches' in e) { return e.touches[0][this.clientAxis] }
+    return e[this.clientAxis]
+};
+
+Gutter.prototype.startDragging = function startDragging (e) {
+    if ('button' in e && e.button !== 0) {
+        return
+    }
+
+    // Don't actually drag the element. We emulate that in the drag function.
+    e.preventDefault();
+
+    if (this.element) {
+        this.grid = this.element.parentNode;
+    } else {
+        this.grid = e.target.parentNode;
+    }
+
+    this.getDimensions();
+    this.setTracks(this.getRawTracks());
+    this.setComputedTracks(this.getRawComputedTracks());
+    this.setGap(this.getGap());
+    this.setComputedGap(this.getRawComputedGap());
+
+    var trackPercentage = this.trackValues.filter(
+        function (track) { return track.type === '%'; }
+    );
+    var trackFr = this.trackValues.filter(function (track) { return track.type === 'fr'; });
+
+    this.totalFrs = trackFr.length;
+
+    if (this.totalFrs) {
+        var track = firstNonZero(trackFr);
+
+        if (track !== null) {
+            this.frToPixels =
+                this.computedPixels[track].numeric / trackFr[track].numeric;
+        }
+    }
+
+    if (trackPercentage.length) {
+        var track$1 = firstNonZero(trackPercentage);
+
+        if (track$1 !== null) {
+            this.percentageToPixels =
+                this.computedPixels[track$1].numeric /
+                trackPercentage[track$1].numeric;
+        }
+    }
+
+    // get start of gutter track
+    var gutterStart = this.getSizeAtTrack(this.track, false) + this.start;
+    this.dragStartOffset = this.getMousePosition(e) - gutterStart;
+
+    this.aTrack = this.track - 1;
+
+    if (this.track < this.tracks.length - 1) {
+        this.bTrack = this.track + 1;
+    } else {
+        throw Error(
+            ("Invalid track index: " + (this.track) + ". Track must be between two other tracks and only " + (this.tracks.length) + " tracks were found.")
+        )
+    }
+
+    this.aTrackStart = this.getSizeAtTrack(this.aTrack, false) + this.start;
+    this.bTrackEnd = this.getSizeAtTrack(this.bTrack, true) + this.start;
+
+    // Set the dragging property of the pair object.
+    this.dragging = true;
+
+    // All the binding. `window` gets the stop events in case we drag out of the elements.
+    window.addEventListener('mouseup', this.stopDragging);
+    window.addEventListener('touchend', this.stopDragging);
+    window.addEventListener('touchcancel', this.stopDragging);
+    window.addEventListener('mousemove', this.drag);
+    window.addEventListener('touchmove', this.drag);
+
+    // Disable selection. Disable!
+    this.grid.addEventListener('selectstart', NOOP);
+    this.grid.addEventListener('dragstart', NOOP);
+
+    this.grid.style.userSelect = 'none';
+    this.grid.style.webkitUserSelect = 'none';
+    this.grid.style.MozUserSelect = 'none';
+    this.grid.style.pointerEvents = 'none';
+
+    // Set the cursor at multiple levels
+    this.grid.style.cursor = this.cursor;
+    window.document.body.style.cursor = this.cursor;
+
+    this.onDragStart(this.direction, this.track);
+};
+
+Gutter.prototype.stopDragging = function stopDragging () {
+    this.dragging = false;
+
+    // Remove the stored event listeners. This is why we store them.
+    this.cleanup();
+
+    this.onDragEnd(this.direction, this.track);
+
+    if (this.needsDestroy) {
+        if (this.element) {
+            this.element.removeEventListener(
+                'mousedown',
+                this.startDragging
+            );
+            this.element.removeEventListener(
+                'touchstart',
+                this.startDragging
+            );
+        }
+        this.destroyCb();
+        this.needsDestroy = false;
+        this.destroyCb = null;
+    }
+};
+
+Gutter.prototype.drag = function drag (e) {
+    var mousePosition = this.getMousePosition(e);
+
+    var gutterSize = this.getSizeOfTrack(this.track);
+    var minMousePosition =
+        this.aTrackStart +
+        this.minSizeStart +
+        this.dragStartOffset +
+        this.computedGapPixels;
+    var maxMousePosition =
+        this.bTrackEnd -
+        this.minSizeEnd -
+        this.computedGapPixels -
+        (gutterSize - this.dragStartOffset);
+    var minMousePositionOffset = minMousePosition + this.snapOffset;
+    var maxMousePositionOffset = maxMousePosition - this.snapOffset;
+
+    if (mousePosition < minMousePositionOffset) {
+        mousePosition = minMousePosition;
+    }
+
+    if (mousePosition > maxMousePositionOffset) {
+        mousePosition = maxMousePosition;
+    }
+
+    if (mousePosition < minMousePosition) {
+        mousePosition = minMousePosition;
+    } else if (mousePosition > maxMousePosition) {
+        mousePosition = maxMousePosition;
+    }
+
+    var aTrackSize =
+        mousePosition -
+        this.aTrackStart -
+        this.dragStartOffset -
+        this.computedGapPixels;
+    var bTrackSize =
+        this.bTrackEnd -
+        mousePosition +
+        this.dragStartOffset -
+        gutterSize -
+        this.computedGapPixels;
+
+    if (this.dragInterval > 1) {
+        var aTrackSizeIntervaled =
+            Math.round(aTrackSize / this.dragInterval) * this.dragInterval;
+        bTrackSize -= aTrackSizeIntervaled - aTrackSize;
+        aTrackSize = aTrackSizeIntervaled;
+    }
+
+    if (aTrackSize < this.minSizeStart) {
+        aTrackSize = this.minSizeStart;
+    }
+
+    if (bTrackSize < this.minSizeEnd) {
+        bTrackSize = this.minSizeEnd;
+    }
+
+    if (this.trackValues[this.aTrack].type === 'px') {
+        this.tracks[this.aTrack] = aTrackSize + "px";
+    } else if (this.trackValues[this.aTrack].type === 'fr') {
+        if (this.totalFrs === 1) {
+            this.tracks[this.aTrack] = '1fr';
+        } else {
+            var targetFr = aTrackSize / this.frToPixels;
+            this.tracks[this.aTrack] = targetFr + "fr";
+        }
+    } else if (this.trackValues[this.aTrack].type === '%') {
+        var targetPercentage = aTrackSize / this.percentageToPixels;
+        this.tracks[this.aTrack] = targetPercentage + "%";
+    }
+
+    if (this.trackValues[this.bTrack].type === 'px') {
+        this.tracks[this.bTrack] = bTrackSize + "px";
+    } else if (this.trackValues[this.bTrack].type === 'fr') {
+        if (this.totalFrs === 1) {
+            this.tracks[this.bTrack] = '1fr';
+        } else {
+            var targetFr$1 = bTrackSize / this.frToPixels;
+            this.tracks[this.bTrack] = targetFr$1 + "fr";
+        }
+    } else if (this.trackValues[this.bTrack].type === '%') {
+        var targetPercentage$1 = bTrackSize / this.percentageToPixels;
+        this.tracks[this.bTrack] = targetPercentage$1 + "%";
+    }
+
+    var style = this.tracks.join(' ');
+    this.writeStyle(this.grid, this.gridTemplateProp, style);
+    this.onDrag(this.direction, this.track, style);
+};
+
+Gutter.prototype.cleanup = function cleanup () {
+    window.removeEventListener('mouseup', this.stopDragging);
+    window.removeEventListener('touchend', this.stopDragging);
+    window.removeEventListener('touchcancel', this.stopDragging);
+    window.removeEventListener('mousemove', this.drag);
+    window.removeEventListener('touchmove', this.drag);
+
+    if (this.grid) {
+        this.grid.removeEventListener('selectstart', NOOP);
+        this.grid.removeEventListener('dragstart', NOOP);
+
+        this.grid.style.userSelect = '';
+        this.grid.style.webkitUserSelect = '';
+        this.grid.style.MozUserSelect = '';
+        this.grid.style.pointerEvents = '';
+
+        this.grid.style.cursor = '';
+    }
+
+    window.document.body.style.cursor = '';
+};
+
+Gutter.prototype.destroy = function destroy (immediate, cb) {
+        if ( immediate === void 0 ) immediate = true;
+
+    if (immediate || this.dragging === false) {
+        this.cleanup();
+        if (this.element) {
+            this.element.removeEventListener(
+                'mousedown',
+                this.startDragging
+            );
+            this.element.removeEventListener(
+                'touchstart',
+                this.startDragging
+            );
+        }
+
+        if (cb) {
+            cb();
+        }
+    } else {
+        this.needsDestroy = true;
+        if (cb) {
+            this.destroyCb = cb;
+        }
+    }
+};
+
+var getTrackOption = function (options, track, defaultValue) {
+    if (track in options) {
+        return options[track]
+    }
+
+    return defaultValue
+};
+
+var createGutter = function (direction, options) { return function (gutterOptions) {
+    if (gutterOptions.track < 1) {
+        throw Error(
+            ("Invalid track index: " + (gutterOptions.track) + ". Track must be between two other tracks.")
+        )
+    }
+
+    var trackMinSizes =
+        direction === 'column'
+            ? options.columnMinSizes || {}
+            : options.rowMinSizes || {};
+    var trackMinSize = direction === 'column' ? 'columnMinSize' : 'rowMinSize';
+
+    return new Gutter(
+        direction,
+        Object.assign({}, {minSizeStart: getTrackOption(
+                trackMinSizes,
+                gutterOptions.track - 1,
+                getOption(
+                    options,
+                    trackMinSize,
+                    getOption(options, 'minSize', 0)
+                )
+            ),
+            minSizeEnd: getTrackOption(
+                trackMinSizes,
+                gutterOptions.track + 1,
+                getOption(
+                    options,
+                    trackMinSize,
+                    getOption(options, 'minSize', 0)
+                )
+            )},
+            gutterOptions),
+        options
+    )
+}; };
+
+var Grid = function Grid(options) {
+    var this$1 = this;
+
+    this.columnGutters = {};
+    this.rowGutters = {};
+
+    this.options = Object.assign({}, {columnGutters: options.columnGutters || [],
+        rowGutters: options.rowGutters || [],
+        columnMinSizes: options.columnMinSizes || {},
+        rowMinSizes: options.rowMinSizes || {}},
+        options);
+
+    this.options.columnGutters.forEach(function (gutterOptions) {
+        this$1.columnGutters[gutterOptions.track] = createGutter(
+            'column',
+            this$1.options
+        )(gutterOptions);
+    });
+
+    this.options.rowGutters.forEach(function (gutterOptions) {
+        this$1.rowGutters[gutterOptions.track] = createGutter(
+            'row',
+            this$1.options
+        )(gutterOptions);
+    });
+};
+
+Grid.prototype.addColumnGutter = function addColumnGutter (element, track) {
+    if (this.columnGutters[track]) {
+        this.columnGutters[track].destroy();
+    }
+
+    this.columnGutters[track] = createGutter(
+        'column',
+        this.options
+    )({
+        element: element,
+        track: track,
+    });
+};
+
+Grid.prototype.addRowGutter = function addRowGutter (element, track) {
+    if (this.rowGutters[track]) {
+        this.rowGutters[track].destroy();
+    }
+
+    this.rowGutters[track] = createGutter(
+        'row',
+        this.options
+    )({
+        element: element,
+        track: track,
+    });
+};
+
+Grid.prototype.removeColumnGutter = function removeColumnGutter (track, immediate) {
+        var this$1 = this;
+        if ( immediate === void 0 ) immediate = true;
+
+    if (this.columnGutters[track]) {
+        this.columnGutters[track].destroy(immediate, function () {
+            delete this$1.columnGutters[track];
+        });
+    }
+};
+
+Grid.prototype.removeRowGutter = function removeRowGutter (track, immediate) {
+        var this$1 = this;
+        if ( immediate === void 0 ) immediate = true;
+
+    if (this.rowGutters[track]) {
+        this.rowGutters[track].destroy(immediate, function () {
+            delete this$1.rowGutters[track];
+        });
+    }
+};
+
+Grid.prototype.handleDragStart = function handleDragStart (e, direction, track) {
+    if (direction === 'column') {
+        if (this.columnGutters[track]) {
+            this.columnGutters[track].destroy();
+        }
+
+        this.columnGutters[track] = createGutter(
+            'column',
+            this.options
+        )({
+            track: track,
+        });
+        this.columnGutters[track].startDragging(e);
+    } else if (direction === 'row') {
+        if (this.rowGutters[track]) {
+            this.rowGutters[track].destroy();
+        }
+
+        this.rowGutters[track] = createGutter(
+            'row',
+            this.options
+        )({
+            track: track,
+        });
+        this.rowGutters[track].startDragging(e);
+    }
+};
+
+Grid.prototype.destroy = function destroy (immediate) {
+        var this$1 = this;
+        if ( immediate === void 0 ) immediate = true;
+
+    Object.keys(this.columnGutters).forEach(function (track) { return this$1.columnGutters[track].destroy(immediate, function () {
+            delete this$1.columnGutters[track];
+        }); }
+    );
+    Object.keys(this.rowGutters).forEach(function (track) { return this$1.rowGutters[track].destroy(immediate, function () {
+            delete this$1.rowGutters[track];
+        }); }
+    );
+};
+
+function index (options) { return new Grid(options); }
+
+const ezSplitPanelCss = ".ez-split-gutter{cursor:grab;background-color:transparent}";
+
+const SplitPanel = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this._items = [];
+    this.direction = 'column';
+  }
+  componentDidLoad() {
+    this._panelID = StringUtils$1.generateUUID();
+    this._element.dataset.panelId = this._panelID;
+    let itemsElements = Array.from(this._element.children);
+    this._items = itemsElements.filter(child => { var _a; return ((_a = child.tagName) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'EZ-SPLIT-ITEM'; });
+    let trackCount = 1;
+    this._items.forEach((item, index) => {
+      item.dataset.trackNumber = trackCount.toString();
+      if (this._items.length > 1 && index != this._items.length - 1) {
+        this.addItemGutter(item);
+      }
+      trackCount += 2;
+    });
+    this.initSplit();
+  }
+  initSplit() {
+    if (!this._items.length) {
+      return;
+    }
+    this._element.style[this.direction == 'row' ? 'grid-template-rows' : 'grid-template-columns'] = this.getGridTemplate();
+    index(this.getGutters());
+  }
+  getGutters() {
+    const gutters = {
+      columnGutters: [],
+      rowGutters: []
+    };
+    if (!this._items.length) {
+      return gutters;
+    }
+    const proToChange = this.direction == 'row' ? 'rowGutters' : 'columnGutters';
+    this._items.forEach((item, index) => {
+      if (index == this._items.length - 1)
+        return;
+      let gutterTrack = item.dataset.trackNumber;
+      if (index === (this._items.length - 1)) {
+        gutterTrack = this._items.length.toString();
+      }
+      gutters[proToChange].push({
+        track: Number(gutterTrack),
+        element: this._element.querySelector(`ez-split-panel[data-panel-id="${this._panelID}"] > [data-item-track="${item.dataset.trackNumber}"]`)
+      });
+    });
+    return gutters;
+  }
+  addItemGutter(item) {
+    const gutter = document.createElement('div');
+    gutter.classList.add("ez-split-gutter");
+    gutter.classList.add(this.direction);
+    gutter.dataset.itemTrack = `${item.dataset.trackNumber}`;
+    gutter.dataset.trackNumber = (Number(item.dataset.trackNumber) + 1).toString();
+    item.parentNode.insertBefore(gutter, item.nextSibling);
+  }
+  getElementStyle() {
+    const style = {
+      'display': "grid",
+      'height': '100%',
+      'width': '100%'
+    };
+    return style;
+  }
+  getGridTemplate() {
+    let template = '';
+    this._items.forEach((_col, index) => {
+      if (index === this._items.length - 1) {
+        template += ` 1fr`;
+        return;
+      }
+      if (index === 0) {
+        template += `1fr 5px`;
+        return;
+      }
+      template += ` 1fr 5px`;
+    });
+    return template;
+  }
+  render() {
+    return (h(Host, { style: this.getElementStyle() }));
+  }
+  get _element() { return this; }
+  static get style() { return ezSplitPanelCss; }
+};
+
 const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.middle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;background-color:unset;min-width:100px;max-width:260px;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Roboto\");font-size:var(--title--small, 14px);flex-shrink:0}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}.left-icon{padding-right:var(--space--small)}.right-icon{padding-left:var(--space--small)}";
 
 const EzTabselector$1 = class extends HTMLElement$1 {
@@ -128245,6 +129027,7 @@ const EzTextInput$1 = class extends HTMLElement$1 {
     this.restrict = undefined;
     this.mode = "regular";
     this.noBorder = false;
+    this.password = false;
   }
   observeErrorMessage() {
     if (this._inputElem) {
@@ -128457,7 +129240,7 @@ const EzTextInput$1 = class extends HTMLElement$1 {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, { style: this._hostElement.classList.contains("grid_editor") ? { "height": "100%" } : null }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
       h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
-      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
+      : null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
       h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage, "data-element-id": ElementIDUtils.getInternalIDInfo("message_box") }, this.errorMessage)));
   }
   get _hostElement() { return this; }
@@ -129971,10 +130754,12 @@ const EzScroller = /*@__PURE__*/proxyCustomElement(EzScroller$1, [1,"ez-scroller
 const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"canShowError":[516,"can-show-error"],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"ignoreLimitCharsToSearch":[4,"ignore-limit-chars-to-search"]}]);
 const EzSidebarButton = /*@__PURE__*/proxyCustomElement(EzSidebarButton$1, [1,"ez-sidebar-button"]);
 const EzSkeleton = /*@__PURE__*/proxyCustomElement(EzSkeleton$1, [0,"ez-skeleton",{"count":[2],"variant":[1],"width":[1],"height":[1],"marginBottom":[1,"margin-bottom"],"animation":[1]}]);
+const EzSplitItem = /*@__PURE__*/proxyCustomElement(SplitItem, [0,"ez-split-item"]);
+const EzSplitPanel = /*@__PURE__*/proxyCustomElement(SplitPanel, [0,"ez-split-panel",{"direction":[1]}]);
 const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]);
 const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"enableResize":[516,"enable-resize"]}]);
 const EzTextEdit = /*@__PURE__*/proxyCustomElement(EzTextEdit$1, [1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32]}]);
-const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"]}]);
+const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"password":[4]}]);
 const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"canShowError":[516,"can-show-error"]}]);
 const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"]}]);
 const EzTree = /*@__PURE__*/proxyCustomElement(EzTree$1, [1,"ez-tree",{"items":[1040],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_tree":[32],"_waintingForLoad":[32]},[[2,"keydown","onKeyDownListener"]]]);
@@ -130022,6 +130807,8 @@ const defineCustomElements = (opts) => {
   EzSearch,
   EzSidebarButton,
   EzSkeleton,
+  EzSplitItem,
+  EzSplitPanel,
   EzTabselector,
   EzTextArea,
   EzTextEdit,
@@ -130041,4 +130828,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSkeleton, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, defineCustomElements };
+export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzDateInput, EzDateTimeInput, EzDialog, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSidebarButton, EzSkeleton, EzSplitItem, EzSplitPanel, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, defineCustomElements };