@revolist/revogrid 4.8.19 → 4.9.1

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","isOutside","isFilterBtn","undefined","show","newEntity","type","getChanges","componentWillRender","isFilterIdSet","Object","keys","prop","filterId","length","renderSelectOptions","isDefaultTypeRemoved","options","_a","capts","assign","filterCaptions","push","h","selected","currentFilterType","value","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","document","getElementById","focus","addNewFilterToProp","select","currentFilterId","event","toLowerCase","stopPropagation","assertChanges","items","findIndex","splice","Error","classList","contains","uuid"],"sources":["src/utils/closest.polifill.ts","src/plugins/filter/filter.style.scss?tag=revogr-filter-panel","src/plugins/filter/filter.pop.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) = 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 } 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: 'Cancel',\n    cancel: 'Close',\n    add: 'Add more condition...',\n    placeholder: 'Enter value...',\n    and: 'and',\n    or: 'or',\n  };\n  @State() isFilterIdSet = false;\n  @State() filterId = 0;\n  @State() currentFilterId = -1;\n  @State() currentFilterType: FilterType = defaultType;\n  @State() changes: ShowData | undefined;\n  @Prop({ mutable: true, reflect: true }) uuid: string;\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      if (this.isOutside(el) && !isFilterBtn(el)) {\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=\"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  private isOutside(e: HTMLElement | null) {\n    const select = document.getElementById('add-filter') as HTMLSelectElement;\n    if (select) select.value = defaultType;\n\n    this.currentFilterType = defaultType;\n    if (this.changes) {\n      this.changes.type = defaultType;\n    }\n    this.currentFilterId = -1;\n    if (e?.classList.contains(`[uuid=\"${this.uuid}\"]`)) {\n      return false;\n    }\n    return !e?.closest(`[uuid=\"${this.uuid}\"]`);\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","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) = 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":[]}

package/dist/revo-grid/{throttle-eeca0062.js → throttle-1b1dd9d2.js}

@@ -1,5 +1,5 @@
 /*!
  * Built by Revolist OU ❤️
  */
