@jetbrains/ring-ui 4.1.1 → 4.1.2

package/dist/error-message-ng/error-message-ng.js

@@ -0,0 +1,53 @@
+import angular from 'angular';
+import IconNG from '../icon-ng/icon-ng.js';
+import LinkNG from '../link-ng/link-ng.js';
+import { m as modules_2c5e8509 } from '../_helpers/error-message.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';
+import '../_helpers/link.js';
+
+/**
+ * @name Error Message Ng
+ */
+
+const angularModule = angular.module('Ring.error-message', [IconNG, LinkNG]);
+angularModule.directive('rgErrorMessage', function rgErrorMessageDirective() {
+  return {
+    replace: true,
+    transclude: true,
+    template: `
+<div class="${modules_2c5e8509.errorMessage}" data-test="ring-error-message">
+
+    <rg-icon class="${modules_2c5e8509.icon}" glyph="{{icon}}" color="gray" size="64"></rg-icon>
+    
+    <div class="${modules_2c5e8509.content}">
+      <div class="${modules_2c5e8509.title}" data-test="ring-error-message-title"
+      ><span ng-if="code">{{ code }}:</span> {{ message }}</div>
+      
+      <div class="${modules_2c5e8509.description}" ng-transclude></div>
+      
+      
+       <div ng-if="links">
+          <span ng-repeat="link in links">
+            <rg-link ng-if="link.target" ng-href="{{link.href}}" target="{{link.target}}">{{link.text}}</rg-link><rg-link
+            ng-if="!link.target" ng-href="{{link.href}}">{{link.text}}</rg-link>{{$last ? '' : ','}}
+          </span>
+        </div>
+    </div>
+</div>
+    `,
+    restrict: 'E',
+    scope: {
+      code: '@',
+      message: '@',
+      links: '=',
+      icon: '@'
+    }
+  };
+});
+var errorMessageNg = angularModule.name;
+
+export { errorMessageNg as default };

package/dist/footer/footer.js

@@ -0,0 +1,11 @@
+import 'react';
+import 'prop-types';
+import 'classnames';
+import '../link/link.js';
+export { c as copyright, F as default } from '../_helpers/footer.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'focus-visible';
+import '../global/memoize.js';
+import '../global/data-tests.js';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';

package/dist/footer-ng/footer-ng.js

@@ -0,0 +1,75 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import angular from 'angular';
+import RingAngularComponent from '../global/ring-angular-component.js';
+import { m as modules_7385b3fd, c as copyright } from '../_helpers/footer.js';
+import 'react';
+import 'prop-types';
+import 'classnames';
+import '../link/link.js';
+import 'focus-visible';
+import '../global/memoize.js';
+import '../global/data-tests.js';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+
+/**
+ * @name Footer Ng
+ */
+
+const angularModule = angular.module('Ring.footer', []);
+
+class rgFooterComponent extends RingAngularComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "styles", modules_7385b3fd);
+  }
+
+}
+
+_defineProperty(rgFooterComponent, "transclude", {
+  left: '?rgFooterLeft',
+  center: '?rgFooterCenter',
+  right: '?rgFooterRight'
+});
+
+_defineProperty(rgFooterComponent, "template", `<footer ng-class=":: $ctrl.styles.footer" data-test="ring-footer">
+  <div ng-class=":: $ctrl.styles.columnLeft">
+    <div ng-transclude="left" ng-class=":: $ctrl.styles.columnItem"></div>
+  </div>
+
+  <div ng-class=":: $ctrl.styles.columnCenter">
+    <div ng-transclude="center" ng-class=":: $ctrl.styles.columnItem"></div>
+  </div>
+
+  <div ng-class=":: $ctrl.styles.columnRight">
+    <div ng-transclude="right" ng-class=":: $ctrl.styles.columnItem"></div>
+  </div>
+</footer>`);
+
+class rgFooterLineComponent extends RingAngularComponent {}
+
+_defineProperty(rgFooterLineComponent, "transclude", true);
+
+_defineProperty(rgFooterLineComponent, "template", `<div class="${modules_7385b3fd.line}" ng-transclude></div>`);
+
+class rgFooterCopyrightComponent extends RingAngularComponent {
+  $onInit() {
+    this.copyrightYears = copyright(this.year);
+  }
+
+}
+
+_defineProperty(rgFooterCopyrightComponent, "template", '<span>{{:: $ctrl.copyrightYears}} {{:: $ctrl.companyName}}</span>');
+
+_defineProperty(rgFooterCopyrightComponent, "bindings", {
+  year: '@',
+  companyName: '@'
+});
+
+angularModule.component('rgFooter', rgFooterComponent);
+angularModule.component('rgFooterLine', rgFooterLineComponent);
+angularModule.component('rgFooterCopyright', rgFooterCopyrightComponent);
+var footerNg = angularModule.name;
+
+export { footerNg as default };

package/dist/form-ng/form-ng.js

@@ -0,0 +1,169 @@
+import angular from 'angular';
+import AngularElastic from '@jetbrains/angular-elastic';
+import MessageBundle from '../message-bundle-ng/message-bundle-ng.js';
+
+/**
+ * @name Form Ng
+ */
+
+const angularModule = angular.module('Ring.form', [MessageBundle, AngularElastic]);
+angularModule.factory('getFormErrorMessages', ["RingMessageBundle", function getFormErrorMessagesDirective(RingMessageBundle) {
+  function msg(id, formError) {
+    const messageBundleId = `form_${id}`;
+
+    if (RingMessageBundle.hasOwnProperty(messageBundleId)) {
+      return RingMessageBundle[messageBundleId]();
+    }
+
+    const formErrors = formError && formError[id] || [];
+
+    for (let j = 0; j < formErrors.length; ++j) {
+      if (formErrors[j] && formErrors[j].message) {
+        return formErrors[j].message;
+      }
+    }
+
+    return undefined;
+  }
+
+  return formErrors => {
+    const errorMessages = [];
+
+    for (const key in formErrors) {
+      if (formErrors.hasOwnProperty(key) && formErrors[key]) {
+        errorMessages.push(msg(key, formErrors));
+      }
+    }
+
+    return errorMessages;
+  };
+}]);
+/**
+ * <div rg-error-bubble="form.name"></div>
+ * @param {object} error-bubble Ng-model for this control
+ *
+ * Where form.name is a reference to angularJS form input
+ */
+
+angularModule.directive('rgErrorBubble', ["getFormErrorMessages", function rgErrorBubbleDirective(getFormErrorMessages) {
+  return {
+    scope: {
+      errorBubble: '&rgErrorBubble'
+    },
+    replace: true,
+    template: `<div class="ring-error-bubble" ng-class="{ active: active, 'ring-error-bubble_material': material }" ng-style="style">
+  <div ng-repeat="errorMessage in getFormErrorMessages(errorBubble().$error)">{{ errorMessage }}</div>
+</div>`,
+    link: function link(scope, iElement, iAttrs) {
+      scope.style = {};
+      const siblings = Array.from(iElement[0].parentNode.children);
+      let element;
+      let tagName;
+
+      for (let i = 0; i < siblings.length; i++) {
+        tagName = siblings[i].tagName.toLowerCase();
+
+        if (tagName === 'input' || tagName === 'textarea') {
+          element = siblings[i];
+          break;
+        }
+      }
+
+      scope.material = iAttrs.material !== undefined;
+      scope.$watch(() => {
+        const result = scope.errorBubble();
+        return result.$invalid && result.$dirty;
+      }, active => {
+        scope.active = active;
+
+        if (active && element) {
+          scope.style.left = element.offsetWidth + 2;
+        }
+      });
+      scope.getFormErrorMessages = getFormErrorMessages;
+    }
+  };
+}]);
+/**
+ * <input name="confirm" type="password" rg-equal-value="data.password" ng-model="data.confirm">
+ * Constraint to be user for confirm password fields.
+ */
+
+angularModule.directive('rgEqualValue', function rgEqualValueDirective() {
+  return {
+    require: 'ngModel',
+    link: function link(scope, iElement, iAttrs, ngModelCtrl) {
+      const element = iElement[0];
+
+      function assertEqual(thisValue, thatValue) {
+        ngModelCtrl.$setValidity('equalvalue', thisValue === thatValue);
+      }
+
+      scope.$watch(iAttrs.rgEqualValue, value => {
+        assertEqual(element.value, value);
+      });
+      element.addEventListener('keyup', () => {
+        const thatValue = scope.$eval(iAttrs.rgEqualValue);
+        scope.$apply(() => {
+          assertEqual(element.value, thatValue);
+        });
+      });
+    }
+  };
+});
+/**
+ * <input name="name" required type="text" ng-class="form.name | rgInputClass:submitted" ng-model="name">
+ *
+ * Is intended to be used for the value of ng-class. Accepts a reference to an angularJS form input
+ */
+
+angularModule.filter('rgInputClass', () => (input, submitted) => ({
+  'ring-input': true,
+  'ring-input_error': input.$invalid && (input.$dirty || submitted),
+  'ring-input_correct': !input.$invalid && (input.$dirty || submitted)
+}));
+/**
+ * <form rg-form-autofill-fix ...>
+ *
+ * Fixes Chrome bug: https://github.com/angular/angular.js/issues/1460
+ */
+
+angularModule.directive('rgFormAutofillFix', ["$timeout", $timeout => ({
+  require: '?form',
+  priority: 10,
+  link: function link($scope, element, attrs, form) {
+    if (form) {
+      const POLL_INTERVAL = 150;
+      const MAX_COUNT = 5;
+      let promise;
+      let count = 0;
+
+      (function poll() {
+        let filled;
+        angular.forEach(element.find('input'), elem => {
+          const $elem = angular.element(elem);
+          const controller = $elem.controller('ngModel');
+          const val = $elem.val();
+          const type = $elem.attr('type');
+
+          if (controller && val && type !== 'checkbox' && type !== 'radio') {
+            controller.$setViewValue(val);
+            filled = true;
+          }
+        });
+
+        if (!filled || count < MAX_COUNT) {
+          promise = $timeout(poll, POLL_INTERVAL);
+          count++;
+        }
+      })();
+
+      element.on('$destroy', () => {
+        $timeout.cancel(promise);
+      });
+    }
+  }
+})]);
+var Form = angularModule.name;
+
+export { Form as default };

