@jetbrains/ring-ui 4.2.7 → 4.2.10

package/dist/button/button.js

@@ -0,0 +1,125 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'focus-visible';
+import React, { PureComponent, createRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import chevronDown from '@jetbrains/icons/chevron-10px';
+import Icon from '../icon/icon.js';
+import Theme, { withTheme } from '../global/theme.js';
+import ClickableLink from '../link/clickableLink.js';
+import { g as getButtonClasses, m as modules_e81895c9 } from '../_helpers/button__classes.js';
+import { Size } from '../icon/icon__constants.js';
+export { Size as IconSize } from '../icon/icon__constants.js';
+import 'util-deprecate';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
+import '../global/memoize.js';
+
+/**
+ * @name Button
+ */
+
+/**
+ * A component for displaying variously styled buttons.
+ */
+
+class Button extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "buttonRef", /*#__PURE__*/createRef());
+  }
+
+  render() {
+    const {
+      // Modifiers
+      theme,
+      active,
+      danger,
+      delayed,
+      loader,
+      primary,
+      short,
+      text,
+      inline,
+      dropdown,
+      // Props
+      icon,
+      iconSize,
+      iconClassName,
+      iconSuppressSizeWarning,
+      className,
+      children,
+      ...props
+    } = this.props;
+    const classes = getButtonClasses({
+      className,
+      active,
+      danger,
+      delayed,
+      icon,
+      theme,
+      loader,
+      primary,
+      short,
+      text,
+      inline
+    });
+    const content = /*#__PURE__*/React.createElement("span", {
+      className: modules_e81895c9.content
+    }, icon && /*#__PURE__*/React.createElement("span", {
+      className: classNames(modules_e81895c9.icon, iconClassName)
+    }, /*#__PURE__*/React.createElement(Icon, {
+      glyph: icon,
+      size: iconSize,
+      loading: loader,
+      suppressSizeWarning: iconSuppressSizeWarning
+    })), children && /*#__PURE__*/React.createElement("span", null, children), dropdown && /*#__PURE__*/React.createElement(Icon, {
+      glyph: chevronDown,
+      className: modules_e81895c9.dropdownIcon
+    }));
+    const isLink = !!props.href;
+    const Tag = isLink ? ClickableLink : 'button';
+    return /*#__PURE__*/React.createElement(Tag, _extends({
+      ref: this.buttonRef,
+      tabIndex: loader ? -1 : 0,
+      type: isLink ? null : 'button'
+    }, props, {
+      className: classes
+    }), loader && !text && !icon && /*#__PURE__*/React.createElement("div", {
+      className: modules_e81895c9.loaderBackground
+    }), content);
+  }
+
+}
+
+_defineProperty(Button, "propTypes", {
+  theme: PropTypes.oneOf(['light', 'dark']),
+  active: PropTypes.bool,
+  danger: PropTypes.bool,
+  delayed: PropTypes.bool,
+  loader: PropTypes.bool,
+  primary: PropTypes.bool,
+  short: PropTypes.bool,
+  text: PropTypes.bool,
+  inline: PropTypes.bool,
+  dropdown: PropTypes.bool,
+  href: PropTypes.string,
+  target: PropTypes.string,
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  iconSize: PropTypes.number,
+  iconClassName: PropTypes.string,
+  iconSuppressSizeWarning: PropTypes.bool,
+  className: PropTypes.string,
+  children: PropTypes.node,
+  onClick: PropTypes.func
+});
+
+_defineProperty(Button, "IconSize", Size);
+
+_defineProperty(Button, "Theme", Theme);
+var Button$1 = withTheme()(Button);
+
+export { Button$1 as default };

package/dist/button/button__classes.js

@@ -0,0 +1,5 @@
+import 'classnames';
+import '../global/theme.js';
+export { g as getButtonClasses } from '../_helpers/button__classes.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'react';

package/dist/button-group/button-group.js

@@ -0,0 +1,30 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+export { default as Caption } from './caption.js';
+import { m as modules_1068e447 } from '../_helpers/button-group.js';
+
+/**
+ * @name Button Group
+ */
+
+class ButtonGroup extends PureComponent {
+  render() {
+    const {
+      className
+    } = this.props;
+    const classes = classNames(modules_1068e447.buttonGroup, className);
+    return /*#__PURE__*/React.createElement("div", _extends({}, this.props, {
+      className: classes
+    }));
+  }
+
+}
+
+_defineProperty(ButtonGroup, "propTypes", {
+  children: PropTypes.node,
+  className: PropTypes.string
+});
+
+export { ButtonGroup as default };

