@revolist/revogrid 4.9.11 → 4.9.13

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","FilterPanel","filterCaptionsInternal","title","save","reset","cancel","add","placeholder","and","or","debouncedApplyFilter","debounce","filterChange","emit","filterItems","onMouseDown","e","changes","defaultPrevented","target","select","document","getElementById","value","currentFilterType","type","currentFilterId","path","composedPath","isOutside","includes","element","isFilterBtn","undefined","show","newEntity","getChanges","componentWillRender","isFilterIdSet","Object","keys","prop","filterId","length","renderSelectOptions","isDefaultTypeRemoved","options","_a","capts","assign","filterCaptions","push","h","selected","filterNames","gIndex","filterTypes","map","k","disabled","renderExtra","index","currentFilter","filterEntities","extra","id","onInput","onUserInput","bind","onKeyDown","getFilterItemsList","propFilters","key","d","andOrButton","onClick","toggleFilterAndOr","AndOrButton","text","relation","class","onChange","onFilterTypeChange","onRemoveFilter","TrashButton","autoCorrect","pos","getBoundingClientRect","maxLeft","window","innerWidth","width","left","offsetLeft","style","_b","render","Host","display","x","top","y","ref","onAddNewFilter","disableDynamicFiltering","onSave","onReset","onCancel","setTimeout","input","focus","addNewFilterToProp","event","toLowerCase","stopPropagation","assertChanges","items","findIndex","splice","Error"],"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 { Component, Event, EventEmitter, h, Host, Listen, Method, Prop, State, VNode, Element } from '@stencil/core';\nimport { FilterType } from './filter.service';\nimport { AndOrButton, isFilterBtn, TrashButton } from './filter.button';\nimport '../../utils/closest.polifill';\nimport { LogicFunction } from './filter.types';\nimport { FilterCaptions } from './filter.plugin';\nimport debounce from 'lodash/debounce';\nimport { ColumnProp } from '@type';\n\nexport type FilterItem = {\n  // column id\n  prop?: ColumnProp;\n  // filter type definition\n  type?: FilterType;\n  // value for additional filtering, text value or some id\n  value?: any;\n};\n\nexport type FilterData = {\n  id: number;\n  type: FilterType;\n  value?: any;\n  relation: 'and' | 'or';\n};\n\nexport type MultiFilterItem = {\n  [prop: string]: FilterData[];\n};\n\nexport type ShowData = {\n  x: number;\n  y: number;\n  /**\n   * Auto correct position if it is out of document bounds\n   */\n  autoCorrect?: boolean;\n} & FilterItem;\n\nconst defaultType: FilterType = 'none';\n\nconst FILTER_LIST_CLASS = 'multi-filter-list';\nconst FILTER_LIST_CLASS_ACTION = 'multi-filter-list-action';\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() filterTypes: Record<string, string[]> = {};\n  @Prop() filterNames: Record<string, string> = {};\n  @Prop() filterEntities: Record<string, LogicFunction> = {};\n  @Prop() filterCaptions: FilterCaptions | undefined;\n  @Prop() disableDynamicFiltering = false;\n  @Event() filterChange: EventEmitter<MultiFilterItem>;\n  @Listen('mousedown', { target: 'document' }) onMouseDown(e: MouseEvent) {\n    if (this.changes && !e.defaultPrevented) {\n      const el = e.target as HTMLElement;\n\n      const select = document.getElementById('add-filter') as HTMLSelectElement;\n      if (select) {\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 path = e.composedPath();\n      const isOutside = !path.includes(this.element);\n\n      if (isOutside && !isFilterBtn(el)) {\n        this.changes = undefined;\n      }\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  renderSelectOptions(type: FilterType, isDefaultTypeRemoved = false) {\n    const options: VNode[] = [];\n    const prop = this.changes?.prop;\n\n    if (!isDefaultTypeRemoved) {\n      const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);\n\n      options.push(\n        <option selected={this.currentFilterType === defaultType} value={defaultType}>\n          {prop && this.filterItems[prop] && this.filterItems[prop].length > 0 ? capts.add : this.filterNames[defaultType]}\n        </option>,\n      );\n    }\n\n    for (let gIndex in this.filterTypes) {\n      options.push(\n        ...this.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') return '';\n\n    const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);\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  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(this.filterCaptionsInternal, this.filterCaptions);\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 text={d.relation === 'and' ? capts.and : capts.or} />\n              </div>\n            );\n          }\n\n          return (\n            <div key={d.id} class={FILTER_LIST_CLASS}>\n              <div class={{ 'select-input': true }}>\n                <select class=\"select-css select-filter\" onChange={e => this.onFilterTypeChange(e, prop, index)}>\n                  {this.renderSelectOptions(this.filterItems[prop][index].type, true)}\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  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(this.filterCaptionsInternal, this.filterCaptions);\n\n    return (\n      <Host style={style} ref={(el) => { this.changes?.autoCorrect && this.autoCorrect(el) }}>\n        <label>{capts.title}</label>\n        <div class=\"filter-holder\">{this.getFilterItemsList()}</div>\n\n        <div class=\"add-filter\">\n          <select id=\"add-filter\" class=\"select-css\" onChange={e => this.onAddNewFilter(e)}>\n            {this.renderSelectOptions(this.currentFilterType)}\n          </select>\n        </div>\n        <div class=\"filter-actions\">\n          {this.disableDynamicFiltering &&\n            <button id=\"revo-button-save\" aria-label=\"save\" class=\"revo-button green\"  onClick={() => this.onSave()}>\n              {capts.save}\n            </button>\n          }\n          <button id=\"revo-button-reset\" aria-label=\"reset\" class=\"revo-button light\" onClick={() => this.onReset()}>\n            {capts.reset}\n          </button>\n          <button id=\"revo-button-cancel\" aria-label=\"cancel\" class=\"revo-button light\" onClick={() => this.onCancel()}>\n            {capts.cancel}\n          </button>\n        </div>\n      </Host>\n    );\n  }\n\n  private onFilterTypeChange(e: Event, prop: ColumnProp, index: number) {\n    const el = e.target as HTMLSelectElement;\n    this.filterItems[prop][index].type = el.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('filter-input-' + this.filterItems[prop][index].id) as HTMLInputElement;\n      if (input) input.focus();\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('filter-input-' + this.currentFilterId) 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 = (event.target as HTMLInputElement).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    delete this.filterItems[this.changes?.prop ?? ''];\n\n    // this updates the DOM which is used by getFilterItemsList() key\n    this.filterId++;\n\n    this.filterChange.emit(this.filterItems);\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"],"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","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","renderSelectOptions","isDefaultTypeRemoved","options","_a","capts","assign","filterCaptions","push","h","selected","filterNames","gIndex","filterTypes","map","k","disabled","renderExtra","index","currentFilter","filterEntities","extra","id","onInput","onUserInput","bind","onKeyDown","getFilterItemsList","propFilters","key","d","andOrButton","onClick","toggleFilterAndOr","AndOrButton","text","relation","class","onChange","onFilterTypeChange","onRemoveFilter","TrashButton","autoCorrect","pos","getBoundingClientRect","maxLeft","window","innerWidth","width","left","offsetLeft","style","_b","render","Host","display","x","top","y","ref","onAddNewFilter","disableDynamicFiltering","onSave","onReset","onCancel","setTimeout","input","HTMLInputElement","focus","addNewFilterToProp","event","toLowerCase","stopPropagation","assertChanges","items","findIndex","splice","Error"],"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 { Component, Event, EventEmitter, h, Host, Listen, Method, Prop, State, VNode, Element } from '@stencil/core';\nimport { FilterType } from './filter.service';\nimport { AndOrButton, isFilterBtn, TrashButton } from './filter.button';\nimport '../../utils/closest.polifill';\nimport { LogicFunction } from './filter.types';\nimport { FilterCaptions } from './filter.plugin';\nimport debounce from 'lodash/debounce';\nimport { ColumnProp } from '@type';\n\nexport type FilterItem = {\n  // column id\n  prop?: ColumnProp;\n  // filter type definition\n  type?: FilterType;\n  // value for additional filtering, text value or some id\n  value?: any;\n};\n\nexport type FilterData = {\n  id: number;\n  type: FilterType;\n  value?: any;\n  relation: 'and' | 'or';\n};\n\nexport type MultiFilterItem = {\n  [prop: string]: FilterData[];\n};\n\nexport type ShowData = {\n  x: number;\n  y: number;\n  /**\n   * Auto correct position if it is out of document bounds\n   */\n  autoCorrect?: boolean;\n} & FilterItem;\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() filterTypes: Record<string, string[]> = {};\n  @Prop() filterNames: Record<string, string> = {};\n  @Prop() filterEntities: Record<string, LogicFunction> = {};\n  @Prop() filterCaptions: FilterCaptions | undefined;\n  @Prop() disableDynamicFiltering = false;\n  @Event() filterChange: EventEmitter<MultiFilterItem>;\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 (e.target instanceof HTMLElement && isOutside && !isFilterBtn(e.target)) {\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  renderSelectOptions(type: FilterType, isDefaultTypeRemoved = false) {\n    const options: VNode[] = [];\n    const prop = this.changes?.prop;\n\n    if (!isDefaultTypeRemoved) {\n      const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);\n\n      options.push(\n        <option selected={this.currentFilterType === defaultType} value={defaultType}>\n          {prop && this.filterItems[prop] && this.filterItems[prop].length > 0 ? capts.add : this.filterNames[defaultType]}\n        </option>,\n      );\n    }\n\n    for (let gIndex in this.filterTypes) {\n      options.push(\n        ...this.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') return '';\n\n    const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);\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  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(this.filterCaptionsInternal, this.filterCaptions);\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 text={d.relation === 'and' ? capts.and : capts.or} />\n              </div>\n            );\n          }\n\n          return (\n            <div key={d.id} class={FILTER_LIST_CLASS}>\n              <div class={{ 'select-input': true }}>\n                <select class=\"select-css select-filter\" onChange={e => this.onFilterTypeChange(e, prop, index)}>\n                  {this.renderSelectOptions(this.filterItems[prop][index].type, true)}\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  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(this.filterCaptionsInternal, this.filterCaptions);\n\n    return (\n      <Host style={style} ref={(el) => { this.changes?.autoCorrect && this.autoCorrect(el) }}>\n        <label>{capts.title}</label>\n        <div class=\"filter-holder\">{this.getFilterItemsList()}</div>\n\n        <div class=\"add-filter\">\n          <select id={FILTER_ID} class=\"select-css\" onChange={e => this.onAddNewFilter(e)}>\n            {this.renderSelectOptions(this.currentFilterType)}\n          </select>\n        </div>\n        <div class=\"filter-actions\">\n          {this.disableDynamicFiltering &&\n            <button id=\"revo-button-save\" aria-label=\"save\" class=\"revo-button green\"  onClick={() => this.onSave()}>\n              {capts.save}\n            </button>\n          }\n          <button id=\"revo-button-reset\" aria-label=\"reset\" class=\"revo-button light\" onClick={() => this.onReset()}>\n            {capts.reset}\n          </button>\n          <button id=\"revo-button-cancel\" aria-label=\"cancel\" class=\"revo-button light\" onClick={() => this.onCancel()}>\n            {capts.cancel}\n          </button>\n        </div>\n      </Host>\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('filter-input-' + this.filterItems[prop][index].id);\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('filter-input-' + this.currentFilterId) 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 = (event.target as HTMLInputElement).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    delete this.filterItems[this.changes?.prop ?? ''];\n\n    // this updates the DOM which is used by getFilterItemsList() key\n    this.filterId++;\n\n    this.filterChange.emit(this.filterItems);\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"],"mappings":"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","ignoreList":[]}

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

@@ -536,8 +536,8 @@ export declare class RevoGridComponent {
     element: HTMLRevoGridElement;
     private extraElements;
     columnProvider: ColumnDataProvider;
-    dataProvider: DataProvider;
-    dimensionProvider: DimensionProvider;
+    dataProvider?: DataProvider;
+    dimensionProvider?: DimensionProvider;
     viewportProvider: ViewportProvider;
     private themeService;
     private viewport;

package/hydrate/index.js

@@ -3035,6 +3035,7 @@ var RevogrFilterPanelStyle0 = filterStyleCss;
 const defaultType = 'none';
 const FILTER_LIST_CLASS = 'multi-filter-list';
 const FILTER_LIST_CLASS_ACTION = 'multi-filter-list-action';
+const FILTER_ID = 'add-filter';
 /**
  * Filter panel for editing filters
  */
@@ -3072,22 +3073,27 @@ class FilterPanel {
         this.disableDynamicFiltering = false;
     }
     onMouseDown(e) {
-        if (this.changes && !e.defaultPrevented) {
-            const el = e.target;
-            const select = document.getElementById('add-filter');
-            if (select) {
-                select.value = defaultType;
-            }
-            this.currentFilterType = defaultType;
-            if (this.changes) {
-                this.changes.type = defaultType;
-            }
-            this.currentFilterId = -1;
-            const path = e.composedPath();
-            const isOutside = !path.includes(this.element);
-            if (isOutside && !isFilterBtn(el)) {
-                this.changes = undefined;
+        // click on anything then select drops values to default
+        if (!this.changes || e.defaultPrevented) {
+            return;
+        }
+        const path = e.composedPath();
+        const select = document.getElementById(FILTER_ID);
+        if (select instanceof HTMLSelectElement) {
+            // click on select should be skipped
+            if (path.includes(select)) {
+                return;
             }
+            select.value = defaultType;
+        }
+        this.currentFilterType = defaultType;
+        if (this.changes) {
+            this.changes.type = defaultType;
+        }
+        this.currentFilterId = -1;
+        const isOutside = !path.includes(this.element);
+        if (e.target instanceof HTMLElement && isOutside && !isFilterBtn(e.target)) {
+            this.changes = undefined;
         }
     }
     async show(newEntity) {
@@ -3169,19 +3175,22 @@ class FilterPanel {
             top: `${this.changes.y}px`,
         };
         const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
-        return (hAsync(Host, { style: style, ref: (el) => { var _a; ((_a = this.changes) === null || _a === void 0 ? void 0 : _a.autoCorrect) && this.autoCorrect(el); } }, hAsync("label", null, capts.title), hAsync("div", { class: "filter-holder" }, this.getFilterItemsList()), hAsync("div", { class: "add-filter" }, hAsync("select", { id: "add-filter", class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))), hAsync("div", { class: "filter-actions" }, this.disableDynamicFiltering &&
+        return (hAsync(Host, { style: style, ref: (el) => { var _a; ((_a = this.changes) === null || _a === void 0 ? void 0 : _a.autoCorrect) && this.autoCorrect(el); } }, hAsync("label", null, capts.title), hAsync("div", { class: "filter-holder" }, this.getFilterItemsList()), hAsync("div", { class: "add-filter" }, hAsync("select", { id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))), hAsync("div", { class: "filter-actions" }, this.disableDynamicFiltering &&
             hAsync("button", { id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save), hAsync("button", { id: "revo-button-reset", "aria-label": "reset", class: "revo-button light", onClick: () => this.onReset() }, capts.reset), hAsync("button", { id: "revo-button-cancel", "aria-label": "cancel", class: "revo-button light", onClick: () => this.onCancel() }, capts.cancel))));
     }
     onFilterTypeChange(e, prop, index) {
-        const el = e.target;
-        this.filterItems[prop][index].type = el.value;
+        if (!(e.target instanceof HTMLSelectElement)) {
+            return;
+        }
+        this.filterItems[prop][index].type = e.target.value;
         // this re-renders the input to know if we need extra input
         this.filterId++;
         // adding setTimeout will wait for the next tick DOM update then focus on input
         setTimeout(() => {
             const input = document.getElementById('filter-input-' + this.filterItems[prop][index].id);
-            if (input)
+            if (input instanceof HTMLInputElement) {
                 input.focus();
+            }
         }, 0);
         if (!this.disableDynamicFiltering)
             this.debouncedApplyFilter();
@@ -14321,6 +14330,9 @@ class RevoGridComponent {
      * Can be specific part as rgRow or pinned rgRow or 'all' by default.
      */
     async refresh(type = 'all') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
         this.dataProvider.refresh(type);
     }
     /**
@@ -14339,6 +14351,9 @@ class RevoGridComponent {
      * Scrolls viewport to specified row by index.
      */
     async scrollToRow(coordinate = 0) {
+        if (!this.dimensionProvider) {
+            throw new Error('Not connected');
+        }
         const y = this.dimensionProvider.getViewPortPos({
             coordinate,
             dimension: 'rgRow',
@@ -14349,6 +14364,9 @@ class RevoGridComponent {
      * Scrolls viewport to specified column by index.
      */
     async scrollToColumnIndex(coordinate = 0) {
+        if (!this.dimensionProvider) {
+            throw new Error('Not connected');
+        }
         const x = this.dimensionProvider.getViewPortPos({
             coordinate,
             dimension: 'rgCol',
@@ -14359,6 +14377,9 @@ class RevoGridComponent {
      * Scrolls viewport to specified column by prop
      */
     async scrollToColumnProp(prop, dimension = 'rgCol') {
+        if (!this.dimensionProvider) {
+            throw new Error('Not connected');
+        }
         const coordinate = this.columnProvider.getColumnIndexByProp(prop, dimension);
         if (coordinate < 0) {
             // already on the screen
@@ -14376,6 +14397,9 @@ class RevoGridComponent {
     }
     /** Add trimmed by type */
     async addTrimmed(trimmed, trimmedType = 'external', type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
         const event = this.beforetrimmed.emit({
             trimmed,
             trimmedType,
@@ -14411,6 +14435,9 @@ class RevoGridComponent {
     }
     /**  Get data from source */
     async getSource(type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
         return this.dataProvider.stores[type].store.get('source');
     }
     /**
@@ -14419,6 +14446,9 @@ class RevoGridComponent {
      * @param type - type of source
      */
     async getVisibleSource(type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
         return getVisibleSourceItem(this.dataProvider.stores[type].store);
     }
     /**
@@ -14427,6 +14457,9 @@ class RevoGridComponent {
      * @param type - type of source
      */
     async getSourceStore(type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
         return this.dataProvider.stores[type].store;
     }
     /**
@@ -14490,6 +14523,9 @@ class RevoGridComponent {
      */
     async getContentSize() {
         var _a;
+        if (!this.dimensionProvider) {
+            throw new Error('Not connected');
+        }
         return (_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.getFullSize();
     }
     /**
@@ -14559,11 +14595,12 @@ class RevoGridComponent {
         (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.moveTip(e.detail);
     }
     async onCellEdit(e) {
+        var _a;
         const { defaultPrevented, detail } = this.beforeedit.emit(e.detail);
         await timeout();
         // apply data
         if (!defaultPrevented) {
-            this.dataProvider.setCellData(detail);
+            (_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.setCellData(detail);
             // @feature: incrimental update for cells
             // this.dataProvider.setCellData(detail, false);
             // await this.setDataAt({
@@ -14576,6 +14613,9 @@ class RevoGridComponent {
         }
     }
     onRangeEdit(e) {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
         const { defaultPrevented, detail } = this.beforerangeedit.emit(e.detail);
         if (defaultPrevented) {
             e.preventDefault();
@@ -14620,6 +14660,9 @@ class RevoGridComponent {
         this.columnChanged(this.columns);
     }
     columnChanged(newVal = []) {
+        if (!this.dimensionProvider) {
+            return;
+        }
         const columnGather = getColumns(newVal, 0, this.columnTypes);
         this.beforecolumnsset.emit(columnGather);
         this.dimensionProvider.applyNewColumns(columnGather.columns, this.disableVirtualX);
@@ -14637,11 +14680,17 @@ class RevoGridComponent {
         this.columnChanged(this.columns);
     }
     rowSizeChanged(s) {
+        if (!this.dimensionProvider) {
+            return;
+        }
         // clear existing data
         this.dimensionProvider.setSettings({ originItemSize: s }, 'rgRow');
         this.rowDefChanged(this.rowDefinitions, this.rowDefinitions, 'rowSize', true);
     }
     themeChanged(t, _, __ = 'theme', init = false) {
+        if (!this.dimensionProvider) {
+            return;
+        }
         this.themeService.register(t);
         this.dimensionProvider.setSettings({ originItemSize: this.themeService.rowSize }, 'rgRow');
         this.dimensionProvider.setSettings({ originItemSize: this.colSize }, 'rgCol');
@@ -14656,6 +14705,9 @@ class RevoGridComponent {
         this.afterthemechanged.emit(t);
     }
     dataSourceChanged(newVal = [], _, watchName) {
+        if (!this.dataProvider) {
+            return;
+        }
         let type = 'rgRow';
         switch (watchName) {
             case 'pinnedBottomSource':
@@ -14699,6 +14751,10 @@ class RevoGridComponent {
         this.dataSourceChanged(this.source, this.source, 'source');
     }
     rowDefChanged(after, before, _watchName, forceUpdate = true) {
+        // in firefox it's triggered before init
+        if (!this.dimensionProvider || !this.dataProvider) {
+            return;
+        }
         const { detail: { vals: newVal, oldVals: oldVal }, } = this.beforerowdefinition.emit({
             vals: after,
             oldVals: before,
@@ -14727,8 +14783,9 @@ class RevoGridComponent {
             }
         }
         Object.entries(newRows).forEach(([k, r]) => {
+            var _a;
             const type = k;
-            this.dimensionProvider.setCustomSizes(type, r.sizes || {});
+            (_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(type, r.sizes || {});
         });
     }
     trimmedRowsChanged(newVal = {}) {
@@ -14752,6 +14809,9 @@ class RevoGridComponent {
      * Stretch Plugin Apply
      */
     applyStretch(isStretch) {
+        if (!this.dimensionProvider || !this.dataProvider) {
+            return;
+        }
         if (isStretch === 'false') {
             isStretch = false;
         }
@@ -14795,6 +14855,9 @@ class RevoGridComponent {
     // #region Plugins
     setPlugins() {
         var _a;
+        if (!this.dimensionProvider || !this.dataProvider) {
+            return;
+        }
         // remove old plugins if any
         this.removePlugins();
         // pass data provider to plugins
@@ -14880,7 +14943,8 @@ class RevoGridComponent {
         this.groupingChanged(this.grouping);
         // init scrolling service
         this.scrollingService = new GridScrollingService((e) => {
-            this.dimensionProvider.setViewPortCoordinate({
+            var _a;
+            (_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setViewPortCoordinate({
                 coordinate: e.coordinate,
                 type: e.dimension,
             });
@@ -14898,6 +14962,9 @@ class RevoGridComponent {
         return Promise.all(this.jobsBeforeRender);
     }
     render() {
+        if (!this.dimensionProvider || !this.dataProvider) {
+            return;
+        }
         const contentHeight = this.dimensionProvider.stores['rgRow'].store.get('realSize');
         // init viewport service helpers
         this.viewport = new ViewportService({
@@ -14933,7 +15000,7 @@ class RevoGridComponent {
             const headerProperties = Object.assign(Object.assign({}, view.headerProp), { type: view.type, additionalData: this.additionalData, viewportCol: view.viewportCol, selectionStore: view.columnSelectionStore, canResize: this.resize, readonly: this.readonly, columnFilter: !!this.filter });
             // Column headers
             const dataViews = [
-                hAsync("revogr-header", Object.assign({ key: '31f0cebc08d5e9222d058c138079ee1d6c228ed2' }, headerProperties, { slot: HEADER_SLOT })),
+                hAsync("revogr-header", Object.assign({}, headerProperties, { slot: HEADER_SLOT })),
             ];
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
@@ -14955,12 +15022,12 @@ class RevoGridComponent {
         const typeCol = 'rgCol';
         const viewports = this.viewportProvider.stores;
         const dimensions = this.dimensionProvider.stores;
-        return (hAsync(Host, { key: '2563091c11d20bef3e25706e64822040002fe5a4' }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: '58fbfb9a4169e6640ad1c4b0f238c006e23d0059', class: "main-viewport", onClick: (e) => {
+        return (hAsync(Host, null, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { class: "main-viewport", onClick: (e) => {
                 var _a;
                 if (e.currentTarget === e.target) {
                     (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.clearEdit();
                 }
-            } }, hAsync("div", { key: '028984ab42f98828aba4d5b37b831b832978133f', class: "viewports" }, hAsync("slot", { key: '521dacf842476ff8ed35ec4c87c6276c331c4316', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: 'd4e7a0c3cdda8fcc9e64841c0d16f1e557a75144', class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), hAsync(OrderRenderer, { key: 'c49e93965594b38d6827f8f8c00e3004c8c392f8', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: 'ccccd5bdfbd5ccd1dfb76727b7e903a95d262945', class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
+            } }, hAsync("div", { class: "viewports" }, hAsync("slot", { name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), hAsync(OrderRenderer, { ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
     }
     disconnectedCallback() {
         // Remove all plugins, to avoid memory leaks and unexpected behaviour when the component is removed
@@ -16048,7 +16115,7 @@ class RevogrRowHeaders {
         const viewportHeader = Object.assign(Object.assign({}, this.headerProp), { colData: typeof this.rowHeaderColumn === 'object' ? [this.rowHeaderColumn] : [], viewportCol: viewport.store, canResize: false, type: ROW_HEADER_TYPE,
             // parent,
             slot: HEADER_SLOT });
-        return (hAsync(Host, { class: { [ROW_HEADER_TYPE]: true }, key: ROW_HEADER_TYPE }, hAsync("revogr-viewport-scroll", Object.assign({ key: '743c1dbaed3edf679c0616a2b79171a43d94806f' }, viewportScroll, { "row-header": true }), hAsync("revogr-header", Object.assign({ key: '53f1f64b1358d7828a5e45807915740ef198df21' }, viewportHeader)), dataViews)));
+        return (hAsync(Host, { class: { [ROW_HEADER_TYPE]: true }, key: ROW_HEADER_TYPE }, hAsync("revogr-viewport-scroll", Object.assign({ key: 'a63769297e9f09edbdccc04012137f843ae92f17' }, viewportScroll, { "row-header": true }), hAsync("revogr-header", Object.assign({ key: '796e213166053e66dbd99298991d92e48e1f49cb' }, viewportHeader)), dataViews)));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -16377,7 +16444,7 @@ class RevogrScrollVirtual {
     }
     render() {
         const sizeType = this.dimension === 'rgRow' ? 'height' : 'width';
-        return (hAsync(Host, { key: '1bf8d494d6d65ffd27f0a663f5c62c9b60cd35e1', onScroll: (e) => this.onScroll(e) }, hAsync("div", { key: '3f554ca3e7822c9bb20fe830fc4122a0d52919ee', style: {
+        return (hAsync(Host, { key: '73aa9ba5bd17eea4d37eaecd63326fca29e4e231', onScroll: (e) => this.onScroll(e) }, hAsync("div", { key: 'c57e42d782f693dc2a93e98f157ef60ebe09398c', style: {
                 [sizeType]: `${getContentSize(this.dimensionStore.get('realSize'), this.size, this.viewportStore.get('virtualSize'))}px`,
             } })));
     }
@@ -16633,7 +16700,7 @@ class RevogrViewportScroll {
         this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
-        return (hAsync(Host, { key: '8395ce30127f30fff81dc67bfe2f4c3b087b2007', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: 'efd2db0f5b22b394e93923926f86f2ab9bffb8e0', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: '2794c7187ec23ac45dab5f6cb3f20ba59102b2a7', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '1a344d7e5cf58d77818390e8d541de88a75399d0', name: HEADER_SLOT })), hAsync("div", { key: '2aeb56f4bf3f3fc60eaeaffd8c18565beaa127ca', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: '59482ef73d3c4617c2511b8613056bbc200cd089', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: 'f318ab365e5f6eddcd2812a314f55cac0959c3b4', name: CONTENT_SLOT }))), hAsync("div", { key: '265c036107a8ed3d47b767fec10ae0225cc927cf', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '2aa7e178375b462e666cf067e075856f592714b6', name: FOOTER_SLOT })))));
+        return (hAsync(Host, { key: '5a7d07c999e59a8b96a99c87e50103acb4f18406', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '09ac58def608c3bc169ce12e09dd2dc2df1f90a2', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: 'c370a3b8d5d2f4925b77020ac85d5f4d06b876e0', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: 'c5feeeaf90e42715bbf13619b2341d23257447fb', name: HEADER_SLOT })), hAsync("div", { key: '7c04ffd6e7893db57f883a736d0a4932743863ea', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'da5db752025ddaaf626411b445b3b90b5b81cdc8', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: 'c5404f4628b68b4b18a6e9143c70e72c50616f9d', name: CONTENT_SLOT }))), hAsync("div", { key: 'ee9e1b5dd297f220aed3efef4b53b4dd74a11837', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '5ff132da3009d959a6e87fbbe3d22930f322c486', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing
@@ -16739,7 +16806,7 @@ class VNodeToHtml {
     render() {
         var _a, _b;
         this.vnodes = (_b = (_a = this.redraw) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : null;
-        return (hAsync(Host, { key: 'dcaa7c6bd2f1eef1dd9a7f95a723f8ec778681a0', style: { visibility: 'hidden', position: 'absolute' } }, this.vnodes));
+        return (hAsync(Host, { key: '8d02c8cc7a2520cebce307c7f3e7e07107a0a494', style: { visibility: 'hidden', position: 'absolute' } }, this.vnodes));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {