@jetbrains/ring-ui 4.1.0-beta.9 → 4.1.4

package/dist/button/button.js

@@ -1,6 +1,6 @@
-import { a as _objectWithoutProperties, b as _extends, _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'focus-visible';
-import React, { PureComponent } from 'react';
+import React, { PureComponent, createRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import chevronDown from '@jetbrains/icons/chevron-10px';
@@ -11,7 +11,8 @@ import { g as getButtonClasses, m as modules_e81895c9 } from '../_helpers/button
 import { Size } from '../icon/icon__constants.js';
 export { Size as IconSize } from '../icon/icon__constants.js';
 import 'util-deprecate';
-import '../_helpers/icon__svg.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
 import '../global/memoize.js';
 
 /**
@@ -23,9 +24,14 @@ import '../global/memoize.js';
  */
 
 class Button extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "buttonRef", /*#__PURE__*/createRef());
+  }
+
   render() {
-    const _this$props = this.props,
-          {
+    const {
       // Modifiers
       theme,
       active,
@@ -43,10 +49,9 @@ class Button extends PureComponent {
       iconClassName,
       iconSuppressSizeWarning,
       className,
-      children
-    } = _this$props,
-          props = _objectWithoutProperties(_this$props, ["theme", "active", "danger", "delayed", "loader", "primary", "short", "text", "inline", "dropdown", "icon", "iconSize", "iconClassName", "iconSuppressSizeWarning", "className", "children"]);
-
+      children,
+      ...props
+    } = this.props;
     const classes = getButtonClasses({
       className,
       active,
@@ -76,6 +81,7 @@ class Button extends PureComponent {
     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, {
@@ -114,4 +120,4 @@ _defineProperty(Button, "IconSize", Size);
 _defineProperty(Button, "Theme", Theme);
 var Button$1 = withTheme()(Button);
 
-export default Button$1;
+export { Button$1 as default };

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

@@ -1,9 +1,9 @@
-import { b as _extends, _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+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/caption.js';
-export { C as Caption } from '../_helpers/caption.js';
+export { default as Caption } from './caption.js';
+import { m as modules_1068e447 } from '../_helpers/button-group.js';
 
 /**
  * @name Button Group
@@ -27,4 +27,4 @@ _defineProperty(ButtonGroup, "propTypes", {
   className: PropTypes.string
 });
 
-export default ButtonGroup;
+export { ButtonGroup as default };

package/dist/button-group/caption.js

@@ -1,5 +1,24 @@
-import '../_helpers/_rollupPluginBabelHelpers.js';
-import 'react';
-import 'prop-types';
-import 'classnames';
-export { C as default } from '../_helpers/caption.js';
+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,38 @@
+import angular from 'angular';
+import classNames from 'classnames';
+import { m as modules_1068e447 } from '../_helpers/button-group.js';
+
+var modules_c53cb36f = {"buttonGroup":"buttonGroup_rui_6db3"};
+
+/**
+ * @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,223 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.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 '../icon/icon__constants.js';
+import '../template-ng/template-ng.js';
+import '../_helpers/icon.js';
+import 'react';
+
+var modules_5f65bc62 = {"ringIconDefaultColor":"ringIconDefaultColor_rui_9b8c","iconMarginFix":"iconMarginFix_rui_9b8c","transcludeSpacer":"transcludeSpacer_rui_9b8c","buttonWithoutIcon":"buttonWithoutIcon_rui_9b8c","iconNg":"iconNg_rui_9b8c","narrowRight":"narrowRight_rui_9b8c"};
+
+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-${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: `
+  <${tagName} class="${modules_e81895c9.button} ${modules_e81895c9.light}">
+  <span class="${modules_e81895c9.content}"
+  ><rg-icon class="${classNames(modules_e81895c9.icon, modules_5f65bc62.iconNg, iconMarginFix)}"></rg-icon
+  ><ng-transclude></ng-transclude
+  ></span
+  ><div class="js-button-loader"></div>
+  </${tagName}>
+    `,
+    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

@@ -1,9 +1,8 @@
-import { b as _extends, _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-
-var modules_fd849143 = {"unit":"8px","buttonSet":"buttonSet_buttonSet__40c7f807","button":"buttonSet_button__40c7f807"};
+import { m as modules_fd849143 } from '../_helpers/button-set.js';
 
 /**
  * @name Button Set
@@ -24,4 +23,4 @@ _defineProperty(ButtonSet, "propTypes", {
   className: PropTypes.string
 });
 
-export default ButtonSet;
+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="${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

@@ -1,9 +1,8 @@
-import { b as _extends, _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-var modules_34154ec0 = {"unit":"8px","buttonToolbar":"buttonToolbar_buttonToolbar__ec743009","button":"buttonToolbar_button__ec743009","buttonGroup":"buttonToolbar_buttonGroup__ec743009"};
+import { m as modules_34154ec0 } from '../_helpers/button-toolbar.js';
 
 /**
  * @name Button Toolbar
@@ -27,4 +26,4 @@ _defineProperty(ButtonToolbar, "propTypes", {
   className: PropTypes.string
 });
 
-export default ButtonToolbar;
+export { ButtonToolbar as default };

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

@@ -0,0 +1,23 @@
+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 };

package/dist/caret/caret.js

@@ -261,4 +261,4 @@ class Caret {
 
 _defineProperty(Caret, "returnRE", /\r/g);
 
-export default Caret;
+export { Caret as default };

package/dist/checkbox/checkbox.js

@@ -1,17 +1,17 @@
-import { _ as _defineProperty, a as _objectWithoutProperties, b as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+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 checkmarkIcon from '@jetbrains/icons/checkmark';
 import minusIcon from '@jetbrains/icons/remove-10px';
 import Icon from '../icon/icon.js';
+import { m as modules_3199090e } from '../_helpers/checkbox.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
 import '../global/memoize.js';
 
-var modules_3199090e = {"unit":"8px","checkboxSize":"14px","checkbox":"checkbox_checkbox__50df3ed7","cell":"checkbox_cell__50df3ed7","icon":"checkbox_icon__50df3ed7","check":"checkbox_check__50df3ed7 checkbox_icon__50df3ed7","minus":"checkbox_minus__50df3ed7 checkbox_icon__50df3ed7","input":"checkbox_input__50df3ed7","focus":"checkbox_focus__50df3ed7","label":"checkbox_label__50df3ed7"};
-
 /**
  * @name Checkbox
  */
@@ -50,8 +50,7 @@ class Checkbox extends PureComponent {
   }
 
   render() {
-    const _this$props = this.props,
-          {
+    const {
       children,
       label,
       className,
@@ -59,10 +58,9 @@ class Checkbox extends PureComponent {
       containerStyle,
       cellClassName,
       labelClassName,
-      indeterminate
-    } = _this$props,
-          restProps = _objectWithoutProperties(_this$props, ["children", "label", "className", "containerClassName", "containerStyle", "cellClassName", "labelClassName", "indeterminate"]);
-
+      indeterminate,
+      ...restProps
+    } = this.props;
     const classes = classNames(modules_3199090e.input, className);
     const containerClasses = classNames(modules_3199090e.checkbox, containerClassName);
     const cellClasses = classNames(modules_3199090e.cell, cellClassName);
@@ -107,4 +105,4 @@ _defineProperty(Checkbox, "propTypes", {
   children: PropTypes.node
 });
 
-export default Checkbox;
+export { Checkbox as default };

package/dist/checkbox-ng/checkbox-ng.js

@@ -0,0 +1,55 @@
+import angular from 'angular';
+import checkmarkIcon from '@jetbrains/icons/checkmark';
+import IconNG from '../icon-ng/icon-ng.js';
+import proxyAttrs from '../proxy-attrs/proxy-attrs.js';
+import { m as modules_3199090e } from '../_helpers/checkbox.js';
+import '../icon/icon__constants.js';
+import '../template-ng/template-ng.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import '../global/ring-angular-component.js';
+import '../_helpers/icon.js';
+
+/**
+ * @name Checkbox Ng
+ */
+
+const angularModule = angular.module('Ring.checkbox', [IconNG]);
+let idCounter = 0;
+const CHECKBOX_ID_PREFIX = 'rg-checkbox-';
+angularModule.directive('rgCheckbox', function rgCheckboxDirective() {
+  return {
+    restrict: 'E',
+    transclude: true,
+    replace: true,
+    template: proxyAttrs(`
+<label class="${modules_3199090e.checkbox}">
+  <input
+    data-proxy-ng-disabled
+    data-proxy-ng-model
+    data-proxy-ng-change
+    data-proxy-ng-true-value
+    data-proxy-ng-false-value
+    data-proxy-name
+    data-proxy-title
+    data-proxy-aria-label
+    data-test="ring-checkbox"
+    type="checkbox"
+    class="${modules_3199090e.input}"
+  />
+  <span class="${modules_3199090e.cell}">
+    <rg-icon class="${modules_3199090e.check}" glyph="{{:: checkmarkIcon}}" />
+  </span><span class="${modules_3199090e.label}" ng-transclude></span>
+</label>
+    `),
+    link: function link(scope, iElement) {
+      scope.checkmarkIcon = checkmarkIcon;
+      const input = iElement[0].querySelector('input[type="checkbox"]');
+      const id = CHECKBOX_ID_PREFIX + idCounter++;
+      iElement[0].setAttribute('for', id);
+      input.setAttribute('id', id);
+    }
+  };
+});
+var Checkbox = angularModule.name;
+
+export { Checkbox as default };