package/dist/global/angular-component-factory.js

@@ -0,0 +1,82 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import angular from 'angular';
+import React from 'react';
+import { unmountComponentAtNode, render } from 'react-dom';
+import RingAngularComponent from './ring-angular-component.js';
+import Renderer from './react-dom-renderer.js';
+import 'prop-types';
+
+function getAngularComponentName(name) {
+  return `rg${name}`;
+}
+
+function createAngularComponent(Component) {
+  var _class, _temp;
+
+  const propKeys = Object.keys(Component.propTypes);
+  const bindings = {};
+  propKeys.forEach(key => {
+    bindings[key] = '<';
+  });
+  return _temp = _class = class AngularComponent extends RingAngularComponent {
+    $postLink() {
+      const {
+        $transclude
+      } = this.$inject;
+      $transclude(clone => {
+        this.innerNodes = Array.from(clone);
+        this.render();
+      });
+    }
+
+    $onChanges() {
+      if (!this.innerNodes) {
+        return;
+      }
+
+      this.render();
+    }
+
+    $onDestroy() {
+      unmountComponentAtNode(this.$inject.$element[0]);
+    }
+
+    render() {
+      var _this = this;
+
+      const {
+        $scope,
+        $element: {
+          0: container
+        }
+      } = this.$inject;
+      const props = {};
+      propKeys.forEach(key => {
+        if (this[key] !== undefined) {
+          if (typeof this[key] === 'function') {
+            props[key] = function () {
+              const ret = _this[key](...arguments);
+
+              $scope.$applyAsync();
+              return ret;
+            };
+          } else {
+            props[key] = this[key];
+          }
+        }
+      });
+      const hasInnerContent = this.innerNodes && this.innerNodes.length;
+      render( /*#__PURE__*/React.createElement(Component, props, hasInnerContent ? /*#__PURE__*/React.createElement(Renderer, {
+        nodes: this.innerNodes
+      }) : null), container);
+    }
+
+  }, _defineProperty(_class, "$inject", ['$scope', '$element', '$transclude']), _defineProperty(_class, "bindings", bindings), _defineProperty(_class, "transclude", true), _temp;
+}
+
+function angularComponentFactory(Component, name) {
+  const angularModuleName = `Ring.${name[0].toLowerCase() + name.slice(1)}`;
+  return angular.module(angularModuleName, []).component(getAngularComponentName(name), createAngularComponent(Component));
+}
+
+export { createAngularComponent, angularComponentFactory as default };

