@tabler/core 1.0.0-beta18 → 1.0.0-beta19

package/dist/libs/star-rating.js/dist/star-rating.js

@@ -0,0 +1,491 @@
+/**!
+ * Star Rating
+ * @version: 4.3.0
+ * @author: Paul Ryley (http://geminilabs.io)
+ * @url: https://github.com/pryley/star-rating.js
+ * @license: MIT
+ */
+var StarRating = (function () {
+  'use strict';
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
+
+  var defaults = {
+    classNames: {
+      active: 'gl-active',
+      base: 'gl-star-rating',
+      selected: 'gl-selected'
+    },
+    clearable: true,
+    maxStars: 10,
+    prebuilt: false,
+    stars: null,
+    tooltip: 'Select a Rating'
+  };
+
+  var addRemoveClass = function addRemoveClass(el, bool, className) {
+    el.classList[bool ? 'add' : 'remove'](className);
+  };
+  var createSpanEl = function createSpanEl(attributes) {
+    var el = document.createElement('span');
+    attributes = attributes || {};
+
+    for (var key in attributes) {
+      el.setAttribute(key, attributes[key]);
+    }
+
+    return el;
+  };
+  var inRange = function inRange(value, min, max) {
+    return /^\d+$/.test(value) && min <= value && value <= max;
+  };
+  var insertSpanEl = function insertSpanEl(el, after, attributes) {
+    var newEl = createSpanEl(attributes);
+    el.parentNode.insertBefore(newEl, after ? el.nextSibling : el);
+    return newEl;
+  };
+  var merge = function merge() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    // adapted from https://github.com/firstandthird/aug
+    var results = {};
+    args.forEach(function (prop) {
+      Object.keys(prop || {}).forEach(function (propName) {
+        if (args[0][propName] === undefined) return; // restrict keys to the defaults
+
+        var propValue = prop[propName];
+
+        if (type(propValue) === 'Object' && type(results[propName]) === 'Object') {
+          results[propName] = merge(results[propName], propValue);
+          return;
+        }
+
+        results[propName] = propValue;
+      });
+    });
+    return results;
+  };
+  var type = function type(value) {
+    return {}.toString.call(value).slice(8, -1);
+  };
+  var values = function values(selectEl) {
+    var values = [];
+    [].forEach.call(selectEl.options, function (el) {
+      var value = parseInt(el.value, 10) || 0;
+
+      if (value > 0) {
+        values.push({
+          index: el.index,
+          text: el.text,
+          value: value
+        });
+      }
+    });
+    return values.sort(function (a, b) {
+      return a.value - b.value;
+    });
+  };
+
+  var Widget = /*#__PURE__*/function () {
+    function Widget(el, props) {
+      _classCallCheck(this, Widget);
+
+      // (HTMLElement, object):void
+      this.direction = window.getComputedStyle(el, null).getPropertyValue('direction');
+      this.el = el;
+      this.events = {
+        change: this.onChange.bind(this),
+        keydown: this.onKeyDown.bind(this),
+        mousedown: this.onPointerDown.bind(this),
+        mouseleave: this.onPointerLeave.bind(this),
+        mousemove: this.onPointerMove.bind(this),
+        reset: this.onReset.bind(this),
+        touchend: this.onPointerDown.bind(this),
+        touchmove: this.onPointerMove.bind(this)
+      };
+      this.indexActive = null; // the active span index
+
+      this.indexSelected = null; // the selected span index
+
+      this.props = props;
+      this.tick = null;
+      this.ticking = false;
+      this.values = values(el);
+      this.widgetEl = null;
+
+      if (this.el.widget) {
+        this.el.widget.destroy(); // remove any stale event listeners
+      }
+
+      if (inRange(this.values.length, 1, this.props.maxStars)) {
+        this.build();
+      } else {
+        this.destroy();
+      }
+    }
+
+    _createClass(Widget, [{
+      key: "build",
+      value: function build() {
+        // ():void
+        this.destroy();
+        this.buildWidget();
+        this.selectValue(this.indexSelected = this.selected(), false); // set the initial value but do not trigger change event
+
+        this.handleEvents('add');
+        this.el.widget = this; // store a reference to this widget on the SELECT so that we can remove stale event listeners
+      }
+    }, {
+      key: "buildWidget",
+      value: function buildWidget() {
+        var _this = this;
+
+        // ():void
+        var parentEl, widgetEl;
+
+        if (this.props.prebuilt) {
+          parentEl = this.el.parentNode;
+          widgetEl = parentEl.querySelector('.' + this.props.classNames.base + '--stars');
+        } else {
+          parentEl = insertSpanEl(this.el, false, {
+            "class": this.props.classNames.base
+          });
+          parentEl.appendChild(this.el);
+          widgetEl = insertSpanEl(this.el, true, {
+            "class": this.props.classNames.base + '--stars'
+          });
+          this.values.forEach(function (item, index) {
+            var el = createSpanEl({
+              'data-index': index,
+              'data-value': item.value
+            });
+
+            if ('function' === typeof _this.props.stars) {
+              _this.props.stars.call(_this, el, item, index);
+            }
+
+            [].forEach.call(el.children, function (el) {
+              return el.style.pointerEvents = 'none';
+            });
+            widgetEl.innerHTML += el.outerHTML;
+          });
+        }
+
+        parentEl.dataset.starRating = '';
+        parentEl.classList.add(this.props.classNames.base + '--' + this.direction);
+
+        if (this.props.tooltip) {
+          widgetEl.setAttribute('role', 'tooltip');
+        }
+
+        this.widgetEl = widgetEl;
+      }
+    }, {
+      key: "changeIndexTo",
+      value: function changeIndexTo(index, force) {
+        var _this2 = this;
+
+        // (int):void
+        if (this.indexActive !== index || force) {
+          [].forEach.call(this.widgetEl.children, function (el, i) {
+            // i starts at zero
+            addRemoveClass(el, i <= index, _this2.props.classNames.active);
+            addRemoveClass(el, i === _this2.indexSelected, _this2.props.classNames.selected);
+          });
+          this.widgetEl.setAttribute('data-rating', index + 1);
+
+          if ('function' !== typeof this.props.stars && !this.props.prebuilt) {
+            // @v3 compat
+            this.widgetEl.classList.remove('s' + 10 * (this.indexActive + 1));
+            this.widgetEl.classList.add('s' + 10 * (index + 1));
+          }
+
+          if (this.props.tooltip) {
+            var _this$values$index;
+
+            var label = index < 0 ? this.props.tooltip : (_this$values$index = this.values[index]) === null || _this$values$index === void 0 ? void 0 : _this$values$index.text;
+            this.widgetEl.setAttribute('aria-label', label);
+          }
+
+          this.indexActive = index;
+        }
+
+        this.ticking = false;
+      }
+    }, {
+      key: "destroy",
+      value: function destroy() {
+        // ():void
+        this.indexActive = null; // the active span index
+
+        this.indexSelected = this.selected(); // the selected span index
+
+        var parentEl = this.el.parentNode;
+
+        if (parentEl.classList.contains(this.props.classNames.base)) {
+          if (this.props.prebuilt) {
+            this.widgetEl = parentEl.querySelector('.' + this.props.classNames.base + '--stars');
+            parentEl.classList.remove(this.props.classNames.base + '--' + this.direction);
+            delete parentEl.dataset.starRating;
+          } else {
+            parentEl.parentNode.replaceChild(this.el, parentEl);
+          }
+
+          this.handleEvents('remove');
+        }
+
+        delete this.el.widget; // remove the widget reference
+      }
+    }, {
+      key: "eventListener",
+      value: function eventListener(el, action, events, items) {
+        var _this3 = this;
+
+        // (HTMLElement, string, array, object):void
+        events.forEach(function (ev) {
+          return el[action + 'EventListener'](ev, _this3.events[ev], items || false);
+        });
+      }
+    }, {
+      key: "handleEvents",
+      value: function handleEvents(action) {
+        // (string):void
+        var formEl = this.el.closest('form');
+
+        if (formEl && formEl.tagName === 'FORM') {
+          this.eventListener(formEl, action, ['reset']);
+        }
+
+        this.eventListener(this.el, action, ['change']); // always trigger the change event, even when SELECT is disabled
+
+        if ('add' === action && this.el.disabled) return;
+        this.eventListener(this.el, action, ['keydown']);
+        this.eventListener(this.widgetEl, action, ['mousedown', 'mouseleave', 'mousemove', 'touchend', 'touchmove'],  false);
+      }
+    }, {
+      key: "indexFromEvent",
+      value: function indexFromEvent(ev) {
+        var _ev$touches, _ev$changedTouches;
+
+        // (MouseEvent|TouchEvent):void
+        var origin = ((_ev$touches = ev.touches) === null || _ev$touches === void 0 ? void 0 : _ev$touches[0]) || ((_ev$changedTouches = ev.changedTouches) === null || _ev$changedTouches === void 0 ? void 0 : _ev$changedTouches[0]) || ev;
+        var el = document.elementFromPoint(origin.clientX, origin.clientY);
+
+        if (el.parentNode === this.widgetEl) {
+          return [].slice.call(el.parentNode.children).indexOf(el);
+        }
+
+        return this.indexActive;
+      }
+    }, {
+      key: "onChange",
+      value: function onChange() {
+        // ():void
+        this.changeIndexTo(this.selected(), true);
+      }
+    }, {
+      key: "onKeyDown",
+      value: function onKeyDown(ev) {
+        // (KeyboardEvent):void
+        var key = ev.key.slice(5);
+        if (!~['Left', 'Right'].indexOf(key)) return;
+        ev.preventDefault();
+        var increment = key === 'Left' ? -1 : 1;
+
+        if (this.direction === 'rtl') {
+          increment *= -1;
+        }
+
+        var maxIndex = this.values.length - 1;
+        var minIndex = -1;
+        var index = Math.min(Math.max(this.selected() + increment, minIndex), maxIndex);
+        this.selectValue(index, true); // trigger change event
+      }
+    }, {
+      key: "onPointerDown",
+      value: function onPointerDown(ev) {
+        // (MouseEvent|TouchEvent):void
+        ev.preventDefault(); // this.el.focus(); // highlight the rating field
+
+        var index = this.indexFromEvent(ev);
+
+        if (this.props.clearable && index === this.indexSelected) {
+          index = -1; // remove the value
+        }
+
+        this.selectValue(index, true); // trigger change event
+      }
+    }, {
+      key: "onPointerLeave",
+      value: function onPointerLeave(ev) {
+        var _this4 = this;
+
+        // (MouseEvent):void
+        ev.preventDefault();
+        cancelAnimationFrame(this.tick);
+        requestAnimationFrame(function () {
+          return _this4.changeIndexTo(_this4.indexSelected);
+        });
+      }
+    }, {
+      key: "onPointerMove",
+      value: function onPointerMove(ev) {
+        var _this5 = this;
+
+        // (MouseEvent|TouchEvent):void
+        ev.preventDefault();
+
+        if (!this.ticking) {
+          this.tick = requestAnimationFrame(function () {
+            return _this5.changeIndexTo(_this5.indexFromEvent(ev));
+          });
+          this.ticking = true;
+        }
+      }
+    }, {
+      key: "onReset",
+      value: function onReset() {
+        var _this$el$querySelecto;
+
+        // ():void
+        var index = this.valueIndex((_this$el$querySelecto = this.el.querySelector('[selected]')) === null || _this$el$querySelecto === void 0 ? void 0 : _this$el$querySelecto.value);
+        this.selectValue(index || -1, false); // do not trigger change event
+      }
+    }, {
+      key: "selected",
+      value: function selected() {
+        // ():int
+        return this.valueIndex(this.el.value); // get the selected span index
+      }
+    }, {
+      key: "selectValue",
+      value: function selectValue(index, triggerChangeEvent) {
+        var _this$values$index2;
+
+        // (int, bool):void
+        this.el.value = ((_this$values$index2 = this.values[index]) === null || _this$values$index2 === void 0 ? void 0 : _this$values$index2.value) || ''; // first set the new value
+
+        this.indexSelected = this.selected(); // get the actual index from the selected value
+
+        if (false === triggerChangeEvent) {
+          this.changeIndexTo(this.selected(), true);
+        } else {
+          this.el.dispatchEvent(new Event('change'));
+        }
+      }
+    }, {
+      key: "valueIndex",
+      value: function valueIndex(value) {
+        return this.values.findIndex(function (val) {
+          return val.value === +value;
+        });
+      }
+    }]);
+
+    return Widget;
+  }();
+
+  var StarRating = /*#__PURE__*/function () {
+    function StarRating(selector, props) {
+      _classCallCheck(this, StarRating);
+
+      // (HTMLSelectElement|NodeList|string, object):void
+      this.destroy = this.destroy.bind(this);
+      this.props = props;
+      this.rebuild = this.rebuild.bind(this);
+      this.selector = selector;
+      this.widgets = [];
+      this.build();
+    }
+
+    _createClass(StarRating, [{
+      key: "build",
+      value: function build() {
+        var _this = this;
+
+        // (HTMLSelectElement|NodeList|string, object):void
+        this.queryElements(this.selector).forEach(function (el) {
+          var options = merge(defaults, _this.props, JSON.parse(el.getAttribute('data-options')));
+
+          if ('SELECT' === el.tagName && !el.widget) {
+            // check for an existing Widget reference
+            if (!options.prebuilt && el.parentNode.classList.contains(options.classNames.base)) {
+              _this.unwrap(el);
+            }
+
+            _this.widgets.push(new Widget(el, options));
+          }
+        });
+      }
+    }, {
+      key: "destroy",
+      value: function destroy() {
+        // ():void
+        this.widgets.forEach(function (widget) {
+          return widget.destroy();
+        });
+        this.widgets = [];
+      }
+    }, {
+      key: "queryElements",
+      value: function queryElements(selector) {
+        // (HTMLSelectElement|NodeList|string):array
+        if ('HTMLSelectElement' === type(selector)) {
+          return [selector];
+        }
+
+        if ('NodeList' === type(selector)) {
+          return [].slice.call(selector);
+        }
+
+        if ('String' === type(selector)) {
+          return [].slice.call(document.querySelectorAll(selector));
+        }
+
+        return [];
+      }
+    }, {
+      key: "rebuild",
+      value: function rebuild() {
+        // ():void
+        this.destroy();
+        this.build();
+      }
+    }, {
+      key: "unwrap",
+      value: function unwrap(el) {
+        var removeEl = el.parentNode;
+        var parentEl = removeEl.parentNode;
+        parentEl.insertBefore(el, removeEl);
+        parentEl.removeChild(removeEl);
+      }
+    }]);
+
+    return StarRating;
+  }();
+
+  return StarRating;
+
+}());