package/dist/button-group/caption.js

@@ -0,0 +1,24 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { m as modules_1068e447 } from '../_helpers/button-group.js';
+
+class Caption extends PureComponent {
+  render() {
+    const {
+      className
+    } = this.props;
+    const classes = classNames(modules_1068e447.caption, className);
+    return /*#__PURE__*/React.createElement("span", _extends({}, this.props, {
+      className: classes
+    }));
+  }
+
+}
+
+_defineProperty(Caption, "propTypes", {
+  className: PropTypes.node
+});
+
+export { Caption as default };

package/dist/button-group-ng/button-group-ng.js

@@ -0,0 +1,39 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import angular from 'angular';
+import classNames from 'classnames';
+import { m as modules_1068e447 } from '../_helpers/button-group.js';
+
+var modules_c53cb36f = {"buttonGroup":"buttonGroup_rui_1fbf"};
+
+/**
+ * @name Button Group Ng
+ */
+
+const angularModule = angular.module('Ring.button-group', []);
+const buttonGroupClasses = classNames(modules_1068e447.buttonGroup, modules_c53cb36f.buttonGroup);
+
+function rgButtonGroup() {
+  return {
+    restrict: 'A',
+    link: function link($scope, iElement) {
+      const element = iElement[0];
+      element.classList.add(...buttonGroupClasses.split(' '));
+    }
+  };
+}
+
+function rgButtonGroupCaption() {
+  return {
+    restrict: 'A',
+    link: function link($scope, iElement) {
+      const element = iElement[0];
+      element.classList.add(...modules_1068e447.caption.split(' '));
+    }
+  };
+}
+
+angularModule.directive('rgButtonGroup', rgButtonGroup);
+angularModule.directive('rgButtonGroupCaption', rgButtonGroupCaption);
+var buttonGroupNg = angularModule.name;
+
+export { buttonGroupNg as default };

package/dist/button-ng/button-ng.js