package/dist/global/compose.js

@@ -0,0 +1,9 @@
+const compose = function () {
+  for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
+    funcs[_key] = arguments[_key];
+  }
+
+  return funcs.reduce((acc, func) => arg => acc(func(arg)), arg => arg);
+};
+
+export { compose as default };

package/dist/global/composeRefs.js

@@ -0,0 +1,15 @@
+var composeRefs = (function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return value => refs.forEach(ref => {
+    if (typeof ref === 'function') {
+      ref(value);
+    } else if (ref != null) {
+      ref.current = value;
+    }
+  });
+});
+
+export { composeRefs as default };

package/dist/global/conic-gradient.js

@@ -0,0 +1,35 @@
+import 'conic-gradient';
+import memoize from './memoize.js';
+import supportsCss from './supports-css.js';
+
+const conicGradient = memoize(_ref => {
+  let {
+    stops,
+    size
+  } = _ref;
+  return supportsCss('background-image: conic-gradient(white, black)') ? `conic-gradient(${stops})` : new ConicGradient({
+    stops,
+    size
+  });
+});
+var conicGradient$1 = (stops => conicGradient(stops).toString());
+const conicGradientWithMask = (mask, stops, size) => {
+  const gradient = conicGradient({
+    stops,
+    size
+  });
+
+  if (!mask.supports && gradient instanceof ConicGradient) {
+    Object.defineProperty(gradient, 'svg', {
+      value: gradient.svg.replace('<image ', `
+        ${mask.svgDefs}    
+        <image mask="url(#${mask.maskId})" `)
+    });
+  }
+
+  return { ...mask.css,
+    'background-image': gradient.toString()
+  };
+};
+
+export { conicGradientWithMask, conicGradient$1 as default };

package/dist/global/create-stateful-context.js