-import{s as t}from"./index-5a722722.js";import{d as i}from"./debounce-7781346d.js";import{i as r}from"./toNumber-8de324a7.js";const s={contentSize:0,clientSize:0,virtualSize:0,maxSize:0};const e=-1;function n(t,i,r=0){return t+(r?i-r: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({},s),rgCol:Object.assign({},s)}}setParams(t,i){const r=n(t.contentSize,t.clientSize,t.virtualSize);this.params[i]=Object.assign(Object.assign({},t),{maxSize:r-t.clientSize,virtualContentSize:r})}async setScroll(t){this.cancelScroll(t.dimension);const i=new Promise(((i,r)=>{if(this.cfg.skipAnimationFrame){return i()}const s=window.requestAnimationFrame((()=>{i()}));this.preventArtificialScroll[t.dimension]=r.bind(null,s)}));try{await i;const r=this.getParams(t.dimension);t.coordinate=Math.ceil(t.coordinate);this.previousScroll[t.dimension]=this.wrapCoordinate(t.coordinate,r);this.preventArtificialScroll[t.dimension]=null;this.cfg.applyScroll(Object.assign(Object.assign({},t),{coordinate:r.virtualSize?this.convert(t.coordinate,r,false):t.coordinate}))}catch(t){window.cancelAnimationFrame(t)}}scroll(t,i,r=false,s,n=false){this.cancelScroll(i);if(!r&&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:s,outside:n})}getParams(t){return this.params[t]}wrapCoordinate(t,i){if(t<0){return e}if(t>i.maxSize){return i.maxSize}return t}cancelScroll(t){var i,r;(r=(i=this.preventArtificialScroll)[t])===null||r===void 0?void 0:r.call(i);this.preventArtificialScroll[t]=null}convert(i,r,s=true){const e=r.clientSize;const n=[0,r.virtualContentSize-e];const o=[0,r.contentSize-r.virtualSize];if(s){return t(i,n,o)}return t(i,o,n)}}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 r=(new Date).getTime()-this.mouseWheelScrollTimestamp[t];return r>this.scrollThrottling&&i!==this.lastKnownScrollCoordinate[t]}}var c=i,l=r;var h="Expected a function";function u(t,i,r){var s=true,e=true;if(typeof t!="function"){throw new TypeError(h)}if(l(r)){s="leading"in r?!!r.leading:s;e="trailing"in r?!!r.trailing:e}return c(t,i,{leading:s,maxWait:i,trailing:e})}var d=u;export{a as L,o as a,n as g,d as t};
-//# sourceMappingURL=throttle-eeca0062.js.map
+import{s as t}from"./index-4e881436.js";import{d as i}from"./debounce-7781346d.js";import{i as r}from"./toNumber-8de324a7.js";const s={contentSize:0,clientSize:0,virtualSize:0,maxSize:0};const e=-1;function n(t,i,r=0){return t+(r?i-r: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({},s),rgCol:Object.assign({},s)}}setParams(t,i){const r=n(t.contentSize,t.clientSize,t.virtualSize);this.params[i]=Object.assign(Object.assign({},t),{maxSize:r-t.clientSize,virtualContentSize:r})}async setScroll(t){this.cancelScroll(t.dimension);const i=new Promise(((i,r)=>{if(this.cfg.skipAnimationFrame){return i()}const s=window.requestAnimationFrame((()=>{i()}));this.preventArtificialScroll[t.dimension]=r.bind(null,s)}));try{await i;const r=this.getParams(t.dimension);t.coordinate=Math.ceil(t.coordinate);this.previousScroll[t.dimension]=this.wrapCoordinate(t.coordinate,r);this.preventArtificialScroll[t.dimension]=null;this.cfg.applyScroll(Object.assign(Object.assign({},t),{coordinate:r.virtualSize?this.convert(t.coordinate,r,false):t.coordinate}))}catch(t){window.cancelAnimationFrame(t)}}scroll(t,i,r=false,s,n=false){this.cancelScroll(i);if(!r&&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:s,outside:n})}getParams(t){return this.params[t]}wrapCoordinate(t,i){if(t<0){return e}if(t>i.maxSize){return i.maxSize}return t}cancelScroll(t){var i,r;(r=(i=this.preventArtificialScroll)[t])===null||r===void 0?void 0:r.call(i);this.preventArtificialScroll[t]=null}convert(i,r,s=true){const e=r.clientSize;const n=[0,r.virtualContentSize-e];const o=[0,r.contentSize-r.virtualSize];if(s){return t(i,n,o)}return t(i,o,n)}}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 r=(new Date).getTime()-this.mouseWheelScrollTimestamp[t];return r>this.scrollThrottling&&i!==this.lastKnownScrollCoordinate[t]}}var c=i,l=r;var h="Expected a function";function u(t,i,r){var s=true,e=true;if(typeof t!="function"){throw new TypeError(h)}if(l(r)){s="leading"in r?!!r.leading:s;e="trailing"in r?!!r.trailing:e}return c(t,i,{leading:s,maxWait:i,trailing:e})}var d=u;export{a as L,o as a,n as g,d as t};
+//# sourceMappingURL=throttle-1b1dd9d2.js.map

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