@@ -0,0 +1,217 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import angular from 'angular';
+import classNames from 'classnames';
+import RingAngularComponent from '../global/ring-angular-component.js';
+import { addClasses, removeClasses, applyMethodToClasses } from '../global/dom.js';
+import IconNG from '../icon-ng/icon-ng.js';
+import Theme, { applyTheme } from '../global/theme.js';
+import { m as modules_e81895c9, g as getButtonClasses } from '../_helpers/button__classes.js';
+import 'core-js/modules/es.string.replace.js';
+import '../icon/icon__constants.js';
+import '../template-ng/template-ng.js';
+import '../_helpers/icon.js';
+import 'react';
+
+var modules_5f65bc62 = {"ringIconDefaultColor":"ringIconDefaultColor_rui_c440","iconMarginFix":"iconMarginFix_rui_c440","transcludeSpacer":"transcludeSpacer_rui_c440","buttonWithoutIcon":"buttonWithoutIcon_rui_c440","iconNg":"iconNg_rui_c440","narrowRight":"narrowRight_rui_c440"};
+
+const {
+  ringIconDefaultColor,
+  iconMarginFix,
+  transcludeSpacer
+} = modules_5f65bc62;
+/**
+ * @name Button Ng
+ */
+
+const angularModule = angular.module('Ring.button', [IconNG]);
+const ORDER_NOT_DEFINED = '-1';
+const buttonClassesMap = Object.values({ ...modules_e81895c9,
+  ...modules_5f65bc62
+}).reduce((acc, classes) => {
+  classes.split(' ').forEach(value => acc[value] = true);
+  return acc;
+}, {});
+const LOADER_BACKGROUND_SELECTOR = '.js-button-loader';
+
+class ButtonController extends RingAngularComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "updateClasses", () => {
+      const {
+        $attrs
+      } = this.$inject;
+      const theme = this.element.classList.contains(modules_e81895c9.light) ? Theme.LIGHT : Theme.DARK;
+      const foreignClasses = [...this.element.classList].filter(name => !buttonClassesMap[name]);
+      this.element.className = classNames(foreignClasses, getButtonClasses({
+        className: modules_e81895c9.button,
+        active: this.getAttrValue($attrs.active),
+        disabled: this.getAttrValue($attrs.disabled),
+        loader: this.getAttrValue($attrs.loader),
+        primary: $attrs.mode === 'primary' || $attrs.mode === 'blue',
+        short: this.getAttrValue($attrs.short),
+        text: this.getAttrValue($attrs.text),
+        inline: this.getAttrValue($attrs.inline),
+        danger: this.getAttrValue($attrs.danger),
+        delayed: this.getAttrValue($attrs.delayed),
+        icon: $attrs.icon,
+        theme
+      }), {
+        // Some overrides for angular buttons
+        [modules_5f65bc62.buttonWithoutIcon]: !$attrs.icon,
+        [modules_5f65bc62.narrowRight]: this.getAttrValue($attrs.narrowRight)
+      });
+
+      if (!$attrs.hasOwnProperty('mode')) {
+        addClasses(this.findTranscludeNode().classList, ringIconDefaultColor);
+      } else {
+        removeClasses(this.findTranscludeNode().classList, ringIconDefaultColor);
+      }
+    });
+
+    _defineProperty(this, "findTranscludeNode", () => this.element.querySelector('ng-transclude'));
+
+    _defineProperty(this, "updateIcon", () => {
+      const {
+        $attrs,
+        $compile,
+        $scope
+      } = this.$inject;
+      const icon = this.element.querySelector('rg-icon');
+      const transcludeNode = this.findTranscludeNode();
+      const glyph = $attrs.icon;
+      const size = $attrs.iconSize;
+      const isLoading = this.getAttrValue($attrs.loader);
+
+      if (glyph && isLoading) {
+        icon.setAttribute('loading', true);
+      } else {
+        icon.setAttribute('loading', false);
+      }
+
+      if (glyph) {
+        addClasses(transcludeNode.classList, transcludeSpacer);
+        icon.setAttribute('glyph', glyph);
+
+        if (size) {
+          icon.setAttribute('size', size);
+        }
+      } else {
+        removeClasses(transcludeNode.classList, transcludeSpacer);
+        icon.removeAttribute('glyph');
+        icon.removeAttribute('size');
+      }
+
+      $compile(icon)($scope);
+    });
+
+    const {
+      $element,
+      $attrs: _$attrs,
+      $scope: _$scope
+    } = this.$inject;
+    _$scope.styles = modules_e81895c9;
+    this.element = $element[0];
+    const modifiers = ['delayed', 'loader', 'danger', 'short', 'active', 'text', 'inline', 'narrowRight'];
+    modifiers.forEach(mod => {
+      _$scope.$watch(() => _$scope.$eval(_$attrs[mod]), val => {
+        this.updateClasses();
+        const attrName = "data-test-".concat(mod);
+
+        if (val) {
+          this.element.setAttribute(attrName, true);
+        } else {
+          this.element.removeAttribute(attrName);
+        }
+
+        if (mod === 'loader') {
+          const isText = this.getAttrValue(_$attrs.text);
+          const withIcon = !!_$attrs.icon;
+          applyMethodToClasses(val && !isText && !withIcon ? 'add' : 'remove')(this.element.querySelector(LOADER_BACKGROUND_SELECTOR).classList, modules_e81895c9.loaderBackground);
+        }
+      });
+    });
+    const tabIndex = _$attrs.tabindex || ORDER_NOT_DEFINED;
+
+    if (tabIndex !== ORDER_NOT_DEFINED) {
+      this.element.setAttribute('tabindex', tabIndex);
+    }
+
+    _$scope.$watch(() => _$scope.$eval(_$attrs.loader), val => {
+      if (val) {
+        this.element.setAttribute('tabindex', ORDER_NOT_DEFINED);
+      } else if (tabIndex !== ORDER_NOT_DEFINED) {
+        this.element.setAttribute('tabindex', tabIndex);
+      } else {
+        this.element.removeAttribute('tabindex');
+      }
+    });
+  }
+
+  $postLink() {
+    this.updateClasses();
+    const {
+      $attrs
+    } = this.$inject;
+    $attrs.$observe('mode', this.updateClasses);
+    $attrs.$observe('icon', () => {
+      this.updateClasses();
+      this.updateIcon();
+    });
+    $attrs.$observe('iconSize', () => {
+      this.updateClasses();
+      this.updateIcon();
+    });
+    $attrs.$observe('theme', this.updateClasses);
+  }
+
+  getAttrValue(attribute) {
+    const {
+      $scope
+    } = this.$inject;
+    return $scope.$eval(attribute);
+  }
+
+}
+
+_defineProperty(ButtonController, "$inject", ['$element', '$attrs', '$scope', '$compile', '$log']);
+
+function changeTheme(element, data) {
+  return applyTheme({
+    element,
+    prevTheme: data.prevTheme && modules_e81895c9[data.prevTheme] || modules_e81895c9.light,
+    currentTheme: modules_e81895c9[data.currentTheme]
+  });
+}
+
+function createButtonDirective(tagName) {
+  return () => ({
+    restrict: 'E',
+    transclude: true,
+    replace: true,
+    require: {
+      rgThemeCtrl: '?^^rgTheme'
+    },
+    template: "\n  <".concat(tagName, " class=\"").concat(modules_e81895c9.button, " ").concat(modules_e81895c9.light, "\">\n  <span class=\"").concat(modules_e81895c9.content, "\"\n  ><rg-icon class=\"").concat(classNames(modules_e81895c9.icon, modules_5f65bc62.iconNg, iconMarginFix), "\"></rg-icon\n  ><ng-transclude></ng-transclude\n  ></span\n  ><div class=\"js-button-loader\"></div>\n  </").concat(tagName, ">\n    "),
+    controller: ButtonController,
+    link: (scope, element, attrs, _ref) => {
+      let {
+        rgThemeCtrl
+      } = _ref;
+
+      if (rgThemeCtrl) {
+        changeTheme(element[0], {
+          currentTheme: rgThemeCtrl.theme
+        });
+        rgThemeCtrl.on('change', (event, data) => changeTheme(element[0], data));
+      }
+    }
+  });
+}
+
+angularModule.directive('rgButton', createButtonDirective('button'));
+angularModule.directive('rgButtonLink', createButtonDirective('a'));
+var ButtonNG = angularModule.name;
+
+export { LOADER_BACKGROUND_SELECTOR, ButtonNG as default };

