@jetbrains/ring-ui 4.1.0-beta.8 → 4.1.3

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

@@ -0,0 +1,164 @@
+import angular from 'angular';
+import pencilIcon from '@jetbrains/icons/pencil';
+import MessageBundle from '../message-bundle-ng/message-bundle-ng.js';
+import alertService from '../alert-service/alert-service.js';
+import IconNG from '../icon-ng/icon-ng.js';
+import template from './avatar-editor-ng__template.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'react';
+import 'react-dom';
+import '../global/get-uid.js';
+import '../alert/alert.js';
+import 'classnames';
+import 'prop-types';
+import '@jetbrains/icons/exception';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/warning';
+import '@jetbrains/icons/close';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+import '../loader-inline/loader-inline.js';
+import '../global/theme.js';
+import '../global/data-tests.js';
+import '../_helpers/inject-styles.js';
+import '../global/conic-gradient.js';
+import 'conic-gradient';
+import '../global/supports-css.js';
+import '../global/inject-styles.js';
+import '../global/radial-gradient-mask.js';
+import '../global/dom.js';
+import '../alert/container.js';
+import '../template-ng/template-ng.js';
+import '../global/ring-angular-component.js';
+
+const angularModule = angular.module('Ring.avatar-editor', [MessageBundle, IconNG]);
+/**
+ * @name Avatar Editor Ng
+ */
+
+function rgAvatarEditor() {
+  return {
+    restrict: 'E',
+    scope: {
+      model: '=ngModel',
+      onSelect: '&',
+      default: '@',
+      ngDisabled: '=',
+      showDeleteButton: '=?',
+      showAddButton: '=?',
+      deleteLabel: '@',
+      addMessage: '@'
+    },
+    template,
+    transclude: true,
+    controller: ['$scope', '$attrs', 'RingMessageBundle', function controller($scope, $attrs, RingMessageBundle) {
+      let fileInput;
+      $scope.editIcon = pencilIcon;
+      $scope.showAddButton = 'showAddButton' in $scope ? $scope.showAddButton : true;
+      $scope.showDeleteButton = 'showDeleteButton' in $scope ? $scope.showDeleteButton : true;
+
+      if ('controls' in $attrs) {
+        $scope.controlled = true;
+      }
+
+      function createFileLoadListener(file) {
+        return readEvent => {
+          const data = readEvent.target.result;
+          const result = $scope.onSelect({
+            name: file.name,
+            data
+          });
+
+          if (result && result.then) {
+            result.then(() => {
+              $scope.model = data;
+            });
+          } else if (result !== false) {
+            $scope.$apply(() => {
+              $scope.model = data;
+            });
+          }
+        };
+      }
+
+      this.registerFileInput = input => {
+        fileInput = input;
+        fileInput.addEventListener('change', e => {
+          let imageFileSelected = false;
+
+          for (let i = 0; i < e.target.files.length; i++) {
+            const file = e.target.files[i];
+
+            if (file.type.indexOf('image/') === 0) {
+              imageFileSelected = true;
+              const reader = new FileReader();
+              reader.onload = createFileLoadListener(file);
+              reader.readAsDataURL(file);
+              break;
+            }
+          }
+
+          if (e.target.files.length && !imageFileSelected) {
+            alertService.error(RingMessageBundle.avatareditor_noselected());
+          }
+        });
+      };
+
+      $scope.controls = {};
+
+      function onClick(e) {
+        e.stopPropagation();
+      }
+
+      $scope.controls.select = () => {
+        if (!FileReader) {
+          alertService.error(RingMessageBundle.avatareditor_nosupport());
+        } else {
+          fileInput.addEventListener('click', onClick);
+          fileInput.dispatchEvent(new MouseEvent('click'));
+          fileInput.removeEventListener('click', onClick);
+        }
+      };
+
+      $scope.controls.remove = () => {
+        const data = '';
+        const result = $scope.onSelect({
+          name: data,
+          data
+        });
+
+        if (result && result.then) {
+          result.then(() => {
+            $scope.model = data;
+          });
+        } else if (result !== false) {
+          $scope.model = data;
+        }
+      };
+
+      $scope.getDeleteLabel = () => $scope.deleteLabel || RingMessageBundle.avatareditor_delete();
+
+      $scope.getAddMessage = () => $scope.addMessage || RingMessageBundle.avatareditor_add();
+    }]
+  };
+}
+
+function rgAvatarEditorFileInput() {
+  return {
+    restrict: 'A',
+    require: '^rgAvatarEditor',
+    link: function link(scope, iElement, iAttrs, avatarEditorCtrl) {
+      avatarEditorCtrl.registerFileInput(iElement[0]);
+    }
+  };
+}
+
+angularModule.directive('rgAvatarEditor', rgAvatarEditor);
+angularModule.directive('rgAvatarEditorFileInput', rgAvatarEditorFileInput);
+var avatarEditorNg = angularModule.name;
+
+export { avatarEditorNg as default };

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

