@jetbrains/ring-ui 4.1.1 → 4.1.2

package/dist/avatar/fallback-avatar.js

@@ -0,0 +1,141 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import getUID from '../global/get-uid.js';
+
+const colorPairs = [['#60A800', '#D5CA00'], ['#21D370', '#03E9E1'], ['#3BA1FF', '#36E97D'], ['#00C243', '#00FFFF'], ['#4BE098', '#627FFF'], ['#168BFA', '#26F7C7'], ['#9D4CFF', '#39D3C3'], ['#0A81F6', '#0ACFF6'], ['#765AF8', '#5A91F8'], ['#9E54FF', '#0ACFF6'], ['#B345F1', '#669DFF'], ['#765AF8', '#C059EE'], ['#9039D0', '#C239D0'], ['#9F2AFF', '#FD56FD'], ['#AB3AF2', '#E40568'], ['#9F2AFF', '#E9A80B'], ['#D50F6B', '#E73AE8'], ['#ED5502', '#E73AE8'], ['#ED358C', '#DBED18'], ['#ED358C', '#F9902E'], ['#FF7500', '#FFCA00']];
+const Sizes = {
+  18: {
+    radius: 2,
+    text: {
+      x: 9,
+      y: 13
+    },
+    fontSize: '11px',
+    textAnchor: 'middle'
+  },
+  24: {
+    radius: 3,
+    text: {
+      x: 2,
+      y: 13
+    },
+    fontSize: '11px',
+    underscore: {
+      x: 3,
+      y: 17
+    }
+  },
+  32: {
+    radius: 3,
+    text: {
+      x: 3,
+      y: 17
+    },
+    fontSize: '13px',
+    letterSpacing: 1,
+    underscore: {
+      x: 4,
+      y: 22
+    }
+  },
+  40: {
+    radius: 3,
+    text: {
+      x: 5,
+      y: 19
+    },
+    fontSize: '15px',
+    letterSpacing: 1,
+    underscore: {
+      x: 6,
+      y: 28
+    }
+  }
+};
+const sizeKeys = Object.keys(Sizes).map(Number);
+
+function extractLetters(name) {
+  const names = name.split(/[\s._]+/).filter(Boolean);
+
+  if (names.length >= 2) {
+    return names[0][0].toUpperCase() + names[1][0].toUpperCase();
+  } else if (names.length === 1) {
+    if (names[0].length >= 2) {
+      return names[0].slice(0, 2).toUpperCase();
+    } else {
+      return `${names[0][0].toUpperCase()}X`;
+    }
+  } else {
+    return 'XX';
+  }
+} // https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0#gistcomment-2775538
+
+
+const BASE = 32;
+
+function hashCode(s) {
+  let h = 0;
+
+  for (let i = 0; i < s.length; i++) {
+    h = Math.imul(BASE - 1, h) + s.charCodeAt(i) | 0;
+  }
+
+  return h;
+}
+
+function FallbackAvatar(_ref) {
+  let {
+    username,
+    size,
+    round
+  } = _ref;
+  const hash = Math.abs(hashCode(username.toLowerCase()));
+  const [fromColor, toColor] = colorPairs[hash % colorPairs.length];
+  const possibleSizeKeys = sizeKeys.filter(key => key >= size);
+  const sizeKey = possibleSizeKeys.length > 0 ? Math.min(...possibleSizeKeys) : Math.max(...sizeKeys);
+  const sizes = Sizes[sizeKey];
+  const radius = round ? '50%' : sizes.radius;
+  const gradientId = useMemo(() => getUID('gradient-'), []);
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: `0 0 ${sizeKey} ${sizeKey}`,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: gradientId,
+    x1: "0",
+    y1: "0",
+    x2: "0",
+    y2: "1"
+  }, /*#__PURE__*/React.createElement("stop", {
+    stopColor: fromColor,
+    offset: "0"
+  }), /*#__PURE__*/React.createElement("stop", {
+    stopColor: toColor,
+    offset: "1"
+  }))), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("rect", {
+    fill: `url(#${gradientId})`,
+    x: "0",
+    y: "0",
+    width: sizeKey,
+    height: sizeKey,
+    rx: radius,
+    ry: radius
+  }), /*#__PURE__*/React.createElement("text", {
+    x: sizes.text.x,
+    y: sizes.text.y,
+    fontFamily: "Arial, Helvetica, sans-serif",
+    fontSize: sizes.fontSize,
+    letterSpacing: sizes.letterSpacing,
+    fill: "#FFFFFF",
+    textAnchor: sizes.textAnchor
+  }, /*#__PURE__*/React.createElement("tspan", null, extractLetters(username)), sizes.underscore && /*#__PURE__*/React.createElement("tspan", {
+    x: sizes.underscore.x,
+    y: sizes.underscore.y
+  }, '_'))));
+}
+FallbackAvatar.propTypes = {
+  username: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  round: PropTypes.bool
+};
+
+export { FallbackAvatar as default };

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

@@ -0,0 +1,50 @@
+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 joinDataTestAttributes from '../global/data-tests.js';
+import { m as modules_6c9187df } from '../_helpers/badge.js';
+
+/**
+ * @name Badge
+ */
+
+class Badge extends PureComponent {
+  render() {
+    const {
+      // Modifiers
+      gray,
+      valid,
+      invalid,
+      disabled,
+      // Props
+      className,
+      children,
+      'data-test': dataTest,
+      ...props
+    } = this.props;
+    const classes = classNames(modules_6c9187df.badge, className, {
+      [modules_6c9187df.gray]: gray,
+      [modules_6c9187df.valid]: valid,
+      [modules_6c9187df.invalid]: invalid,
+      [modules_6c9187df.disabled]: disabled
+    });
+    return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+      "data-test": joinDataTestAttributes('ring-badge', dataTest),
+      className: classes
+    }), children);
+  }
+
+}
+
+_defineProperty(Badge, "propTypes", {
+  gray: PropTypes.bool,
+  valid: PropTypes.bool,
+  invalid: PropTypes.bool,
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  children: PropTypes.node,
+  'data-test': PropTypes.string
+});
+
+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

@@ -0,0 +1,123 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.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 '../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 };