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

package/dist/docked-panel-ng/docked-panel-ng.js

@@ -0,0 +1,170 @@
+import angular from 'angular';
+import scheduleRAF from '../global/schedule-raf.js';
+import { getDocumentScrollTop, getWindowHeight } from '../global/dom.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+
+var modules_655b40c7 = {"unit":"8px","dockedPanel":"dockedPanelNg_dockedPanel__0ffcb8ac","fixed":"dockedPanelNg_fixed__0ffcb8ac"};
+
+const scheduleAction = scheduleRAF();
+/**
+ * @name Docked Panel Ng
+ */
+
+const angularModule = angular.module('Ring.docked-panel', []);
+angularModule.directive('rgDockedPanel', ["$parse", function rgDockedPanelDirective($parse) {
+  return {
+    link: function link(scope, element, attrs) {
+      const TOGGLE_GAP = 8;
+      const CSS_CLASS_NAME = modules_655b40c7.dockedPanel;
+      const DOCKED_CSS_CLASS_NAME = modules_655b40c7.fixed;
+      const dockedPanelClass = attrs.rgDockedPanelClass || '';
+      const config = attrs.rgDockedPanelConfig ? $parse(attrs.rgDockedPanelConfig)(scope) : null;
+      let initialPanelPos;
+      let isDocked;
+      /**
+       * Container
+       * @type {Element} panel
+       */
+
+      const panel = element[0];
+      panel.classList.add(CSS_CLASS_NAME);
+
+      function getYPosition(node) {
+        const clientRect = node.getBoundingClientRect();
+        return clientRect.top + clientRect.height + getScrollContainerScrollTop();
+      }
+      /**
+       * Save panel initial rects and left margin and container-node for further use
+       */
+
+
+      function saveInitialPos() {
+        initialPanelPos = getYPosition(panel);
+      }
+
+      function getInitialUndockedPosition() {
+        return (config || {}).container ? getYPosition(config.container) : initialPanelPos;
+      }
+
+      function getScrollContainerScrollTop() {
+        if (config && config.scrollContainer) {
+          return config.scrollContainer.scrollTop;
+        }
+
+        return getDocumentScrollTop();
+      }
+
+      function getScrollContainerHeight() {
+        if (config && config.scrollContainer) {
+          return config.scrollContainer.getBoundingClientRect().height;
+        }
+
+        return getWindowHeight();
+      }
+
+      function onBeforeDock() {
+        if (config) {
+          if (config.beforeDock) {
+            scope.$eval(config.beforeDock(element));
+          }
+
+          if (config.className) {
+            panel.classList.add(config.className);
+          }
+        }
+      }
+
+      function onBeforeUndock() {
+        if (config) {
+          if (config.beforeUndock) {
+            scope.$eval(config.beforeUndock(element));
+          }
+
+          if (config.className) {
+            panel.classList.remove(config.className);
+          }
+        }
+      }
+      /**
+       * Docks the panel to the bottom of the page
+       */
+
+
+      function dock() {
+        onBeforeDock();
+        panel.classList.add(DOCKED_CSS_CLASS_NAME);
+
+        if (dockedPanelClass) {
+          panel.classList.add(dockedPanelClass);
+        }
+
+        isDocked = true;
+      }
+
+      function undock() {
+        onBeforeUndock();
+        panel.classList.remove(DOCKED_CSS_CLASS_NAME);
+
+        if (dockedPanelClass) {
+          panel.classList.remove(dockedPanelClass);
+        }
+
+        isDocked = false;
+      }
+
+      function onResize() {
+        if (config) {
+          if (config && config.onResize) {
+            scope.$eval(config.onResize(element, isDocked));
+          }
+        }
+      }
+      /**
+       * Check panel position
+       */
+
+
+      function checkPanelPosition() {
+        const currentPanelRect = panel.getBoundingClientRect();
+
+        if (currentPanelRect.top + currentPanelRect.height > getScrollContainerHeight() && !isDocked) {
+          dock();
+        } else if (isDocked && currentPanelRect.top + currentPanelRect.height + getScrollContainerScrollTop() >= getInitialUndockedPosition() + TOGGLE_GAP) {
+          undock();
+        }
+      }
+
+      function init() {
+        const _onResize = () => {
+          checkPanelPosition();
+          onResize();
+        };
+
+        const scrollListener = () => scheduleAction(checkPanelPosition);
+        /**
+         * Wait until all content on the page is loaded
+         */
+
+
+        scope.$applyAsync(() => {
+          const scrollContainer = (config || {}).scrollContainer || window;
+          scrollContainer.addEventListener('scroll', scrollListener);
+          window.addEventListener('resize', _onResize);
+          scope.$on('$destroy', () => {
+            scrollContainer.removeEventListener('scroll', scrollListener);
+            window.removeEventListener('resize', _onResize);
+          });
+          scheduleAction(() => {
+            saveInitialPos();
+            checkPanelPosition();
+          });
+        });
+      }
+
+      init();
+    }
+  };
+}]);
+var dockedPanelNg = angularModule.name;
+
+export { dockedPanelNg as default };

