react-wired-elements/dist/react-wired-elements.esm.js

Wired Elements as React components. TypeScript types included.

import 'wired-elements/lib/wired-elements-cjs';
import { useState as useState$3, useRef as useRef$2, useEffect as useEffect$2, createElement, useMemo as useMemo$h, Fragment } from 'react';

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

var useState = useState$3,
    useRef = useRef$2,
    useEffect = useEffect$2;
function useCustomElement(values) {
  var _useState = useState({}),
      attrs = _useState[0],
      setAttrs = _useState[1];

  var registered = useRef(false);
  var ref = useRef();
  useEffect(function () {
    if (!registered.current) {
      return;
    }

    var attributes = values['attributes'];
    var css = values['css'];
    css && setCSS(css);
    attributes && addAttributes(attributes);
  }, [values]);

  function setCSS(css) {
    Object.keys(css).forEach(function (key) {
      var value = css[key];
      if (!value) return;

      if (key.startsWith('--')) {
        var root = document.documentElement;
        root.style.setProperty(key, value || '#333');
      } else {
        ref.current.style[key] = value;
      }
    });
  } // Only need to add the methods once


  useEffect(function () {
    if (!registered.current) {
      return;
    }

    var methods = values['methods'];
    methods && addMethods(methods);
  }, [values]);

  function register(option) {
    ref.current = option;
    registered.current = true;
  } // This hook fires on any change to ensure that things are repainted as necessary.


  useEffect(function () {
    // A hack, but it works for now.
    setTimeout(function () {
      var _ref$current;

      if ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.requestUpdate) {
        ref.current.requestUpdate();
      }
    }, 0);
  });

  function addAttributes(attrList) {
    Object.keys(attrList).forEach(function (key) {
      setAttrs(function (a) {
        var _extends2;

        return _extends({}, a, (_extends2 = {}, _extends2[key] = attrList[key], _extends2));
      });
    });
  }

  function addMethods(methodsList) {
    Object.keys(methodsList).forEach(function (key) {
      ref.current.addEventListener(key, methodsList[key]);
    });
  } // This is responsible for syncing up dom attributes when the prop
  // representation changes.


  useEffect(function () {
    Object.keys(attrs).forEach(function (key) {
      // @ts-ignore
      ref.current[key] = attrs[key];
    });
  }, [attrs]); // This event listener is for the WiredSearchInput so that it can
  // be detected when the user hits the clear button.

  useEffect(function () {
    ref.current.addEventListener('input', function (e) {
      setAttrs(function (a) {
        return _extends({}, a, {
          value: e.target.value
        });
      });
    });
  }, []);
  return register;
}

var useMemo = useMemo$h;
var WiredButton = function WiredButton(_ref) {
  var className = _ref.className,
      style = _ref.style,
      onClick = _ref.onClick,
      _ref$elevation = _ref.elevation,
      elevation = _ref$elevation === void 0 ? 1 : _ref$elevation,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      _ref$children = _ref.children,
      children = _ref$children === void 0 ? 'Click Me!' : _ref$children;
  var customValues = useMemo(function () {
    return {
      attributes: {
        disabled: disabled,
        elevation: elevation
      }
    };
  }, [elevation, disabled]);
  var register = useCustomElement(customValues);
  return createElement("wired-button", {
    onClick: onClick,
    "class": className,
    style: style,
    ref: register
  }, children);
};