package/dist/button-set/button-set.js

@@ -0,0 +1,26 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { m as modules_fd849143 } from '../_helpers/button-set.js';
+
+/**
+ * @name Button Set
+ */
+
+class ButtonSet extends PureComponent {
+  render() {
+    const classes = classNames(modules_fd849143.buttonSet, this.props.className);
+    return /*#__PURE__*/React.createElement("div", _extends({}, this.props, {
+      className: classes
+    }), this.props.children);
+  }
+
+}
+
+_defineProperty(ButtonSet, "propTypes", {
+  children: PropTypes.node,
+  className: PropTypes.string
+});
+
+export { ButtonSet as default };

package/dist/button-set-ng/button-set-ng.js

@@ -0,0 +1,19 @@
+import angular from 'angular';
+import { m as modules_fd849143 } from '../_helpers/button-set.js';
+
+const angularModule = angular.module('Ring.button-set', []);
+
+function rgButtonSet() {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: false,
+    transclude: true,
+    template: "<div class=\"".concat(modules_fd849143.buttonSet, "\" ng-transclude></div>")
+  };
+}
+
+angularModule.directive('rgButtonSet', rgButtonSet);
+var ButtonSet = angularModule.name;
+
+export { ButtonSet as default };

package/dist/button-toolbar/button-toolbar.js

@@ -0,0 +1,29 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { m as modules_34154ec0 } from '../_helpers/button-toolbar.js';
+
+/**
+ * @name Button Toolbar
+*/
+
+class ButtonToolbar extends PureComponent {
+  render() {
+    const {
+      className
+    } = this.props;
+    const classes = classNames(modules_34154ec0.buttonToolbar, className);
+    return /*#__PURE__*/React.createElement("div", _extends({}, this.props, {
+      className: classes
+    }));
+  }
+
+}
+
+_defineProperty(ButtonToolbar, "propTypes", {
+  children: PropTypes.node,
+  className: PropTypes.string
+});
+
+export { ButtonToolbar as default };

package/dist/button-toolbar-ng/button-toolbar-ng.js

@@ -0,0 +1,24 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import angular from 'angular';
+import { m as modules_34154ec0 } from '../_helpers/button-toolbar.js';
+
+/**
+ * @name Button Toolbar Ng
+ */
+
+const angularModule = angular.module('Ring.button-toolbar', []);
+
+function rgButtonToolbar() {
+  return {
+    restrict: 'A',
+    link: function link($scope, iElement) {
+      const element = iElement[0];
+      element.classList.add(...modules_34154ec0.buttonToolbar.split(' '));
+    }
+  };
+}
+
+angularModule.directive('rgButtonToolbar', rgButtonToolbar);
+var buttonToolbarNg = angularModule.name;
+
+export { buttonToolbarNg as default };