package/dist/dropdown/anchor.js

@@ -8,7 +8,8 @@ import '../button/button.js';
 export { A as default } from '../_helpers/anchor.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';
 import 'focus-visible';
 import '../global/theme.js';

package/dist/dropdown/dropdown.js

@@ -9,7 +9,8 @@ import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.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';
 import '../button/button.js';
 import 'focus-visible';
@@ -230,4 +231,4 @@ _defineProperty(Dropdown, "defaultProps", {
   onMouseLeave: () => {}
 });
 
-export default Dropdown;
+export { Dropdown as default };

package/dist/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,175 @@
+import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { useMemo, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import List, { ActiveItemContext } from '../list/list.js';
+import Dropdown from '../dropdown/dropdown.js';
+import PopupMenu from '../popup-menu/popup-menu.js';
+import getUID from '../global/get-uid.js';
+import { A as Anchor } from '../_helpers/anchor.js';
+import 'classnames';
+import 'react-virtualized/dist/es/List';
+import 'react-virtualized/dist/es/AutoSizer';
+import 'react-virtualized/dist/es/WindowScroller';
+import 'react-virtualized/dist/es/CellMeasurer';
+import 'util-deprecate';
+import 'memoize-one';
+import '../global/data-tests.js';
+import '../global/schedule-raf.js';
+import '../global/memoize.js';
+import '../global/dom.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../global/create-stateful-context.js';
+import '../list/list__link.js';
+import '../link/link.js';
+import 'focus-visible';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+import '../_helpers/list.js';
+import '../list/list__item.js';
+import '../avatar/avatar.js';
+import '../global/url.js';
+import '../avatar/fallback-avatar.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../icon/icon.js';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../_helpers/checkbox.js';
+import '../list/list__custom.js';
+import '../global/get-event-key.js';
+import '../list/list__title.js';
+import '../list/list__separator.js';
+import '../list/list__hint.js';
+import '../list/consts.js';
+import '@jetbrains/icons/chevron-10px';
+import '../button/button.js';
+import '../global/theme.js';
+import '../_helpers/button__classes.js';
+import '../popup/popup.js';
+import 'react-dom';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+
+const {
+  children,
+  ...dropdownPropTypes
+} = Dropdown.propTypes || {};
+const {
+  id: idPropType,
+  data: dataPropType,
+  ariaLabel: ariaLabelPropType,
+  onSelect: onSelectPropType
+} = PopupMenu.propTypes || {};
+const defaultAriaLabel = 'Dropdown menu';
+
+function DropdownAnchorWrapper(_ref) {
+  let {
+    anchor,
+    pinned,
+    active,
+    activeListItemId,
+    listId,
+    ...restProps
+  } = _ref;
+  const anchorAriaProps = useMemo(() => ({ ...(listId ? {
+      'aria-haspopup': 'true'
+    } : {}),
+    ...(activeListItemId ? {
+      'aria-activedescendant': activeListItemId,
+      'aria-owns': listId
+    } : {}),
+    ...(active ? {
+      'aria-expanded': 'true'
+    } : {})
+  }), [active, activeListItemId, listId]);
+  const anchorProps = useMemo(() => ({
+    active,
+    pinned,
+    ...restProps,
+    ...anchorAriaProps
+  }), [pinned, active, restProps, anchorAriaProps]);
+  const anchorComponentProps = useMemo(() => ({ ...anchorProps,
+    pinned: `${anchorProps.pinned}`
+  }), [anchorProps]);
+
+  if (typeof anchor === 'string') {
+    return /*#__PURE__*/React.createElement(Anchor, anchorComponentProps, anchor);
+  }
+
+  if (typeof anchor === 'function') {
+    return anchor({
+      active,
+      pinned,
+      ...restProps
+    }, anchorAriaProps);
+  }
+
+  if (!Array.isArray(anchor)) {
+    return /*#__PURE__*/cloneElement(anchor, typeof anchor.type === 'string' ? anchorAriaProps : anchorComponentProps);
+  }
+
+  return /*#__PURE__*/React.createElement("div", anchorAriaProps, anchor);
+}
+
+DropdownAnchorWrapper.propTypes = {
+  anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]).isRequired,
+  pinned: PropTypes.bool,
+  active: PropTypes.bool,
+  activeListItemId: PropTypes.string,
+  listId: PropTypes.string
+};
+const DropdownMenu = /*#__PURE__*/React.forwardRef(function DropdownMenu(_ref2, forwardedRef) {
+  let {
+    id,
+    anchor,
+    ariaLabel,
+    data,
+    onSelect,
+    menuProps,
+    ...restDropdownProps
+  } = _ref2;
+  const listId = useMemo(() => id || getUID('dropdown-menu-list'), [id]);
+  return /*#__PURE__*/React.createElement(ActiveItemContext.Provider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
+    anchor: _ref3 => {
+      let {
+        pinned,
+        active,
+        ...restAnchorProps
+      } = _ref3;
+      return /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, activeItemId => /*#__PURE__*/React.createElement(DropdownAnchorWrapper, _extends({
+        anchor: anchor,
+        pinned: pinned,
+        active: active,
+        activeListItemId: activeItemId,
+        listId: listId
+      }, restAnchorProps)));
+    }
+  }, restDropdownProps), /*#__PURE__*/React.createElement(PopupMenu, _extends({
+    ref: forwardedRef,
+    id: listId,
+    ariaLabel: ariaLabel || defaultAriaLabel,
+    closeOnSelect: true,
+    activateFirstItem: true,
+    data: data,
+    onSelect: onSelect
+  }, menuProps))));
+});
+DropdownMenu.propTypes = {
+  id: idPropType,
+  data: dataPropType,
+  ariaLabel: ariaLabelPropType,
+  onSelect: onSelectPropType,
+  menuProps: PropTypes.object,
+  ...dropdownPropTypes
+};
+DropdownMenu.ListProps = List.ListProps;
+
+export { DropdownMenu as default };