var useMemo$1 = useMemo$h;
var WiredCalendar = function WiredCalendar(_ref) {
  var _ref$elevation = _ref.elevation,
      elevation = _ref$elevation === void 0 ? 1 : _ref$elevation,
      selectedDate = _ref.selectedDate,
      firstDate = _ref.firstDate,
      lastDate = _ref.lastDate,
      locale = _ref.locale,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      _ref$initials = _ref.initials,
      initials = _ref$initials === void 0 ? false : _ref$initials,
      _ref$bgColor = _ref.bgColor,
      bgColor = _ref$bgColor === void 0 ? 'white' : _ref$bgColor,
      _ref$lineColor = _ref.lineColor,
      lineColor = _ref$lineColor === void 0 ? 'black' : _ref$lineColor,
      _ref$selectedColor = _ref.selectedColor,
      selectedColor = _ref$selectedColor === void 0 ? 'red' : _ref$selectedColor,
      _ref$dimmedColor = _ref.dimmedColor,
      dimmedColor = _ref$dimmedColor === void 0 ? 'gray' : _ref$dimmedColor,
      onSelect = _ref.onSelect,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$1(function () {
    return {
      attributes: {
        elevation: elevation,
        selected: selectedDate,
        firstdate: firstDate,
        lastdate: lastDate,
        locale: locale,
        disabled: disabled,
        initials: initials
      },
      methods: {
        selected: onSelect
      },
      css: {
        '--wired-calendar-bg': bgColor,
        '--wired-calendar-color': lineColor,
        '--wired-calendar-selected-color': selectedColor,
        '--wired-calendar-dimmed-color': dimmedColor
      }
    };
  }, [elevation, selectedDate, firstDate, lastDate, locale, disabled, initials, // value,
  // format,
  bgColor, lineColor, selectedColor, dimmedColor, onSelect]);
  var register = useCustomElement(customValues);
  return createElement("wired-calendar", {
    "class": className,
    style: style,
    ref: register
  });
};
/*
Not sure what to do about these. Are they even needed for React?

value - javascript object that contains the selected Date object and the corresponing formated text.
format - gets/sets the javascript function to format a Date object into a formated text.

*/

var WiredCard = function WiredCard(_ref) {
  var requestUpdate = _ref.requestUpdate,
      elevation = _ref.elevation,
      fill = _ref.fill,
      children = _ref.children,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$h(function () {
    return {
      attributes: {
        elevation: elevation,
        fill: fill
      },
      methods: {
        requestUpdate: requestUpdate
      }
    };
  }, [elevation, fill, requestUpdate]);
  var register = useCustomElement(customValues);
  return createElement("wired-card", {
    "class": className,
    style: style,
    ref: register
  }, children);
};

var WiredCheckBox = function WiredCheckBox(_ref) {
  var _ref$checked = _ref.checked,
      checked = _ref$checked === void 0 ? false : _ref$checked,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      onChange = _ref.onChange,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$h(function () {
    return {
      attributes: {
        disabled: disabled,
        checked: checked
      },
      methods: {
        change: onChange
      },
      css: {
        '--wired-checkbox-icon-color': color
      }
    };
  }, [checked, disabled, color, onChange]);
  var register = useCustomElement(customValues);
  return createElement("wired-checkbox", {
    "class": className,
    style: style,
    ref: register
  });
};

var useMemo$2 = useMemo$h;
var WiredCombo = function WiredCombo(_ref) {
  var children = _ref.children,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      value = _ref.value,
      onSelect = _ref.onSelect,
      _ref$popupBgColor = _ref.popupBgColor,
      popupBgColor = _ref$popupBgColor === void 0 ? 'white' : _ref$popupBgColor,
      _ref$selectedBgColor = _ref.selectedBgColor,
      selectedBgColor = _ref$selectedBgColor === void 0 ? 'gray' : _ref$selectedBgColor,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$2(function () {
    return {
      attributes: {
        disabled: disabled,
        value: value
      },
      methods: {
        selected: onSelect
      },
      css: {
        '--wired-combo-popup-bg': popupBgColor,
        '--wired-item-selected-bg': selectedBgColor
      }
    };
  }, [disabled, value, onSelect, popupBgColor, selectedBgColor]);
  var register = useCustomElement(customValues);
  return createElement("wired-combo", {
    "class": className,
    style: style,
    ref: register
  }, children);
};

var useMemo$3 = useMemo$h;
var WiredDialog = function WiredDialog(_ref) {
  var children = _ref.children,
      _ref$elevation = _ref.elevation,
      elevation = _ref$elevation === void 0 ? 1 : _ref$elevation,
      _ref$open = _ref.open,
      open = _ref$open === void 0 ? false : _ref$open,
      _ref$zIndex = _ref.zIndex,
      zIndex = _ref$zIndex === void 0 ? 1 : _ref$zIndex,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$3(function () {
    return {
      attributes: {
        open: open,
        elevation: elevation
      },
      css: {
        '--wired-dialog-z-index': zIndex
      }
    };
  }, [elevation, open, zIndex]);
  var register = useCustomElement(customValues);
  return createElement("wired-dialog", {
    "class": className,
    style: style,
    ref: register
  }, children);
};