package/dist/libs/star-rating.js/dist/star-rating.min.css

@@ -0,0 +1,8 @@
+/**
+ * Star Rating
+ * @version: 4.3.0
+ * @author: Paul Ryley (http://geminilabs.io)
+ * @url: https://github.com/pryley/star-rating.js
+ * @license: MIT
+ */
+ :root{--gl-star-color:#fdd835;--gl-star-color-inactive:#dcdce6;--gl-star-empty:url(../img/star-empty.svg);--gl-star-full:url(../img/star-full.svg);--gl-star-size:24px;--gl-tooltip-border-radius:4px;--gl-tooltip-font-size:0.875rem;--gl-tooltip-font-weight:400;--gl-tooltip-line-height:1;--gl-tooltip-margin:12px;--gl-tooltip-padding:.5em 1em;--gl-tooltip-size:6px}[data-star-rating]>select{-webkit-clip-path:circle(1px at 0 0)!important;clip-path:circle(1px at 0 0)!important;clip:rect(1px,1px,1px,1px)!important;height:1px!important;margin:0!important;overflow:hidden!important;padding:0!important;position:absolute!important;top:0!important;visibility:visible!important;white-space:nowrap!important;width:1px!important;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none}[data-star-rating]>select:after,[data-star-rating]>select:before{display:none!important}[data-star-rating].gl-star-rating--ltr>select{left:0!important}[data-star-rating].gl-star-rating--rtl>select{right:0!important}[data-star-rating]{align-items:center;display:flex;position:relative}.gl-star-rating:not([data-star-rating]) .gl-star-rating--stars{display:none}[data-star-rating] .gl-star-rating--stars{align-items:center;cursor:pointer;display:flex;position:relative}[data-star-rating]>select:focus+.gl-star-rating--stars span:first-child:before{box-shadow:0 0 0 3px -moz-mac-focusring;box-shadow:0 0 0 3px -webkit-focus-ring-color;box-shadow:0 0 0 3px Highlight;content:"";display:block;height:100%;outline:1px solid transparent;pointer-events:none;position:absolute;width:100%}[data-star-rating] select[disabled]+.gl-star-rating--stars{cursor:default}[data-star-rating] .gl-star-rating--stars>span{display:flex;height:24px;height:var(--gl-star-size);margin:0;width:24px;width:var(--gl-star-size)}[data-star-rating] .gl-star-rating--stars[aria-label]:after,[data-star-rating] .gl-star-rating--stars[aria-label]:before{-webkit-backface-visibility:hidden;backface-visibility:hidden;bottom:auto;box-sizing:border-box;left:100%;pointer-events:none;position:absolute;top:50%;opacity:.9;transform-origin:top;transform:translate3d(0,-50%,0);white-space:nowrap;z-index:10}[data-star-rating] .gl-star-rating--stars[aria-label]:before{background-size:100% auto!important;background-position:50%!important;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 31'%3E%3Cpath fill='%23111' d='M12.002 31C12.002 25 0 19.838 0 15.5 0 11.24 12 6 12 0l.002 31z'/%3E%3C/svg%3E") no-repeat;content:"";height:18px;margin-bottom:0;margin-left:6px;margin-left:var(--gl-tooltip-size);width:6px;width:var(--gl-tooltip-size)}[data-star-rating] .gl-star-rating--stars[aria-label]:after{background:#111;border-radius:4px;border-radius:var(--gl-tooltip-border-radius);color:#fff;content:attr(aria-label);font-size:.875rem;font-size:var(--gl-tooltip-font-size);font-weight:400;margin-left:12px;margin-left:var(--gl-tooltip-margin);padding:.5em 1em;padding:var(--gl-tooltip-padding);text-transform:none}[data-star-rating].gl-star-rating--rtl .gl-star-rating--stars[aria-label]:after,[data-star-rating].gl-star-rating--rtl .gl-star-rating--stars[aria-label]:before{left:auto;right:100%}[data-star-rating].gl-star-rating--rtl .gl-star-rating--stars[aria-label]:before{transform:scaleX(-1) translate3d(0,-50%,0);margin-left:0;margin-right:6px;margin-right:var(--gl-tooltip-size)}[data-star-rating].gl-star-rating--rtl .gl-star-rating--stars[aria-label]:after{margin-left:0;margin-right:12px;margin-right:var(--gl-tooltip-margin)}[data-star-rating] svg{height:100%;width:100%}[data-star-rating] .gl-star-half{fill:none;stroke:none}[data-star-rating] .gl-star-full{fill:#dcdce6;fill:var(--gl-star-color-inactive);stroke:#dcdce6;stroke:var(--gl-star-color-inactive);transition:fill .15s ease-in-out,stroke .15s ease-in-out}[data-star-rating] .gl-active .gl-star-full{fill:#fdd835;fill:var(--gl-star-color);stroke:#fdd835;stroke:var(--gl-star-color)}.gl-star-rating--stars[class*=" s"]>span{background-image:url(../img/star-empty.svg)!important;background-image:var(--gl-star-empty)!important;background-position:50%;background-repeat:no-repeat;background-size:90%}.gl-star-rating--stars[class*=" s"]>span.gl-active,.gl-star-rating--stars[class*=" s"]>span.gl-active.gl-selected{background-image:url(../img/star-full.svg)!important;background-image:var(--gl-star-full)!important}

package/dist/libs/star-rating.js/dist/star-rating.min.js

@@ -0,0 +1,8 @@
+/**!
+ * Star Rating
+ * @version: 4.3.0
+ * @author: Paul Ryley (http://geminilabs.io)
+ * @url: https://github.com/pryley/star-rating.js
+ * @license: MIT
+ */
+var StarRating=function(){"use strict";function e(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function t(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}function i(e,i,s){return i&&t(e.prototype,i),s&&t(e,s),e}var s={classNames:{active:"gl-active",base:"gl-star-rating",selected:"gl-selected"},clearable:!0,maxStars:10,prebuilt:!1,stars:null,tooltip:"Select a Rating"},n=function(e,t,i){e.classList[t?"add":"remove"](i)},a=function(e){var t=document.createElement("span");for(var i in e=e||{})t.setAttribute(i,e[i]);return t},l=function(e,t,i){var s=a(i);return e.parentNode.insertBefore(s,t?e.nextSibling:e),s},r=function e(){for(var t=arguments.length,i=new Array(t),s=0;s<t;s++)i[s]=arguments[s];var n={};return i.forEach((function(t){Object.keys(t||{}).forEach((function(s){if(void 0!==i[0][s]){var a=t[s];"Object"!==o(a)||"Object"!==o(n[s])?n[s]=a:n[s]=e(n[s],a)}}))})),n},o=function(e){return{}.toString.call(e).slice(8,-1)},u=function(){function t(i,s){var n,a,l;e(this,t),this.direction=window.getComputedStyle(i,null).getPropertyValue("direction"),this.el=i,this.events={change:this.onChange.bind(this),keydown:this.onKeyDown.bind(this),mousedown:this.onPointerDown.bind(this),mouseleave:this.onPointerLeave.bind(this),mousemove:this.onPointerMove.bind(this),reset:this.onReset.bind(this),touchend:this.onPointerDown.bind(this),touchmove:this.onPointerMove.bind(this)},this.indexActive=null,this.indexSelected=null,this.props=s,this.tick=null,this.ticking=!1,this.values=function(e){var t=[];return[].forEach.call(e.options,(function(e){var i=parseInt(e.value,10)||0;i>0&&t.push({index:e.index,text:e.text,value:i})})),t.sort((function(e,t){return e.value-t.value}))}(i),this.widgetEl=null,this.el.widget&&this.el.widget.destroy(),n=this.values.length,a=1,l=this.props.maxStars,/^\d+$/.test(n)&&a<=n&&n<=l?this.build():this.destroy()}return i(t,[{key:"build",value:function(){this.destroy(),this.buildWidget(),this.selectValue(this.indexSelected=this.selected(),!1),this.handleEvents("add"),this.el.widget=this}},{key:"buildWidget",value:function(){var e,t,i=this;this.props.prebuilt?(e=this.el.parentNode,t=e.querySelector("."+this.props.classNames.base+"--stars")):((e=l(this.el,!1,{class:this.props.classNames.base})).appendChild(this.el),t=l(this.el,!0,{class:this.props.classNames.base+"--stars"}),this.values.forEach((function(e,s){var n=a({"data-index":s,"data-value":e.value});"function"==typeof i.props.stars&&i.props.stars.call(i,n,e,s),[].forEach.call(n.children,(function(e){return e.style.pointerEvents="none"})),t.innerHTML+=n.outerHTML}))),e.dataset.starRating="",e.classList.add(this.props.classNames.base+"--"+this.direction),this.props.tooltip&&t.setAttribute("role","tooltip"),this.widgetEl=t}},{key:"changeIndexTo",value:function(e,t){var i=this;if(this.indexActive!==e||t){if([].forEach.call(this.widgetEl.children,(function(t,s){n(t,s<=e,i.props.classNames.active),n(t,s===i.indexSelected,i.props.classNames.selected)})),this.widgetEl.setAttribute("data-rating",e+1),"function"==typeof this.props.stars||this.props.prebuilt||(this.widgetEl.classList.remove("s"+10*(this.indexActive+1)),this.widgetEl.classList.add("s"+10*(e+1))),this.props.tooltip){var s,a=e<0?this.props.tooltip:null===(s=this.values[e])||void 0===s?void 0:s.text;this.widgetEl.setAttribute("aria-label",a)}this.indexActive=e}this.ticking=!1}},{key:"destroy",value:function(){this.indexActive=null,this.indexSelected=this.selected();var e=this.el.parentNode;e.classList.contains(this.props.classNames.base)&&(this.props.prebuilt?(this.widgetEl=e.querySelector("."+this.props.classNames.base+"--stars"),e.classList.remove(this.props.classNames.base+"--"+this.direction),delete e.dataset.starRating):e.parentNode.replaceChild(this.el,e),this.handleEvents("remove")),delete this.el.widget}},{key:"eventListener",value:function(e,t,i,s){var n=this;i.forEach((function(i){return e[t+"EventListener"](i,n.events[i],s||!1)}))}},{key:"handleEvents",value:function(e){var t=this.el.closest("form");t&&"FORM"===t.tagName&&this.eventListener(t,e,["reset"]),this.eventListener(this.el,e,["change"]),"add"===e&&this.el.disabled||(this.eventListener(this.el,e,["keydown"]),this.eventListener(this.widgetEl,e,["mousedown","mouseleave","mousemove","touchend","touchmove"],!1))}},{key:"indexFromEvent",value:function(e){var t,i,s=(null===(t=e.touches)||void 0===t?void 0:t[0])||(null===(i=e.changedTouches)||void 0===i?void 0:i[0])||e,n=document.elementFromPoint(s.clientX,s.clientY);return n.parentNode===this.widgetEl?[].slice.call(n.parentNode.children).indexOf(n):this.indexActive}},{key:"onChange",value:function(){this.changeIndexTo(this.selected(),!0)}},{key:"onKeyDown",value:function(e){var t=e.key.slice(5);if(~["Left","Right"].indexOf(t)){e.preventDefault();var i="Left"===t?-1:1;"rtl"===this.direction&&(i*=-1);var s=this.values.length-1,n=Math.min(Math.max(this.selected()+i,-1),s);this.selectValue(n,!0)}}},{key:"onPointerDown",value:function(e){e.preventDefault();var t=this.indexFromEvent(e);this.props.clearable&&t===this.indexSelected&&(t=-1),this.selectValue(t,!0)}},{key:"onPointerLeave",value:function(e){var t=this;e.preventDefault(),cancelAnimationFrame(this.tick),requestAnimationFrame((function(){return t.changeIndexTo(t.indexSelected)}))}},{key:"onPointerMove",value:function(e){var t=this;e.preventDefault(),this.ticking||(this.tick=requestAnimationFrame((function(){return t.changeIndexTo(t.indexFromEvent(e))})),this.ticking=!0)}},{key:"onReset",value:function(){var e,t=this.valueIndex(null===(e=this.el.querySelector("[selected]"))||void 0===e?void 0:e.value);this.selectValue(t||-1,!1)}},{key:"selected",value:function(){return this.valueIndex(this.el.value)}},{key:"selectValue",value:function(e,t){var i;this.el.value=(null===(i=this.values[e])||void 0===i?void 0:i.value)||"",this.indexSelected=this.selected(),!1===t?this.changeIndexTo(this.selected(),!0):this.el.dispatchEvent(new Event("change"))}},{key:"valueIndex",value:function(e){return this.values.findIndex((function(t){return t.value===+e}))}}]),t}();return function(){function t(i,s){e(this,t),this.destroy=this.destroy.bind(this),this.props=s,this.rebuild=this.rebuild.bind(this),this.selector=i,this.widgets=[],this.build()}return i(t,[{key:"build",value:function(){var e=this;this.queryElements(this.selector).forEach((function(t){var i=r(s,e.props,JSON.parse(t.getAttribute("data-options")));"SELECT"!==t.tagName||t.widget||(!i.prebuilt&&t.parentNode.classList.contains(i.classNames.base)&&e.unwrap(t),e.widgets.push(new u(t,i)))}))}},{key:"destroy",value:function(){this.widgets.forEach((function(e){return e.destroy()})),this.widgets=[]}},{key:"queryElements",value:function(e){return"HTMLSelectElement"===o(e)?[e]:"NodeList"===o(e)?[].slice.call(e):"String"===o(e)?[].slice.call(document.querySelectorAll(e)):[]}},{key:"rebuild",value:function(){this.destroy(),this.build()}},{key:"unwrap",value:function(e){var t=e.parentNode,i=t.parentNode;i.insertBefore(e,t),i.removeChild(t)}}]),t}()}();

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta18",
+  "version": "1.0.0-beta19",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
+    "dev": "pnpm run start-plugins",
     "start": "gulp start",
     "start-plugins": "gulp start --with-plugins",
     "build": "gulp build",
@@ -184,7 +185,8 @@
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "yaml": "^2.2.2",
-    "yargs": "^17.7.2"
+    "yargs": "^17.7.2",
+    "star-rating.js": "^4.3.0"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.7",
@@ -205,7 +207,8 @@
     "nouislider": "^15.7.0",
     "plyr": "^3.7.8",
     "tinymce": "^6.4.2",
-    "tom-select": "^2.2.2"
+    "tom-select": "^2.2.2",
+    "star-rating.js": "^4.3.0"
   },
   "peerDependenciesMeta": {
     "apexcharts": {
@@ -252,6 +255,9 @@
     },
     "tom-select": {
       "optional": true
+    },
+    "star-rating.js": {
+      "optional": true
     }
   },
   "release-it": {

package/src/scss/_variables.scss

@@ -823,7 +823,7 @@ $input-border-color-translucent: var(
 ) !default;
 $input-placeholder-color: $text-muted-light !default;
 
-$input-group-addon-bg: $light !default;
+$input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $input-group-addon-color: var(--#{$prefix}muted) !default;
 
 $input-border-radius: var(--#{$prefix}border-radius) !default;

package/src/scss/layout/_navbar.scss

@@ -1,65 +1,3 @@
-//@mixin navbar-color($bg-color: transparent, $color: $navbar-light-color, $brand-color: $navbar-light-brand-color, $link-active-color: $navbar-light-active-color, $link-disabled-color: $navbar-light-disabled-color, $link-active-bg: $navbar-light-active-bg) {
-//  --#{$prefix}navbar-active-bg: #{$link-active-bg};
-//  --#{$prefix}navbar-bg: #{$bg-color};
-//  color: $color;
-//
-//  .navbar-brand {
-//    color: $brand-color;
-//
-//    &:hover,
-//    &:focus {
-//      color: $brand-color;
-//      opacity: .8;
-//    }
-//  }
-//
-//  .navbar-nav {
-//    .nav-link {
-//      color: $color;
-//
-//      &:hover,
-//      &:focus {
-//        color: $link-active-color;
-//      }
-//
-//      &.disabled {
-//        color: $link-disabled-color;
-//      }
-//    }
-//
-//    .show > .nav-link,
-//    .active > .nav-link,
-//    .nav-link.show,
-//    .nav-link.active {
-//      color: $link-active-color;
-//    }
-//  }
-//
-//  .navbar-toggler {
-//    color: $brand-color;
-//    border-color: transparent;
-//  }
-//
-//  .navbar-text {
-//    color: $color;
-//
-//    a,
-//    a:hover,
-//    a:focus {
-//      color: $color;
-//    }
-//  }
-//}
-
-@mixin navbar-dark {
-  --#{$prefix}navbar-bg: #{$dark};
-  --#{$prefix}scrollbar-color: var(--#{$prefix}white-rgb);
-  --#{$prefix}navbar-color: var(--#{$prefix}gray-400);
-
-  @each $color, $value in $theme-colors {
-    --#{$prefix}#{$color}-lt-rgb: #{to-rgb(theme-color-lighter($value, $dark))};
-  }
-}
 
 @mixin navbar-vertical-nav {
   .navbar-collapse {
@@ -139,7 +77,7 @@ Navbar
   --#{$prefix}navbar-border-width: #{$navbar-border-width};
   --#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
   --#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
-  --#{$prefix}navbar-color: inherit;
+  --#{$prefix}navbar-color: var(--#{$prefix}body-color);
   --#{$prefix}navbar-border-color: #{$navbar-border-color};
   align-items: stretch;
   min-height: $navbar-height;
@@ -317,13 +255,6 @@ Navbar toggler
   }
 }
 
-// /**
-// Navbar dark
-//  */
-// .navbar-dark {
-//   @include navbar-dark;
-// }
-
 /**
 Navbar transparent
  */

package/src/scss/tabler-vendors.scss

@@ -9,3 +9,4 @@
 @import "vendor/fslightbox";
 @import "vendor/plyr";
 @import "vendor/tinymce";
+@import "vendor/stars-rating";

package/src/scss/ui/_grid.scss

@@ -74,7 +74,7 @@
 
   .divide-y#{$name-prefixed} {
     > :not(template) ~ :not(template) {
-      border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent !important;
+      border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
     }
 
     > :not(template):not(:first-child) {
@@ -88,7 +88,7 @@
 
   .divide-x#{$name-prefixed} {
     > :not(template) ~ :not(template) {
-      border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent !important;
+      border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
     }
 
     > :not(template):not(:first-child) {