package/dist/error-bubble/error-bubble.js

@@ -18,7 +18,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import '../popup/popup.target.js';
 
-var modules_ee284100 = {"unit":"8px","errorBubblePopup":"errorBubble_errorBubblePopup__23d4f97d","errorBubbleWrapper":"errorBubble_errorBubbleWrapper__23d4f97d","errorBubble":"errorBubble_errorBubble__23d4f97d"};
+var modules_ee284100 = {"unit":"8px","errorBubblePopup":"errorBubble_errorBubblePopup__fe10bc63","errorBubbleWrapper":"errorBubble_errorBubbleWrapper__fe10bc63","errorBubble":"errorBubble_errorBubble__fe10bc63"};
 
 /**
  * @name Error Bubble
@@ -54,4 +54,4 @@ _defineProperty(ErrorBubble, "propTypes", {
   children: PropTypes.node
 });
 
-export default ErrorBubble;
+export { ErrorBubble as default };

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

@@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from '../icon/icon.js';
 import { Size } from '../icon/icon__constants.js';
+import { m as modules_2c5e8509 } from '../_helpers/error-message.js';
 import 'util-deprecate';
-import '../_helpers/icon__svg.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
 import '../global/memoize.js';
 
-var modules_2c5e8509 = {"errorMessage":"errorMessage_errorMessage__dedf193e","title":"errorMessage_title__dedf193e","description":"errorMessage_description__dedf193e","content":"errorMessage_content__dedf193e","icon":"errorMessage_icon__dedf193e"};
-
 /**
  * @name Error Message
  */
@@ -52,4 +52,4 @@ _defineProperty(ErrorMessage, "propTypes", {
   className: PropTypes.string
 });
 
-export default ErrorMessage;
+export { ErrorMessage as default };

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

@@ -1,127 +1,11 @@
-import React, { memo, isValidElement } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Link from '../link/link.js';
+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';
-
-var modules_7385b3fd = {"unit":"8px","footer-height":"64px","footer":"footer_footer__468241e7 global_font__0f8f4370","footerFloating":"footer_footerFloating__468241e7 footer_footer__468241e7 global_font__0f8f4370","column":"footer_column__468241e7","columnItem":"footer_columnItem__468241e7","columnLeft":"footer_columnLeft__468241e7 footer_column__468241e7","columnCenter":"footer_columnCenter__468241e7 footer_column__468241e7","line":"footer_line__468241e7","columnRight":"footer_columnRight__468241e7 footer_column__468241e7","lineCenter":"footer_lineCenter__468241e7"};
-
-const FooterColumn = /*#__PURE__*/memo(function FooterColumn(_ref) {
-  let {
-    position,
-    children
-  } = _ref;
-  const classes = classNames({
-    [modules_7385b3fd.columnLeft]: position === 'left',
-    [modules_7385b3fd.columnCenter]: position === 'center',
-    [modules_7385b3fd.columnRight]: position === 'right'
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: modules_7385b3fd.columnItem
-  }, children));
-});
-FooterColumn.propTypes = {
-  position: PropTypes.string,
-  children: PropTypes.node
-};
-/**
- * Return copyright string
- * @param year {int}
- * @returns {string}
- */
-
-function copyright(year) {
-  const currentYear = new Date().getUTCFullYear();
-  const ndash = '–';
-  let ret = 'Copyright © ';
-
-  if (year >= currentYear) {
-    ret += year;
-  } else {
-    ret += year + ndash + currentYear;
-  }
-
-  return ret;
-}
-/**
- * @constructor
- * @extends {ReactComponent}
- */
-
-const FooterLine = /*#__PURE__*/memo(function FooterLine(props) {
-  const items = Array.isArray(props.item) ? props.item : [props.item];
-
-  function renderItem(item) {
-    if ( /*#__PURE__*/isValidElement(item)) {
-      return item;
-    }
-
-    const element = (item.copyright ? copyright(item.copyright) : '') + (item.label || item);
-
-    if (item.url) {
-      return /*#__PURE__*/React.createElement(Link, {
-        href: item.url,
-        target: item.target,
-        key: item.url + item.title,
-        title: item.title
-      }, element);
-    }
-
-    return element;
-  }
-
-  return /*#__PURE__*/React.createElement("li", {
-    className: modules_7385b3fd.line
-  }, items.map(renderItem));
-});
-FooterLine.propTypes = {
-  item: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string])
-};
-const Footer = /*#__PURE__*/memo(function Footer(_ref2) {
-  let {
-    floating,
-    className,
-    left,
-    center,
-    right
-  } = _ref2;
-
-  function content(elements, position) {
-    if (!elements) {
-      return false;
-    }
-
-    return /*#__PURE__*/React.createElement(FooterColumn, {
-      key: position,
-      position: position
-    }, elements.map((item, idx) => /*#__PURE__*/React.createElement(FooterLine // eslint-disable-next-line react/no-array-index-key
-    , {
-      key: idx,
-      item: item
-    })));
-  }
-
-  const classes = classNames(modules_7385b3fd.footer, className, {
-    [modules_7385b3fd.footerFloating]: floating
-  });
-  return /*#__PURE__*/React.createElement("footer", {
-    className: classes,
-    "data-test": "ring-footer"
-  }, [content(left, 'left'), content(center, 'center'), content(right, 'right')]);
-});
-Footer.propTypes = {
-  className: PropTypes.string,
-  floating: PropTypes.bool,
-  left: PropTypes.array,
-  center: PropTypes.array,
-  right: PropTypes.array
-};
-
-export default Footer;
-export { copyright };
+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 };