'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var React = require('react');
var classnames = require('classnames');
var neetoCist = require('@bigbinary/neeto-cist');
var useDebounce = require('@bigbinary/neeto-commons-frontend/react-utils/useDebounce');
var Close = require('@bigbinary/neeto-icons/Close');
var Dropdown = require('@bigbinary/neetoui/Dropdown');
var Label = require('@bigbinary/neetoui/Label');
var Input = require('@bigbinary/neetoui/Input');
var Button = require('@bigbinary/neetoui/Button');
var Typography = require('@bigbinary/neetoui/Typography');
var reactI18next = require('react-i18next');
var _extends = require('@babel/runtime/helpers/esm/extends');
var _assertThisInitialized = require('@babel/runtime/helpers/esm/assertThisInitialized');
var _inheritsLoose = require('@babel/runtime/helpers/esm/inheritsLoose');
require('@babel/runtime/helpers/esm/objectWithoutPropertiesLoose');
var Tooltip = require('@bigbinary/neetoui/Tooltip');
var jsxRuntime = require('react/jsx-runtime');
var injectCss = require('./inject-css-B6qYtOJe.js');
var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');

var safeIsNaN = Number.isNaN ||
    function ponyfill(value) {
        return typeof value === 'number' && value !== value;
    };
function isEqual(first, second) {
    if (first === second) {
        return true;
    }
    if (safeIsNaN(first) && safeIsNaN(second)) {
        return true;
    }
    return false;
}
function areInputsEqual(newInputs, lastInputs) {
    if (newInputs.length !== lastInputs.length) {
        return false;
    }
    for (var i = 0; i < newInputs.length; i++) {
        if (!isEqual(newInputs[i], lastInputs[i])) {
            return false;
        }
    }
    return true;
}

function memoizeOne(resultFn, isEqual) {
    if (isEqual === void 0) { isEqual = areInputsEqual; }
    var lastThis;
    var lastArgs = [];
    var lastResult;
    var calledOnce = false;
    function memoized() {
        var newArgs = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            newArgs[_i] = arguments[_i];
        }
        if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
            return lastResult;
        }
        lastResult = resultFn.apply(this, newArgs);
        calledOnce = true;
        lastThis = this;
        lastArgs = newArgs;
        return lastResult;
    }
    return memoized;
}

// Animation frame based implementation of setTimeout.
// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
var now = hasNativePerformanceNow ? function () {
  return performance.now();
} : function () {
  return Date.now();
};
function cancelTimeout(timeoutID) {
  cancelAnimationFrame(timeoutID.id);
}
function requestTimeout(callback, delay) {
  var start = now();

  function tick() {
    if (now() - start >= delay) {
      callback.call(null);
    } else {
      timeoutID.id = requestAnimationFrame(tick);
    }
  }

  var timeoutID = {
    id: requestAnimationFrame(tick)
  };
  return timeoutID;
}

var size = -1; // This utility copied from "dom-helpers" package.

function getScrollbarSize(recalculate) {
  if (recalculate === void 0) {
    recalculate = false;
  }

  if (size === -1 || recalculate) {
    var div = document.createElement('div');
    var style = div.style;
    style.width = '50px';
    style.height = '50px';
    style.overflow = 'scroll';
    document.body.appendChild(div);
    size = div.offsetWidth - div.clientWidth;
    document.body.removeChild(div);
  }

  return size;
}
var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
// The safest way to check this is to intentionally set a negative offset,
// and then verify that the subsequent "scroll" event matches the negative offset.
// If it does not match, then we can assume a non-standard RTL scroll implementation.

function getRTLOffsetType(recalculate) {
  if (recalculate === void 0) {
    recalculate = false;
  }

  if (cachedRTLResult === null || recalculate) {
    var outerDiv = document.createElement('div');
    var outerStyle = outerDiv.style;
    outerStyle.width = '50px';
    outerStyle.height = '50px';
    outerStyle.overflow = 'scroll';
    outerStyle.direction = 'rtl';
    var innerDiv = document.createElement('div');
    var innerStyle = innerDiv.style;
    innerStyle.width = '100px';
    innerStyle.height = '100px';
    outerDiv.appendChild(innerDiv);
    document.body.appendChild(outerDiv);

    if (outerDiv.scrollLeft > 0) {
      cachedRTLResult = 'positive-descending';
    } else {
      outerDiv.scrollLeft = 1;

      if (outerDiv.scrollLeft === 0) {
        cachedRTLResult = 'negative';
      } else {
        cachedRTLResult = 'positive-ascending';
      }
    }

    document.body.removeChild(outerDiv);
    return cachedRTLResult;
  }

  return cachedRTLResult;
}

var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;

var defaultItemKey = function defaultItemKey(_ref) {
  var columnIndex = _ref.columnIndex;
      _ref.data;
      var rowIndex = _ref.rowIndex;
  return rowIndex + ":" + columnIndex;
}; // In DEV mode, this Set helps us only log a warning once per component instance.
// This avoids spamming the console every time a render happens.


var devWarningsOverscanCount = null;
var devWarningsOverscanRowsColumnsCount = null;
var devWarningsTagName = null;

if (process.env.NODE_ENV !== 'production') {
  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
    devWarningsOverscanCount = /*#__PURE__*/new WeakSet();
    devWarningsOverscanRowsColumnsCount = /*#__PURE__*/new WeakSet();
    devWarningsTagName = /*#__PURE__*/new WeakSet();
  }
}

