@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/components/dialog-ng/dialog-ng__template.js

@@ -1,70 +0,0 @@
-export default `<div
-  ng-show="dialog.active"
-  ng-class="[!dialog.inSidebar && dialog.dialogStyles.container]"
-  ng-click="dialog.handleClick($event)"
-  ng-attr-data-portaltarget="{{!dialog.inSidebar  ? 'dialog-ng-popup-container' : null}}"
-  ng-attr-data-test="ring-dialog-container"
->
-  <div ng-class="[dialog.dialogStyles.innerContainer]">
-    <div data-anchor="dialog-container"
-      ng-attr-data-in-sidebar="{{dialog.inSidebar  ? 'true' : 'false'}}"
-      ng-attr-data-test="{{dialog.active ? 'ring-dialog' : null}}"
-      ng-class="[
-        dialog.styles.dialogContainer,
-        dialog.cssClass,
-        dialog.wideDialog && dialog.styles.wide,
-        dialog.autoWidth && dialog.styles.autoWidth,
-        dialog.inSidebar && dialog.styles.inSidebar,
-        !dialog.inSidebar && dialog.dialogStyles.content,
-        !dialog.inSidebar && dialog.islandStyles.island
-      ]"
-    >
-      <div ng-class="[dialog.islandStyles.header, dialog.styles.header]"
-        data-anchor="dialog-header"
-        ng-show="dialog.title">
-        <span ng-class="dialog.islandStyles.title">{{ dialog.title }}</span>
-      </div>
-
-      <div ng-class="[dialog.styles.scrollableWrapper, dialog.islandStyles.scrollableWrapper, dialog.scrollableWrapperClassName]">
-        <div ng-class="[dialog.styles.content, dialog.islandStyles.content]">
-          <form name="dialog.dialogForm" class="ring-form ring-js-shortcuts"
-            novalidate>
-            <rg-dialog-content></rg-dialog-content>
-
-            <div class="ring-form__group" ng-show="dialog.error">
-              <div ng-class="dialog.styles.error" ng-bind-html="dialog.error"></div>
-            </div>
-          </form>
-        </div>
-      </div>
-
-      <div ng-class="dialog.styles.footer"
-        ng-if="dialog.description.length || dialog.buttons.length">
-        <div ng-class="dialog.styles.footerDescription"
-          ng-if="dialog.description && dialog.description.length">
-          <div ng-repeat="line in dialog.description">{{ line }}</div>
-        </div>
-
-        <div ng-class="dialog.styles.footerItems">
-          <rg-button
-            ng-repeat="button in dialog.buttons"
-            ng-class="[dialog.styles.footerItem , button.cssClasses]"
-            mode="{{button.default ? 'primary' : ''}}"
-            text="button.text"
-            ng-disabled="(button.default && dialog.dialogForm.$invalid) || button.disabled"
-            ng-if="!button.hidden"
-            data-test="dialog-footer-button"
-
-            rg-promised-click="dialog.action(button)"
-            promised-mode="loader"
-          >{{ button.label }}
-          </rg-button>
-        </div>
-      </div>
-
-      <div data-anchor="dialog-custom-footer-container"></div>
-
-      <div tabindex="-1" ng-show="false" data-anchor="focus-trap-fallback"></div>
-    </div>
-  </div>
-</div>`;

package/components/docked-panel-ng/docked-panel-ng.css

@@ -1,28 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-.dockedPanel {
-  margin-top: calc(unit * 4);
-  padding-left: 0;
-
-  border-top: none;
-}
-
-.fixed.fixed {
-  position: fixed;
-  z-index: 2;
-  top: auto;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  width: 100%;
-  margin-left: 0;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  padding-left: calc(unit * 4);
-
-  border-top: 1px solid var(--ring-popup-border-color);
-  background-color: var(--ring-content-background-color);
-}

package/components/docked-panel-ng/docked-panel-ng.examples.js