var WiredDivider = function WiredDivider(_ref) {
  var _ref$elevation = _ref.elevation,
      elevation = _ref$elevation === void 0 ? 1 : _ref$elevation,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$h(function () {
    return {
      attributes: {
        elevation: elevation
      }
    };
  }, [elevation]);
  var register = useCustomElement(customValues);
  return createElement("wired-divider", {
    "class": className,
    style: style,
    ref: register
  });
};

var useMemo$4 = useMemo$h;
var WiredFab = function WiredFab(_ref) {
  var _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      _ref$bgColor = _ref.bgColor,
      bgColor = _ref$bgColor === void 0 ? '#018786' : _ref$bgColor,
      _ref$iconColor = _ref.iconColor,
      iconColor = _ref$iconColor === void 0 ? 'white' : _ref$iconColor,
      _ref$icon = _ref.icon,
      icon = _ref$icon === void 0 ? 'favorite' : _ref$icon,
      onClick = _ref.onClick,
      children = _ref.children,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$4(function () {
    return {
      attributes: {
        disabled: disabled
      },
      methods: {
        click: onClick
      },
      css: {
        '--wired-fab-bg-color': bgColor,
        color: iconColor
      }
    };
  }, [disabled, bgColor, iconColor, onClick]);
  var register = useCustomElement(customValues);
  return createElement("wired-fab", {
    "class": className,
    style: style,
    ref: register
  }, createElement("span", null, children || createElement("span", {
    className: "material-icons",
    style: {
      color: iconColor
    }
  }, icon)));
};

var useMemo$5 = useMemo$h;
var WiredIconButton = function WiredIconButton(_ref) {
  var _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      _ref$lineColor = _ref.lineColor,
      lineColor = _ref$lineColor === void 0 ? '#018786' : _ref$lineColor,
      _ref$iconColor = _ref.iconColor,
      iconColor = _ref$iconColor === void 0 ? '#018786' : _ref$iconColor,
      _ref$icon = _ref.icon,
      icon = _ref$icon === void 0 ? 'favorite' : _ref$icon,
      _ref$iconSize = _ref.iconSize,
      iconSize = _ref$iconSize === void 0 ? 24 : _ref$iconSize,
      onClick = _ref.onClick,
      children = _ref.children,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$5(function () {
    return {
      attributes: {
        disabled: disabled
      },
      css: {
        color: lineColor,
        '--mdc-icon-size': iconSize
      }
    };
  }, [disabled, lineColor, iconSize]);
  var register = useCustomElement(customValues);
  return createElement("wired-icon-button", {
    onClick: onClick,
    "class": className,
    style: style,
    ref: register
  }, createElement("div", {
    style: {
      height: '24px',
      width: '24px'
    }
  }, children || createElement("span", {
    className: "material-icons",
    style: {
      fontSize: iconSize,
      color: iconColor
    }
  }, icon)));
};

var useMemo$6 = useMemo$h;
var WiredImage = function WiredImage(_ref) {
  var _ref$elevation = _ref.elevation,
      elevation = _ref$elevation === void 0 ? 1 : _ref$elevation,
      _ref$src = _ref.src,
      src = _ref$src === void 0 ? 'http://placekitten.com/200/300' : _ref$src,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$6(function () {
    return {
      attributes: {
        src: src,
        elevation: elevation
      }
    };
  }, [elevation, src]);
  var register = useCustomElement(customValues);
  return createElement("wired-image", {
    "class": className,
    style: style,
    ref: register
  });
};

var useMemo$7 = useMemo$h;
var WiredInput = function WiredInput(_ref) {
  var _ref$placeholder = _ref.placeholder,
      placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? 'text' : _ref$type,
      _ref$value = _ref.value,
      value = _ref$value === void 0 ? '' : _ref$value,
      onChange = _ref.onChange,
      onBlur = _ref.onBlur,
      onFocus = _ref.onFocus,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$7(function () {
    return {
      attributes: {
        placeholder: placeholder,
        disabled: disabled,
        type: type,
        value: value
      },
      methods: {
        input: onChange,
        blur: onBlur,
        focus: onFocus
      }
    };
  }, [placeholder, disabled, type, value, onChange, onBlur, onFocus]);
  var register = useCustomElement(customValues);
  return createElement("wired-input", {
    "class": className,
    style: style,
    ref: register
  });
};

var useMemo$8 = useMemo$h;
var WiredItem = function WiredItem(_ref) {
  var children = _ref.children,
      value = _ref.value,
      _ref$selectedBgColor = _ref.selectedBgColor,
      selectedBgColor = _ref$selectedBgColor === void 0 ? 'black' : _ref$selectedBgColor,
      _ref$selectedColor = _ref.selectedColor,
      selectedColor = _ref$selectedColor === void 0 ? 'white' : _ref$selectedColor,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'black' : _ref$color,
      _ref$selected = _ref.selected,
      selected = _ref$selected === void 0 ? false : _ref$selected,
      _onClick = _ref.onClick,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$8(function () {
    return {
      attributes: {
        value: value,
        selected: selected
      },
      css: {
        '--wired-item-selected-color': selectedColor,
        '--wired-item-selected-bg': selectedBgColor
      }
    };
  }, [value, selectedBgColor, selectedColor, selected]);
  var register = useCustomElement(customValues);

  var appliedStyle = _extends({}, style);

  appliedStyle.backgroundColor = selected ? selectedBgColor : style === null || style === void 0 ? void 0 : style.backgroundColor;
  appliedStyle.color = selected ? selectedColor : color || (style === null || style === void 0 ? void 0 : style.color);
  return createElement("wired-item", {
    value: value,
    "class": className,
    style: appliedStyle,
    onClick: function onClick() {
      return _onClick && _onClick(selected);
    },
    ref: register
  }, children);
};

var WiredLink = function WiredLink(_ref) {
  var _ref$elevation = _ref.elevation,
      elevation = _ref$elevation === void 0 ? 1 : _ref$elevation,
      _ref$href = _ref.href,
      href = _ref$href === void 0 ? '' : _ref$href,
      target = _ref.target,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'black' : _ref$color,
      _ref$lineColor = _ref.lineColor,
      lineColor = _ref$lineColor === void 0 ? 'black' : _ref$lineColor,
      children = _ref.children,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$h(function () {
    return {
      attributes: {
        elevation: elevation,
        href: href,
        target: target
      },
      css: {
        '--wired-link-decoration-color': lineColor,
        color: color
      }
    };
  }, [elevation, href, target, color, lineColor]);
  var register = useCustomElement(customValues);
  return createElement("wired-link", {
    "class": className,
    style: style,
    ref: register
  }, children);
};

var useMemo$9 = useMemo$h;
var WiredListBox = function WiredListBox(_ref) {
  var children = _ref.children,
      _ref$horizontal = _ref.horizontal,
      horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
      selected = _ref.selected,
      onSelect = _ref.onSelect,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'black' : _ref$color,
      _ref$bgColor = _ref.bgColor,
      bgColor = _ref$bgColor === void 0 ? 'white' : _ref$bgColor,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$9(function () {
    return {
      attributes: {
        horizontal: horizontal,
        selected: selected
      },
      methods: {
        selected: onSelect
      },
      css: {
        '--wired-item-selected-color ': color,
        '--wired-item-selected-bg': bgColor
      }
    };
  }, [horizontal, selected, onSelect, color, bgColor]);
  var register = useCustomElement(customValues);
  return createElement("wired-listbox", {
    selected: selected,
    "class": className,
    style: style,
    ref: register
  }, children);
};

var useMemo$a = useMemo$h,
    useState$1 = useState$3,
    useEffect$1 = useEffect$2;
var WiredProgress = function WiredProgress(_ref) {
  var _ref$value = _ref.value,
      value = _ref$value === void 0 ? 30 : _ref$value,
      _ref$min = _ref.min,
      min = _ref$min === void 0 ? 0 : _ref$min,
      _ref$max = _ref.max,
      max = _ref$max === void 0 ? 100 : _ref$max,
      _ref$showPercentage = _ref.showPercentage,
      showPercentage = _ref$showPercentage === void 0 ? false : _ref$showPercentage,
      _ref$labelColor = _ref.labelColor,
      labelColor = _ref$labelColor === void 0 ? 'black' : _ref$labelColor,
      _ref$labelBgColor = _ref.labelBgColor,
      labelBgColor = _ref$labelBgColor === void 0 ? 'rgba(255,255,255,0.9)' : _ref$labelBgColor,
      _ref$progressBarColor = _ref.progressBarColor,
      progressBarColor = _ref$progressBarColor === void 0 ? 'rgba(0, 0, 200, 0.8)' : _ref$progressBarColor,
      _ref$fontSize = _ref.fontSize,
      fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
      stuckAt = _ref.stuckAt,
      className = _ref.className,
      style = _ref.style;

  var _useState = useState$1(null),
      stuckAtValue = _useState[0],
      setStuckAtValue = _useState[1];
  /**
   * The stuckAt prop sets an interval that alternates between the stuckAt prop value
   * and the same value + .01 every 750 milliseconds.
   * This is forces re-renders, which paints a new SVG each time, giving an animated look.
   */


  useEffect$1(function () {
    var interval;

    if (stuckAt) {
      interval = setInterval(function () {
        setStuckAtValue(function (s) {
          return s === stuckAt ? s + 0.01 : stuckAt;
        });
      }, 750);
    }

    return function () {
      return clearInterval(interval);
    };
  }, [stuckAt]);
  var customValues = useMemo$a(function () {
    return {
      attributes: {
        value: stuckAtValue || value,
        min: stuckAtValue ? 0 : min,
        max: stuckAtValue ? 100 : max,
        percentage: showPercentage
      },
      css: {
        '--wired-progress-label-color': labelColor,
        '--wired-progress-label-background': labelBgColor,
        '--wired-progress-color': progressBarColor,
        '--wired-progress-font-size': fontSize
      }
    };
  }, [value, min, max, showPercentage, labelColor, labelBgColor, progressBarColor, fontSize, stuckAtValue]);
  var register = useCustomElement(customValues);
  return createElement("wired-progress", {
    "class": className,
    style: style,
    ref: register
  });
};

var useMemo$b = useMemo$h;
var WiredRadio = function WiredRadio(_ref) {
  var _ref$checked = _ref.checked,
      checked = _ref$checked === void 0 ? false : _ref$checked,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      name = _ref.name,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
      onChange = _ref.onChange,
      children = _ref.children,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$b(function () {
    return {
      attributes: {
        checked: checked,
        disabled: disabled,
        name: name
      },
      methods: {
        change: onChange
      },
      css: {
        '--wired-radio-icon-color': color
      }
    };
  }, [checked, disabled, name, color, onChange]);
  var register = useCustomElement(customValues);
  return createElement("wired-radio", {
    "class": className,
    style: style,
    ref: register
  }, children);
};

var useMemo$c = useMemo$h;
var WiredRadioGroup = function WiredRadioGroup(_ref) {
  var children = _ref.children,
      selected = _ref.selected,
      onSelect = _ref.onSelect,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$c(function () {
    return {
      attributes: {
        selected: selected
      },
      methods: {
        selected: onSelect
      }
    };
  }, [selected, onSelect]);
  var register = useCustomElement(customValues);
  return createElement("wired-radio-group", {
    "class": className,
    style: style,
    ref: register
  }, children);
};

var useMemo$d = useMemo$h;
var WiredSearchInput = function WiredSearchInput(_ref) {
  var _ref$placeholder = _ref.placeholder,
      placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      _ref$value = _ref.value,
      value = _ref$value === void 0 ? '' : _ref$value,
      onChange = _ref.onChange,
      onBlur = _ref.onBlur,
      onFocus = _ref.onFocus,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$d(function () {
    return {
      attributes: {
        placeholder: placeholder,
        disabled: disabled,
        value: value
      },
      methods: {
        input: onChange,
        blur: onBlur,
        focus: onFocus
      }
    };
  }, [placeholder, disabled, value, onChange, onBlur, onFocus]);
  var register = useCustomElement(customValues);
  return createElement("wired-search-input", {
    "class": className,
    style: style,
    ref: register
  });
};

function debounce(func, wait, immediate) {
  var timeout;
  return function () {
    // @ts-ignore
    var context = this,
        args = arguments;

    var later = function later() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };

    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

var useMemo$e = useMemo$h;
var WiredSlider = function WiredSlider(_ref) {
  var _ref$value = _ref.value,
      value = _ref$value === void 0 ? 30 : _ref$value,
      _ref$min = _ref.min,
      min = _ref$min === void 0 ? 0 : _ref$min,
      _ref$max = _ref.max,
      max = _ref$max === void 0 ? 100 : _ref$max,
      _ref$knobZeroColor = _ref.knobZeroColor,
      knobZeroColor = _ref$knobZeroColor === void 0 ? 'black' : _ref$knobZeroColor,
      _ref$knobColor = _ref.knobColor,
      knobColor = _ref$knobColor === void 0 ? 'rgba(0, 0, 200, 0.8)' : _ref$knobColor,
      _ref$barColor = _ref.barColor,
      barColor = _ref$barColor === void 0 ? 'currentColor' : _ref$barColor,
      onChange = _ref.onChange,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$e(function () {
    return {
      attributes: {
        value: value,
        min: min,
        max: max
      },
      css: {
        // '--wired-slider-knob-zero-color': knobZeroColor,
        '--wired-slider-knob-color': value === min ? knobZeroColor : knobColor,
        '--wired-slider-bar-color': barColor
      },
      methods: {
        change: debounce(onChange, 500)
      }
    };
  }, [value, min, max, knobZeroColor, knobColor, barColor, onChange]);
  var register = useCustomElement(customValues);
  return createElement("wired-slider", {
    "class": className,
    style: style,
    ref: register
  });
};

var WiredSpinner = function WiredSpinner(_ref) {
  var _ref$spinning = _ref.spinning,
      spinning = _ref$spinning === void 0 ? false : _ref$spinning,
      _ref$duration = _ref.duration,
      duration = _ref$duration === void 0 ? 1500 : _ref$duration,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'black' : _ref$color,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$h(function () {
    return {
      attributes: {
        spinning: spinning,
        duration: duration
      },
      css: {
        color: color
      }
    };
  }, [spinning, duration, color]);
  var register = useCustomElement(customValues);
  return createElement("wired-spinner", {
    "class": className,
    style: style,
    ref: register
  });
};

var useMemo$f = useMemo$h;
var WiredTab = function WiredTab(_ref) {
  var children = _ref.children,
      name = _ref.name,
      label = _ref.label,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$f(function () {
    return {
      attributes: {
        name: name,
        label: label
      }
    };
  }, [name, label]);
  var register = useCustomElement(customValues);

  var appliedStyle = _extends({}, style, {
    minWidth: '200px'
  });

  return createElement("wired-tab", {
    "class": className,
    style: appliedStyle,
    ref: register
  }, children);
};

var Show = function Show(_ref) {
  var when = _ref.when,
      children = _ref.children;
  return createElement(Fragment, null, when && children);
};

var useState$2 = useState$3,
    useRef$1 = useRef$2;
var WiredTabs = function WiredTabs(_ref) {
  var children = _ref.children,
      initialSelected = _ref.initialSelected,
      _ref$selectedColor = _ref.selectedColor,
      selectedColor = _ref$selectedColor === void 0 ? 'white' : _ref$selectedColor,
      _ref$selectedBgColor = _ref.selectedBgColor,
      selectedBgColor = _ref$selectedBgColor === void 0 ? 'black' : _ref$selectedBgColor;

  var _useState = useState$2(initialSelected),
      selectedValue = _useState[0],
      setSelectedValue = _useState[1];

  var tabsRef = useRef$1(null);

  function handleSelected(e) {
    setSelectedValue(e);
  }

  return createElement("div", null, createElement("div", {
    ref: tabsRef
  }, createElement(Show, {
    when: Array.isArray(children)
  }, children && children.map(function (child) {
    return createElement(WiredItem, {
      selectedColor: selectedColor,
      selectedBgColor: selectedBgColor,
      onClick: function onClick() {
        return handleSelected(child.props.name);
      },
      selected: selectedValue === child.props.name,
      key: child.props.name,
      value: child.props.name
    }, child.props.name);
  }))), createElement("div", null, createElement(Show, {
    when: Array.isArray(children)
  }, children && children.map(function (child) {
    if (child.props.name === selectedValue) {
      return createElement("div", {
        key: child,
        style: {
          width: (tabsRef === null || tabsRef === void 0 ? void 0 : tabsRef.current) ? tabsRef === null || tabsRef === void 0 ? void 0 : tabsRef.current.clientWidth : 'auto'
        }
      }, child);
    }

    return null;
  }))));
};

var useMemo$g = useMemo$h;
var WiredTextArea = function WiredTextArea(_ref) {
  var placeholder = _ref.placeholder,
      disabled = _ref.disabled,
      value = _ref.value,
      _ref$rows = _ref.rows,
      rows = _ref$rows === void 0 ? 3 : _ref$rows,
      _ref$maxRows = _ref.maxRows,
      maxRows = _ref$maxRows === void 0 ? 20 : _ref$maxRows,
      onChange = _ref.onChange,
      onBlur = _ref.onBlur,
      onFocus = _ref.onFocus,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$g(function () {
    return {
      attributes: {
        placeholder: placeholder,
        disabled: disabled,
        value: value,
        rows: rows,
        maxrows: maxRows
      },
      methods: {
        keyup: onChange,
        blur: onBlur,
        focus: onFocus
      }
    };
  }, [placeholder, disabled, value, rows, maxRows, onChange, onBlur, onFocus]);
  var register = useCustomElement(customValues);
  return createElement("wired-textarea", {
    "class": className,
    style: style,
    ref: register
  });
};
/*
TODO: Not working-
maxrows - Max number of rows TextArea grows to. Then scrollbars appear.
*/

var WiredToggle = function WiredToggle(_ref) {
  var _ref$checked = _ref.checked,
      checked = _ref$checked === void 0 ? false : _ref$checked,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      onChange = _ref.onChange,
      _ref$activeColor = _ref.activeColor,
      activeColor = _ref$activeColor === void 0 ? 'rgb(63, 81, 181)' : _ref$activeColor,
      _ref$inactiveColor = _ref.inactiveColor,
      inactiveColor = _ref$inactiveColor === void 0 ? 'gray' : _ref$inactiveColor,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$h(function () {
    return {
      attributes: {
        checked: checked,
        disabled: disabled
      },
      methods: {
        change: onChange
      },
      css: {
        '--wired-toggle-on-color': activeColor,
        '--wired-toggle-off-color': inactiveColor
      }
    };
  }, [checked, disabled, onChange, activeColor, inactiveColor]);
  var register = useCustomElement(customValues);
  return createElement("wired-toggle", {
    "class": className,
    style: style,
    ref: register
  });
};

var WiredVideo = function WiredVideo(_ref) {
  var _ref$src = _ref.src,
      src = _ref$src === void 0 ? 'https://res.cloudinary.com/gojutin/video/upload/w_400/v1585407774/cat-video.mp4' : _ref$src,
      _ref$autoPlay = _ref.autoPlay,
      autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
      _ref$loop = _ref.loop,
      loop = _ref$loop === void 0 ? false : _ref$loop,
      _ref$muted = _ref.muted,
      muted = _ref$muted === void 0 ? false : _ref$muted,
      _ref$playsInline = _ref.playsInline,
      playsInline = _ref$playsInline === void 0 ? false : _ref$playsInline,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'black' : _ref$color,
      className = _ref.className,
      style = _ref.style;
  var customValues = useMemo$h(function () {
    return {
      attributes: {
        src: src,
        autoplay: autoPlay,
        loop: loop,
        muted: muted,
        playsinline: playsInline
      },
      css: {
        '--wired-video-highlight-color': color
      }
    };
  }, [src, autoPlay, loop, muted, playsInline, color]);
  var register = useCustomElement(customValues);
  return createElement("wired-video", {
    "class": className,
    style: style,
    ref: register
  });
};

export { WiredButton, WiredCalendar, WiredCard, WiredCheckBox, WiredCombo, WiredDialog, WiredDivider, WiredFab, WiredIconButton, WiredImage, WiredInput, WiredItem, WiredLink, WiredListBox, WiredProgress, WiredRadio, WiredRadioGroup, WiredSearchInput, WiredSlider, WiredSpinner, WiredTab, WiredTabs, WiredTextArea, WiredToggle, WiredVideo };
//# sourceMappingURL=react-wired-elements.esm.js.map