function createGridComponent(_ref2) {
  var _class;

  var getColumnOffset = _ref2.getColumnOffset,
      getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,
      getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,
      getColumnWidth = _ref2.getColumnWidth,
      getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,
      getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,
      getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,
      getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,
      getRowHeight = _ref2.getRowHeight,
      getRowOffset = _ref2.getRowOffset,
      getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,
      getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,
      initInstanceProps = _ref2.initInstanceProps,
      shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,
      validateProps = _ref2.validateProps;
  return _class = /*#__PURE__*/function (_PureComponent) {
    _inheritsLoose(Grid, _PureComponent);

    // Always use explicit constructor for React components.
    // It produces less code after transpilation. (#26)
    // eslint-disable-next-line no-useless-constructor
    function Grid(props) {
      var _this;

      _this = _PureComponent.call(this, props) || this;
      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_this));
      _this._resetIsScrollingTimeoutId = null;
      _this._outerRef = void 0;
      _this.state = {
        instance: _assertThisInitialized(_this),
        isScrolling: false,
        horizontalScrollDirection: 'forward',
        scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,
        scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,
        scrollUpdateWasRequested: false,
        verticalScrollDirection: 'forward'
      };
      _this._callOnItemsRendered = void 0;
      _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {
        return _this.props.onItemsRendered({
          overscanColumnStartIndex: overscanColumnStartIndex,
          overscanColumnStopIndex: overscanColumnStopIndex,
          overscanRowStartIndex: overscanRowStartIndex,
          overscanRowStopIndex: overscanRowStopIndex,
          visibleColumnStartIndex: visibleColumnStartIndex,
          visibleColumnStopIndex: visibleColumnStopIndex,
          visibleRowStartIndex: visibleRowStartIndex,
          visibleRowStopIndex: visibleRowStopIndex
        });
      });
      _this._callOnScroll = void 0;
      _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {
        return _this.props.onScroll({
          horizontalScrollDirection: horizontalScrollDirection,
          scrollLeft: scrollLeft,
          scrollTop: scrollTop,
          verticalScrollDirection: verticalScrollDirection,
          scrollUpdateWasRequested: scrollUpdateWasRequested
        });
      });
      _this._getItemStyle = void 0;

      _this._getItemStyle = function (rowIndex, columnIndex) {
        var _this$props = _this.props,
            columnWidth = _this$props.columnWidth,
            direction = _this$props.direction,
            rowHeight = _this$props.rowHeight;

        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);

        var key = rowIndex + ":" + columnIndex;
        var style;

        if (itemStyleCache.hasOwnProperty(key)) {
          style = itemStyleCache[key];
        } else {
          var _offset = getColumnOffset(_this.props, columnIndex, _this._instanceProps);

          var isRtl = direction === 'rtl';
          itemStyleCache[key] = style = {
            position: 'absolute',
            left: isRtl ? undefined : _offset,
            right: isRtl ? _offset : undefined,
            top: getRowOffset(_this.props, rowIndex, _this._instanceProps),
            height: getRowHeight(_this.props, rowIndex, _this._instanceProps),
            width: getColumnWidth(_this.props, columnIndex, _this._instanceProps)
          };
        }

        return style;
      };

      _this._getItemStyleCache = void 0;
      _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
        return {};
      });

      _this._onScroll = function (event) {
        var _event$currentTarget = event.currentTarget,
            clientHeight = _event$currentTarget.clientHeight,
            clientWidth = _event$currentTarget.clientWidth,
            scrollLeft = _event$currentTarget.scrollLeft,
            scrollTop = _event$currentTarget.scrollTop,
            scrollHeight = _event$currentTarget.scrollHeight,
            scrollWidth = _event$currentTarget.scrollWidth;

        _this.setState(function (prevState) {
          if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
            // Scroll position may have been updated by cDM/cDU,
            // In which case we don't need to trigger another render,
            // And we don't want to update state.isScrolling.
            return null;
          }

          var direction = _this.props.direction; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
          // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
          // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
          // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.

          var calculatedScrollLeft = scrollLeft;

          if (direction === 'rtl') {
            switch (getRTLOffsetType()) {
              case 'negative':
                calculatedScrollLeft = -scrollLeft;
                break;

              case 'positive-descending':
                calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
                break;
            }
          } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.


          calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));
          var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
          return {
            isScrolling: true,
            horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
            scrollLeft: calculatedScrollLeft,
            scrollTop: calculatedScrollTop,
            verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
            scrollUpdateWasRequested: false
          };
        }, _this._resetIsScrollingDebounced);
      };

      _this._outerRefSetter = function (ref) {
        var outerRef = _this.props.outerRef;
        _this._outerRef = ref;

        if (typeof outerRef === 'function') {
          outerRef(ref);
        } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
          outerRef.current = ref;
        }
      };

      _this._resetIsScrollingDebounced = function () {
        if (_this._resetIsScrollingTimeoutId !== null) {
          cancelTimeout(_this._resetIsScrollingTimeoutId);
        }

        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
      };

      _this._resetIsScrolling = function () {
        _this._resetIsScrollingTimeoutId = null;

        _this.setState({
          isScrolling: false
        }, function () {
          // Clear style cache after state update has been committed.
          // This way we don't break pure sCU for items that don't use isScrolling param.
          _this._getItemStyleCache(-1);
        });
      };

      return _this;
    }

    Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
      validateSharedProps(nextProps, prevState);
      validateProps(nextProps);
      return null;
    };

    var _proto = Grid.prototype;

    _proto.scrollTo = function scrollTo(_ref3) {
      var scrollLeft = _ref3.scrollLeft,
          scrollTop = _ref3.scrollTop;

      if (scrollLeft !== undefined) {
        scrollLeft = Math.max(0, scrollLeft);
      }

      if (scrollTop !== undefined) {
        scrollTop = Math.max(0, scrollTop);
      }

      this.setState(function (prevState) {
        if (scrollLeft === undefined) {
          scrollLeft = prevState.scrollLeft;
        }

        if (scrollTop === undefined) {
          scrollTop = prevState.scrollTop;
        }

        if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
          return null;
        }

        return {
          horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
          scrollLeft: scrollLeft,
          scrollTop: scrollTop,
          scrollUpdateWasRequested: true,
          verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
        };
      }, this._resetIsScrollingDebounced);
    };

    _proto.scrollToItem = function scrollToItem(_ref4) {
      var _ref4$align = _ref4.align,
          align = _ref4$align === void 0 ? 'auto' : _ref4$align,
          columnIndex = _ref4.columnIndex,
          rowIndex = _ref4.rowIndex;
      var _this$props2 = this.props,
          columnCount = _this$props2.columnCount,
          height = _this$props2.height,
          rowCount = _this$props2.rowCount,
          width = _this$props2.width;
      var _this$state = this.state,
          scrollLeft = _this$state.scrollLeft,
          scrollTop = _this$state.scrollTop;
      var scrollbarSize = getScrollbarSize();

      if (columnIndex !== undefined) {
        columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
      }

      if (rowIndex !== undefined) {
        rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
      }

      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); // The scrollbar size should be considered when scrolling an item into view,
      // to ensure it's fully visible.
      // But we only need to account for its size when it's actually visible.

      var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;
      var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;
      this.scrollTo({
        scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,
        scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop
      });
    };

    _proto.componentDidMount = function componentDidMount() {
      var _this$props3 = this.props,
          initialScrollLeft = _this$props3.initialScrollLeft,
          initialScrollTop = _this$props3.initialScrollTop;

      if (this._outerRef != null) {
        var outerRef = this._outerRef;

        if (typeof initialScrollLeft === 'number') {
          outerRef.scrollLeft = initialScrollLeft;
        }

        if (typeof initialScrollTop === 'number') {
          outerRef.scrollTop = initialScrollTop;
        }
      }

      this._callPropsCallbacks();
    };

    _proto.componentDidUpdate = function componentDidUpdate() {
      var direction = this.props.direction;
      var _this$state2 = this.state,
          scrollLeft = _this$state2.scrollLeft,
          scrollTop = _this$state2.scrollTop,
          scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;

      if (scrollUpdateWasRequested && this._outerRef != null) {
        // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
        // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
        // So we need to determine which browser behavior we're dealing with, and mimic it.
        var outerRef = this._outerRef;

        if (direction === 'rtl') {
          switch (getRTLOffsetType()) {
            case 'negative':
              outerRef.scrollLeft = -scrollLeft;
              break;

            case 'positive-ascending':
              outerRef.scrollLeft = scrollLeft;
              break;

            default:
              var clientWidth = outerRef.clientWidth,
                  scrollWidth = outerRef.scrollWidth;
              outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
              break;
          }
        } else {
          outerRef.scrollLeft = Math.max(0, scrollLeft);
        }

        outerRef.scrollTop = Math.max(0, scrollTop);
      }

      this._callPropsCallbacks();
    };

    _proto.componentWillUnmount = function componentWillUnmount() {
      if (this._resetIsScrollingTimeoutId !== null) {
        cancelTimeout(this._resetIsScrollingTimeoutId);
      }
    };

    _proto.render = function render() {
      var _this$props4 = this.props,
          children = _this$props4.children,
          className = _this$props4.className,
          columnCount = _this$props4.columnCount,
          direction = _this$props4.direction,
          height = _this$props4.height,
          innerRef = _this$props4.innerRef,
          innerElementType = _this$props4.innerElementType,
          innerTagName = _this$props4.innerTagName,
          itemData = _this$props4.itemData,
          _this$props4$itemKey = _this$props4.itemKey,
          itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,
          outerElementType = _this$props4.outerElementType,
          outerTagName = _this$props4.outerTagName,
          rowCount = _this$props4.rowCount,
          style = _this$props4.style,
          useIsScrolling = _this$props4.useIsScrolling,
          width = _this$props4.width;
      var isScrolling = this.state.isScrolling;

      var _this$_getHorizontalR = this._getHorizontalRangeToRender(),
          columnStartIndex = _this$_getHorizontalR[0],
          columnStopIndex = _this$_getHorizontalR[1];

      var _this$_getVerticalRan = this._getVerticalRangeToRender(),
          rowStartIndex = _this$_getVerticalRan[0],
          rowStopIndex = _this$_getVerticalRan[1];

      var items = [];

      if (columnCount > 0 && rowCount) {
        for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
          for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
            items.push(React.createElement(children, {
              columnIndex: _columnIndex,
              data: itemData,
              isScrolling: useIsScrolling ? isScrolling : undefined,
              key: itemKey({
                columnIndex: _columnIndex,
                data: itemData,
                rowIndex: _rowIndex
              }),
              rowIndex: _rowIndex,
              style: this._getItemStyle(_rowIndex, _columnIndex)
            }));
          }
        }
      } // Read this value AFTER items have been created,
      // So their actual sizes (if variable) are taken into consideration.


      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
      return React.createElement(outerElementType || outerTagName || 'div', {
        className: className,
        onScroll: this._onScroll,
        ref: this._outerRefSetter,
        style: _extends({
          position: 'relative',
          height: height,
          width: width,
          overflow: 'auto',
          WebkitOverflowScrolling: 'touch',
          willChange: 'transform',
          direction: direction
        }, style)
      }, React.createElement(innerElementType || innerTagName || 'div', {
        children: items,
        ref: innerRef,
        style: {
          height: estimatedTotalHeight,
          pointerEvents: isScrolling ? 'none' : undefined,
          width: estimatedTotalWidth
        }
      }));
    };

    _proto._callPropsCallbacks = function _callPropsCallbacks() {
      var _this$props5 = this.props,
          columnCount = _this$props5.columnCount,
          onItemsRendered = _this$props5.onItemsRendered,
          onScroll = _this$props5.onScroll,
          rowCount = _this$props5.rowCount;

      if (typeof onItemsRendered === 'function') {
        if (columnCount > 0 && rowCount > 0) {
          var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),
              _overscanColumnStartIndex = _this$_getHorizontalR2[0],
              _overscanColumnStopIndex = _this$_getHorizontalR2[1],
              _visibleColumnStartIndex = _this$_getHorizontalR2[2],
              _visibleColumnStopIndex = _this$_getHorizontalR2[3];

          var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),
              _overscanRowStartIndex = _this$_getVerticalRan2[0],
              _overscanRowStopIndex = _this$_getVerticalRan2[1],
              _visibleRowStartIndex = _this$_getVerticalRan2[2],
              _visibleRowStopIndex = _this$_getVerticalRan2[3];

          this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);
        }
      }

      if (typeof onScroll === 'function') {
        var _this$state3 = this.state,
            _horizontalScrollDirection = _this$state3.horizontalScrollDirection,
            _scrollLeft = _this$state3.scrollLeft,
            _scrollTop = _this$state3.scrollTop,
            _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,
            _verticalScrollDirection = _this$state3.verticalScrollDirection;

        this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);
      }
    } // Lazily create and cache item styles while scrolling,
    // So that pure component sCU will prevent re-renders.
    // We maintain this cache, and pass a style prop rather than index,
    // So that List can clear cached styles and force item re-render if necessary.
    ;

    _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {
      var _this$props6 = this.props,
          columnCount = _this$props6.columnCount,
          overscanColumnCount = _this$props6.overscanColumnCount,
          overscanColumnsCount = _this$props6.overscanColumnsCount,
          overscanCount = _this$props6.overscanCount,
          rowCount = _this$props6.rowCount;
      var _this$state4 = this.state,
          horizontalScrollDirection = _this$state4.horizontalScrollDirection,
          isScrolling = _this$state4.isScrolling,
          scrollLeft = _this$state4.scrollLeft;
      var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;

      if (columnCount === 0 || rowCount === 0) {
        return [0, 0, 0, 0];
      }

      var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);
      var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
      // If there isn't at least one extra item, tab loops back around.

      var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
      var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
    };

    _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {
      var _this$props7 = this.props,
          columnCount = _this$props7.columnCount,
          overscanCount = _this$props7.overscanCount,
          overscanRowCount = _this$props7.overscanRowCount,
          overscanRowsCount = _this$props7.overscanRowsCount,
          rowCount = _this$props7.rowCount;
      var _this$state5 = this.state,
          isScrolling = _this$state5.isScrolling,
          verticalScrollDirection = _this$state5.verticalScrollDirection,
          scrollTop = _this$state5.scrollTop;
      var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;

      if (columnCount === 0 || rowCount === 0) {
        return [0, 0, 0, 0];
      }

      var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);
      var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
      // If there isn't at least one extra item, tab loops back around.

      var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
      var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
    };

    return Grid;
  }(React.PureComponent), _class.defaultProps = {
    direction: 'ltr',
    itemData: undefined,
    useIsScrolling: false
  }, _class;
}

var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
  var children = _ref5.children,
      direction = _ref5.direction,
      height = _ref5.height,
      innerTagName = _ref5.innerTagName,
      outerTagName = _ref5.outerTagName,
      overscanColumnsCount = _ref5.overscanColumnsCount,
      overscanCount = _ref5.overscanCount,
      overscanRowsCount = _ref5.overscanRowsCount,
      width = _ref5.width;
  var instance = _ref6.instance;

  if (process.env.NODE_ENV !== 'production') {
    if (typeof overscanCount === 'number') {
      if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
        devWarningsOverscanCount.add(instance);
        console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
      }
    }

    if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {
      if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {
        devWarningsOverscanRowsColumnsCount.add(instance);
        console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
      }
    }

    if (innerTagName != null || outerTagName != null) {
      if (devWarningsTagName && !devWarningsTagName.has(instance)) {
        devWarningsTagName.add(instance);
        console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
      }
    }

    if (children == null) {
      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
    }

    switch (direction) {
      case 'ltr':
      case 'rtl':
        // Valid values
        break;

      default:
        throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
    }

    if (typeof width !== 'number') {
      throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
    }

    if (typeof height !== 'number') {
      throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
    }
  }
};

if (process.env.NODE_ENV !== 'production') ;

var FixedSizeGrid = /*#__PURE__*/createGridComponent({
  getColumnOffset: function getColumnOffset(_ref, index) {
    var columnWidth = _ref.columnWidth;
    return index * columnWidth;
  },
  getColumnWidth: function getColumnWidth(_ref2, index) {
    var columnWidth = _ref2.columnWidth;
    return columnWidth;
  },
  getRowOffset: function getRowOffset(_ref3, index) {
    var rowHeight = _ref3.rowHeight;
    return index * rowHeight;
  },
  getRowHeight: function getRowHeight(_ref4, index) {
    var rowHeight = _ref4.rowHeight;
    return rowHeight;
  },
  getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {
    var rowCount = _ref5.rowCount,
        rowHeight = _ref5.rowHeight;
    return rowHeight * rowCount;
  },
  getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {
    var columnCount = _ref6.columnCount,
        columnWidth = _ref6.columnWidth;
    return columnWidth * columnCount;
  },
  getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft, instanceProps, scrollbarSize) {
    var columnCount = _ref7.columnCount,
        columnWidth = _ref7.columnWidth,
        width = _ref7.width;
    var lastColumnOffset = Math.max(0, columnCount * columnWidth - width);
    var maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
    var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);

    if (align === 'smart') {
      if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
        align = 'auto';
      } else {
        align = 'center';
      }
    }

    switch (align) {
      case 'start':
        return maxOffset;

      case 'end':
        return minOffset;

      case 'center':
        // "Centered" offset is usually the average of the min and max.
        // But near the edges of the list, this doesn't hold true.
        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);

        if (middleOffset < Math.ceil(width / 2)) {
          return 0; // near the beginning
        } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
          return lastColumnOffset; // near the end
        } else {
          return middleOffset;
        }

      case 'auto':
      default:
        if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
          return scrollLeft;
        } else if (minOffset > maxOffset) {
          // Because we only take into account the scrollbar size when calculating minOffset
          // this value can be larger than maxOffset when at the end of the list
          return minOffset;
        } else if (scrollLeft < minOffset) {
          return minOffset;
        } else {
          return maxOffset;
        }

    }
  },
  getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop, instanceProps, scrollbarSize) {
    var rowHeight = _ref8.rowHeight,
        height = _ref8.height,
        rowCount = _ref8.rowCount;
    var lastRowOffset = Math.max(0, rowCount * rowHeight - height);
    var maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
    var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);

    if (align === 'smart') {
      if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
        align = 'auto';
      } else {
        align = 'center';
      }
    }

    switch (align) {
      case 'start':
        return maxOffset;

      case 'end':
        return minOffset;

      case 'center':
        // "Centered" offset is usually the average of the min and max.
        // But near the edges of the list, this doesn't hold true.
        var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);

        if (middleOffset < Math.ceil(height / 2)) {
          return 0; // near the beginning
        } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
          return lastRowOffset; // near the end
        } else {
          return middleOffset;
        }

      case 'auto':
      default:
        if (scrollTop >= minOffset && scrollTop <= maxOffset) {
          return scrollTop;
        } else if (minOffset > maxOffset) {
          // Because we only take into account the scrollbar size when calculating minOffset
          // this value can be larger than maxOffset when at the end of the list
          return minOffset;
        } else if (scrollTop < minOffset) {
          return minOffset;
        } else {
          return maxOffset;
        }

    }
  },
  getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, scrollLeft) {
    var columnWidth = _ref9.columnWidth,
        columnCount = _ref9.columnCount;
    return Math.max(0, Math.min(columnCount - 1, Math.floor(scrollLeft / columnWidth)));
  },
  getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex, scrollLeft) {
    var columnWidth = _ref10.columnWidth,
        columnCount = _ref10.columnCount,
        width = _ref10.width;
    var left = startIndex * columnWidth;
    var numVisibleColumns = Math.ceil((width + scrollLeft - left) / columnWidth);
    return Math.max(0, Math.min(columnCount - 1, startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
    ));
  },
  getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {
    var rowHeight = _ref11.rowHeight,
        rowCount = _ref11.rowCount;
    return Math.max(0, Math.min(rowCount - 1, Math.floor(scrollTop / rowHeight)));
  },
  getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex, scrollTop) {
    var rowHeight = _ref12.rowHeight,
        rowCount = _ref12.rowCount,
        height = _ref12.height;
    var top = startIndex * rowHeight;
    var numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
    return Math.max(0, Math.min(rowCount - 1, startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
    ));
  },
  initInstanceProps: function initInstanceProps(props) {// Noop
  },
  shouldResetStyleCacheOnItemSizeChange: true,
  validateProps: function validateProps(_ref13) {
    var columnWidth = _ref13.columnWidth,
        rowHeight = _ref13.rowHeight;

    if (process.env.NODE_ENV !== 'production') {
      if (typeof columnWidth !== 'number') {
        throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
      }

      if (typeof rowHeight !== 'number') {
        throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
      }
    }
  }
});