@@ -1,39 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import PanelNG from '../panel-ng/panel-ng';
-import ButtonNG from '../button-ng/button-ng';
-
-import DockedPanelNG from './docked-panel-ng';
-
-export default {
-  title: 'Legacy Angular/Docked Panel Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Creates a panel docked at the bottom of the page.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [ButtonNG, DockedPanelNG, PanelNG]);
-
-  return `
-      <div>
-        <textarea aria-label="Description" placeholder="Add description" rows="70" cols="100"></textarea>
-      </div>
-      <div rg-panel rg-docked-panel rg-docked-panel-class="customCssClass">
-        <rg-button mode="primary">Save</rg-button>
-        <rg-button >Cancel</rg-button>
-      </div>
-      <br/>
-      <div>
-        <textarea aria-label="Description" placeholder="Add steps" rows="10" cols="50"></textarea>
-      </div>
-    </div>
-    `;
-};
-
-basic.storyName = 'Docked Panel Ng';

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

@@ -1,169 +0,0 @@
-import angular from 'angular';
-
-import scheduleRAF from '../global/schedule-raf';
-import {getDocumentScrollTop, getWindowHeight} from '../global/dom';
-
-import styles from './docked-panel-ng.css';
-
-const scheduleAction = scheduleRAF();
-
-/**
- * @name Docked Panel Ng
- */
-
-const angularModule = angular.module('Ring.docked-panel', []);
-
-angularModule.directive('rgDockedPanel', function rgDockedPanelDirective($parse) {
-  return {
-    link: function link(scope, element, attrs) {
-      const TOGGLE_GAP = 8;
-      const CSS_CLASS_NAME = styles.dockedPanel;
-      const DOCKED_CSS_CLASS_NAME = styles.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();
-    }
-  };
-});
-
-export default angularModule.name;

package/components/error-message-ng/error-message-ng.examples.js

@@ -1,33 +0,0 @@
-import angular from 'angular';
-
-import frownIcon from '@jetbrains/icons/frown';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import ErrorMessageNG from './error-message-ng';
-
-export default {
-  title: 'Legacy Angular/Error Message Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Displays an error message.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [ErrorMessageNG]).controller('DemoCtrl', function ctrl() {
-    this.errorIcon = frownIcon;
-  });
-
-  return `
-      <div ng-controller="DemoCtrl as ctrl" style="height: 300px">
-        <rg-error-message code="Disconnected" message="no answer from server." icon="{{ctrl.errorIcon}}" links="[{href:'.',text:'Go to the home page'}]">
-          Please try again soon.
-        </rg-error-message>
-      </div>
-    `;
-};
-
-basic.storyName = 'Error Message Ng';

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

@@ -1,50 +0,0 @@
-import angular from 'angular';
-
-import IconNG from '../icon-ng/icon-ng';
-import LinkNG from '../link-ng/link-ng';
-
-import styles from '../error-message/error-message.css';
-
-/**
- * @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="${styles.errorMessage}" data-test="ring-error-message">
-
-    <rg-icon class="${styles.icon}" glyph="{{icon}}" color="gray" size="64"></rg-icon>
-    
-    <div class="${styles.content}">
-      <div class="${styles.title}" data-test="ring-error-message-title"
-      ><span ng-if="code">{{ code }}:</span> {{ message }}</div>
-      
-      <div class="${styles.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: '@'
-    }
-  };
-});
-
-export default angularModule.name;

package/components/error-page-ng/error-page-ng.css

@@ -1,6 +0,0 @@
-.errorPageNg {
-  position: fixed;
-
-  width: 100%;
-  height: 100%;
-}

package/components/error-page-ng/error-page-ng.examples.js

@@ -1,31 +0,0 @@
-import angular from 'angular';
-
-import AngularRoute from 'angular-route';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import authMock from '../auth-ng/auth-ng.mock';
-
-import ErrorPageNG from './error-page-ng';
-
-export default {
-  title: 'Legacy Angular/Error Page Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Displays an error page, e.g. 404 Not Found.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [AngularRoute, ErrorPageNG]).provider('auth', authMock);
-
-  return `
-      <div class="app" rg-error-page-background>
-        <div rg-error-page="{error: {status: 403}}"></div>
-      </div>
-    `;
-};
-
-basic.storyName = 'Error Page Ng';

package/components/error-page-ng/error-page-ng.js

@@ -1,269 +0,0 @@
-import angular from 'angular';
-
-import frownIcon from '@jetbrains/icons/frown';
-import permissionIcon from '@jetbrains/icons/permission';
-
-import styles from '../error-page/error-page.css';
-import ErrorMessage from '../error-message-ng/error-message-ng';
-import Permissions from '../permissions-ng/permissions-ng';
-import MessageBundle from '../message-bundle-ng/message-bundle-ng';
-
-import overrideStyles from './error-page-ng.css';
-
-/**
- * @name Error Page Ng
- */
-
-const angularModule = angular.module('Ring.error-page', [
-  'ngRoute',
-  ErrorMessage,
-  Permissions,
-  MessageBundle
-]);
-
-angularModule.provider('errorPageConfiguration', function errorPageConfigurationProvider() {
-  let pageConfiguration = {};
-
-  /**
-   * @param {Object} config
-   * @param {?String} config.responseToMessageConverter - name of converter from response to error message factory
-   * @param {?Array.<String>} config.links - name of factory which should return array of links to show on error page
-   */
-  this.config = config => {
-    pageConfiguration = config;
-  };
-
-  this.$get = function get($injector, $log) {
-    function loadFactory(factoryName) {
-      try {
-        return $injector.get(factoryName);
-      } catch (err) {
-        $log.debug(`errorPageConfiguration: unable to load ${factoryName}`);
-        return undefined;
-      }
-    }
-
-    let responseToMessageConverter;
-    if (pageConfiguration.responseToMessageConverter) {
-      responseToMessageConverter = loadFactory(pageConfiguration.responseToMessageConverter);
-    }
-
-    let links;
-    if (pageConfiguration.links) {
-      links = loadFactory(pageConfiguration.links);
-    }
-
-    return {
-      responseToMessageConverter: responseToMessageConverter || angular.noop,
-      links: links || []
-    };
-  };
-});
-
-angularModule.factory('getErrorPagePresentation', RingMessageBundle => error => {
-  const presentationModels = {
-    401: {
-      status: 401,
-      title: RingMessageBundle.errorpage_401(),
-      description: RingMessageBundle.errorpage_401msg(),
-      icon: permissionIcon
-    },
-    404: {
-      status: 404,
-      title: RingMessageBundle.errorpage_404(),
-      description: RingMessageBundle.errorpage_404msg(),
-      icon: frownIcon
-    },
-    403: {
-      status: 403,
-      title: RingMessageBundle.errorpage_403(),
-      description: RingMessageBundle.errorpage_403msg(),
-      icon: permissionIcon
-    },
-    500: {
-      status: 500,
-      title: RingMessageBundle.errorpage_500(),
-      description: RingMessageBundle.errorpage_500msg(),
-      icon: frownIcon
-    },
-    0: {
-      status: RingMessageBundle.errorpage_disconnected(),
-      title: RingMessageBundle.errorpage_disconnectedmsg(),
-      description: RingMessageBundle.errorpage_offline(),
-      icon: frownIcon
-    },
-    default: {
-      title: RingMessageBundle.errorpage_seriouslywrong(),
-      icon: frownIcon
-    }
-  };
-
-  if (error.status in presentationModels) {
-    return presentationModels[error.status];
-  }
-  return angular.extend({
-    status: error.status,
-    description: error.message
-  }, presentationModels.default);
-});
-
-angularModule.directive('rgErrorPageBackground', function rgErrorPageBackgroundDirective() {
-  return {
-    restrict: 'A',
-
-    controller: function controller($scope) {
-      this.setApplicationError = applicationError => {
-        $scope.applicationError = applicationError;
-      };
-    },
-
-    link: function link(scope, iElement) {
-      const element = iElement[0];
-      element.classList.add(styles.errorPage);
-
-      scope.$watch('applicationError', newValue => {
-        if (newValue) {
-          element.classList.add(styles.enabled);
-        } else {
-          element.classList.remove(styles.enabled);
-        }
-      });
-    }
-  };
-});
-
-angularModule.directive('rgErrorPage', [
-  'errorPageConfiguration',
-  '$route',
-  'userPermissions',
-  '$log',
-  'getErrorPagePresentation',
-  '$q',
-  '$compile',
-  (
-    errorPageConfiguration,
-    $route,
-    userPermissions,
-    $log,
-    getErrorPagePresentation,
-    $q,
-    $compile
-  ) => {
-    function getArgumentPromise(errorSource, errorPageParameterPresentation) {
-      const promise = errorSource && (errorSource.$promise || errorSource.promise);
-
-      if (promise) {
-        return $q((resolve, reject) => {
-          promise.
-            then(data => {
-              resolve();
-              return data;
-            }).
-            catch(errorResponse => {
-              $log.debug(`Navigation: errorSource ${errorPageParameterPresentation} not permitted, status: ${status}`);
-
-              reject({
-                status: errorResponse && errorResponse.status,
-                message: errorPageConfiguration.responseToMessageConverter(errorResponse)
-              });
-
-              return errorResponse;
-            });
-        });
-      } else {
-        return $q.resolve();
-      }
-    }
-
-    function getRoutingPermissionPromise() {
-      /* eslint-disable angular/no-private-call */
-      if ($route.current && $route.current.$$route && $route.current.$$route.permission) {
-        const pagePermission = $route.current.$$route.permission;
-        /* eslint-enable angular/no-private-call */
-
-        let resolve;
-        let reject;
-
-        userPermissions.load().then(permissionCache => {
-          if (!permissionCache.has(pagePermission)) {
-            $log.debug(`Navigation: no page${pagePermission} permission, status 403`);
-            reject({status: 403});
-          } else {
-            resolve();
-          }
-        });
-
-        return $q((...args) => {
-          [resolve, reject] = args;
-        });
-      } else {
-        return $q.resolve();
-      }
-    }
-
-    return {
-      replace: true,
-      transclude: true,
-      template: '<div></div>',
-      require: '?^rgErrorPageBackground',
-      link: function link(scope, iElement, iAttrs, errorPageBackgroundCtrl, transclude) {
-        function handleError(error) {
-          transclude(scope, clone => {
-            const cloneWrapper = document.createElement('div');
-            cloneWrapper.className = 'ng-hide';
-            angular.element(cloneWrapper).append(clone);
-            iElement.append(cloneWrapper);
-
-            scope.error = getErrorPagePresentation(error);
-            scope.links = errorPageConfiguration.links;
-
-            const template = `
-              <div class="${overrideStyles.errorPageNg}">
-                <rg-error-message
-                  code="{{ error.status }}"
-                  message="{{ error.title }}"
-                  links="links"
-                  icon="{{ error.icon }}"
-                >
-                  <span>{{ error.description }}</span>
-                </rg-error-message>
-              </div>
-            `;
-            const el = $compile(angular.element(template))(scope);
-            iElement.append(el);
-            if (errorPageBackgroundCtrl) {
-              errorPageBackgroundCtrl.setApplicationError(true);
-            }
-
-            if (errorPageBackgroundCtrl) {
-              const destroyEvent = (scope === scope.$root) ? '$routeChangeStart' : '$destroy';
-              scope.$on(destroyEvent, () => {
-                errorPageBackgroundCtrl.setApplicationError(false);
-              });
-            }
-          });
-        }
-
-        function handleSuccess() {
-          transclude(scope, clone => {
-            iElement.append(clone);
-          });
-        }
-
-        getRoutingPermissionPromise().then(() => {
-          const errorSource = scope.$eval(iAttrs.rgErrorPage);
-          if (errorSource && errorSource.error) {
-            handleError(errorSource.error);
-            $log.debug(`Navigation: errorSource ${iAttrs.rgErrorPage} not permitted, status: ${status}`);
-          } else {
-            getArgumentPromise(errorSource, iAttrs.rgErrorPage).
-              then(handleSuccess).
-              catch(handleError);
-          }
-        }, handleError);
-      }
-    };
-  }
-]);
-
-export default angularModule.name;