@revolist/revogrid 4.9.28 → 4.9.30

package/dist/revo-grid/revogr-filter-panel.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["closest","Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","s","el","this","call","parentElement","parentNode","nodeType","filterStyleCss","RevogrFilterPanelStyle0","defaultType","FILTER_LIST_CLASS","FILTER_LIST_CLASS_ACTION","FILTER_ID","FilterPanel","filterCaptionsInternal","title","save","reset","cancel","add","placeholder","and","or","debouncedApplyFilter","debounce","filterChange","emit","filterItems","onMouseDown","e","changes","defaultPrevented","path","composedPath","select","document","getElementById","HTMLSelectElement","includes","value","currentFilterType","type","currentFilterId","isOutside","element","target","HTMLElement","isFilterBtn","undefined","show","newEntity","getChanges","componentWillRender","isFilterIdSet","Object","keys","prop","filterId","length","getFilterItemsList","_a","propFilters","capts","assign","filterCaptions","h","key","map","d","index","andOrButton","onClick","toggleFilterAndOr","id","AndOrButton","text","relation","class","onChange","onFilterTypeChange","renderSelectOptions","onRemoveFilter","TrashButton","renderExtra","autoCorrect","pos","getBoundingClientRect","maxLeft","window","innerWidth","width","left","offsetLeft","style","_b","setTimeout","input","HTMLInputElement","focus","disableDynamicFiltering","onAddNewFilter","addNewFilterToProp","push","onUserInput","event","onKeyDown","toLowerCase","stopPropagation","onSave","onCancel","onReset","assertChanges","resetChange","items","findIndex","splice","Error","isDefaultTypeRemoved","options","selected","filterNames","gIndex","filterTypes","k","disabled","currentFilter","filterEntities","extra","onInput","bind","render","Host","display","x","top","y","ref","slot"],"sources":["src/utils/closest.polifill.ts","src/plugins/filter/filter.style.scss?tag=revogr-filter-panel","src/plugins/filter/filter.panel.tsx"],"sourcesContent":["(function closest() {\n  if (!Element.prototype.matches) {\n    Element.prototype.matches =\n      ((Element.prototype as unknown) as { msMatchesSelector: (selectors: string) => boolean }).msMatchesSelector || Element.prototype.webkitMatchesSelector;\n  }\n\n  if (!Element.prototype.closest) {\n    Element.prototype.closest = function (s: string) {\n      let el: HTMLElement | Element | (Node & ParentNode) | null = this;\n\n      do {\n        if (Element.prototype.matches.call(el, s)) {\n          return el;\n        }\n        el = el.parentElement || el.parentNode;\n      } while (el !== null && el.nodeType === 1);\n      return null;\n    };\n  }\n})();\n","revogr-filter-panel {\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 0;\n  z-index: 100;\n\n  opacity: 1;\n  transform: none;\n  background-color: #fff;\n  transform-origin: 62px 0px;\n  box-shadow: 0 5px 18px -2px rgba(black, 20%);\n  padding: 10px;\n  border-radius: 4px;\n\n  min-width: 220px;\n  text-align: left;\n\n  .filter-holder > div {\n    display: flex;\n    flex-direction: column;\n  }\n\n  label {\n    font-size: 13px;\n    display: block;\n    padding: 8px 0;\n  }\n\n  select {\n    width: 100%;\n  }\n\n  input[type='text'] {\n    border: 0;\n    min-height: 34px;\n    margin: 5px 0;\n    background: #f3f3f3;\n    border-radius: 5px;\n    padding: 0 10px;\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  button {\n    margin-top: 10px;\n    margin-right: 5px;\n  }\n\n  .filter-actions {\n    text-align: right;\n    margin-right: -5px;\n  }\n}\n\n.rgHeaderCell {\n  &:hover .rv-filter {\n    transition:\n      opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n      transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  }\n  &:hover .rv-filter,\n  .rv-filter.active {\n    opacity: 1;\n  }\n\n  .rv-filter {\n    $btn-size: 24px;\n    height: $btn-size;\n    width: $btn-size;\n    background: none;\n    border: 0;\n    opacity: 0;\n    visibility: visible;\n    cursor: pointer;\n    border-radius: 4px;\n\n    &.active {\n      color: #10224a;\n    }\n\n    .filter-img {\n      $img-size: 11px;\n      color: gray;\n      width: $img-size;\n    }\n  }\n}\n\n.select-css {\n  $gradient: 'data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E';\n  $linearGradient: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);\n  $borderColor: #f1f1f1;\n\n  display: block;\n  font-family: sans-serif;\n  font-weight: 600;\n  color: #444;\n  line-height: 1.3;\n  padding: 0.6em 1.4em 0.5em 0.8em;\n  width: 100%;\n  max-width: 100%; /* useful when width is set to anything other than 100% */\n  box-sizing: border-box;\n  margin: 0;\n  border: 1px solid $borderColor;\n  box-shadow: transparent;\n  border-radius: 0.5em;\n  appearance: none;\n  background-color: #fff;\n  background-image: url($gradient), $linearGradient;\n  background-repeat: no-repeat, repeat;\n  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/\n  background-position:\n    right 0.7em top 50%,\n    0 0;\n  /* icon size, then gradient */\n  background-size:\n    0.65em auto,\n    100%;\n\n  /* Hide arrow icon in IE browsers */\n  &::-ms-expand {\n    display: none;\n  }\n  /* Hover style */\n  &:hover {\n    border-color: rgb(197, 197, 197);\n  }\n  /* Focus style */\n  &:focus {\n    border-color: $borderColor;\n    box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);\n    box-shadow: 0 0 0 3px -moz-mac-focusring;\n    color: #222;\n    outline: none;\n  }\n\n  /* Set options to normal weight */\n  option {\n    font-weight: normal;\n  }\n\n  /* Disabled styles */\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: gray;\n    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),\n      linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);\n  }\n\n  &:disabled:hover,\n  &[aria-disabled='true'] {\n    border-color: $borderColor;\n  }\n}\n\n.multi-filter-list {\n  margin-top: 5px;\n  margin-bottom: 5px;\n\n  div {\n    white-space: nowrap;\n  }\n\n  .multi-filter-list-action {\n    display: flex;\n\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .and-or-button {\n    margin: 0 0 0 10px;\n    min-width: 58px;\n    cursor: pointer;\n  }\n  .trash-button {\n    $btn-remove-size: 22px;\n    margin: 0 0 -2px 6px;\n    cursor: pointer;\n\n    width: $btn-remove-size;\n    height: 100%;\n    font-size: 16px;\n\n    .trash-img {\n      width: 1em;\n    }\n  }\n}\n\n.add-filter-divider {\n  display: block;\n  margin: 0 -10px 10px -10px;\n\n  border-bottom: 1px solid #d9d9d9;\n  height: 10px;\n}\n\n.select-input {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n","import {\n  h,\n  Component,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Element,\n} from '@stencil/core';\nimport debounce from 'lodash/debounce';\n\nimport { AndOrButton, isFilterBtn, TrashButton } from './filter.button';\nimport '../../utils/closest.polifill';\nimport { FilterCaptions, LogicFunction, MultiFilterItem, ShowData } from './filter.types';\nimport { ColumnProp } from '@type';\nimport { FilterType } from './filter.indexed';\n\n\nconst defaultType: FilterType = 'none';\n\nconst FILTER_LIST_CLASS = 'multi-filter-list';\nconst FILTER_LIST_CLASS_ACTION = 'multi-filter-list-action';\nconst FILTER_ID = 'add-filter';\n\n/**\n * Filter panel for editing filters\n */\n/**\n * @internal\n */\n@Component({\n  tag: 'revogr-filter-panel',\n  styleUrl: 'filter.style.scss',\n})\nexport class FilterPanel {\n  private filterCaptionsInternal: FilterCaptions = {\n    title: 'Filter by',\n    save: 'Save',\n    // drops the filter\n    reset: 'Clear changes',\n    cancel: 'Close',\n    add: 'Add more condition...',\n    placeholder: 'Enter value...',\n    and: 'and',\n    or: 'or',\n  };\n\n  @Element() element!: HTMLElement;\n  @State() isFilterIdSet = false;\n  @State() filterId = 0;\n  @State() currentFilterId = -1;\n  @State() currentFilterType: FilterType = defaultType;\n  @State() changes: ShowData | undefined;\n  @Prop() filterItems: MultiFilterItem = {};\n  @Prop() filterNames: Record<string, string> = {};\n  @Prop() filterEntities: Record<string, LogicFunction> = {};\n  @Prop() filterCaptions: FilterCaptions | undefined;\n  @Prop() disableDynamicFiltering = false;\n\n  @Event() filterChange: EventEmitter<MultiFilterItem>;\n  @Event() resetChange: EventEmitter<ColumnProp>;\n\n  @Listen('mousedown', { target: 'document' }) onMouseDown(e: MouseEvent) {\n    // click on anything then select drops values to default\n    if (!this.changes || e.defaultPrevented) {\n      return;\n    }\n    const path = e.composedPath();\n    const select = document.getElementById(FILTER_ID);\n    if (select instanceof HTMLSelectElement) {\n      // click on select should be skipped\n      if (path.includes(select)) {\n        return;\n      }\n      select.value = defaultType;\n    }\n    this.currentFilterType = defaultType;\n    if (this.changes) {\n      this.changes.type = defaultType;\n    }\n    this.currentFilterId = -1;\n\n    const isOutside = !path.includes(this.element);\n\n    if (\n      e.target instanceof HTMLElement &&\n      isOutside &&\n      !isFilterBtn(e.target)\n    ) {\n      this.changes = undefined;\n    }\n  }\n\n  @Method() async show(newEntity?: ShowData) {\n    this.changes = newEntity;\n    if (this.changes) {\n      this.changes.type = this.changes.type || defaultType;\n    }\n  }\n\n  @Method() async getChanges() {\n    return this.changes;\n  }\n\n  componentWillRender() {\n    if (!this.isFilterIdSet) {\n      this.isFilterIdSet = true;\n      const filterItems = Object.keys(this.filterItems);\n      for (const prop of filterItems) {\n        // we set the proper filterId so there won't be any conflict when removing filters\n        this.filterId += this.filterItems[prop].length;\n      }\n    }\n  }\n\n  getFilterItemsList() {\n    const prop = this.changes?.prop;\n    if (!(prop || prop === 0)) return '';\n\n    const propFilters = this.filterItems[prop] || [];\n    const capts = Object.assign(\n      this.filterCaptionsInternal,\n      this.filterCaptions,\n    );\n    return (\n      <div key={this.filterId}>\n        {propFilters.map((d, index) => {\n          let andOrButton;\n\n          // hide toggle button if there is only one filter and the last one\n          if (index !== this.filterItems[prop].length - 1) {\n            andOrButton = (\n              <div onClick={() => this.toggleFilterAndOr(d.id)}>\n                <AndOrButton\n                  text={d.relation === 'and' ? capts.and : capts.or}\n                />\n              </div>\n            );\n          }\n\n          return (\n            <div key={d.id} class={FILTER_LIST_CLASS}>\n              <div class={{ 'select-input': true }}>\n                <select\n                  class=\"select-css select-filter\"\n                  onChange={e => this.onFilterTypeChange(e, prop, index)}\n                >\n                  {this.renderSelectOptions(\n                    this.filterItems[prop][index].type,\n                    true,\n                  )}\n                </select>\n                <div class={FILTER_LIST_CLASS_ACTION}>{andOrButton}</div>\n                <div onClick={() => this.onRemoveFilter(d.id)}>\n                  <TrashButton />\n                </div>\n              </div>\n              <div>{this.renderExtra(prop, index)}</div>\n            </div>\n          );\n        })}\n\n        {propFilters.length > 0 ? <div class=\"add-filter-divider\" /> : ''}\n      </div>\n    );\n  }\n\n  private autoCorrect(el?: HTMLElement | null) {\n    if (!el) {\n      return;\n    }\n    const pos = el.getBoundingClientRect();\n    const maxLeft = window.innerWidth - pos.width;\n\n    if (pos.left > maxLeft && el.offsetLeft) {\n      el.style.left = `${maxLeft - (el.parentElement?.getBoundingClientRect().left ?? 0)}px`;\n    }\n  }\n\n  private onFilterTypeChange(e: Event, prop: ColumnProp, index: number) {\n    if (!(e.target instanceof HTMLSelectElement)) {\n      return;\n    }\n    this.filterItems[prop][index].type = e.target.value as FilterType;\n\n    // this re-renders the input to know if we need extra input\n    this.filterId++;\n\n    // adding setTimeout will wait for the next tick DOM update then focus on input\n    setTimeout(() => {\n      const input = document.getElementById(\n        'filter-input-' + this.filterItems[prop][index].id,\n      );\n      if (input instanceof HTMLInputElement) {\n        input.focus();\n      }\n    }, 0);\n\n    if (!this.disableDynamicFiltering) this.debouncedApplyFilter();\n  }\n\n  private debouncedApplyFilter = debounce(() => {\n    this.filterChange.emit(this.filterItems);\n  }, 400);\n\n  private onAddNewFilter(e: Event) {\n    const el = e.target as HTMLSelectElement;\n    this.currentFilterType = el.value as FilterType;\n    this.addNewFilterToProp();\n\n    // reset value after adding new filter\n    const select = document.getElementById('add-filter') as HTMLSelectElement;\n    if (select) {\n      select.value = defaultType;\n      this.currentFilterType = defaultType;\n    }\n\n    if (!this.disableDynamicFiltering) this.debouncedApplyFilter();\n  }\n\n  private addNewFilterToProp() {\n    const prop = this.changes?.prop;\n    if (!(prop || prop === 0)) return;\n\n    if (!this.filterItems[prop]) {\n      this.filterItems[prop] = [];\n    }\n\n    if (this.currentFilterType === 'none') return;\n\n    this.filterId++;\n    this.currentFilterId = this.filterId;\n\n    this.filterItems[prop].push({\n      id: this.currentFilterId,\n      type: this.currentFilterType,\n      value: '',\n      relation: 'and',\n    });\n\n    // adding setTimeout will wait for the next tick DOM update then focus on input\n    setTimeout(() => {\n      const input = document.getElementById(\n        'filter-input-' + this.currentFilterId,\n      ) as HTMLInputElement;\n      if (input) input.focus();\n    }, 0);\n  }\n\n  private onUserInput(index: number, prop: ColumnProp, event: Event) {\n    // update the value of the filter item\n    this.filterItems[prop][index].value = (\n      event.target as HTMLInputElement\n    ).value;\n\n    if (!this.disableDynamicFiltering) this.debouncedApplyFilter();\n  }\n\n  private onKeyDown(e: KeyboardEvent) {\n    if (e.key.toLowerCase() === 'enter') {\n      const select = document.getElementById('add-filter') as HTMLSelectElement;\n      if (select) {\n        select.value = defaultType;\n        this.currentFilterType = defaultType;\n        this.addNewFilterToProp();\n        select.focus();\n      }\n      return;\n    }\n    // keep event local, don't escalate farther to dom\n    e.stopPropagation();\n  }\n\n  private onSave() {\n    this.filterChange.emit(this.filterItems);\n  }\n\n  private onCancel() {\n    this.changes = undefined;\n  }\n\n  private onReset() {\n    this.assertChanges();\n\n    this.resetChange.emit(this.changes?.prop);\n\n    // this updates the DOM which is used by getFilterItemsList() key\n    this.filterId++;\n  }\n\n  private onRemoveFilter(id: number) {\n    this.assertChanges();\n\n    // this is for reactivity issues for getFilterItemsList()\n    this.filterId++;\n\n    const prop = this.changes?.prop;\n\n    const items = this.filterItems[prop ?? ''];\n    if (!items) return;\n\n    const index = items.findIndex(d => d.id === id);\n    if (index === -1) return;\n    items.splice(index, 1);\n\n    // let's remove the prop if no more filters so the filter icon will be removed\n    if (items.length === 0) delete this.filterItems[prop ?? ''];\n\n    if (!this.disableDynamicFiltering) this.debouncedApplyFilter();\n  }\n\n  private toggleFilterAndOr(id: number) {\n    this.assertChanges();\n\n    // this is for reactivity issues for getFilterItemsList()\n    this.filterId++;\n\n    const prop = this.changes?.prop;\n\n    const items = this.filterItems[prop ?? ''];\n    if (!items) return;\n\n    const index = items.findIndex(d => d.id === id);\n    if (index === -1) return;\n\n    items[index].relation = items[index].relation === 'and' ? 'or' : 'and';\n    if (!this.disableDynamicFiltering) this.debouncedApplyFilter();\n  }\n\n  private assertChanges() {\n    if (!this.changes) {\n      throw new Error('Changes required per edit');\n    }\n  }\n\n\n  renderSelectOptions(type: FilterType, isDefaultTypeRemoved = false) {\n    if (!this.changes) {\n      return;\n    }\n    const options: VNode[] = [];\n    const prop = this.changes.prop;\n\n    if (!isDefaultTypeRemoved) {\n      const capts = Object.assign(\n        this.filterCaptionsInternal,\n        this.filterCaptions,\n      );\n\n      options.push(\n        <option\n          selected={this.currentFilterType === defaultType}\n          value={defaultType}\n        >\n          {prop && this.filterItems[prop] && this.filterItems[prop].length > 0\n            ? capts.add\n            : this.filterNames[defaultType]}\n        </option>,\n      );\n    }\n\n    for (let gIndex in this.changes.filterTypes) {\n      options.push(\n        ...this.changes.filterTypes[gIndex].map(k => (\n          <option value={k} selected={type === k}>\n            {this.filterNames[k]}\n          </option>\n        )),\n      );\n      options.push(<option disabled></option>);\n    }\n    return options;\n  }\n\n  renderExtra(prop: ColumnProp, index: number) {\n    const currentFilter = this.filterItems[prop];\n\n    if (!currentFilter) return '';\n\n    if (this.filterEntities[currentFilter[index].type].extra !== 'input')\n      return '';\n\n    const capts = Object.assign(\n      this.filterCaptionsInternal,\n      this.filterCaptions,\n    );\n\n    return (\n      <input\n        id={`filter-input-${currentFilter[index].id}`}\n        placeholder={capts.placeholder}\n        type=\"text\"\n        value={currentFilter[index].value}\n        onInput={this.onUserInput.bind(this, index, prop)}\n        onKeyDown={e => this.onKeyDown(e)}\n      />\n    );\n  }\n\n  render() {\n    if (!this.changes) {\n      return <Host style={{ display: 'none' }}></Host>;\n    }\n    const style = {\n      display: 'block',\n      left: `${this.changes.x}px`,\n      top: `${this.changes.y}px`,\n    };\n\n    const capts = Object.assign(\n      this.filterCaptionsInternal,\n      this.filterCaptions,\n    );\n\n    return (\n      <Host\n        style={style}\n        ref={el => {\n          this.changes?.autoCorrect && this.autoCorrect(el);\n        }}\n      >\n        <slot slot=\"header\" />\n        <label>{capts.title}</label>\n        <div class=\"filter-holder\">{this.getFilterItemsList()}</div>\n\n        <div class=\"add-filter\">\n          <select\n            id={FILTER_ID}\n            class=\"select-css\"\n            onChange={e => this.onAddNewFilter(e)}\n          >\n            {this.renderSelectOptions(this.currentFilterType)}\n          </select>\n        </div>\n        <slot />\n        <div class=\"filter-actions\">\n          {this.disableDynamicFiltering && (\n            <button\n              id=\"revo-button-save\"\n              aria-label=\"save\"\n              class=\"revo-button green\"\n              onClick={() => this.onSave()}\n            >\n              {capts.save}\n            </button>\n          )}\n          <button\n            id=\"revo-button-reset\"\n            aria-label=\"reset\"\n            class=\"revo-button light\"\n            onClick={() => this.onReset()}\n          >\n            {capts.reset}\n          </button>\n          <button\n            id=\"revo-button-cancel\"\n            aria-label=\"cancel\"\n            class=\"revo-button light\"\n            onClick={() => this.onCancel()}\n          >\n            {capts.cancel}\n          </button>\n        </div>\n        <slot slot=\"footer\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["closest","Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","s","el","this","call","parentElement","parentNode","nodeType","filterStyleCss","RevogrFilterPanelStyle0","defaultType","FILTER_LIST_CLASS","FILTER_LIST_CLASS_ACTION","FILTER_ID","FilterPanel","filterCaptionsInternal","title","ok","save","reset","cancel","add","placeholder","and","or","debouncedApplyFilter","debounce","filterChange","emit","filterItems","onMouseDown","e","changes","defaultPrevented","path","composedPath","select","document","getElementById","HTMLSelectElement","includes","value","currentFilterType","type","currentFilterId","isOutside","element","target","HTMLElement","isFilterBtn","undefined","show","newEntity","getChanges","componentWillRender","isFilterIdSet","Object","keys","prop","filterId","length","getFilterItemsList","_a","propFilters","capts","assign","filterCaptions","h","key","map","d","index","andOrButton","onClick","toggleFilterAndOr","id","AndOrButton","text","relation","class","onChange","onFilterTypeChange","renderSelectOptions","onRemoveFilter","TrashButton","renderExtra","autoCorrect","pos","getBoundingClientRect","maxLeft","window","innerWidth","width","left","offsetLeft","style","_b","setTimeout","input","HTMLInputElement","focus","disableDynamicFiltering","onAddNewFilter","addNewFilterToProp","push","onUserInput","event","onKeyDown","toLowerCase","stopPropagation","onSave","onCancel","onReset","assertChanges","resetChange","items","findIndex","splice","Error","isDefaultTypeRemoved","options","selected","filterNames","gIndex","filterTypes","k","disabled","currentFilter","filterEntities","extra","onInput","bind","render","Host","display","x","top","y","ref","slot"],"sources":["src/utils/closest.polifill.ts","src/plugins/filter/filter.style.scss?tag=revogr-filter-panel","src/plugins/filter/filter.panel.tsx"],"sourcesContent":["(function closest() {\n  if (!Element.prototype.matches) {\n    Element.prototype.matches =\n      ((Element.prototype as unknown) as { msMatchesSelector: (selectors: string) => boolean }).msMatchesSelector || Element.prototype.webkitMatchesSelector;\n  }\n\n  if (!Element.prototype.closest) {\n    Element.prototype.closest = function (s: string) {\n      let el: HTMLElement | Element | (Node & ParentNode) | null = this;\n\n      do {\n        if (Element.prototype.matches.call(el, s)) {\n          return el;\n        }\n        el = el.parentElement || el.parentNode;\n      } while (el !== null && el.nodeType === 1);\n      return null;\n    };\n  }\n})();\n","revogr-filter-panel {\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 0;\n  z-index: 100;\n  max-height: calc(100% - 80px);\n  min-width: 250px;\n  overflow: auto;\n\n  opacity: 1;\n  transform: none;\n  background-color: #fff;\n  transform-origin: 62px 0px;\n  box-shadow: 0 5px 18px -2px rgba(black, 20%);\n  padding: 10px;\n  border-radius: 4px;\n\n  min-width: 220px;\n  text-align: left;\n\n  .filter-holder > div {\n    display: flex;\n    flex-direction: column;\n  }\n\n  label {\n    font-size: 13px;\n    display: block;\n    padding: 8px 0;\n  }\n\n  select {\n    width: 100%;\n  }\n\n  input[type='text'] {\n    border: 0;\n    min-height: 34px;\n    margin: 5px 0;\n    background: #f3f3f3;\n    border-radius: 5px;\n    padding: 0 10px;\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  button {\n    margin-top: 10px;\n    margin-right: 5px;\n  }\n\n  .filter-actions {\n    text-align: right;\n    margin-right: -5px;\n  }\n}\n\n.rgHeaderCell {\n  &:hover .rv-filter {\n    transition:\n      opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n      transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  }\n  &:hover .rv-filter,\n  .rv-filter.active {\n    opacity: 1;\n  }\n\n  .rv-filter {\n    $btn-size: 24px;\n    height: $btn-size;\n    width: $btn-size;\n    background: none;\n    border: 0;\n    opacity: 0;\n    visibility: visible;\n    cursor: pointer;\n    border-radius: 4px;\n\n    &.active {\n      color: #10224a;\n    }\n\n    .filter-img {\n      $img-size: 11px;\n      color: gray;\n      width: $img-size;\n    }\n  }\n}\n\n.select-css {\n  $gradient: 'data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E';\n  $linearGradient: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);\n  $borderColor: #f1f1f1;\n\n  display: block;\n  font-family: sans-serif;\n  font-weight: 600;\n  color: #444;\n  line-height: 1.3;\n  padding: 0.6em 1.4em 0.5em 0.8em;\n  width: 100%;\n  max-width: 100%; /* useful when width is set to anything other than 100% */\n  box-sizing: border-box;\n  margin: 0;\n  border: 1px solid $borderColor;\n  box-shadow: transparent;\n  border-radius: 0.5em;\n  appearance: none;\n  background-color: #fff;\n  background-image: url($gradient), $linearGradient;\n  background-repeat: no-repeat, repeat;\n  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/\n  background-position:\n    right 0.7em top 50%,\n    0 0;\n  /* icon size, then gradient */\n  background-size:\n    0.65em auto,\n    100%;\n\n  /* Hide arrow icon in IE browsers */\n  &::-ms-expand {\n    display: none;\n  }\n  /* Hover style */\n  &:hover {\n    border-color: rgb(197, 197, 197);\n  }\n  /* Focus style */\n  &:focus {\n    border-color: $borderColor;\n    box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);\n    box-shadow: 0 0 0 3px -moz-mac-focusring;\n    color: #222;\n    outline: none;\n  }\n\n  /* Set options to normal weight */\n  option {\n    font-weight: normal;\n  }\n\n  /* Disabled styles */\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: gray;\n    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),\n      linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);\n  }\n\n  &:disabled:hover,\n  &[aria-disabled='true'] {\n    border-color: $borderColor;\n  }\n}\n\n.multi-filter-list {\n  margin-top: 5px;\n  margin-bottom: 5px;\n\n  div {\n    white-space: nowrap;\n  }\n\n  .multi-filter-list-action {\n    display: flex;\n\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .and-or-button {\n    margin: 0 0 0 10px;\n    min-width: 58px;\n    cursor: pointer;\n  }\n  .trash-button {\n    $btn-remove-size: 22px;\n    margin: 0 0 -2px 6px;\n    cursor: pointer;\n\n    width: $btn-remove-size;\n    height: 100%;\n    font-size: 16px;\n\n    .trash-img {\n      width: 1em;\n    }\n  }\n}\n\n.add-filter-divider {\n  display: block;\n  margin: 0 -10px 10px -10px;\n\n  border-bottom: 1px solid #d9d9d9;\n  height: 10px;\n}\n\n.select-input {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n","import {\n  h,\n  Component,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Element,\n} from '@stencil/core';\nimport debounce from 'lodash/debounce';\n\nimport { AndOrButton, isFilterBtn, TrashButton } from './filter.button';\nimport '../../utils/closest.polifill';\nimport {\n  FilterCaptions,\n  LogicFunction,\n  MultiFilterItem,\n  ShowData,\n} from './filter.types';\nimport { ColumnProp } from '@type';\nimport { FilterType } from './filter.indexed';\n\nconst defaultType: FilterType = 'none';\n\nconst FILTER_LIST_CLASS = 'multi-filter-list';\nconst FILTER_LIST_CLASS_ACTION = 'multi-filter-list-action';\nconst FILTER_ID = 'add-filter';\n\n/**\n * Filter panel for editing filters\n */\n/**\n * @internal\n */\n@Component({\n  tag: 'revogr-filter-panel',\n  styleUrl: 'filter.style.scss',\n})\nexport class FilterPanel {\n  private filterCaptionsInternal: FilterCaptions = {\n    title: 'Filter by',\n    ok: 'Ok',\n    save: 'Save',\n    // drops the filter\n    reset: 'Reset',\n    cancel: 'Cancel',\n    add: 'Add more condition...',\n    placeholder: 'Enter value...',\n    and: 'and',\n    or: 'or',\n  };\n\n  @Element() element!: HTMLElement;\n  @State() isFilterIdSet = false;\n  @State() filterId = 0;\n  @State() currentFilterId = -1;\n  @State() currentFilterType: FilterType = defaultType;\n  @State() changes: ShowData | undefined;\n  @Prop() filterItems: MultiFilterItem = {};\n  @Prop() filterNames: Record<string, string> = {};\n  @Prop() filterEntities: Record<string, LogicFunction> = {};\n  @Prop() filterCaptions: FilterCaptions | undefined;\n  /**\n   * Disables dynamic filtering. A way to apply filters on Save only\n   */\n  @Prop() disableDynamicFiltering = false;\n\n  @Event() filterChange: EventEmitter<MultiFilterItem>;\n  @Event() resetChange: EventEmitter<ColumnProp>;\n\n  @Listen('mousedown', { target: 'document' }) onMouseDown(e: MouseEvent) {\n    // click on anything then select drops values to default\n    if (!this.changes || e.defaultPrevented) {\n      return;\n    }\n    const path = e.composedPath();\n    const select = document.getElementById(FILTER_ID);\n    if (select instanceof HTMLSelectElement) {\n      // click on select should be skipped\n      if (path.includes(select)) {\n        return;\n      }\n      select.value = defaultType;\n    }\n    this.currentFilterType = defaultType;\n    if (this.changes) {\n      this.changes.type = defaultType;\n    }\n    this.currentFilterId = -1;\n\n    const isOutside = !path.includes(this.element);\n\n    if (\n      e.target instanceof HTMLElement &&\n      isOutside &&\n      !isFilterBtn(e.target)\n    ) {\n      this.changes = undefined;\n    }\n  }\n\n  @Method() async show(newEntity?: ShowData) {\n    this.changes = newEntity;\n    if (this.changes) {\n      this.changes.type = this.changes.type || defaultType;\n    }\n  }\n\n  @Method() async getChanges() {\n    return this.changes;\n  }\n\n  componentWillRender() {\n    if (!this.isFilterIdSet) {\n      this.isFilterIdSet = true;\n      const filterItems = Object.keys(this.filterItems);\n      for (const prop of filterItems) {\n        // we set the proper filterId so there won't be any conflict when removing filters\n        this.filterId += this.filterItems[prop].length;\n      }\n    }\n  }\n\n  getFilterItemsList() {\n    const prop = this.changes?.prop;\n    if (!(prop || prop === 0)) return '';\n\n    const propFilters = this.filterItems[prop] || [];\n    const capts = Object.assign(\n      this.filterCaptionsInternal,\n      this.filterCaptions,\n    );\n    return (\n      <div key={this.filterId}>\n        {propFilters.map((d, index) => {\n          let andOrButton;\n\n          // hide toggle button if there is only one filter and the last one\n          if (index !== this.filterItems[prop].length - 1) {\n            andOrButton = (\n              <div onClick={() => this.toggleFilterAndOr(d.id)}>\n                <AndOrButton\n                  text={d.relation === 'and' ? capts.and : capts.or}\n                />\n              </div>\n            );\n          }\n\n          return (\n            <div key={d.id} class={FILTER_LIST_CLASS}>\n              <div class={{ 'select-input': true }}>\n                <select\n                  class=\"select-css select-filter\"\n                  onChange={e => this.onFilterTypeChange(e, prop, index)}\n                >\n                  {this.renderSelectOptions(\n                    this.filterItems[prop][index].type,\n                    true,\n                  )}\n                </select>\n                <div class={FILTER_LIST_CLASS_ACTION}>{andOrButton}</div>\n                <div onClick={() => this.onRemoveFilter(d.id)}>\n                  <TrashButton />\n                </div>\n              </div>\n              <div>{this.renderExtra(prop, index)}</div>\n            </div>\n          );\n        })}\n\n        {propFilters.length > 0 ? <div class=\"add-filter-divider\" /> : ''}\n      </div>\n    );\n  }\n\n  private autoCorrect(el?: HTMLElement | null) {\n    if (!el) {\n      return;\n    }\n    const pos = el.getBoundingClientRect();\n    const maxLeft = window.innerWidth - pos.width;\n\n    if (pos.left > maxLeft && el.offsetLeft) {\n      el.style.left = `${maxLeft - (el.parentElement?.getBoundingClientRect().left ?? 0)}px`;\n    }\n  }\n\n  private onFilterTypeChange(e: Event, prop: ColumnProp, index: number) {\n    if (!(e.target instanceof HTMLSelectElement)) {\n      return;\n    }\n    this.filterItems[prop][index].type = e.target.value as FilterType;\n\n    // this re-renders the input to know if we need extra input\n    this.filterId++;\n\n    // adding setTimeout will wait for the next tick DOM update then focus on input\n    setTimeout(() => {\n      const input = document.getElementById(\n        'filter-input-' + this.filterItems[prop][index].id,\n      );\n      if (input instanceof HTMLInputElement) {\n        input.focus();\n      }\n    }, 0);\n\n    if (!this.disableDynamicFiltering) {\n      this.debouncedApplyFilter();\n    }\n  }\n\n  private debouncedApplyFilter = debounce(() => {\n    this.filterChange.emit(this.filterItems);\n  }, 400);\n\n  private onAddNewFilter(e: Event) {\n    const el = e.target as HTMLSelectElement;\n    this.currentFilterType = el.value as FilterType;\n    this.addNewFilterToProp();\n\n    // reset value after adding new filter\n    const select = document.getElementById('add-filter') as HTMLSelectElement;\n    if (select) {\n      select.value = defaultType;\n      this.currentFilterType = defaultType;\n    }\n\n    if (!this.disableDynamicFiltering) {\n      this.debouncedApplyFilter();\n    }\n  }\n\n  private addNewFilterToProp() {\n    const prop = this.changes?.prop;\n    if (!(prop || prop === 0)) return;\n\n    if (!this.filterItems[prop]) {\n      this.filterItems[prop] = [];\n    }\n\n    if (this.currentFilterType === 'none') return;\n\n    this.filterId++;\n    this.currentFilterId = this.filterId;\n\n    this.filterItems[prop].push({\n      id: this.currentFilterId,\n      type: this.currentFilterType,\n      value: '',\n      relation: 'and',\n    });\n\n    // adding setTimeout will wait for the next tick DOM update then focus on input\n    setTimeout(() => {\n      const input = document.getElementById(\n        'filter-input-' + this.currentFilterId,\n      ) as HTMLInputElement;\n      if (input) input.focus();\n    }, 0);\n  }\n\n  private onUserInput(index: number, prop: ColumnProp, event: Event) {\n    // update the value of the filter item\n    this.filterItems[prop][index].value = (\n      event.target as HTMLInputElement\n    ).value;\n\n    if (!this.disableDynamicFiltering) {\n      this.debouncedApplyFilter();\n    }\n  }\n\n  private onKeyDown(e: KeyboardEvent) {\n    if (e.key.toLowerCase() === 'enter') {\n      const select = document.getElementById('add-filter') as HTMLSelectElement;\n      if (select) {\n        select.value = defaultType;\n        this.currentFilterType = defaultType;\n        this.addNewFilterToProp();\n        select.focus();\n      }\n      return;\n    }\n    // keep event local, don't escalate farther to dom\n    e.stopPropagation();\n  }\n\n  private onSave() {\n    this.filterChange.emit(this.filterItems);\n  }\n\n  private onCancel() {\n    this.changes = undefined;\n  }\n\n  private onReset() {\n    this.assertChanges();\n\n    this.resetChange.emit(this.changes?.prop);\n\n    // this updates the DOM which is used by getFilterItemsList() key\n    this.filterId++;\n  }\n\n  private onRemoveFilter(id: number) {\n    this.assertChanges();\n\n    // this is for reactivity issues for getFilterItemsList()\n    this.filterId++;\n\n    const prop = this.changes?.prop;\n\n    const items = this.filterItems[prop ?? ''];\n    if (!items) return;\n\n    const index = items.findIndex(d => d.id === id);\n    if (index === -1) return;\n    items.splice(index, 1);\n\n    // let's remove the prop if no more filters so the filter icon will be removed\n    if (items.length === 0) delete this.filterItems[prop ?? ''];\n\n    if (!this.disableDynamicFiltering) {\n      this.debouncedApplyFilter();\n    }\n  }\n\n  private toggleFilterAndOr(id: number) {\n    this.assertChanges();\n\n    // this is for reactivity issues for getFilterItemsList()\n    this.filterId++;\n\n    const prop = this.changes?.prop;\n\n    const items = this.filterItems[prop ?? ''];\n    if (!items) return;\n\n    const index = items.findIndex(d => d.id === id);\n    if (index === -1) return;\n\n    items[index].relation = items[index].relation === 'and' ? 'or' : 'and';\n    if (!this.disableDynamicFiltering) {\n      this.debouncedApplyFilter();\n    }\n  }\n\n  private assertChanges() {\n    if (!this.changes) {\n      throw new Error('Changes required per edit');\n    }\n  }\n\n  renderSelectOptions(type: FilterType, isDefaultTypeRemoved = false) {\n    if (!this.changes) {\n      return;\n    }\n    const options: VNode[] = [];\n    const prop = this.changes.prop;\n\n    if (!isDefaultTypeRemoved) {\n      const capts = Object.assign(\n        this.filterCaptionsInternal,\n        this.filterCaptions,\n      );\n\n      options.push(\n        <option\n          selected={this.currentFilterType === defaultType}\n          value={defaultType}\n        >\n          {prop && this.filterItems[prop] && this.filterItems[prop].length > 0\n            ? capts.add\n            : this.filterNames[defaultType]}\n        </option>,\n      );\n    }\n\n    for (let gIndex in this.changes.filterTypes) {\n      options.push(\n        ...this.changes.filterTypes[gIndex].map(k => (\n          <option value={k} selected={type === k}>\n            {this.filterNames[k]}\n          </option>\n        )),\n      );\n      options.push(<option disabled></option>);\n    }\n    return options;\n  }\n\n  renderExtra(prop: ColumnProp, index: number) {\n    const currentFilter = this.filterItems[prop];\n\n    if (!currentFilter) return '';\n\n    if (this.filterEntities[currentFilter[index].type].extra !== 'input')\n      return '';\n\n    const capts = Object.assign(\n      this.filterCaptionsInternal,\n      this.filterCaptions,\n    );\n\n    return (\n      <input\n        id={`filter-input-${currentFilter[index].id}`}\n        placeholder={capts.placeholder}\n        type=\"text\"\n        value={currentFilter[index].value}\n        onInput={this.onUserInput.bind(this, index, prop)}\n        onKeyDown={e => this.onKeyDown(e)}\n      />\n    );\n  }\n\n  render() {\n    if (!this.changes) {\n      return <Host style={{ display: 'none' }}></Host>;\n    }\n    const style = {\n      display: 'block',\n      left: `${this.changes.x}px`,\n      top: `${this.changes.y}px`,\n    };\n\n    const capts = Object.assign(\n      this.filterCaptionsInternal,\n      this.filterCaptions,\n    );\n\n    return (\n      <Host\n        style={style}\n        ref={el => {\n          this.changes?.autoCorrect && this.autoCorrect(el);\n        }}\n      >\n        <slot slot=\"header\" />\n        <label>{capts.title}</label>\n        <div class=\"filter-holder\">{this.getFilterItemsList()}</div>\n\n        <div class=\"add-filter\">\n          <select\n            id={FILTER_ID}\n            class=\"select-css\"\n            onChange={e => this.onAddNewFilter(e)}\n          >\n            {this.renderSelectOptions(this.currentFilterType)}\n          </select>\n        </div>\n        <slot />\n        <div class=\"filter-actions\">\n          {this.disableDynamicFiltering && [\n            <button\n              id=\"revo-button-save\"\n              aria-label=\"save\"\n              class=\"revo-button green\"\n              onClick={() => this.onSave()}\n            >\n              {capts.save}\n            </button>,\n            <button\n              id=\"revo-button-ok\"\n              aria-label=\"ok\"\n              class=\"revo-button green\"\n              onClick={() => this.onCancel()}\n            >\n              {capts.cancel}\n            </button>,\n          ]}\n          {!this.disableDynamicFiltering && [\n            <button\n              id=\"revo-button-ok\"\n              aria-label=\"ok\"\n              class=\"revo-button green\"\n              onClick={() => this.onCancel()}\n            >\n              {capts.ok}\n            </button>,\n\n            <button\n              id=\"revo-button-reset\"\n              aria-label=\"reset\"\n              class=\"revo-button light\"\n              onClick={() => this.onReset()}\n            >\n              {capts.reset}\n            </button>,\n          ]}\n        </div>\n        <slot slot=\"footer\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/revo-grid/row-header-utils-0e99306d.js

@@ -0,0 +1,5 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import{j as t,W as e,w as s}from"./index-ba44e9d4.js";function i(e,s,i,f,u){const l=t(u,e);const h=d(s);let m;if(h){let t=l.itemIndex-(h.itemIndex||0);if(t){m=a(Math.abs(t),Object.assign(Object.assign({positiveDirection:t>-1},u),s))}}const b=n(f,u.realSize,l);if(m){const t=o(l,i,b,m,u);if(t.length){r(m.items,t,m)}}if(!m){const t=c({firstItemStart:l.start,firstItemIndex:l.itemIndex,origSize:u.originItemSize,maxSize:b,maxCount:i,sizes:u.sizes});m={items:t,start:0,end:t.length-1}}return m}function n(t,e,s){return Math.min(t+(s.end-s.start),e)}function r(t,e,s){t.splice(s.end+1,0,...e);if(s.start>=s.end&&!(s.start===s.end&&s.start===0)){s.start+=e.length}s.end+=e.length}function o(t,e,s,i,n){const r=h(i);const o=c({sizes:n.sizes,firstItemStart:r.end,firstItemIndex:r.itemIndex+1,origSize:n.originItemSize,maxSize:s-(r.end-t.start),maxCount:e});return o}function c(t,e=0){const s=[];let i=t.firstItemIndex;let n=e;while(n<=t.maxSize&&i<t.maxCount){const e=f(i,t.sizes,t.origSize);s.push({start:t.firstItemStart+n,end:t.firstItemStart+n+e,itemIndex:i,size:e});n+=e;i++}return s}function a(t,e){var s,i;const n=[...e.items];const r=n.length;let o={start:e.start,end:e.end};if(t>r){return undefined}if(e.positiveDirection){let s=h(e);let i=o.start;const c=i+t;for(;i<c;i++){const t=s.itemIndex+1;const c=f(t,e.sizes,e.originItemSize);if(s.end+c>e.realSize){break}let a=i%r;if(!n[a]){throw new Error("incorrect index")}n[a]=s={start:s.end,end:s.end+c,itemIndex:t,size:c};o.start++;o.end=a}}else{let c=d(e);const a=o.end;for(let u=0;u<t;u++){const t=((s=c===null||c===void 0?void 0:c.itemIndex)!==null&&s!==void 0?s:0)-1;const l=f(t,e.sizes,e.originItemSize);let d=a-u;d=(d<0?r+d:d)%r;if(!n[d]){console.error("incorrect index");break}const h=(i=c===null||c===void 0?void 0:c.start)!==null&&i!==void 0?i:0;n[d]=c={start:h-l,end:h,itemIndex:t,size:l};o.start=d;o.end--}}const c={start:(o.start<0?r+o.start:o.start)%r,end:(o.end<0?r+o.end:o.end)%r};return Object.assign({items:n},c)}function f(t,e,s=0){if(e&&e[t]){return e[t]}return s}function u(t,e,s,i){if(!s||!i){return false}return t>=s.start&&t<=s.end||t>s.end&&i.end===e}function l(t,e,s,i){var n;if(!s){return false}return e+t>((n=i===null||i===void 0?void 0:i.end)!==null&&n!==void 0?n:0)}function d(t){return t.items[t.start]}function h(t){return t.items[t.end]}function m(t,e,s,i){const n=[...t];const r=n.length;let o=i;let c=0;let a=e;if(!r){return[]}while(c<r){const t=n[a];t.start=o;t.size=s;t.end=t.start+s;o=t.end;a++;c++;if(a===r){a=0}}return n}function b(){return{items:[],start:0,end:0,virtualSize:0,realCount:0}}class v{get lastCoordinate(){return this.lastKnownScroll}set lastCoordinate(t){this.lastKnownScroll=t}constructor(t){this.type=t;this.lastKnownScroll=0;this.store=e(b())}setViewPortCoordinate(t,e,s=false){const n=this.store.get("virtualSize");if(!n){return}const c=1;const a=e.originItemSize*c;const f=a*2;const m=n+f;let b=0;if(e.realSize>n){b=e.realSize-n-a}let v=t;if(v<0){v=0}else if(v>b){v=b}this.lastCoordinate=v;v-=a;v=v<0?0:v<b?v:b;let j;if(s){j={items:[],start:0,end:0}}else{j=this.getItems()}const z=d(j);const x=h(j);let O={};if(!u(v,e.realSize,z,x)){O=Object.assign(Object.assign({},O),i(v,j,this.store.get("realCount"),m,e));this.setViewport(Object.assign({},O))}else if(l(v,m,z,x)){const t=[...j.items];const s=o(z,this.store.get("realCount"),m+v-z.start,j,{sizes:e.sizes,originItemSize:e.originItemSize});if(s.length){const e={start:this.store.get("start"),end:this.store.get("end")};r(t,s,e);O=Object.assign(Object.assign(Object.assign({},O),{items:[...t]}),e);this.setViewport(Object.assign({},O))}}}setOriginalSizes(t){const e=this.store.get("items");const i=e.length;if(!i){return}s(this.store,{items:m(e,this.store.get("start"),t,this.lastCoordinate)})}getItems(){return{items:this.store.get("items"),start:this.store.get("start"),end:this.store.get("end")}}setViewport(t){if(typeof t.realCount==="number"||typeof t.virtualSize==="number"){t=Object.assign(Object.assign({},t),{items:t.items||[]})}s(this.store,t)}}const j=10;const z=(t,e,s=50)=>(e===null||e===void 0?void 0:e.size)||Math.max((t.toString().length+1)*j,s);export{v as V,o as a,c as b,l as c,d,h as e,z as f,i as g,u as i,a as r,m as s,r as u};
+//# sourceMappingURL=row-header-utils-0e99306d.js.map

package/dist/revo-grid/text-editor-b624b721.js

@@ -0,0 +1,5 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import{f as i,d as t}from"./key.utils-7d553ef4.js";import{u as e}from"./index-ba44e9d4.js";class n{constructor(i,t){this.column=i;this.saveCallback=t;this.editInput=null;this.element=null;this.editCell=undefined}async componentDidRender(){var i;if(this.editInput){await e();(i=this.editInput)===null||i===void 0?void 0:i.focus()}}onKeyDown(e){const n=i(e.key);const s=t(e.key);if((s||n)&&e.target&&this.saveCallback&&!e.isComposing){this.beforeDisconnect();this.saveCallback(this.getValue(),s)}}beforeDisconnect(){var i;(i=this.editInput)===null||i===void 0?void 0:i.blur()}getValue(){var i;return(i=this.editInput)===null||i===void 0?void 0:i.value}render(i,t){var e,n;return i("input",{type:"text",enterKeyHint:"enter",value:(n=(e=this.editCell)===null||e===void 0?void 0:e.val)!==null&&n!==void 0?n:"",ref:i=>{this.editInput=i},onKeyDown:i=>this.onKeyDown(i)})}}export{n as T};
+//# sourceMappingURL=text-editor-b624b721.js.map

package/dist/revo-grid/{throttle-bb3169c7.js → throttle-d31899f3.js}

@@ -1,5 +1,5 @@
 /*!
  * Built by Revolist OU ❤️
  */
-import{o as t}from"./index-b6586f9b.js";import{d as i,i as s}from"./debounce-7b511afc.js";const r={contentSize:0,clientSize:0,virtualSize:0,maxSize:0};const n=-1;function e(t,i,s=0){return t+(s?i-s:0)}class o{constructor(t){this.cfg=t;this.preventArtificialScroll={rgRow:null,rgCol:null};this.previousScroll={rgRow:n,rgCol:n};this.params={rgRow:Object.assign({},r),rgCol:Object.assign({},r)}}setParams(t,i){const s=e(t.contentSize,t.clientSize,t.virtualSize);this.params[i]=Object.assign(Object.assign({},t),{maxSize:s-t.clientSize,virtualContentSize:s})}async setScroll(t){this.cancelScroll(t.dimension);const i=new Promise(((i,s)=>{if(this.cfg.skipAnimationFrame){return i()}const r=window.requestAnimationFrame((()=>{i()}));this.preventArtificialScroll[t.dimension]=s.bind(null,r)}));try{await i;const s=this.getParams(t.dimension);t.coordinate=Math.ceil(t.coordinate);this.previousScroll[t.dimension]=this.wrapCoordinate(t.coordinate,s);this.preventArtificialScroll[t.dimension]=null;this.cfg.applyScroll(Object.assign(Object.assign({},t),{coordinate:s.virtualSize?this.convert(t.coordinate,s,false):t.coordinate}))}catch(t){window.cancelAnimationFrame(t)}}scroll(t,i,s=false,r,e=false){this.cancelScroll(i);if(!s&&this.previousScroll[i]===t){this.previousScroll[i]=n;return}const o=this.getParams(i);this.cfg.runScroll({dimension:i,coordinate:o.virtualSize?this.convert(t,o):t,delta:r,outside:e})}getParams(t){return this.params[t]}wrapCoordinate(t,i){if(t<0){return n}if(typeof i.maxSize==="number"&&t>i.maxSize){return i.maxSize}return t}cancelScroll(t){var i,s;(s=(i=this.preventArtificialScroll)[t])===null||s===void 0?void 0:s.call(i);this.preventArtificialScroll[t]=null}convert(i,s,r=true){var n;const e=s.clientSize;const o=[0,((n=s.virtualContentSize)!==null&&n!==void 0?n:e)-e];const a=[0,s.contentSize-s.virtualSize];if(r){return t(i,o,a)}return t(i,a,o)}}class a{constructor(t=10){this.scrollThrottling=t;this.mouseWheelScrollTimestamp={rgCol:0,rgRow:0};this.lastKnownScrollCoordinate={rgCol:0,rgRow:0}}setCoordinate(t){this.lastKnownScrollCoordinate[t.dimension]=t.coordinate}latestScrollUpdate(t){this.mouseWheelScrollTimestamp[t]=(new Date).getTime()}isReady(t,i){const s=(new Date).getTime()-this.mouseWheelScrollTimestamp[t];return s>this.scrollThrottling&&i!==this.lastKnownScrollCoordinate[t]}}var c="Expected a function";function l(t,r,n){var e=true,o=true;if(typeof t!="function"){throw new TypeError(c)}if(s(n)){e="leading"in n?!!n.leading:e;o="trailing"in n?!!n.trailing:o}return i(t,r,{leading:e,maxWait:r,trailing:o})}export{a as L,o as a,e as g,l as t};
-//# sourceMappingURL=throttle-bb3169c7.js.map
+import{q as t}from"./index-ba44e9d4.js";import{d as i,i as s}from"./debounce-7b511afc.js";const r={contentSize:0,clientSize:0,virtualSize:0,maxSize:0};const e=-1;function n(t,i,s=0){return t+(s?i-s:0)}class o{constructor(t){this.cfg=t;this.preventArtificialScroll={rgRow:null,rgCol:null};this.previousScroll={rgRow:e,rgCol:e};this.params={rgRow:Object.assign({},r),rgCol:Object.assign({},r)}}setParams(t,i){const s=n(t.contentSize,t.clientSize,t.virtualSize);this.params[i]=Object.assign(Object.assign({},t),{maxSize:s-t.clientSize,virtualContentSize:s})}async setScroll(t){this.cancelScroll(t.dimension);const i=new Promise(((i,s)=>{if(this.cfg.skipAnimationFrame){return i()}const r=window.requestAnimationFrame((()=>{i()}));this.preventArtificialScroll[t.dimension]=s.bind(null,r)}));try{await i;const s=this.getParams(t.dimension);t.coordinate=Math.ceil(t.coordinate);this.previousScroll[t.dimension]=this.wrapCoordinate(t.coordinate,s);this.preventArtificialScroll[t.dimension]=null;this.cfg.applyScroll(Object.assign(Object.assign({},t),{coordinate:s.virtualSize?this.convert(t.coordinate,s,false):t.coordinate}))}catch(t){window.cancelAnimationFrame(t)}}scroll(t,i,s=false,r,n=false){this.cancelScroll(i);if(!s&&this.previousScroll[i]===t){this.previousScroll[i]=e;return}const o=this.getParams(i);this.cfg.runScroll({dimension:i,coordinate:o.virtualSize?this.convert(t,o):t,delta:r,outside:n})}getParams(t){return this.params[t]}wrapCoordinate(t,i){if(t<0){return e}if(typeof i.maxSize==="number"&&t>i.maxSize){return i.maxSize}return t}cancelScroll(t){var i,s;(s=(i=this.preventArtificialScroll)[t])===null||s===void 0?void 0:s.call(i);this.preventArtificialScroll[t]=null}convert(i,s,r=true){var e;const n=s.clientSize;const o=[0,((e=s.virtualContentSize)!==null&&e!==void 0?e:n)-n];const a=[0,s.contentSize-s.virtualSize];if(r){return t(i,o,a)}return t(i,a,o)}}class a{constructor(t=10){this.scrollThrottling=t;this.mouseWheelScrollTimestamp={rgCol:0,rgRow:0};this.lastKnownScrollCoordinate={rgCol:0,rgRow:0}}setCoordinate(t){this.lastKnownScrollCoordinate[t.dimension]=t.coordinate}latestScrollUpdate(t){this.mouseWheelScrollTimestamp[t]=(new Date).getTime()}isReady(t,i){const s=(new Date).getTime()-this.mouseWheelScrollTimestamp[t];return s>this.scrollThrottling&&i!==this.lastKnownScrollCoordinate[t]}}var c="Expected a function";function l(t,r,e){var n=true,o=true;if(typeof t!="function"){throw new TypeError(c)}if(s(e)){n="leading"in e?!!e.leading:n;o="trailing"in e?!!e.trailing:o}return i(t,r,{leading:n,maxWait:r,trailing:o})}export{a as L,o as a,n as g,l as t};
+//# sourceMappingURL=throttle-d31899f3.js.map

package/dist/types/components/extra/revogr-extra.d.ts

@@ -0,0 +1,24 @@
+import { VNode } from '../../stencil-public-runtime';
+/**
+ * Contains extra elements for stencil components.
+ * Performs rendering and updates for external components.
+ */
+/**
+ * @internal
+ */
+export declare class RevoGridExtra {
+    /**
+     * Nodes to render
+     */
+    nodes: ((VNode) | (() => VNode))[] | null;
+    /**
+     * Force component to re-render
+     */
+    update: number;
+    /**
+     * Refreshes the extra component. Useful if you want to manually
+     * force the component to re-render.
+     */
+    refresh(): Promise<void>;
+    render(): VNode[] | undefined;
+}

package/dist/types/components/header/revogr-header.d.ts

@@ -68,12 +68,17 @@ export declare class RevogrHeaderComponent {
      */
     headerdblClick: EventEmitter<InitialHeaderClick>;
     /**
-   * Before each header cell render function. Allows to override cell properties
-   */
+     * Before each header cell render function. Allows to override cell properties
+     */
     beforeHeaderRender: EventEmitter<HeaderRenderProps>;
+    /**
+     * After all header cells rendered. Finalizes cell rendering.
+     */
+    afterHeaderRender: EventEmitter<Providers<DimensionCols | 'rowHeaders'>>;
     element: HTMLStencilElement;
     private onResize;
     private onResizeGroup;
+    componentDidRender(): void;
     render(): any[];
     get providers(): Providers<DimensionCols | 'rowHeaders'>;
 }

package/dist/types/components/overlay/autofill.service.d.ts

@@ -8,7 +8,7 @@ type Config = {
     dimensionCol: Observable<DimensionSettingsState>;
     columnService: ColumnService;
     dataStore: Observable<DSourceState<DataType, DimensionRows>>;
-    setTempRange(e: Nullable<TempRange> | null): Event;
+    setTempRange(e: Nullable<TempRange> | null): Event | null;
     selectionChanged(e: ChangedRange): Event;
     rangeCopy(e: ChangedRange): Event;
     rangeDataApply(e: BeforeRangeSaveDataDetails): CustomEvent;

package/dist/types/components/overlay/revogr-overlay-selection.d.ts

@@ -91,11 +91,11 @@ export declare class OverlaySelection {
      */
     setEdit: EventEmitter<BeforeEdit>;
     /**
-     * Before range applied.
+     * Before range applied. First step in triggerRangeEvent.
      */
     beforeApplyRange: EventEmitter<FocusRenderEvent>;
     /**
-     * Before range selection applied.
+     * Before range selection applied. Second step in triggerRangeEvent.
      */
     beforeSetRange: EventEmitter;
     /**
@@ -118,6 +118,12 @@ export declare class OverlaySelection {
      * Set temp range area during autofill.
      */
     setTempRange: EventEmitter<Nullable<TempRange> | null>;
+    /**
+     * Before set temp range area during autofill.
+     */
+    beforeSetTempRange: EventEmitter<{
+        tempRange: Nullable<TempRange> | null;
+    } & EventData & AllDimensionType>;
     /**
      * Before cell get focused.
      * To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.

package/dist/types/components/overlay/selection.utils.d.ts

@@ -1,5 +1,5 @@
-import { DSourceState } from "../../store/index";
-import { DimensionSettingsState, Cell, RangeArea, RangeAreaCss, DataLookup, DimensionRows, DataType, EditCellStore } from "../../types/index";
+import { DimensionIndexInput, DSourceState } from "../../store/index";
+import type { DimensionSettingsState, Cell, RangeArea, RangeAreaCss, DataLookup, DimensionRows, DataType, EditCellStore } from "../../types/index";
 import { Observable } from '../../utils/store.utils';
 export type EventData = {
     el: HTMLElement;
@@ -33,7 +33,11 @@ export declare function getCoordinate(range: RangeArea, focus: Cell, changes: Pa
 export declare function isAfterLast({ x, y }: Cell, lastCell: Cell): boolean;
 /** check if out of range */
 export declare function isBeforeFirst({ x, y }: Cell): boolean;
-export declare function getCell({ x, y, x1, y1 }: RangeArea, dimensionRow: DimensionSettingsState, dimensionCol: DimensionSettingsState): {
+/** Compare cells, only 1 coordinate difference is possible */
+export declare function styleByCellProps(styles: {
+    [key: string]: number;
+}): RangeAreaCss;
+export declare function getCell({ x, y, x1, y1 }: RangeArea, dimensionRow: Pick<DimensionIndexInput, 'indexToItem' | 'indexes' | 'originItemSize'>, dimensionCol: Pick<DimensionIndexInput, 'indexToItem' | 'indexes' | 'originItemSize'>): {
     left: number;
     right: number;
     top: number;
@@ -41,4 +45,3 @@ export declare function getCell({ x, y, x1, y1 }: RangeArea, dimensionRow: Dimen
     width: number;
     height: number;
 };
-export declare function getElStyle(range: RangeArea, dimensionRow: DimensionSettingsState, dimensionCol: DimensionSettingsState): RangeAreaCss;

package/dist/types/components/revoGrid/revo-grid.d.ts

@@ -5,10 +5,14 @@ import { DataProvider } from '../../services/data.provider';
 import { DSourceState } from "../../store/index";
 import DimensionProvider from '../../services/dimension.provider';
 import ViewportProvider from '../../services/viewport.provider';
+import ThemeService from '../../themeManager/theme.service';
 import { AutoSizeColumnConfig } from '../../plugins/column.auto-size.plugin';
 import { DataInput } from '../../plugins/export/types';
 import { GroupingOptions } from '../../plugins/groupingRow/grouping.row.types';
-import { FocusedData } from './viewport.service';
+import ViewportService, { FocusedData } from './viewport.service';
+import GridScrollingService from './viewport.scrolling.service';
+import SelectionStoreConnector from '../../services/selection.store.connector';
+import { OrdererService } from '../order/order-renderer';
 import type { Observable } from '../../utils/store.utils';
 import type { GridPlugin } from '../../plugins/base.plugin';
 import { ColumnCollection } from '../../utils/column.utils';
@@ -183,7 +187,7 @@ export declare class RevoGridComponent {
      * Used for additional items creation such as plugin elements.
      * Should be set before grid render inside of plugins.
      */
-    registerVNode: VNode[];
+    registerVNode: (VNode | (() => VNode))[];
     /**
      * Enable accessibility. If disabled, the grid will not be accessible.
      * @default true
@@ -400,6 +404,10 @@ export declare class RevoGridComponent {
      * Emmited before the grid is rendered.
      */
     beforegridrender: EventEmitter;
+    /**
+     * Emmited after the grid is rendered.
+     */
+    aftergridrender: EventEmitter;
     /**
      * Emmited after the grid is initialized. Connected to the DOM.
      */
@@ -534,22 +542,22 @@ export declare class RevoGridComponent {
     onHeaderClick(e: CustomEvent<InitialHeaderClick>): void;
     onCellFocus(e: CustomEvent<BeforeSaveDataDetails>): void;
     element: HTMLRevoGridElement;
-    private extraElements;
-    columnProvider: ColumnDataProvider;
+    extraElements: (VNode | (() => VNode))[];
+    columnProvider?: ColumnDataProvider;
     dataProvider?: DataProvider;
     dimensionProvider?: DimensionProvider;
-    viewportProvider: ViewportProvider;
-    private themeService;
-    private viewport;
-    private isInited;
-    private orderService;
-    private selectionStoreConnector;
-    private scrollingService;
+    viewportProvider?: ViewportProvider;
+    themeService: ThemeService;
+    viewport: ViewportService | null;
+    isInited: boolean;
+    orderService: OrdererService;
+    selectionStoreConnector: SelectionStoreConnector;
+    scrollingService: GridScrollingService;
     /**
      * Plugins
      * Define plugins collection
      */
-    private internalPlugins;
+    internalPlugins: PluginBaseComponent[];
     columnTypesChanged(): void;
     columnChanged(newVal?: (ColumnGrouping | ColumnRegular)[]): void;
     disableVirtualXChanged(newVal?: boolean, prevVal?: boolean): void;
@@ -572,7 +580,7 @@ export declare class RevoGridComponent {
     /**
      * Register external VNodes
      */
-    registerOutsideVNodes(elements?: VNode[]): void;
+    registerOutsideVNodes(elements?: (VNode | (() => VNode))[]): void;
     additionalDataChanged(data: any): void;
     pluginsChanged(plugins?: GridPlugin[], _prevPlugins?: GridPlugin[]): void;
     private setPlugins;
@@ -587,6 +595,7 @@ export declare class RevoGridComponent {
      */
     componentWillLoad(): void;
     componentWillRender(): false | Promise<any[]>;
+    componentDidRender(): void;
     render(): any;
     disconnectedCallback(): void;
 }

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PositionItem, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+import { AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PositionItem, Providers, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
 import { GridPlugin } from "./plugins/base.plugin";
 import { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
 import { ColumnFilterConfig, FilterCaptions, FilterCollection, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
@@ -20,7 +20,7 @@ import { ResizeProps } from "./components/header/resizable.directive";
 import { HeaderRenderProps } from "./components/header/header-renderer";
 import { Cell as Cell1, ColumnRegular as ColumnRegular1, DataType as DataType1, DimensionCols as DimensionCols1, DimensionRows as DimensionRows1, DimensionSettingsState as DimensionSettingsState1, Observable as Observable1, SelectionStoreState as SelectionStoreState1 } from "./components";
 import { EventData } from "./components/overlay/selection.utils";
-export { AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PositionItem, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+export { AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PositionItem, Providers, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
 export { GridPlugin } from "./plugins/base.plugin";
 export { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
 export { ColumnFilterConfig, FilterCaptions, FilterCollection, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
@@ -205,7 +205,7 @@ export namespace Components {
         /**
           * Register new virtual node inside of grid. Used for additional items creation such as plugin elements. Should be set before grid render inside of plugins.
          */
-        "registerVNode": VNode[];
+        "registerVNode": (VNode | (() => VNode))[];
         /**
           * When true, columns are resizable.
          */
@@ -396,7 +396,20 @@ export namespace Components {
          */
         "saveOnClose": boolean;
     }
+    interface RevogrExtra {
+        /**
+          * Nodes to render
+         */
+        "nodes": ((VNode) |  (() => VNode))[] | null;
+        /**
+          * Refreshes the extra component. Useful if you want to manually force the component to re-render.
+         */
+        "refresh": () => Promise<void>;
+    }
     interface RevogrFilterPanel {
+        /**
+          * Disables dynamic filtering. A way to apply filters on Save only
+         */
         "disableDynamicFiltering": boolean;
         "filterCaptions": FilterCaptions | undefined;
         "filterEntities": Record<string, LogicFunction>;
@@ -809,6 +822,7 @@ declare global {
         "filterconfigchanged": any;
         "rowheaderschanged": any;
         "beforegridrender": any;
+        "aftergridrender": any;
         "aftergridinit": any;
         "additionaldatachanged": any;
         "afterthemechanged": Theme;
@@ -941,6 +955,12 @@ declare global {
         prototype: HTMLRevogrEditElement;
         new (): HTMLRevogrEditElement;
     };
+    interface HTMLRevogrExtraElement extends Components.RevogrExtra, HTMLStencilElement {
+    }
+    var HTMLRevogrExtraElement: {
+        prototype: HTMLRevogrExtraElement;
+        new (): HTMLRevogrExtraElement;
+    };
     interface HTMLRevogrFilterPanelElementEventMap {
         "filterChange": MultiFilterItem;
         "resetChange": ColumnProp;
@@ -988,6 +1008,7 @@ declare global {
         "beforeheaderresize": ColumnRegular[];
         "headerdblclick": InitialHeaderClick;
         "beforeheaderrender": HeaderRenderProps;
+        "afterheaderrender": Providers<DimensionCols | 'rowHeaders'>;
     }
     interface HTMLRevogrHeaderElement extends Components.RevogrHeader, HTMLStencilElement {
         addEventListener<K extends keyof HTMLRevogrHeaderElementEventMap>(type: K, listener: (this: HTMLRevogrHeaderElement, ev: RevogrHeaderCustomEvent<HTMLRevogrHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1049,6 +1070,7 @@ declare global {
         "selectall": any;
         "canceledit": any;
         "settemprange": Nullable<TempRange> | null;
+        "beforesettemprange": { tempRange: Nullable<TempRange> | null } & EventData & AllDimensionType;
         "applyfocus": FocusRenderEvent;
         "focuscell": ApplyFocusEvent;
         "beforerangedataapply": FocusRenderEvent;
@@ -1178,6 +1200,7 @@ declare global {
         "revogr-clipboard": HTMLRevogrClipboardElement;
         "revogr-data": HTMLRevogrDataElement;
         "revogr-edit": HTMLRevogrEditElement;
+        "revogr-extra": HTMLRevogrExtraElement;
         "revogr-filter-panel": HTMLRevogrFilterPanelElement;
         "revogr-focus": HTMLRevogrFocusElement;
         "revogr-header": HTMLRevogrHeaderElement;
@@ -1318,6 +1341,10 @@ declare namespace LocalJSX {
           * Emmited after the grid is initialized. Connected to the DOM.
          */
         "onAftergridinit"?: (event: RevoGridCustomEvent<any>) => void;
+        /**
+          * Emmited after the grid is rendered.
+         */
+        "onAftergridrender"?: (event: RevoGridCustomEvent<any>) => void;
         /**
           * After main source/rows updated
          */
@@ -1485,7 +1512,7 @@ declare namespace LocalJSX {
         /**
           * Register new virtual node inside of grid. Used for additional items creation such as plugin elements. Should be set before grid render inside of plugins.
          */
-        "registerVNode"?: VNode[];
+        "registerVNode"?: (VNode | (() => VNode))[];
         /**
           * When true, columns are resizable.
          */
@@ -1705,7 +1732,16 @@ declare namespace LocalJSX {
          */
         "saveOnClose"?: boolean;
     }
+    interface RevogrExtra {
+        /**
+          * Nodes to render
+         */
+        "nodes"?: ((VNode) |  (() => VNode))[] | null;
+    }
     interface RevogrFilterPanel {
+        /**
+          * Disables dynamic filtering. A way to apply filters on Save only
+         */
         "disableDynamicFiltering"?: boolean;
         "filterCaptions"?: FilterCaptions | undefined;
         "filterEntities"?: Record<string, LogicFunction>;
@@ -1793,6 +1829,10 @@ declare namespace LocalJSX {
           * Column groups
          */
         "groups"?: Groups;
+        /**
+          * After all header cells rendered. Finalizes cell rendering.
+         */
+        "onAfterheaderrender"?: (event: RevogrHeaderCustomEvent<Providers<DimensionCols | 'rowHeaders'>>) => void;
         /**
           * On initial header click
          */
@@ -1932,7 +1972,7 @@ declare namespace LocalJSX {
          */
         "onApplyfocus"?: (event: RevogrOverlaySelectionCustomEvent<FocusRenderEvent>) => void;
         /**
-          * Before range applied.
+          * Before range applied. First step in triggerRangeEvent.
          */
         "onBeforeapplyrange"?: (event: RevogrOverlaySelectionCustomEvent<FocusRenderEvent>) => void;
         /**
@@ -1976,9 +2016,13 @@ declare namespace LocalJSX {
          */
         "onBeforerangedataapply"?: (event: RevogrOverlaySelectionCustomEvent<FocusRenderEvent>) => void;
         /**
-          * Before range selection applied.
+          * Before range selection applied. Second step in triggerRangeEvent.
          */
         "onBeforesetrange"?: (event: RevogrOverlaySelectionCustomEvent<any>) => void;
+        /**
+          * Before set temp range area during autofill.
+         */
+        "onBeforesettemprange"?: (event: RevogrOverlaySelectionCustomEvent<{ tempRange: Nullable<TempRange> | null } & EventData & AllDimensionType>) => void;
         /**
           * Used for editors support when editor close requested.
          */
@@ -2171,6 +2215,7 @@ declare namespace LocalJSX {
         "revogr-clipboard": RevogrClipboard;
         "revogr-data": RevogrData;
         "revogr-edit": RevogrEdit;
+        "revogr-extra": RevogrExtra;
         "revogr-filter-panel": RevogrFilterPanel;
         "revogr-focus": RevogrFocus;
         "revogr-header": RevogrHeader;
@@ -2217,6 +2262,7 @@ declare module "@stencil/core" {
              * and managing the lifecycle of the editor instance.
              */
             "revogr-edit": LocalJSX.RevogrEdit & JSXBase.HTMLAttributes<HTMLRevogrEditElement>;
+            "revogr-extra": LocalJSX.RevogrExtra & JSXBase.HTMLAttributes<HTMLRevogrExtraElement>;
             "revogr-filter-panel": LocalJSX.RevogrFilterPanel & JSXBase.HTMLAttributes<HTMLRevogrFilterPanelElement>;
             /**
              * Focus component. Shows focus layer around the cell that is currently in focus.

package/dist/types/plugins/filter/filter.panel.d.ts

@@ -21,6 +21,9 @@ export declare class FilterPanel {
     filterNames: Record<string, string>;
     filterEntities: Record<string, LogicFunction>;
     filterCaptions: FilterCaptions | undefined;
+    /**
+     * Disables dynamic filtering. A way to apply filters on Save only
+     */
     disableDynamicFiltering: boolean;
     filterChange: EventEmitter<MultiFilterItem>;
     resetChange: EventEmitter<ColumnProp>;

package/dist/types/plugins/filter/filter.plugin.d.ts

@@ -6,6 +6,7 @@ export * from './filter.indexed';
 export * from './filter.button';
 export declare const FILTER_TRIMMED_TYPE = "filter";
 export declare const FILTER_CONFIG_CHANGED_EVENT = "filterconfigchanged";
+export declare const FILTE_PANEL = "revogr-filter-panel";
 /**
  * @typedef ColumnFilterConfig
  * @type {object}
@@ -14,7 +15,7 @@ export declare const FILTER_CONFIG_CHANGED_EVENT = "filterconfigchanged";
  * @property {Record<string, CustomFilter>|undefined} customFilters - hash map of {FilterType:CustomFilter}.
  * @property {FilterLocalization|undefined} localization - translation for filter popup captions.
  * @property {MultiFilterItem|undefined} multiFilterItems - data for multi filtering.
- * @property {boolean|undefined} disableDynamicFiltering - disables dynamic filtering.
+ * @property {boolean|undefined} disableDynamicFiltering - disables dynamic filtering. A way to apply filters on Save only.
  * A way to define your own filter types per column
  */
 /**
@@ -46,10 +47,6 @@ export declare class FilterPlugin extends BasePlugin {
     doFiltering(collection: FilterCollection, source: DataType[], columns: ColumnRegular[], filterItems: MultiFilterItem): Promise<void>;
     clearFiltering(): Promise<void>;
     runFiltering(multiFilterItems: MultiFilterItem): Promise<void>;
-    getData(): Promise<{
-        source: DataType[];
-        columns: ColumnRegular[];
-    }>;
     /**
      * Get trimmed rows based on filter
      */

package/dist/types/plugins/filter/filter.types.d.ts

@@ -8,15 +8,16 @@ export type LogicFunction<T1 = LogicFunctionParam, T2 = LogicFunctionExtraParam>
     (value: T1, extra?: T2): boolean;
     extra?: ExtraField;
 };
-type CustomFilter = {
+type CustomFilter<T1 = LogicFunctionParam, T2 = LogicFunctionExtraParam> = {
     columnFilterType: string;
     name: string;
-    func: LogicFunction;
+    func: LogicFunction<T1, T2>;
 };
 export type FilterCaptions = {
     title: string;
     save: string;
     reset: string;
+    ok: string;
     cancel: string;
     add: string;
     placeholder: string;