var GRID_PROPERTIES = {
  gridWidth: 300,
  gridHeight: 300,
  columnWidthDesktop: 100,
  columnWidthMobile: 90,
  rowHeight: 100,
  columnCount: 3
};
var ICONS_LIST = ["10k", "10mp", "11mp", "123", "12mp", "13mp", "14mp", "15mp", "16mp", "17mp", "18_up_rating", "18mp", "19mp", "1k", "1k_plus", "1x_mobiledata", "1x_mobiledata_badge", "20mp", "21mp", "22mp", "23mp", "24mp", "2k", "2k_plus", "2mp", "30fps", "30fps_select", "360", "3d_rotation", "3g_mobiledata", "3g_mobiledata_badge", "3k", "3k_plus", "3mp", "3p", "4g_mobiledata", "4g_mobiledata_badge", "4g_plus_mobiledata", "4k", "4k_plus", "4mp", "50mp", "5g", "5g_mobiledata_badge", "5k", "5k_plus", "5mp", "60fps", "60fps_select", "6_ft_apart", "6k", "6k_plus", "6mp", "7k", "7k_plus", "7mp", "8k", "8k_plus", "8mp", "9k", "9k_plus", "9mp", "abc", "ac_unit", "accessibility", "accessibility_new", "accessible", "accessible_forward", "account_balance", "account_balance_wallet", "account_box", "account_circle", "account_circle_off", "account_tree", "activity_zone", "acute", "ad_off", "ad_units", "adb", "add", "add_a_photo", "add_alert", "add_box", "add_business", "add_call", "add_card", "add_chart", "add_circle", "add_comment", "add_home", "add_home_work", "add_link", "add_location", "add_location_alt", "add_moderator", "add_notes", "add_photo_alternate", "add_reaction", "add_road", "add_shopping_cart", "add_task", "add_to_drive", "add_to_home_screen", "add_to_photos", "add_to_queue", "adf_scanner", "adjust", "admin_meds", "admin_panel_settings", "ads_click", "agender", "agriculture", "air", "air_freshener", "air_purifier_gen", "airline_seat_flat", "airline_seat_flat_angled", "airline_seat_individual_suite", "airline_seat_legroom_extra", "airline_seat_legroom_normal", "airline_seat_legroom_reduced", "airline_seat_recline_extra", "airline_seat_recline_normal", "airline_stops", "airlines", "airplane_ticket", "airplanemode_active", "airplanemode_inactive", "airplay", "airport_shuttle", "airware", "airwave", "alarm", "alarm_add", "alarm_off", "alarm_on", "alarm_smart_wake", "album", "align_center", "align_end", "align_flex_center", "align_flex_end", "align_flex_start", "align_horizontal_center", "align_horizontal_left", "align_horizontal_right", "align_items_stretch", "align_justify_center", "align_justify_flex_end", "align_justify_flex_start", "align_justify_space_around", "align_justify_space_between", "align_justify_space_even", "align_justify_stretch", "align_self_stretch", "align_space_around", "align_space_between", "align_space_even", "align_start", "align_stretch", "align_vertical_bottom", "align_vertical_center", "align_vertical_top", "all_inbox", "all_inclusive", "all_match", "all_out", "allergies", "allergy", "alt_route", "alternate_email", "altitude", "ambient_screen", "ambulance", "amend", "amp_stories", "analytics", "anchor", "android", "animation", "aod", "aod_tablet", "aod_watch", "apartment", "api", "apk_document", "apk_install", "app_badging", "app_blocking", "app_registration", "app_shortcut", "approval", "approval_delegation", "apps", "apps_outage", "architecture", "archive", "area_chart", "arming_countdown", "arrow_and_edge", "arrow_back", "arrow_back_ios", "arrow_back_ios_new", "arrow_circle_down", "arrow_circle_left", "arrow_circle_right", "arrow_circle_up", "arrow_downward", "arrow_drop_down", "arrow_drop_down_circle", "arrow_drop_up", "arrow_forward", "arrow_forward_ios", "arrow_insert", "arrow_left", "arrow_or_edge", "arrow_outward", "arrow_range", "arrow_right", "arrow_right_alt", "arrow_selector_tool", "arrow_top_left", "arrow_top_right", "arrow_upward", "arrows_more_down", "arrows_more_up", "arrows_outward", "art_track", "article", "aspect_ratio", "assignment", "assignment_add", "assignment_ind", "assignment_late", "assignment_return", "assignment_returned", "assignment_turned_in", "assist_walker", "assistant", "assistant_direction", "assistant_navigation", "assistant_on_hub", "assured_workload", "astrophotography_auto", "astrophotography_off", "atm", "atr", "attach_email", "attach_file", "attach_file_add", "attach_money", "attachment", "attractions", "attribution", "audio_file", "audio_video_receiver", "auto_activity_zone", "auto_awesome", "auto_awesome_mosaic", "auto_awesome_motion", "auto_delete", "auto_detect_voice", "auto_fix", "auto_fix_high", "auto_fix_normal", "auto_fix_off", "auto_graph", "auto_label", "auto_meeting_room", "auto_mode", "auto_read_pause", "auto_read_play", "auto_schedule", "auto_stories", "auto_videocam", "autofps_select", "autopause", "autopay", "autoplay", "autorenew", "autostop", "av_timer", "avg_pace", "avg_time", "award_star", "azm", "baby_changing_station", "back_hand", "back_to_tab", "background_dot_large", "background_grid_small", "background_replace", "backlight_high", "backlight_low", "backpack", "backspace", "backup", "backup_table", "badge", "badge_critical_battery", "bakery_dining", "balance", "balcony", "ballot", "bar_chart", "bar_chart_4_bars", "barcode", "barcode_reader", "barcode_scanner", "barefoot", "batch_prediction", "bath_outdoor", "bath_private", "bath_public_large", "bathroom", "bathtub", "battery_0_bar", "battery_1_bar", "battery_20", "battery_2_bar", "battery_30", "battery_3_bar", "battery_4_bar", "battery_50", "battery_5_bar", "battery_60", "battery_6_bar", "battery_80", "battery_90", "battery_alert", "battery_change", "battery_charging_20", "battery_charging_30", "battery_charging_50", "battery_charging_60", "battery_charging_80", "battery_charging_90", "battery_charging_full", "battery_error", "battery_full", "battery_full_alt", "battery_horiz_000", "battery_horiz_050", "battery_horiz_075", "battery_low", "battery_plus", "battery_profile", "battery_saver", "battery_share", "battery_status_good", "battery_unknown", "battery_vert_005", "battery_vert_020", "battery_vert_050", "battery_very_low", "beach_access", "bed", "bedroom_baby", "bedroom_child", "bedroom_parent", "bedtime", "bedtime_off", "beenhere", "bento", "bia", "bike_scooter", "biotech", "blanket", "blender", "blind", "blinds", "blinds_closed", "block", "blood_pressure", "bloodtype", "bluetooth", "bluetooth_connected", "bluetooth_disabled", "bluetooth_drive", "bluetooth_searching", "blur_circular", "blur_linear", "blur_medium", "blur_off", "blur_on", "blur_short", "body_fat", "body_system", "bolt", "book", "book_online", "bookmark", "bookmark_add", "bookmark_added", "bookmark_manager", "bookmark_remove", "bookmarks", "border_all", "border_bottom", "border_clear", "border_color", "border_horizontal", "border_inner", "border_left", "border_outer", "border_right", "border_style", "border_top", "border_vertical", "bottom_panel_close", "bottom_panel_open", "bottom_right_click", "boy", "branding_watermark", "breakfast_dining", "breaking_news_alt_1", "breastfeeding", "brightness_1", "brightness_2", "brightness_3", "brightness_4", "brightness_5", "brightness_6", "brightness_7", "brightness_auto", "brightness_empty", "brightness_high", "brightness_low", "brightness_medium", "bring_your_own_ip", "broadcast_on_home", "broadcast_on_personal", "broken_image", "browse_activity", "browse_gallery", "browser_updated", "brunch_dining", "brush", "bubble_chart", "bubbles", "bug_report", "build", "build_circle", "bungalow", "burst_mode", "bus_alert", "business_center", "business_chip", "cabin", "cable", "cached", "cake", "cake_add", "calculate", "calendar_add_on", "calendar_apps_script", "calendar_month", "calendar_today", "calendar_view_day", "calendar_view_month", "calendar_view_week", "call", "call_end", "call_log", "call_made", "call_merge", "call_missed", "call_missed_outgoing", "call_quality", "call_received", "call_split", "call_to_action", "camera", "camera_enhance", "camera_front", "camera_indoor", "camera_outdoor", "camera_rear", "camera_roll", "camera_video", "cameraswitch", "campaign", "camping", "cancel", "cancel_presentation", "cancel_schedule_send", "candlestick_chart", "captive_portal", "capture", "car_crash", "car_rental", "car_repair", "card_membership", "card_travel", "cardiology", "carpenter", "cases", "casino", "cast", "cast_connected", "cast_for_education", "cast_pause", "cast_warning", "castle", "category", "celebration", "cell_merge", "cell_tower", "cell_wifi", "center_focus_strong", "center_focus_weak", "chair", "chair_alt", "chalet", "change_circle", "change_history", "charger", "charging_station", "chart_data", "chat", "chat_add_on", "chat_apps_script", "chat_bubble", "chat_error", "chat_paste_go", "check", "check_box", "check_box_outline_blank", "check_circle", "check_in_out", "check_indeterminate_small", "check_small", "checklist", "checklist_rtl", "checkroom", "cheer", "chess", "chevron_left", "chevron_right", "child_care", "child_friendly", "chip_extraction", "chrome_reader_mode", "chromecast_2", "chromecast_device", "chronic", "church", "cinematic_blur", "circle", "circle_notifications", "clarify", "clean_hands", "cleaning_bucket", "cleaning_services", "clear_all", "clear_day", "clear_night", "climate_mini_split", "clinical_notes", "clock_loader_10", "clock_loader_20", "clock_loader_40", "clock_loader_60", "clock_loader_80", "clock_loader_90", "close", "close_fullscreen", "closed_caption", "closed_caption_disabled", "cloud", "cloud_circle", "cloud_done", "cloud_download", "cloud_off", "cloud_queue", "cloud_sync", "cloud_upload", "cloudy", "cloudy_snowing", "co2", "co_present", "code", "code_blocks", "code_off", "coffee", "coffee_maker", "cognition", "collections_bookmark", "colorize", "comic_bubble", "comment", "comment_bank", "comments_disabled", "commit", "communication", "commute", "compare", "compare_arrows", "compass_calibration", "component_exchange", "compost", "compress", "computer", "conditions", "confirmation_number", "congenital", "connect_without_contact", "connected_tv", "connecting_airports", "construction", "contact_emergency", "contact_mail", "contact_page", "contact_phone", "contact_support", "contactless", "contactless_off", "contacts", "content_copy", "content_cut", "content_paste", "content_paste_go", "content_paste_off", "content_paste_search", "contrast", "contrast_rtl_off", "control_camera", "control_point_duplicate", "controller_gen", "conversion_path", "conversion_path_off", "conveyor_belt", "cookie", "cookie_off", "cooking", "cool_to_dry", "copy_all", "copyright", "coronavirus", "corporate_fare", "cottage", "counter_0", "counter_1", "counter_2", "counter_3", "counter_4", "counter_5", "counter_6", "counter_7", "counter_8", "counter_9", "countertops", "create_new_folder", "credit_card", "credit_card_off", "credit_score", "crib", "crisis_alert", "crop", "crop_16_9", "crop_3_2", "crop_5_4", "crop_7_5", "crop_free", "crop_landscape", "crop_portrait", "crop_rotate", "crop_square", "crossword", "cruelty_free", "css", "currency_bitcoin", "currency_exchange", "currency_franc", "currency_lira", "currency_pound", "currency_ruble", "currency_rupee", "currency_yen", "currency_yuan", "curtains", "curtains_closed", "cut", "cycle", "cyclone", "dangerous", "dark_mode", "dashboard", "dashboard_customize", "data_alert", "data_array", "data_check", "data_exploration", "data_info_alert", "data_object", "data_saver_on", "data_thresholding", "data_usage", "database", "dataset", "dataset_linked", "date_range", "deblur", "deceased", "decimal_decrease", "decimal_increase", "deck", "dehaze", "delete", "delete_forever", "delete_sweep", "demography", "density_large", "density_medium", "density_small", "dentistry", "departure_board", "deployed_code", "deployed_code_alert", "deployed_code_history", "deployed_code_update", "dermatology", "description", "deselect", "design_services", "desk", "deskphone", "desktop_access_disabled", "desktop_mac", "desktop_windows", "details", "detection_and_zone", "detector", "detector_alarm", "detector_battery", "detector_co", "detector_offline", "detector_smoke", "detector_status", "developer_board", "developer_board_off", "developer_mode", "device_hub", "device_reset", "device_thermostat", "device_unknown", "devices", "devices_fold", "devices_off", "devices_other", "devices_wearables", "dew_point", "diagnosis", "dialer_sip", "dialpad", "diamond", "difference", "digital_out_of_home", "dining", "dinner_dining", "directions", "directions_alt", "directions_alt_off", "directions_bike", "directions_boat", "directions_bus", "directions_car", "directions_off", "directions_railway", "directions_run", "directions_subway", "directions_walk", "dirty_lens", "disabled_by_default", "disabled_visible", "disc_full", "discover_tune", "dishwasher_gen", "display_external_input", "display_settings", "distance", "diversity_1", "diversity_2", "diversity_3", "diversity_4", "dns", "do_not_disturb_off", "do_not_disturb_on", "do_not_disturb_on_total_silence", "do_not_step", "do_not_touch", "dock", "dock_to_bottom", "dock_to_left", "dock_to_right", "docs_add_on", "docs_apps_script", "document_scanner", "domain", "domain_add", "domain_disabled", "domain_verification", "domain_verification_off", "domino_mask", "done", "done_all", "done_outline", "donut_large", "donut_small", "door_back", "door_front", "door_open", "door_sensor", "door_sliding", "doorbell", "doorbell_3p", "doorbell_chime", "double_arrow", "downhill_skiing", "download", "download_done", "download_for_offline", "downloading", "draft", "draft_orders", "drafts", "drag_click", "drag_handle", "drag_indicator", "drag_pan", "draw", "draw_abstract", "draw_collage", "dresser", "drive_file_move", "drive_folder_upload", "dry", "dry_cleaning", "dual_screen", "duo", "dvr", "dynamic_feed", "dynamic_form", "e911_avatar", "e911_emergency", "e_mobiledata", "e_mobiledata_badge", "earbuds", "earbuds_battery", "early_on", "earthquake", "east", "ecg", "ecg_heart", "eco", "eda", "edgesensor_high", "edgesensor_low", "edit", "edit_attributes", "edit_calendar", "edit_document", "edit_location", "edit_location_alt", "edit_note", "edit_notifications", "edit_off", "edit_road", "edit_square", "egg", "egg_alt", "eject", "elderly", "elderly_woman", "electric_bike", "electric_bolt", "electric_car", "electric_meter", "electric_moped", "electric_rickshaw", "electric_scooter", "electrical_services", "elevation", "elevator", "emergency", "emergency_heat", "emergency_home", "emergency_recording", "emergency_share", "emoji_flags", "emoji_food_beverage", "emoji_nature", "emoji_objects", "emoji_people", "emoji_symbols", "emoji_transportation", "emoticon", "empty_dashboard", "enable", "endocrinology", "energy_program_saving", "energy_program_time_used", "energy_savings_leaf", "engineering", "enhanced_encryption", "ent", "equal", "equalizer", "error", "error_med", "escalator", "escalator_warning", "euro", "euro_symbol", "ev_charger", "ev_mobiledata_badge", "ev_shadow", "ev_station", "event", "event_available", "event_busy", "event_list", "event_note", "event_repeat", "event_seat", "event_upcoming", "exclamation", "exercise", "exit_to_app", "expand", "expand_circle_down", "expand_circle_up", "expand_content", "expand_less", "expand_more", "explicit", "explore", "explore_off", "explosion", "export_notes", "exposure", "exposure_neg_1", "exposure_neg_2", "exposure_plus_1", "exposure_plus_2", "exposure_zero", "extension", "extension_off", "eyeglasses", "face", "face_2", "face_3", "face_4", "face_5", "face_6", "face_retouching_natural", "face_retouching_off", "fact_check", "factory", "falling", "familiar_face_and_zone", "family_history", "family_restroom", "fast_forward", "fast_rewind", "fastfood", "faucet", "favorite", "fax", "featured_play_list", "featured_video", "feed", "female", "femur", "femur_alt", "fence", "fertile", "festival", "fiber_dvr", "fiber_manual_record", "fiber_new", "fiber_pin", "fiber_smart_record", "file_copy", "file_download_done", "file_download_off", "file_open", "file_present", "file_upload_off", "filter", "filter_1", "filter_2", "filter_3", "filter_4", "filter_5", "filter_6", "filter_7", "filter_8", "filter_9", "filter_9_plus", "filter_alt", "filter_alt_off", "filter_b_and_w", "filter_center_focus", "filter_drama", "filter_frames", "filter_hdr", "filter_list", "filter_list_off", "filter_none", "filter_tilt_shift", "filter_vintage", "finance_chip", "find_in_page", "find_replace", "fingerprint", "fire_extinguisher", "fire_hydrant", "fire_truck", "fireplace", "first_page", "fit_page", "fit_screen", "fit_width", "fitness_center", "flag", "flag_circle", "flaky", "flare", "flash_auto", "flash_off", "flash_on", "flashlight_off", "flashlight_on", "flatware", "flex_direction", "flex_no_wrap", "flex_wrap", "flight", "flight_class", "flight_land", "flight_takeoff", "flip", "flip_camera_android", "flip_camera_ios", "flip_to_back", "flip_to_front", "flood", "floor", "floor_lamp", "flowsheet", "fluid", "fluid_balance", "fluid_med", "fluorescent", "flutter_dash", "fmd_bad", "foggy", "folded_hands", "folder", "folder_copy", "folder_delete", "folder_managed", "folder_off", "folder_open", "folder_shared", "folder_special", "folder_supervised", "folder_zip", "follow_the_signs", "font_download", "font_download_off", "food_bank", "foot_bones", "footprint", "forest", "fork_left", "fork_right", "forklift", "format_align_center", "format_align_justify", "format_align_left", "format_align_right", "format_bold", "format_clear", "format_color_fill", "format_color_reset", "format_color_text", "format_h1", "format_h2", "format_h3", "format_h4", "format_h5", "format_h6", "format_image_left", "format_image_right", "format_indent_decrease", "format_indent_increase", "format_ink_highlighter", "format_italic", "format_letter_spacing", "format_letter_spacing_2", "format_letter_spacing_standard", "format_letter_spacing_wide", "format_letter_spacing_wider", "format_line_spacing", "format_list_bulleted", "format_list_bulleted_add", "format_list_numbered", "format_list_numbered_rtl", "format_overline", "format_paint", "format_paragraph", "format_quote", "format_shapes", "format_size", "format_strikethrough", "format_text_clip", "format_text_overflow", "format_text_wrap", "format_textdirection_l_to_r", "format_textdirection_r_to_l", "format_underlined", "format_underlined_squiggle", "forms_add_on", "forms_apps_script", "fort", "forum", "forward", "forward_10", "forward_30", "forward_5", "forward_circle", "forward_media", "forward_to_inbox", "foundation", "frame_inspect", "frame_person", "frame_person_off", "frame_reload", "frame_source", "free_cancellation", "front_hand", "front_loader", "full_stacked_bar_chart", "fullscreen", "fullscreen_exit", "function", "functions", "g_mobiledata", "g_mobiledata_badge", "g_translate", "gallery_thumbnail", "gamepad", "garage", "garage_home", "garden_cart", "gas_meter", "gastroenterology", "gate", "gavel", "generating_tokens", "genetics", "gesture", "gesture_select", "gif", "gif_box", "girl", "gite", "glass_cup", "globe_asia", "globe_uk", "glucose", "glyphs", "go_to_line", "golf_course", "google_tv_remote", "google_wifi", "gpp_bad", "gpp_maybe", "grade", "gradient", "grading", "grain", "graphic_eq", "grass", "grid_3x3", "grid_3x3_off", "grid_4x4", "grid_goldenratio", "grid_guides", "grid_off", "grid_on", "grid_view", "group", "group_add", "group_off", "group_remove", "group_work", "grouped_bar_chart", "groups", "groups_2", "groups_3", "gynecology", "h_mobiledata", "h_mobiledata_badge", "h_plus_mobiledata", "h_plus_mobiledata_badge", "hail", "hand_bones", "hand_gesture", "handshake", "handyman", "hard_drive", "hard_drive_2", "hardware", "hd", "hdr_auto", "hdr_auto_select", "hdr_enhanced_select", "hdr_off", "hdr_off_select", "hdr_on", "hdr_on_select", "hdr_plus", "hdr_strong", "hdr_weak", "headphones", "headphones_battery", "headset_mic", "headset_off", "healing", "health_and_safety", "health_metrics", "heap_snapshot_large", "heap_snapshot_multiple", "heap_snapshot_thumbnail", "hearing", "hearing_disabled", "heart_broken", "heart_check", "heart_minus", "heart_plus", "heat_pump", "heat_pump_balance", "height", "helicopter", "help", "help_center", "help_clinic", "hematology", "hevc", "hexagon", "hide", "hide_image", "hide_source", "high_density", "high_quality", "highlight", "highlighter_size_1", "highlighter_size_2", "highlighter_size_3", "highlighter_size_4", "highlighter_size_5", "hiking", "history", "history_edu", "history_toggle_off", "hive", "hls", "hls_off", "holiday_village", "home", "home_app_logo", "home_health", "home_iot_device", "home_max", "home_max_dots", "home_mini", "home_pin", "home_repair_service", "home_speaker", "home_storage", "home_work", "horizontal_distribute", "horizontal_rule", "horizontal_split", "hot_tub", "hotel", "hotel_class", "hourglass_bottom", "hourglass_disabled", "hourglass_empty", "hourglass_full", "hourglass_top", "house", "house_siding", "house_with_shield", "houseboat", "how_to_reg", "how_to_vote", "hr_resting", "html", "http", "hub", "humerus", "humerus_alt", "humidity_high", "humidity_low", "humidity_mid", "humidity_percentage", "hvac", "ice_skating", "icecream", "iframe", "iframe_off", "image", "image_aspect_ratio", "image_not_supported", "image_search", "imagesearch_roller", "imagesmode", "immunology", "import_contacts", "important_devices", "in_home_mode", "inactive_order", "inbox", "inbox_customize", "incomplete_circle", "indeterminate_check_box", "info", "infrared", "inpatient", "input", "input_circle", "insert_chart", "insert_page_break", "insert_text", "insights", "install_desktop", "install_mobile", "integration_instructions", "interactive_space", "interests", "interpreter_mode", "inventory", "inventory_2", "invert_colors", "invert_colors_off", "ios_share", "iron", "javascript", "join", "join_full", "join_inner", "join_left", "join_right", "joystick", "jump_to_element", "kayaking", "kebab_dining", "kettle", "key", "key_off", "key_visualizer", "keyboard", "keyboard_alt", "keyboard_arrow_down", "keyboard_arrow_left", "keyboard_arrow_right", "keyboard_arrow_up", "keyboard_backspace", "keyboard_capslock", "keyboard_capslock_badge", "keyboard_command_key", "keyboard_control_key", "keyboard_double_arrow_down", "keyboard_double_arrow_left", "keyboard_double_arrow_right", "keyboard_double_arrow_up", "keyboard_external_input", "keyboard_full", "keyboard_hide", "keyboard_keys", "keyboard_off", "keyboard_onscreen", "keyboard_option_key", "keyboard_previous_language", "keyboard_return", "keyboard_tab", "keyboard_tab_rtl", "keyboard_voice", "king_bed", "kitchen", "kitesurfing", "lab_panel", "lab_profile", "lab_research", "label", "label_important", "label_off", "labs", "lan", "landscape", "landslide", "language", "language_chinese_array", "language_chinese_cangjie", "language_chinese_dayi", "language_chinese_pinyin", "language_chinese_quick", "language_chinese_wubi", "language_french", "language_gb_english", "language_international", "language_korean_latin", "language_pinyin", "language_spanish", "language_us", "language_us_colemak", "language_us_dvorak", "laps", "laptop_chromebook", "laptop_mac", "laptop_windows", "last_page", "laundry", "layers", "layers_clear", "lda", "leaderboard", "leak_add", "leak_remove", "left_click", "left_panel_close", "left_panel_open", "legend_toggle", "lens", "lens_blur", "letter_switch", "library_add", "library_add_check", "library_books", "library_music", "lift_to_talk", "light", "light_group", "light_mode", "lightbulb", "lightbulb_circle", "line_axis", "line_curve", "line_end", "line_end_arrow", "line_end_arrow_notch", "line_end_circle", "line_end_diamond", "line_end_square", "line_start", "line_start_arrow", "line_start_arrow_notch", "line_start_circle", "line_start_diamond", "line_start_square", "line_style", "line_weight", "linear_scale", "link", "link_off", "linked_camera", "liquor", "list", "list_alt", "list_alt_add", "live_help", "live_tv", "living", "local_activity", "local_atm", "local_bar", "local_cafe", "local_car_wash", "local_convenience_store", "local_dining", "local_drink", "local_fire_department", "local_florist", "local_gas_station", "local_hospital", "local_laundry_service", "local_library", "local_mall", "local_parking", "local_pharmacy", "local_pizza", "local_police", "local_post_office", "local_see", "local_shipping", "local_taxi", "location_automation", "location_away", "location_chip", "location_city", "location_disabled", "location_home", "location_off", "location_on", "location_searching", "lock", "lock_clock", "lock_open", "lock_open_right", "lock_person", "lock_reset", "login", "logo_dev", "logout", "looks", "looks_3", "looks_4", "looks_5", "looks_6", "looks_one", "looks_two", "loupe", "low_density", "low_priority", "loyalty", "lte_mobiledata", "lte_mobiledata_badge", "lte_plus_mobiledata", "lte_plus_mobiledata_badge", "luggage", "lunch_dining", "lyrics", "macro_auto", "macro_off", "magic_button", "magic_exchange", "magic_tether", "magnification_large", "magnification_small", "magnify_docked", "magnify_fullscreen", "mail", "mail_lock", "male", "man", "man_2", "man_3", "man_4", "manage_accounts", "manage_history", "manage_search", "manga", "map", "maps_ugc", "margin", "mark_as_unread", "mark_chat_read", "mark_chat_unread", "mark_email_read", "mark_email_unread", "mark_unread_chat_alt", "markunread_mailbox", "masks", "match_case", "match_word", "matter", "maximize", "measuring_tape", "media_bluetooth_off", "media_bluetooth_on", "media_link", "mediation", "medical_information", "medical_mask", "medical_services", "medication", "medication_liquid", "meeting_room", "memory", "memory_alt", "menstrual_health", "menu", "menu_book", "menu_open", "merge", "merge_type", "metabolism", "mfg_nest_yale_lock", "mic", "mic_double", "mic_external_off", "mic_external_on", "mic_off", "microbiology", "microwave", "microwave_gen", "military_tech", "mindfulness", "minimize", "minor_crash", "missed_video_call", "mist", "mixture_med", "mms", "mobile_friendly", "mobile_off", "mobile_screen_share", "mobiledata_off", "mode_comment", "mode_cool", "mode_cool_off", "mode_fan", "mode_fan_off", "mode_heat", "mode_heat_cool", "mode_heat_off", "mode_night", "mode_of_travel", "mode_off_on", "mode_standby", "model_training", "monetization_on", "money", "money_off", "monitor", "monitor_heart", "monitor_weight", "monitor_weight_gain", "monitor_weight_loss", "monitoring", "monochrome_photos", "mood", "mood_bad", "mop", "more", "more_down", "more_horiz", "more_time", "more_up", "more_vert", "mosque", "motion_blur", "motion_mode", "motion_photos_auto", "motion_photos_off", "motion_photos_paused", "motion_sensor_active", "motion_sensor_alert", "motion_sensor_idle", "motion_sensor_urgent", "motorcycle", "mountain_flag", "mouse", "move", "move_down", "move_group", "move_location", "move_selection_down", "move_selection_left", "move_selection_right", "move_selection_up", "move_to_inbox", "move_up", "movie", "movie_edit", "movie_filter", "moving", "moving_beds", "moving_ministry", "mp", "multicooker", "multiline_chart", "multiple_stop", "museum", "music_note", "music_off", "music_video", "my_location", "mystery", "nat", "nature", "nature_people", "navigate_before", "navigate_next", "navigation", "near_me", "near_me_disabled", "nearby_error", "nearby_off", "nephrology", "nest_audio", "nest_cam_floodlight", "nest_cam_indoor", "nest_cam_iq", "nest_cam_iq_outdoor", "nest_cam_magnet_mount", "nest_cam_outdoor", "nest_cam_stand", "nest_cam_wall_mount", "nest_cam_wired_stand", "nest_clock_farsight_analog", "nest_clock_farsight_digital", "nest_connect", "nest_detect", "nest_display", "nest_display_max", "nest_doorbell_visitor", "nest_eco_leaf", "nest_farsight_weather", "nest_found_savings", "nest_heat_link_e", "nest_heat_link_gen_3", "nest_hello_doorbell", "nest_mini", "nest_multi_room", "nest_remote", "nest_remote_comfort_sensor", "nest_secure_alarm", "nest_sunblock", "nest_tag", "nest_thermostat_e_eu", "nest_thermostat_gen_3", "nest_thermostat_sensor", "nest_thermostat_sensor_eu", "nest_thermostat_zirconium_eu", "nest_true_radiant", "nest_wake_on_approach", "nest_wake_on_press", "nest_wifi_gale", "nest_wifi_point", "nest_wifi_router", "network_cell", "network_check", "network_intelligence_history", "network_intelligence_update", "network_locked", "network_manage", "network_ping", "network_wifi", "network_wifi_1_bar", "network_wifi_2_bar", "network_wifi_3_bar", "neurology", "new_label", "new_releases", "new_window", "newspaper", "next_plan", "next_week", "nfc", "night_shelter", "night_sight_auto", "night_sight_auto_off", "night_sight_max", "nightlife", "nightlight", "nightlight_off", "nights_stay", "no_accounts", "no_adult_content", "no_backpack", "no_crash", "no_drinks", "no_encryption", "no_flash", "no_food", "no_luggage", "no_meals", "no_meeting_room", "no_photography", "no_sim", "no_stroller", "no_transfer", "noise_aware", "noise_control_off", "noise_control_on", "nordic_walking", "north", "north_east", "north_west", "not_accessible", "not_listed_location", "not_started", "note", "note_add", "note_alt", "notes", "notification_add", "notification_important", "notifications", "notifications_active", "notifications_off", "notifications_paused", "numbers", "nutrition", "offline_bolt", "offline_pin", "offline_share", "oil_barrel", "on_device_training", "oncology", "online_prediction", "onsen", "opacity", "open_in_browser", "open_in_full", "open_in_new", "open_in_new_down", "open_in_new_off", "open_with", "ophthalmology", "oral_disease", "order_approve", "order_play", "orthopedics", "other_admission", "other_houses", "outbound", "outbox", "outdoor_garden", "outdoor_grill", "outgoing_mail", "outlet", "outpatient", "outpatient_med", "output", "output_circle", "oven_gen", "overview", "overview_key", "oxygen_saturation", "pace", "pacemaker", "package", "padding", "page_info", "pages", "pageview", "paid", "palette", "pallet", "pan_tool", "pan_tool_alt", "pan_zoom", "panorama", "panorama_fish_eye", "panorama_horizontal", "panorama_photosphere", "panorama_vertical", "panorama_wide_angle", "paragliding", "park", "partly_cloudy_day", "partly_cloudy_night", "partner_exchange", "party_mode", "password", "patient_list", "pattern", "pause", "pause_circle", "pause_presentation", "payments", "pedal_bike", "pediatrics", "pen_size_1", "pen_size_2", "pen_size_3", "pen_size_4", "pen_size_5", "pending", "pending_actions", "pentagon", "percent", "pergola", "perm_camera_mic", "perm_contact_calendar", "perm_data_setting", "perm_device_information", "perm_media", "perm_phone_msg", "perm_scan_wifi", "person", "person_2", "person_3", "person_4", "person_add", "person_add_disabled", "person_book", "person_celebrate", "person_off", "person_pin", "person_pin_circle", "person_play", "person_remove", "person_search", "personal_injury", "pest_control", "pest_control_rodent", "pets", "phishing", "phone_android", "phone_bluetooth_speaker", "phone_callback", "phone_disabled", "phone_enabled", "phone_forwarded", "phone_in_talk", "phone_iphone", "phone_locked", "phone_missed", "phone_paused", "phonelink_erase", "phonelink_lock", "phonelink_off", "phonelink_ring", "phonelink_ring_off", "phonelink_setup", "photo", "photo_album", "photo_camera", "photo_camera_back", "photo_camera_front", "photo_filter", "photo_frame", "photo_library", "photo_size_select_large", "photo_size_select_small", "php", "physical_therapy", "piano", "piano_off", "picture_as_pdf", "picture_in_picture", "picture_in_picture_alt", "pie_chart", "pill", "pill_off", "pin", "pin_drop", "pin_end", "pin_invoke", "pinch", "pinch_zoom_in", "pinch_zoom_out", "pip", "pip_exit", "pivot_table_chart", "place_item", "plagiarism", "play_arrow", "play_circle", "play_disabled", "play_for_work", "play_lesson", "play_pause", "play_shapes", "playing_cards", "playlist_add", "playlist_add_check", "playlist_add_check_circle", "playlist_add_circle", "playlist_play", "playlist_remove", "plumbing", "podcasts", "podiatry", "podium", "point_of_sale", "point_scan", "policy", "polyline", "polymer", "pool", "portable_wifi_off", "position_bottom_left", "position_bottom_right", "position_top_right", "post_add", "potted_plant", "power", "power_input", "power_off", "power_rounded", "power_settings_new", "prayer_times", "precision_manufacturing", "pregnancy", "pregnant_woman", "preliminary", "prescriptions", "present_to_all", "preview", "preview_off", "price_change", "price_check", "print", "print_add", "print_connect", "print_disabled", "print_error", "print_lock", "priority", "priority_high", "privacy", "privacy_tip", "private_connectivity", "problem", "procedure", "process_chart", "production_quantity_limits", "productivity", "propane", "propane_tank", "psychiatry", "psychology", "psychology_alt", "public", "public_off", "publish", "published_with_changes", "pulmonology", "punch_clock", "push_pin", "qr_code", "qr_code_2", "qr_code_2_add", "qr_code_scanner", "query_stats", "question_exchange", "question_mark", "queue_music", "queue_play_next", "quick_phrases", "quick_reference", "quick_reference_all", "quickreply", "quiet_time", "quiet_time_active", "quiz", "r_mobiledata", "radar", "radio", "radio_button_checked", "radio_button_unchecked", "radiology", "railway_alert", "rainy", "rainy_heavy", "rainy_light", "rainy_snow", "ramen_dining", "ramp_left", "ramp_right", "range_hood", "rate_review", "raw_off", "raw_on", "read_more", "readiness_score", "real_estate_agent", "rear_camera", "rebase", "rebase_edit", "receipt", "receipt_long", "recent_actors", "recent_patient", "recommend", "record_voice_over", "rectangle", "recycling", "redeem", "redo", "reduce_capacity", "refresh", "regular_expression", "relax", "release_alert", "remember_me", "remote_gen", "remove", "remove_done", "remove_from_queue", "remove_moderator", "remove_road", "remove_shopping_cart", "reopen_window", "reorder", "repartition", "repeat", "repeat_on", "repeat_one", "repeat_one_on", "replay", "replay_10", "replay_30", "replay_5", "reply", "reply_all", "report", "report_off", "request_page", "request_quote", "reset_image", "reset_tv", "resize", "respiratory_rate", "restart_alt", "restaurant", "restaurant_menu", "restore_from_trash", "restore_page", "resume", "reviews", "rheumatology", "rib_cage", "rice_bowl", "right_click", "right_panel_close", "right_panel_open", "ring_volume", "robot", "rocket", "rocket_launch", "roller_shades", "roller_shades_closed", "roller_skating", "roofing", "room_preferences", "room_service", "rotate_90_degrees_ccw", "rotate_90_degrees_cw", "rotate_left", "rotate_right", "roundabout_left", "roundabout_right", "rounded_corner", "route", "router", "routine", "rowing", "rss_feed", "rsvp", "rtt", "rule", "rule_folder", "rule_settings", "run_circle", "running_with_errors", "rv_hookup", "safety_check", "safety_divider", "sailing", "salinity", "sanitizer", "satellite", "satellite_alt", "sauna", "save", "save_as", "saved_search", "savings", "scale", "scan", "scan_delete", "scanner", "scatter_plot", "scene", "schedule", "schedule_send", "schema", "school", "science", "score", "scoreboard", "screen_lock_landscape", "screen_lock_portrait", "screen_lock_rotation", "screen_record", "screen_rotation", "screen_rotation_alt", "screen_rotation_up", "screen_search_desktop", "screen_share", "screenshot", "screenshot_frame", "screenshot_keyboard", "screenshot_monitor", "screenshot_region", "screenshot_tablet", "scuba_diving", "sd", "sd_card", "sd_card_alert", "search", "search_check", "search_off", "security", "security_update_good", "security_update_warning", "segment", "select", "select_all", "select_check_box", "select_to_speak", "self_care", "self_improvement", "sell", "send", "send_and_archive", "send_time_extension", "send_to_mobile", "sensor_door", "sensor_occupied", "sensor_window", "sensors", "sensors_off", "sentiment_calm", "sentiment_content", "sentiment_dissatisfied", "sentiment_excited", "sentiment_extremely_dissatisfied", "sentiment_frustrated", "sentiment_neutral", "sentiment_sad", "sentiment_satisfied", "sentiment_stressed", "sentiment_very_dissatisfied", "sentiment_very_satisfied", "sentiment_worried", "set_meal", "settings", "settings_accessibility", "settings_account_box", "settings_alert", "settings_applications", "settings_b_roll", "settings_backup_restore", "settings_bluetooth", "settings_brightness", "settings_cell", "settings_cinematic_blur", "settings_ethernet", "settings_input_antenna", "settings_input_component", "settings_input_hdmi", "settings_input_svideo", "settings_motion_mode", "settings_night_sight", "settings_overscan", "settings_panorama", "settings_phone", "settings_photo_camera", "settings_power", "settings_remote", "settings_slow_motion", "settings_suggest", "settings_system_daydream", "settings_timelapse", "settings_video_camera", "settings_voice", "settop_component", "severe_cold", "shape_line", "shapes", "share", "share_location", "share_off", "share_reviews", "share_windows", "sheets_rtl", "shelf_auto_hide", "shelf_position", "shelves", "shield", "shield_lock", "shield_moon", "shield_person", "shield_with_heart", "shield_with_house", "shift", "shift_lock", "shop", "shop_two", "shopping_bag", "shopping_basket", "shopping_cart", "shopping_cart_checkout", "short_stay", "short_text", "show_chart", "shower", "shuffle", "shuffle_on", "shutter_speed", "sick", "sign_language", "signal_cellular_0_bar", "signal_cellular_1_bar", "signal_cellular_2_bar", "signal_cellular_3_bar", "signal_cellular_4_bar", "signal_cellular_add", "signal_cellular_alt", "signal_cellular_alt_1_bar", "signal_cellular_alt_2_bar", "signal_cellular_connected_no_internet_0_bar", "signal_cellular_connected_no_internet_4_bar", "signal_cellular_nodata", "signal_cellular_null", "signal_cellular_off", "signal_disconnected", "signal_wifi_0_bar", "signal_wifi_4_bar", "signal_wifi_bad", "signal_wifi_off", "signal_wifi_statusbar_not_connected", "signal_wifi_statusbar_null", "signature", "signpost", "sim_card", "sim_card_download", "single_bed", "sip", "skateboarding", "skeleton", "skip_next", "skip_previous", "skull", "sledding", "sleep", "sleep_score", "slide_library", "slideshow", "slow_motion_video", "smart_button", "smart_display", "smart_outlet", "smart_screen", "smart_toy", "smartphone", "smb_share", "smoke_free", "smoking_rooms", "sms", "sms_failed", "snippet_folder", "snooze", "snowboarding", "snowing", "snowing_heavy", "snowmobile", "snowshoeing", "soap", "social_distance", "social_leaderboard", "solar_power", "sort", "sort_by_alpha", "sos", "sound_detection_dog_barking", "sound_detection_glass_break", "sound_detection_loud_sound", "sound_sampler", "soup_kitchen", "source_notes", "south", "south_america", "south_east", "south_west", "spa", "space_bar", "space_dashboard", "spatial_audio", "spatial_audio_off", "spatial_tracking", "speaker", "speaker_group", "speaker_notes", "speaker_notes_off", "speaker_phone", "special_character", "specific_gravity", "speech_to_text", "speed", "spellcheck", "splitscreen", "splitscreen_bottom", "splitscreen_left", "splitscreen_right", "splitscreen_top", "spo2", "spoke", "sports", "sports_bar", "sports_baseball", "sports_basketball", "sports_cricket", "sports_esports", "sports_football", "sports_golf", "sports_gymnastics", "sports_handball", "sports_hockey", "sports_kabaddi", "sports_martial_arts", "sports_mma", "sports_motorsports", "sports_rugby", "sports_score", "sports_soccer", "sports_tennis", "sports_volleyball", "sprinkler", "sprint", "square", "square_foot", "ssid_chart", "stack", "stack_off", "stack_star", "stacked_bar_chart", "stacked_line_chart", "stadia_controller", "stadium", "stairs", "star", "star_half", "star_rate", "star_rate_half", "stars", "start", "stay_current_landscape", "stay_current_portrait", "stay_primary_landscape", "stay_primary_portrait", "step", "step_into", "step_out", "step_over", "steps", "stethoscope", "stethoscope_arrow", "stethoscope_check", "sticky_note_2", "stop", "stop_circle", "stop_screen_share", "storage", "store", "storefront", "storm", "straight", "straighten", "strategy", "stream", "stream_apps", "streetview", "stress_management", "strikethrough_s", "stroke_full", "stroke_partial", "stroller", "style", "styler", "stylus", "stylus_laser_pointer", "stylus_note", "subdirectory_arrow_left", "subdirectory_arrow_right", "subject", "subscript", "subscriptions", "subtitles", "subtitles_off", "subway", "summarize", "sunny", "sunny_snowing", "superscript", "supervised_user_circle", "supervised_user_circle_off", "supervisor_account", "support", "support_agent", "surfing", "surgical", "surround_sound", "swap_calls", "swap_horiz", "swap_horizontal_circle", "swap_vert", "swap_vertical_circle", "swipe", "swipe_down", "swipe_down_alt", "swipe_left", "swipe_left_alt", "swipe_right", "swipe_right_alt", "swipe_up", "swipe_up_alt", "swipe_vertical", "switch", "switch_access", "switch_access_shortcut", "switch_access_shortcut_add", "switch_account", "switch_camera", "switch_left", "switch_right", "switch_video", "sword_rose", "swords", "symptoms", "synagogue", "sync", "sync_alt", "sync_disabled", "sync_lock", "sync_problem", "sync_saved_locally", "syringe", "system_update", "system_update_alt", "tab", "tab_close", "tab_close_right", "tab_duplicate", "tab_group", "tab_move", "tab_new_right", "tab_recent", "tab_unselected", "table", "table_bar", "table_chart", "table_chart_view", "table_lamp", "table_restaurant", "table_rows", "table_rows_narrow", "table_view", "tablet", "tablet_android", "tablet_mac", "tag", "takeout_dining", "tamper_detection_off", "tamper_detection_on", "tap_and_play", "tapas", "task", "task_alt", "taunt", "taxi_alert", "team_dashboard", "temp_preferences_custom", "temp_preferences_eco", "temple_buddhist", "temple_hindu", "tenancy", "terminal", "text_decrease", "text_fields", "text_format", "text_increase", "text_rotate_up", "text_rotate_vertical", "text_rotation_angledown", "text_rotation_angleup", "text_rotation_down", "text_rotation_none", "text_select_end", "text_select_jump_to_beginning", "text_select_jump_to_end", "text_select_move_back_character", "text_select_move_back_word", "text_select_move_down", "text_select_move_forward_character", "text_select_move_forward_word", "text_select_move_up", "text_select_start", "text_snippet", "text_to_speech", "texture", "theater_comedy", "theaters", "thermometer", "thermometer_gain", "thermometer_loss", "thermostat", "thermostat_auto", "thermostat_carbon", "thumb_down", "thumb_up", "thumbnail_bar", "thumbs_up_down", "thunderstorm", "tibia", "tibia_alt", "time_auto", "timelapse", "timeline", "timer", "timer_10", "timer_10_alt_1", "timer_10_select", "timer_3", "timer_3_alt_1", "timer_3_select", "timer_off", "tips_and_updates", "tire_repair", "title", "toc", "today", "toggle_off", "toggle_on", "token", "toll", "tonality", "tools_flat_head", "tools_installation_kit", "tools_ladder", "tools_level", "tools_phillips", "tools_pliers_wire_stripper", "tools_power_drill", "top_panel_close", "top_panel_open", "topic", "tornado", "total_dissolved_solids", "touch_app", "touchpad_mouse", "tour", "toys", "toys_fan", "track_changes", "traffic", "trail_length", "trail_length_medium", "trail_length_short", "train", "tram", "transcribe", "transfer_within_a_station", "transform", "transgender", "transit_enterexit", "translate", "transportation", "travel_explore", "trending_down", "trending_flat", "trending_up", "trip_origin", "trolley", "tsunami", "tty", "tune", "turn_left", "turn_right", "turn_sharp_left", "turn_sharp_right", "turn_slight_left", "turn_slight_right", "tv", "tv_gen", "tv_off", "tv_remote", "tv_with_assistant", "two_wheeler", "type_specimen", "u_turn_left", "u_turn_right", "ulna_radius", "ulna_radius_alt", "umbrella", "unarchive", "undo", "unfold_less", "unfold_less_double", "unfold_more", "unfold_more_double", "ungroup", "unknown_document", "unknown_med", "unpublished", "unsubscribe", "upcoming", "update", "update_disabled", "upgrade", "upload", "upload_file", "urology", "usb", "usb_off", "vaccines", "valve", "vape_free", "vaping_rooms", "variables", "ventilator", "verified", "verified_user", "vertical_align_bottom", "vertical_align_center", "vertical_align_top", "vertical_distribute", "vertical_shades", "vertical_shades_closed", "vertical_split", "vibration", "video_call", "video_camera_back", "video_camera_front", "video_camera_front_off", "video_chat", "video_file", "video_label", "video_library", "video_settings", "video_stable", "videocam", "videocam_off", "videogame_asset", "videogame_asset_off", "view_agenda", "view_array", "view_carousel", "view_column", "view_column_2", "view_comfy", "view_comfy_alt", "view_compact", "view_compact_alt", "view_cozy", "view_day", "view_headline", "view_in_ar", "view_in_ar_off", "view_kanban", "view_list", "view_module", "view_quilt", "view_sidebar", "view_stream", "view_timeline", "view_week", "vignette", "villa", "visibility", "visibility_lock", "visibility_off", "vital_signs", "voice_chat", "voice_over_off", "voicemail", "volcano", "volume_down", "volume_down_alt", "volume_mute", "volume_off", "volume_up", "volunteer_activism", "voting_chip", "vpn_key", "vpn_key_alert", "vpn_key_off", "vpn_lock", "vrpano", "wall_lamp", "wallet", "wallpaper", "wallpaper_slideshow", "ward", "warehouse", "warning", "warning_off", "wash", "watch", "watch_button_press", "watch_off", "watch_screentime", "watch_wake", "water", "water_bottle", "water_bottle_large", "water_damage", "water_do", "water_drop", "water_ec", "water_full", "water_heater", "water_lock", "water_loss", "water_lux", "water_medium", "water_orp", "water_ph", "water_pump", "water_voc", "waterfall_chart", "waves", "waving_hand", "wb_auto", "wb_incandescent", "wb_iridescent", "wb_shade", "wb_sunny", "wb_twilight", "wc", "weather_hail", "weather_mix", "weather_snowy", "web", "web_asset", "web_asset_off", "web_stories", "webhook", "weekend", "weight", "west", "whatshot", "wheelchair_pickup", "where_to_vote", "widgets", "width", "width_full", "width_normal", "width_wide", "wifi", "wifi_1_bar", "wifi_2_bar", "wifi_add", "wifi_calling", "wifi_calling_1", "wifi_calling_2", "wifi_calling_3", "wifi_channel", "wifi_find", "wifi_home", "wifi_lock", "wifi_notification", "wifi_off", "wifi_password", "wifi_protected_setup", "wifi_proxy", "wifi_tethering", "wifi_tethering_error", "wifi_tethering_off", "wind_power", "window", "window_closed", "window_open", "window_sensor", "wine_bar", "woman", "woman_2", "work", "work_alert", "work_history", "work_update", "workspace_premium", "workspaces", "wounds_injuries", "wrap_text", "wrist", "wrong_location", "wysiwyg", "yard", "youtube_activity", "youtube_searched_for", "zone_person_alert", "zone_person_idle", "zone_person_urgent", "zoom_in", "zoom_in_map", "zoom_out", "zoom_out_map"];

var Icon = function Icon(_ref) {
  var active = _ref.active,
    icon = _ref.icon,
    _onClick = _ref.onClick,
    symbolsStyle = _ref.symbolsStyle,
    style = _ref.style;
  return /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
    content: neetoCist.humanize(icon),
    position: "bottom",
    touch: ["hold", 500],
    children: /*#__PURE__*/jsxRuntime.jsx("div", {
      style: style,
      "data-testid": "icon-picker-icon-".concat(icon),
      className: classnames("neeto-ui-rounded-md flex cursor-pointer items-center justify-center", {
        "neeto-ui-text-gray-700 hover:neeto-ui-bg-gray-100": !active,
        "neeto-ui-text-white neeto-ui-bg-primary-500": active
      }),
      onClick: function onClick() {
        return _onClick(icon);
      },
      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "flex w-11/12 flex-col justify-center p-1",
        style: symbolsStyle,
        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
          className: "material-symbols-rounded mx-auto",
          children: icon
        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
          className: "line-clamp-2 text-center",
          style: "body3",
          children: neetoCist.humanize(icon)
        })]
      })
    })
  });
};

var css = "@import url(\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,300,0..1,0\");";
injectCss.n(css,{});

var NoResults = reactUtils.withT(function (_ref) {
  var t = _ref.t;
  return /*#__PURE__*/jsxRuntime.jsx(Typography, {
    className: "neeto-ui-text-gray-400 flex h-64 items-center justify-center text-lg",
    "data-testid": "no-icon-results-found-text",
    children: t("neetoMolecules.iconPicker.dropdown.noResults")
  });
});
var NoResults$1 = /*#__PURE__*/React.memo(NoResults);

var _excluded = ["filled", "label", "value", "onClick", "className"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var IconPicker = function IconPicker(_ref) {
  var _ref$filled = _ref.filled,
    filled = _ref$filled === void 0 ? false : _ref$filled,
    label = _ref.label,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? "" : _ref$value,
    _ref$onClick = _ref.onClick,
    onClick = _ref$onClick === void 0 ? neetoCist.noop : _ref$onClick,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    otherProps = _objectWithoutProperties(_ref, _excluded);
  var _useState = React.useState(""),
    _useState2 = _slicedToArray(_useState, 2),
    searchTerm = _useState2[0],
    setSearchTerm = _useState2[1];
  var _useState3 = React.useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    iconList = _useState4[0],
    setIconList = _useState4[1];
  var _useState5 = React.useState(value),
    _useState6 = _slicedToArray(_useState5, 2),
    activeIcon = _useState6[0],
    setActiveIcon = _useState6[1];
  var gridRef = React.useRef(null);
  var debouncedSearchTerm = useDebounce(searchTerm);
  var _useTranslation = reactI18next.useTranslation(),
    t = _useTranslation.t;
  var isLargerScreen = function isLargerScreen() {
    return window.innerWidth > 768;
  };
  var handleSearch = function handleSearch(term) {
    var _gridRef$current;
    var searchTerm = term.toLowerCase().trim().replace(/\s+/g, "_");
    var filteredIcons = ICONS_LIST.filter(function (icon) {
      return icon.toLowerCase().includes(searchTerm);
    });
    setIconList(filteredIcons);
    (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 || _gridRef$current.scrollToItem({
      rowIndex: 0
    });
  };
  var handleRemoveClick = function handleRemoveClick() {
    onClick("");
    setActiveIcon("");
  };
  var handleDropdownClick = function handleDropdownClick() {
    var _gridRef$current2;
    (_gridRef$current2 = gridRef.current) === null || _gridRef$current2 === void 0 || _gridRef$current2.scrollToItem({
      rowIndex: iconList.findIndex(function (icon) {
        return icon === activeIcon;
      }) / GRID_PROPERTIES.columnCount
    });
    setSearchTerm("");
  };
  var symbolsStyle = {
    fontVariationSettings: "'FILL' ".concat(filled ? 1 : 0)
  };
  React.useEffect(function () {
    handleSearch(debouncedSearchTerm);
  }, [debouncedSearchTerm]);
  var renderGridCell = function renderGridCell(_ref2) {
    var columnIndex = _ref2.columnIndex,
      rowIndex = _ref2.rowIndex,
      style = _ref2.style,
      data = _ref2.data;
    var iconIndex = rowIndex * GRID_PROPERTIES.columnCount + columnIndex;
    var icon = data[iconIndex];
    var handleIconClick = function handleIconClick(icon) {
      onClick(icon);
      setActiveIcon(icon);
    };
    return icon ? /*#__PURE__*/jsxRuntime.jsx(Icon, {
      icon: icon,
      style: style,
      symbolsStyle: symbolsStyle,
      active: icon === activeIcon,
      onClick: handleIconClick
    }) : null;
  };
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: "flex flex-col items-start gap-2",
    children: [label && /*#__PURE__*/jsxRuntime.jsx(Label, {
      children: label
    }), /*#__PURE__*/jsxRuntime.jsx(Dropdown, _objectSpread(_objectSpread({
      buttonSize: "small",
      buttonStyle: "secondary",
      closeOnSelect: false,
      dropdownProps: {
        className: classnames("h-96", className)
      },
      position: "bottom-start",
      strategy: "fixed",
      buttonProps: {
        "data-testid": "icon-picker-dropdown",
        onClick: handleDropdownClick
      },
      label: /*#__PURE__*/jsxRuntime.jsxs("span", {
        className: "flex items-center gap-2",
        style: symbolsStyle,
        children: [value && /*#__PURE__*/jsxRuntime.jsx("span", {
          className: "material-symbols-rounded neeto-ui-text-base mx-auto",
          children: value
        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
          style: "body2",
          children: neetoCist.humanize(value) || t("neetoMolecules.iconPicker.dropdown.label")
        })]
      }),
      onClose: function onClose() {
        return setSearchTerm("");
      }
    }, otherProps), {}, {
      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "w-72 flex-grow p-2 md:w-80",
        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "mb-1 flex flex-col gap-y-2",
          children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
            autoFocus: true,
            autoComplete: "off",
            "data-testid": "pick-icon-text-field",
            value: searchTerm,
            placeholder: t("neetoMolecules.common.search", {
              entity: t("neetoMolecules.iconPicker.entity")
            }),
            suffix: /*#__PURE__*/jsxRuntime.jsx(Button, {
              icon: Close,
              size: "small",
              style: "link",
              onClick: function onClick() {
                return setSearchTerm("");
              }
            }),
            onChange: function onChange(e) {
              return setSearchTerm(e.target.value);
            }
          }), value && /*#__PURE__*/jsxRuntime.jsx("div", {
            className: "neeto-ui-bg-white flex justify-center",
            children: /*#__PURE__*/jsxRuntime.jsx(Button, {
              className: "text-sm",
              "data-testid": "icon-remove-button",
              icon: Close,
              label: t("neetoMolecules.iconPicker.dropdown.removeButton"),
              style: "link",
              onClick: handleRemoveClick
            })
          })]
        }), neetoCist.isNotEmpty(iconList) ? /*#__PURE__*/jsxRuntime.jsx(FixedSizeGrid, {
          className: "w-full overflow-x-hidden",
          columnCount: GRID_PROPERTIES.columnCount,
          height: GRID_PROPERTIES.gridHeight,
          itemData: iconList,
          ref: gridRef,
          rowHeight: GRID_PROPERTIES.rowHeight,
          width: GRID_PROPERTIES.gridWidth,
          columnWidth: isLargerScreen() ? GRID_PROPERTIES.columnWidthDesktop : GRID_PROPERTIES.columnWidthMobile,
          rowCount: Math.ceil(iconList.length / GRID_PROPERTIES.columnCount),
          children: renderGridCell
        }) : /*#__PURE__*/jsxRuntime.jsx(NoResults$1, {})]
      })
    }))]
  });
};

module.exports = IconPicker;
//# sourceMappingURL=IconPicker.js.map