@@ -0,0 +1,30 @@
+var template = `<div>
+  <div ng-click="!ngDisabled && controls.select()" class="ring-avatar-editor__frame" ng-class="{
+        'ring-avatar-editor_controlled': controlled,
+        'ring-avatar-editor': !ngDisabled
+    }" ng-show="model || default">
+    <img alt="Avatar" class="ring-avatar-editor__img" ng-src="{{ model }}" ng-show="model">
+    <img alt="Default avatar" class="ring-avatar-editor__img" ng-src="{{ default }}"
+         ng-show="!model && default" ng-click="!ngDisabled && controls.select()">
+    <rg-icon glyph="{{editIcon}}" size="16" class="ring-avatar-editor__icon" ng-if="!ngDisabled"></rg-icon>
+  </div>
+  <input class="ring-avatar-editor__file-input" rg-avatar-editor-file-input type="file" ng-model="fileInput" accept="image/*" ng-if="!ngDisabled">
+
+  <rg-button
+    delayed="true"
+    ng-disabled="ngDisabled"
+    ng-if="showAddButton && !model && !default"
+    ng-click="controls.select()"
+  >{{ getAddMessage() }}</rg-button>
+
+  <rg-button
+    ng-if="showDeleteButton&& model && !ngDisabled"
+    danger="true"
+    class="ring-avatar-editor__remove"
+    ng-click="controls.remove()"
+  >
+    <span translate>{{ getDeleteLabel() }}</span>
+  </rg-button>
+</div>`;
+
+export { template as default };

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

@@ -1,4 +1,4 @@
-import { a as _objectWithoutProperties, 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';
@@ -11,8 +11,7 @@ import { m as modules_6c9187df } from '../_helpers/badge.js';
 
 class Badge extends PureComponent {
   render() {
-    const _this$props = this.props,
-          {
+    const {
       // Modifiers
       gray,
       valid,
@@ -21,10 +20,9 @@ class Badge extends PureComponent {
       // Props
       className,
       children,
-      'data-test': dataTest
-    } = _this$props,
-          props = _objectWithoutProperties(_this$props, ["gray", "valid", "invalid", "disabled", "className", "children", "data-test"]);
-
+      'data-test': dataTest,
+      ...props
+    } = this.props;
     const classes = classNames(modules_6c9187df.badge, className, {
       [modules_6c9187df.gray]: gray,
       [modules_6c9187df.valid]: valid,
@@ -49,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_rui_6cdd","header":"header_rui_6cdd","breadcrumbSmall":"breadcrumbSmall_rui_6cdd","breadcrumbElement":"breadcrumbElement_rui_6cdd","active":"active_rui_6cdd","elementDescription":"elementDescription_rui_6cdd","separatorIcon":"separatorIcon_rui_6cdd"};
+
+/**
+ * @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

@@ -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 };