@@ -0,0 +1,54 @@
+import React, { memo, createContext, useState, useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+function createStatefulContext(initialValue) {
+  let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  const ValueContext = /*#__PURE__*/createContext(initialValue);
+  const UpdateContext = /*#__PURE__*/createContext(() => {});
+
+  function Provider(_ref) {
+    let {
+      children
+    } = _ref;
+    const [value, update] = useState(initialValue);
+    return /*#__PURE__*/React.createElement(ValueContext.Provider, {
+      value: value
+    }, /*#__PURE__*/React.createElement(UpdateContext.Provider, {
+      value: update
+    }, children));
+  }
+
+  Provider.propTypes = {
+    children: PropTypes.node
+  };
+  Provider.displayName = `${name}Provider`;
+
+  function useUpdate(value, skipUpdate) {
+    const update = useContext(UpdateContext);
+    useEffect(() => {
+      if (!skipUpdate) {
+        update(value);
+      }
+    }, [update, value, skipUpdate]);
+  }
+
+  function Updater(_ref2) {
+    let {
+      value,
+      skipUpdate
+    } = _ref2;
+    useUpdate(value, skipUpdate);
+    return null;
+  }
+
+  Updater.displayName = `${name}Updater`;
+  return {
+    ValueContext,
+    UpdateContext,
+    Provider,
+    useUpdate,
+    Updater: /*#__PURE__*/memo(Updater)
+  };
+}
+
+export { createStatefulContext as default };

package/dist/global/data-tests.js

@@ -0,0 +1,22 @@
+function expandMap(attrsMap) {
+  return Object.entries(attrsMap).reduce((result, _ref) => {
+    let [key, value] = _ref;
+    return value ? [...result, key] : result;
+  }, []);
+}
+
+function joinDataTestAttributes() {
+  for (var _len = arguments.length, attrs = new Array(_len), _key = 0; _key < _len; _key++) {
+    attrs[_key] = arguments[_key];
+  }
+
+  return attrs.filter(attr => !!attr).reduce((result, attr) => {
+    if (typeof attr === 'object') {
+      return [...result, ...expandMap(attr)];
+    }
+
+    return [...result, attr];
+  }, []).join(' ');
+}
+
+export { joinDataTestAttributes as default };

package/dist/global/dom.js

@@ -0,0 +1,124 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+
+/**
+ * @name DOM
+ */
+const getStyles = window.getComputedStyle.bind(window);
+function isMounted(node) {
+  if (node === document) {
+    return true;
+  }
+
+  return node instanceof Node && document.documentElement.contains(node.parentNode);
+}
+const rectStub = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  width: 0,
+  height: 0
+};
+function getRect(node) {
+  if (node instanceof Range || isMounted(node)) {
+    const {
+      top,
+      right,
+      bottom,
+      left,
+      width,
+      height
+    } = node.getBoundingClientRect();
+    return {
+      top,
+      right,
+      bottom,
+      left,
+      width,
+      height
+    };
+  } else {
+    return Object.assign({}, rectStub);
+  }
+}
+function getPixelRatio() {
+  return 'devicePixelRatio' in window ? window.devicePixelRatio : 1;
+}
+function getWindowHeight() {
+  return window.innerHeight;
+}
+function getWindowWidth() {
+  return window.innerWidth;
+}
+function isNodeInVisiblePartOfPage(node) {
+  const {
+    top,
+    bottom,
+    left,
+    right
+  } = getRect(node);
+  return !(bottom < 0 || right < 0 || getWindowHeight() - top < 0 || getWindowWidth() - left < 0);
+}
+function getDocumentScrollTop() {
+  return document.documentElement && document.documentElement.scrollTop || document.body.scrollTop;
+}
+function getDocumentScrollLeft() {
+  return document.documentElement && document.documentElement.scrollLeft || document.body.scrollLeft;
+}
+const applyMethodToClasses = method => function (classList) {
+  let classes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  classes.split(/\s+/g).filter(className => !!className).forEach(className => classList[method](className));
+};
+const addClasses = applyMethodToClasses('add');
+const removeClasses = applyMethodToClasses('remove');
+const toggleClasses = (classList, classes) => Object.entries(classes).forEach(_ref => {
+  let [className, on] = _ref;
+  return classList.toggle(className, on);
+});
+function setRootStyleProperties() {
+  let properties = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const rootStyle = document.documentElement.style;
+  Object.entries(properties).forEach(_ref2 => {
+    let [key, value] = _ref2;
+    rootStyle.setProperty(key, value);
+  });
+}
+function resetRootStyleProperties() {
+  let properties = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const rootStyle = document.documentElement.style;
+  Object.keys(properties).forEach(key => rootStyle.removeProperty(key));
+}
+class Listeners {
+  constructor() {
+    _defineProperty(this, "_all", new Set());
+  }
+
+  add(el, event, handler, useCapture) {
+    el.addEventListener(event, handler, useCapture);
+
+    const dispatchFn = () => el.removeEventListener(event, handler, useCapture);
+
+    this._all.add(dispatchFn);
+
+    return dispatchFn;
+  }
+
+  remove(fn) {
+    fn();
+
+    this._all.delete(fn);
+  }
+
+  removeAll() {
+    this._all.forEach(fn => this.remove(fn));
+  }
+
+} // Synthetic events from Combokeys#trigger are plain objects
+
+function preventDefault(e) {
+  if (e.preventDefault) {
+    e.preventDefault();
+  }
+}
+
+export { Listeners, addClasses, applyMethodToClasses, getDocumentScrollLeft, getDocumentScrollTop, getPixelRatio, getRect, getStyles, getWindowHeight, getWindowWidth, isMounted, isNodeInVisiblePartOfPage, preventDefault, removeClasses, resetRootStyleProperties, setRootStyleProperties, toggleClasses };