@jetbrains/ring-ui 4.1.0-beta.13 → 4.1.0-beta.17

package/dist/avatar-ng/avatar-ng.js

@@ -0,0 +1,18 @@
+import angularComponentFactory from '../global/angular-component-factory.js';
+import Avatar from '../avatar/avatar.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'angular';
+import 'react';
+import 'react-dom';
+import '../global/ring-angular-component.js';
+import '../global/react-dom-renderer.js';
+import 'prop-types';
+import 'classnames';
+import '../global/url.js';
+import '../global/dom.js';
+import '../avatar/fallback-avatar.js';
+import '../global/get-uid.js';
+
+var avatarNg = angularComponentFactory(Avatar, 'Avatar').name;
+
+export { avatarNg as default };

package/dist/badge/badge.js

@@ -47,4 +47,4 @@ _defineProperty(Badge, "propTypes", {
   'data-test': PropTypes.string
 });
 
-export default Badge;
+export { Badge as default };

package/dist/badge-ng/badge-ng.js

@@ -0,0 +1,16 @@
+import angularComponentFactory from '../global/angular-component-factory.js';
+import Badge from '../badge/badge.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'angular';
+import 'react';
+import 'react-dom';
+import '../global/ring-angular-component.js';
+import '../global/react-dom-renderer.js';
+import 'prop-types';
+import 'classnames';
+import '../global/data-tests.js';
+import '../_helpers/badge.js';
+
+var badgeNg = angularComponentFactory(Badge, 'Badge').name;
+
+export { badgeNg as default };

package/dist/breadcrumb-ng/breadcrumb-ng.js

@@ -0,0 +1,61 @@
+import angular from 'angular';
+import chevronRightIcon from '@jetbrains/icons/chevron-right';
+import LinkNG from '../link-ng/link-ng.js';
+import IconNG from '../icon-ng/icon-ng.js';
+import '../_helpers/link.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';
+
+var modules_2c17c81e = {"unit":"8px","breadcrumb":"breadcrumb_breadcrumb__6cdd8b1c","header":"breadcrumb_header__6cdd8b1c","breadcrumbSmall":"breadcrumb_breadcrumbSmall__6cdd8b1c","breadcrumbElement":"breadcrumb_breadcrumbElement__6cdd8b1c","active":"breadcrumb_active__6cdd8b1c","elementDescription":"breadcrumb_elementDescription__6cdd8b1c","separatorIcon":"breadcrumb_separatorIcon__6cdd8b1c"};
+
+/**
+ * @name Breadcrumb Ng
+ */
+
+const angularModule = angular.module('Ring.breadcrumb', [LinkNG, IconNG]);
+angularModule.filter('breadcrumbNgChevronIcon', () => () => chevronRightIcon);
+angularModule.directive('rgBreadcrumb', function rgBreadcrumbDirective() {
+  return {
+    template: `
+<div class="${modules_2c17c81e.breadcrumb}">
+  <span class="${modules_2c17c81e.breadcrumbElement}" data-test="ring-breadcrumb" ng-show="label">
+    <rg-link
+      ng-if="link"
+      ng-href="{{link}}"
+    >{{label}}</rg-link>
+
+    <rg-link ng-if="!link && onClick"
+          ng-class="onClick && 'ring-link'"
+          data-test="ring-breadcrumb-link"
+          ng-click="onClick({$event: $event})">{{label}}</rg-link>
+
+    <span ng-if="!link && !onClick" ng-click="onClick({$event: $event})">{{label}}</span>
+  </span>
+
+  <span ng-show="label">
+    <rg-icon
+      class="${modules_2c17c81e.separatorIcon}"
+      glyph="{{'' | breadcrumbNgChevronIcon}}"
+    ></rg-icon>
+  </span>
+
+  <span class="${modules_2c17c81e.breadcrumbElement} ${modules_2c17c81e.active}" data-test="ring-breadcrumb-element" ng-transclude></span>
+</div>
+
+    `,
+    replace: true,
+    transclude: true,
+    restrict: 'E',
+    scope: {
+      label: '@',
+      link: '@',
+      onClick: '&'
+    }
+  };
+});
+var breadcrumbNg = angularModule.name;
+
+export { breadcrumbNg as default };

package/dist/button/button.js

@@ -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';
 
 /**
@@ -119,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

@@ -2,8 +2,8 @@ import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBa
 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":"buttonGroupNg_buttonGroup__6db388ba"};
+
+/**
+ * @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":"buttonNg_ringIconDefaultColor__9b8cf3b9","iconMarginFix":"buttonNg_iconMarginFix__9b8cf3b9","transcludeSpacer":"buttonNg_transcludeSpacer__9b8cf3b9","buttonWithoutIcon":"buttonNg_buttonWithoutIcon__9b8cf3b9","iconNg":"buttonNg_iconNg__9b8cf3b9","narrowRight":"buttonNg_narrowRight__9b8cf3b9"};
+
+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

@@ -2,8 +2,7 @@ import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBa
 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

@@ -2,8 +2,7 @@ import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBa
 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

@@ -5,13 +5,13 @@ 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
  */
@@ -105,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 };