@@ -530,7 +530,6 @@ export declare class RevoGridComponent {
     onCellFocus(e: CustomEvent<BeforeSaveDataDetails>): void;
     element: HTMLRevoGridElement;
     private extraElements;
-    uuid: string | null;
     columnProvider: ColumnDataProvider;
     dataProvider: DataProvider;
     dimensionProvider: DimensionProvider;

package/dist/types/components.d.ts

@@ -16,7 +16,7 @@ import { ColumnCollection } from "./services/column.data.provider";
 import { DataInput } from "./plugins/export/types";
 import { Observable } from "./utils/store.utils";
 import { DSourceState, Groups } from "./store/index";
-import { MultiFilterItem, ShowData } from "./plugins/filter/filter.pop";
+import { MultiFilterItem, ShowData } from "./plugins/filter/filter.panel";
 import { LogicFunction } from "./plugins/filter/filter.types";
 import { ResizeProps } from "./components/header/resizable.directive";
 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";
@@ -31,7 +31,7 @@ export { ColumnCollection } from "./services/column.data.provider";
 export { DataInput } from "./plugins/export/types";
 export { Observable } from "./utils/store.utils";
 export { DSourceState, Groups } from "./store/index";
-export { MultiFilterItem, ShowData } from "./plugins/filter/filter.pop";
+export { MultiFilterItem, ShowData } from "./plugins/filter/filter.panel";
 export { LogicFunction } from "./plugins/filter/filter.types";
 export { ResizeProps } from "./components/header/resizable.directive";
 export { 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";
@@ -399,7 +399,6 @@ export namespace Components {
         "filterTypes": Record<string, string[]>;
         "getChanges": () => Promise<ShowData>;
         "show": (newEntity?: ShowData) => Promise<void>;
-        "uuid": string;
     }
     /**
      * Focus component. Shows focus layer around the cell that is currently in focus.
@@ -1689,7 +1688,6 @@ declare namespace LocalJSX {
         "filterNames"?: Record<string, string>;
         "filterTypes"?: Record<string, string[]>;
         "onFilterChange"?: (event: RevogrFilterPanelCustomEvent<MultiFilterItem>) => void;
-        "uuid"?: string;
     }
     /**
      * Focus component. Shows focus layer around the cell that is currently in focus.

package/dist/types/plugins/filter/{filter.pop.d.ts → filter.panel.d.ts}

@@ -34,12 +34,12 @@ export type ShowData = {
  */
 export declare class FilterPanel {
     private filterCaptionsInternal;
+    element: HTMLElement;
     isFilterIdSet: boolean;
     filterId: number;
     currentFilterId: number;
     currentFilterType: FilterType;
     changes: ShowData | undefined;
-    uuid: string;
     filterItems: MultiFilterItem;
     filterTypes: Record<string, string[]>;
     filterNames: Record<string, string>;
@@ -68,5 +68,4 @@ export declare class FilterPanel {
     private onRemoveFilter;
     private toggleFilterAndOr;
     private assertChanges;
-    private isOutside;
 }

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

@@ -1,5 +1,5 @@
 import { BasePlugin } from '../base.plugin';
-import { MultiFilterItem } from './filter.pop';
+import { MultiFilterItem } from './filter.panel';
 import { FilterType } from './filter.service';
 import { LogicFunction } from './filter.types';
 import { ColumnProp, ColumnRegular, DataType } from "../../types/index";
@@ -64,7 +64,7 @@ export declare class FilterPlugin extends BasePlugin {
     possibleFilterNames: Record<string, string>;
     possibleFilterEntities: Record<string, LogicFunction>;
     filterProp: string;
-    constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders, uiid: string, config?: ColumnFilterConfig);
+    constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders, config?: ColumnFilterConfig);
     initConfig(config: ColumnFilterConfig): void;
     headerclick(e: HeaderEvent): Promise<void>;
     getColumnFilter(type?: boolean | string | string[]): Record<string, string[]>;

package/dist/types/types/interfaces.d.ts

@@ -417,6 +417,7 @@ export type InitialHeaderClick = {
      * The column that was clicked.
      */
     column: ColumnRegular;
+    providers: Providers<DimensionCols | 'rowHeaders'>;
 };
 /**
  * `Range` is an object that represents a range of values.

package/dist/types/types/viewport.interfaces.d.ts

@@ -28,8 +28,6 @@ export type ViewportData = {
     segmentSelectionStore: Observable<SelectionStoreState>;
     /** Slot to put data */
     slot: SlotType;
-    /** Current grid uniq Id */
-    uuid: string;
     style?: {
         [key: string]: string;
     };

package/dist/types/utils/consts.d.ts

@@ -2,7 +2,6 @@ export declare const MIN_COL_SIZE = 30;
 export declare const RESIZE_INTERVAL = 40;
 export declare const DATA_COL = "data-rgCol";
 export declare const DATA_ROW = "data-rgRow";
-export declare const UUID = "grid-uuid";
 export declare const DISABLED_CLASS = "disabled";
 export declare const CELL_CLASS = "rgCell";
 export declare const ROW_HEADER_TYPE = "rowHeaders";

package/hydrate/index.js

@@ -3046,7 +3046,7 @@ class FilterPanel {
             title: 'Filter by',
             save: 'Save',
             // drops the filter
-            reset: 'Cancel',
+            reset: 'Clear changes',
             cancel: 'Close',
             add: 'Add more condition...',
             placeholder: 'Enter value...',
@@ -3061,7 +3061,6 @@ class FilterPanel {
         this.currentFilterId = -1;
         this.currentFilterType = defaultType;
         this.changes = undefined;
-        this.uuid = undefined;
         this.filterItems = {};
         this.filterTypes = {};
         this.filterNames = {};
@@ -3072,7 +3071,18 @@ class FilterPanel {
     onMouseDown(e) {
         if (this.changes && !e.defaultPrevented) {
             const el = e.target;
-            if (this.isOutside(el) && !isFilterBtn(el)) {
+            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;
             }
         }
@@ -3285,26 +3295,12 @@ class FilterPanel {
             throw new Error('Changes required per edit');
         }
     }
-    isOutside(e) {
-        const select = document.getElementById('add-filter');
-        if (select)
-            select.value = defaultType;
-        this.currentFilterType = defaultType;
-        if (this.changes) {
-            this.changes.type = defaultType;
-        }
-        this.currentFilterId = -1;
-        if (e === null || e === void 0 ? void 0 : e.classList.contains(`[uuid="${this.uuid}"]`)) {
-            return false;
-        }
-        return !(e === null || e === void 0 ? void 0 : e.closest(`[uuid="${this.uuid}"]`));
-    }
+    get element() { return getElement(this); }
     static get style() { return RevogrFilterPanelStyle0; }
     static get cmpMeta() { return {
         "$flags$": 0,
         "$tagName$": "revogr-filter-panel",
         "$members$": {
-            "uuid": [1537],
             "filterItems": [16],
             "filterTypes": [16],
             "filterNames": [16],
@@ -3321,7 +3317,7 @@ class FilterPanel {
         },
         "$listeners$": [[5, "mousedown", "onMouseDown"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["uuid", "uuid"]]
+        "$attrsToReflect$": []
     }; }
 }
 
@@ -8426,7 +8422,6 @@ const MIN_COL_SIZE = 30;
 const RESIZE_INTERVAL = 40;
 const DATA_COL = 'data-rgCol';
 const DATA_ROW = 'data-rgRow';
-const UUID = 'grid-uuid';
 const DISABLED_CLASS = 'disabled';
 const CELL_CLASS = 'rgCell';
 const ROW_HEADER_TYPE = 'rowHeaders';
@@ -11667,7 +11662,7 @@ const filterTypes = {
 const FILTER_TRIMMED_TYPE = 'filter';
 const FILTER_CONFIG_CHANGED_EVENT = 'filterconfigchanged';
 class FilterPlugin extends BasePlugin {
-    constructor(revogrid, providers, uiid, config) {
+    constructor(revogrid, providers, config) {
         var _a;
         super(revogrid, providers);
         this.revogrid = revogrid;
@@ -11716,7 +11711,7 @@ class FilterPlugin extends BasePlugin {
         const existingNodes = this.revogrid.registerVNode.filter((n) => n.$tag$ !== 'revogr-filter-panel');
         this.revogrid.registerVNode = [
             ...existingNodes,
-            hAsync("revogr-filter-panel", { uuid: `filter-${uiid}`, filterItems: this.multiFilterItems, filterNames: this.possibleFilterNames, filterEntities: this.possibleFilterEntities, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, ref: e => (this.pop = e) }),
+            hAsync("revogr-filter-panel", { filterItems: this.multiFilterItems, filterNames: this.possibleFilterNames, filterEntities: this.possibleFilterEntities, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, ref: e => (this.pop = e) }),
         ];
     }
     initConfig(config) {
@@ -14212,8 +14207,6 @@ class RevoGridComponent {
         // #region Listeners outside scope
         this.clickTrackForFocusClear = null;
         this.extraElements = [];
-        // UUID required to support multiple grids in one page and avoid collision
-        this.uuid = null;
         this.viewport = null;
         this.isInited = false;
         /**
@@ -14460,19 +14453,19 @@ class RevoGridComponent {
         if (event.defaultPrevented) {
             return;
         }
-        const target = event.target;
         const pos = screenX + screenY;
         // detect if mousemove then do nothing
         if (Math.abs(this.clickTrackForFocusClear - pos) > 10) {
             return;
         }
-        // check if action finished inside of the document
-        // clear data which is outside of grid
+        // Check if action finished inside of the document
         // if event prevented or it is current table don't clear focus
-        if (target === null || target === void 0 ? void 0 : target.closest(`[${UUID}="${this.uuid}"]`)) {
-            return;
+        const path = event.composedPath();
+        if (!path.includes(this.element) &&
+            !path.includes(this.element.shadowRoot)) {
+            // Perform actions if the click is outside the component
+            this.clearFocus();
         }
-        this.clearFocus();
     }
     // #endregion
     // #region Listeners
@@ -14756,7 +14749,7 @@ class RevoGridComponent {
         }
         // register filter plugin
         if (this.filter) {
-            this.internalPlugins.push(new FilterPlugin(this.element, pluginData, this.uuid, typeof this.filter === 'object' ? this.filter : undefined));
+            this.internalPlugins.push(new FilterPlugin(this.element, pluginData, typeof this.filter === 'object' ? this.filter : undefined));
         }
         // register export plugin
         if (this.exporting) {
@@ -14803,8 +14796,6 @@ class RevoGridComponent {
         this.selectionStoreConnector = new SelectionStoreConnector();
         this.dataProvider = new DataProvider(this.dimensionProvider);
         // #endregion
-        // generate uuid for this grid
-        this.uuid = `rv--${Math.random().toString(36).slice(2, 6)}-${Date.now()}`;
         this.registerOutsideVNodes(this.registerVNode);
         // init plugins
         this.setPlugins();
@@ -14875,7 +14866,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: '83382de99ec784ec1b049ccd6fe4bdcc332cabed' }, headerProperties, { slot: HEADER_SLOT })),
+                hAsync("revogr-header", Object.assign({ key: 'ff8eefd6db3baf494c015a2ea573160d27739aa9' }, headerProperties, { slot: HEADER_SLOT })),
             ];
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
@@ -14897,11 +14888,11 @@ class RevoGridComponent {
         const typeCol = 'rgCol';
         const viewports = this.viewportProvider.stores;
         const dimensions = this.dimensionProvider.stores;
-        return (hAsync(Host, { key: 'd0d2bbed64b64c9b6ca791a53f3a3c8ef3c4005e', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: 'bb8dd42f87d5bd0b7077de213512d05ceb8b6fca', class: "main-viewport", onClick: (e) => {
+        return (hAsync(Host, { key: '21bbe81595f20f7bcb271f28c9c86feef472efec' }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: '7a3092cd02305a0dfaa3b3d3160164001f0ed08b', class: "main-viewport", onClick: (e) => {
                 if (e.currentTarget === e.target) {
                     this.viewport.clearEdit();
                 }
-            } }, hAsync("div", { key: 'd8e40dd546ba1448b0e337c4f52a5bfc2ad0cacd', class: "viewports" }, hAsync("slot", { key: '2081bc7165ac469f4ff43be97519a3a1b960e105', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: '4ba3abc9197c7f5062166b5fff21eef258ee49df', 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: '3c52006a7d1c846baeac3892d6804b56f47aebbd', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: 'e0ff22ae142089d9d4a66e074a03e41463fe4f01', 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", { key: 'ae1dfccbb72cc2a9f7fa370889746c702d106045', class: "viewports" }, hAsync("slot", { key: '0725b46d877fbb63fb513845cc1c7b86d0f856b8', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: 'd41771f6ff459f1f6747ce496c8165b1dab44963', 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: '2914421478450c9b198e0aade898ed342e4d7f6a', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: 'bc1812c5ce54cda01e81cc06e28c69dc8e36fdf3', 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
@@ -15744,16 +15735,29 @@ const HeaderRenderer = (p) => {
         maxWidth: (_d = p.data) === null || _d === void 0 ? void 0 : _d.maxSize,
         active: p.active || ['r'],
         class: cellClass,
-        style: { width: `${p.column.size}px`, transform: `translateX(${p.column.start}px)` },
+        style: {
+            width: `${p.column.size}px`,
+            transform: `translateX(${p.column.start}px)`,
+        },
         onResize: p.onResize,
         onDoubleClick(originalEvent) {
-            p.onDoubleClick({ column: p.data, index: p.column.itemIndex, originalEvent });
+            p.onDoubleClick({
+                column: p.data,
+                index: p.column.itemIndex,
+                originalEvent,
+                providers: p.data.providers,
+            });
         },
         onClick(originalEvent) {
             if (originalEvent.defaultPrevented || !p.onClick) {
                 return;
             }
-            p.onClick({ column: p.data, index: p.column.itemIndex, originalEvent });
+            p.onClick({
+                column: p.data,
+                index: p.column.itemIndex,
+                originalEvent,
+                providers: p.data.providers,
+            });
         },
     };
     if (p.range) {
@@ -15765,7 +15769,7 @@ const HeaderRenderer = (p) => {
     }
     return (hAsync(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData },
         hAsync(SortingSign, { column: p.data }),
-        p.canFilter && ((_e = p.data) === null || _e === void 0 ? void 0 : _e.filter) !== false ? hAsync(FilterButton, { column: p.data }) : ''));
+        p.canFilter && ((_e = p.data) === null || _e === void 0 ? void 0 : _e.filter) !== false ? (hAsync(FilterButton, { column: p.data })) : ('')));
 };
 
 const GroupHeaderRenderer = (p) => {