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

package/components/checkbox-ng/checkbox-ng.test.js

@@ -1,61 +0,0 @@
-import 'angular';
-import 'angular-mocks';
-
-import Checkbox from './checkbox-ng';
-
-describe('Checkbox Ng', () => {
-  let scope;
-  let element;
-  let iElement;
-  let $compile;
-  let $rootScope;
-
-  beforeEach(window.module(Checkbox));
-
-  /* global inject */
-  beforeEach(inject((_$rootScope_, _$compile_) => {
-    $compile = _$compile_;
-    $rootScope = _$rootScope_;
-    scope = $rootScope.$new();
-
-    const tpl = '<rg-checkbox ng-disabled="disabled" ng-model="checked">Checkbox</rg-checkbox>';
-    iElement = $compile(tpl)(scope);
-    element = iElement[0];
-    scope.$digest();
-  }));
-
-  it('should not be checked by default', () => {
-    element.should.not.contain('input:checked');
-    should.not.exist(iElement.controller('ngModel').$viewValue);
-  });
-
-  it('should have been set checked by click', () => {
-    element.querySelector('input').dispatchEvent(new MouseEvent('click'));
-    element.querySelector('input').dispatchEvent(new Event('change'));
-
-    iElement.controller('ngModel').$viewValue.should.be.true;
-  });
-
-  it('should have been set checked by ng-model', () => {
-    scope.checked = true;
-    scope.$digest();
-    element.should.contain('input:checked');
-  });
-
-  it('should have been set disabled by ng-model', () => {
-    scope.disabled = true;
-    scope.$digest();
-    element.should.contain('input:disabled');
-  });
-
-  it('label and input should have same ids', () => {
-    element.querySelector('input').id.should.equal(element.htmlFor);
-  });
-
-  it('should disable input with disabled expression constant', () => {
-    scope = $rootScope.$new();
-    element = $compile('<rg-checkbox ng-disabled="true">Checkbox</rg-checkbox>')(scope)[0];
-    scope.$digest();
-    element.querySelector('input').should.have.property('disabled');
-  });
-});

package/components/compiler-ng/compiler-ng.examples.js

@@ -1,32 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import CompilerNG from './compiler-ng';
-
-export default {
-  title: 'Legacy Angular/Compiler Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [CompilerNG]).run(function controller($rootScope, rgCompiler) {
-    const $scope = $rootScope.$new();
-    $scope.testValue = 'Hello from compiled node';
-
-    rgCompiler({template: '<div>{{testValue}}</div>'}).then(data => {
-      data.link($scope);
-      setTimeout(() => {
-        document.getElementById('for-compiled').appendChild(data.element[0]);
-      });
-    });
-  });
-
-  return '<div id="for-compiled"></div>';
-};
-
-basic.storyName = 'Compiler Ng';

package/components/compiler-ng/compiler-ng.js

@@ -1,63 +0,0 @@
-/**
- * @name Compiler Ng
- */
-import angular from 'angular';
-
-const angularModule = angular.module('Ring.compiler', []).
-  factory('rgCompiler', function rgCompilerFactory($q, $controller, $injector, $compile) {
-    return options => {
-      const template = options.template;
-      const controller = options.controller;
-      const controllerAs = options.controllerAs;
-      const resolve = angular.extend({}, options.resolve);
-      const bindToController = options.bindToController;
-
-      angular.forEach(resolve, (value, key) => {
-        if (angular.isString(value)) {
-          resolve[key] = $injector.get(value);
-        } else {
-          // Use comma expression to disable babel-plugin-angular-annotate
-          // Otherwise is fails with "Maximum call stack size exceeded" error
-          resolve[key] = $injector.invoke((0, value));
-        }
-      });
-
-      angular.extend(resolve, options.locals);
-
-      return $q.all(resolve).then(locals => {
-        const element = options.element || angular.element('<div>').
-          html(template.trim()).
-          contents();
-        const linkFn = $compile(element, locals.$transclude);
-        locals.$element = element;
-
-        return {
-          locals,
-          element,
-          link: function link(scope) {
-            locals.$scope = scope;
-
-            if (controller) {
-              const invokeCtrl = $controller(controller, locals, true);
-
-              if (bindToController) {
-                angular.extend(invokeCtrl.instance, locals);
-              }
-
-              const ctrl = invokeCtrl();
-
-              element.data('$ngControllerController', ctrl);
-
-              if (controllerAs) {
-                scope[controllerAs] = ctrl;
-              }
-            }
-
-            return linkFn(scope);
-          }
-        };
-      });
-    };
-  });
-
-export default angularModule.name;

package/components/compiler-ng/compiler-ng.test.js

@@ -1,207 +0,0 @@
-import 'angular';
-import 'angular-mocks';
-import compilerModuleName from './compiler-ng';
-
-describe('Compiler Ng', () => {
-
-
-  beforeEach(window.module(
-    compilerModuleName
-  ));
-
-
-  let $rootScope;
-  let $scope;
-  let runDigest;
-  beforeEach(window.inject(_$rootScope_ => {
-    $rootScope = _$rootScope_;
-    runDigest = () => {
-      $rootScope.$apply();
-    };
-
-    $scope = $rootScope.$new();
-  }));
-
-
-  let compiler;
-  beforeEach(window.inject(rgCompiler => {
-    compiler = rgCompiler;
-  }));
-
-
-  it('should compile template', () => {
-    $scope.text = 'Hello World';
-    let compileData = null;
-
-
-    compiler({
-      template: '<div>{{text}}</div>'
-    }).then(data => (compileData = data));
-    runDigest();
-
-
-    compileData.link($scope);
-    runDigest();
-
-    compileData.element[0].should.have.html($scope.text);
-  });
-
-
-  it('should allow pass controller', () => {
-    let compileData = null;
-    const text = 'Test';
-
-
-    compiler({
-      template: '<div>{{text}}</div>',
-      controller: [
-        '$scope',
-        scope => {
-          scope.text = text;
-        }]
-    }).then(data => (compileData = data));
-    runDigest();
-
-
-    compileData.link($scope);
-    runDigest();
-
-    compileData.element[0].should.have.html(text);
-  });
-
-
-  it('should allow use controllerAs syntax', () => {
-    let compileData = null;
-    const text = 'Test';
-
-
-    compiler({
-      template: '<div>{{myCtrl.text}}</div>',
-      controllerAs: 'myCtrl',
-      controller() {
-        this.text = text;
-      }
-    }).then(data => (compileData = data));
-    runDigest();
-
-
-    compileData.link($scope);
-    runDigest();
-
-    compileData.element[0].should.have.html(text);
-  });
-
-
-  it('should allow pass local dependencies', () => {
-    let compileData = null;
-    const text = 'Test';
-
-
-    compiler({
-      template: '<div>{{text}}</div>',
-      locals: {
-        textLocal: text
-      },
-      controller: [
-        '$scope',
-        'textLocal', (scope, textLocal) => {
-          scope.text = textLocal;
-        }]
-    }).then(data => (compileData = data));
-    runDigest();
-
-
-    compileData.link($scope);
-    runDigest();
-
-    compileData.element[0].should.have.html(text);
-  });
-
-
-  it('should allow pass asynchronous dependencies', () => {
-    let compileData = null;
-    const text = 'Test';
-
-
-    compiler({
-      template: '<div>{{text}}</div>',
-      resolve: {
-        textResolve($q) {
-          return $q.when(text);
-        }
-      },
-      controller: [
-        '$scope',
-        'textResolve', (scope, textResolve) => {
-          scope.text = textResolve;
-        }]
-    }).then(data => (compileData = data));
-    runDigest();
-
-
-    compileData.link($scope);
-    runDigest();
-
-    compileData.element[0].should.have.html(text);
-  });
-
-
-  it('should fail if resolve was not satisfied', () => {
-    const onCompileError = sandbox.stub();
-
-    compiler({
-      template: '<div/>',
-      resolve: {
-        rejectedResolve: $q => $q.reject()
-      }
-    }).catch(onCompileError);
-    runDigest();
-
-    onCompileError.should.have.been.called;
-  });
-
-
-  it('should allow use bindToController for resolve and locals', () => {
-    let compileData = null;
-    const text = 'Test';
-
-
-    compiler({
-      template: '<div>{{myCtrl.textResolve}}</div>',
-      resolve: {
-        textResolve($q) {
-          return $q.when(text);
-        }
-      },
-      bindToController: true,
-      controllerAs: 'myCtrl',
-      controller: window.angular.noop
-    }).then(data => (compileData = data));
-    runDigest();
-
-
-    compileData.link($scope);
-    runDigest();
-
-    compileData.element[0].should.have.html(text);
-  });
-
-
-  it('should allow use ngTransclude', () => {
-    let compileData = null;
-    const transcludeFn = sandbox.stub();
-
-
-    compiler({
-      template: '<ng-transclude>',
-      locals: {$transclude: transcludeFn}
-    }).then(data => (compileData = data));
-    runDigest();
-
-
-    compileData.link($scope);
-    runDigest();
-
-    transcludeFn.should.have.been.called;
-  });
-});

package/components/confirm-ng/confirm-ng.examples.js

@@ -1,43 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import {hideConfirm} from '../confirm-service/confirm-service';
-
-import ConfirmNG from './confirm-ng';
-
-export default {
-  title: 'Legacy Angular/Confirm Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Displays a confirmation prompt.',
-    hermione: {captureSelector: '*[data-test~=ring-dialog]'},
-    a11y: {element: '*[data-test~=ring-dialog]'}
-  }
-};
-
-export const basic = ({onConfirm, onCancel}) => {
-  angular.
-    module(APP_NAME, [ConfirmNG]).
-    controller('TestCtrl', function controller($scope, confirm) {
-      confirm(
-        'Do you really wish to proceed?',
-        'A description of an action that is about to take place.'
-      ).
-        then(onConfirm).
-        catch(onCancel);
-
-      $scope.$on('$destroy', hideConfirm);
-    });
-
-  return `
-      <div>
-        <div rg-dialog></div>
-        <div ng-controller="TestCtrl"></div>
-      </div>
-    `;
-};
-
-basic.storyName = 'Confirm Ng';
-basic.argTypes = {onConfirm: {}, onCancel: {}};

package/components/confirm-ng/confirm-ng.js

@@ -1,30 +0,0 @@
-import angular from 'angular';
-
-import confirm from '../confirm-service/confirm-service';
-import MessageBundle from '../message-bundle-ng/message-bundle-ng';
-
-/**
- * @name Confirm Ng
- */
-
-const angularModule = angular.module('Ring.confirm', [
-  MessageBundle
-]);
-
-angularModule.service('confirm', function service($q, RingMessageBundle) {
-  return function showConfirm(
-    message, description, actionTitle, cancelTitle,
-    cancelIsDefault, actionFn
-  ) {
-    return $q.when(confirm({
-      text: message,
-      description,
-      confirmLabel: actionTitle || RingMessageBundle.confirmation_ok(),
-      rejectLabel: cancelTitle || RingMessageBundle.confirmation_cancel(),
-      cancelIsDefault,
-      onBeforeConfirm: actionFn
-    }));
-  };
-});
-
-export default angularModule.name;

package/components/data-list-ng/data-list-ng.examples.js

@@ -1,54 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import Selection from '../data-list/selection';
-import data from '../data-list/data-list.mock';
-
-import RingDataList from './data-list-ng';
-
-export default {
-  title: 'Legacy Angular/DataList Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for DataList.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [RingDataList]).controller('testCtrl', function controller() {
-    function itemFormatter(item) {
-      return {
-        ...item,
-        collapsible: false
-      };
-    }
-
-    const selection = new Selection({
-      data,
-      isItemSelectable: item => item.selectable,
-      getChildren: item => item.items || []
-    });
-
-    this.data = data;
-    this.itemFormatter = itemFormatter;
-    this.selection = selection;
-    this.onSelect = newSelection => {
-      this.selection = newSelection;
-    };
-  });
-
-  return `
-      <div ng-controller="testCtrl as ctrl">
-        <rg-data-list
-          data="ctrl.data"
-          selection="ctrl.selection"
-          on-select="ctrl.onSelect"
-          item-formatter="ctrl.itemFormatter"
-        ></rg-data-list>
-      </div>
-    `;
-};
-
-basic.storyName = 'DataList Ng';

package/components/data-list-ng/data-list-ng.js

@@ -1,7 +0,0 @@
-/**
- * @name DataList Ng
- */
-import angularComponentFactory from '../global/angular-component-factory';
-import DataList from '../data-list/data-list';
-
-export default angularComponentFactory(DataList, 'DataList').name;

package/components/dialog-ng/dialog-ng.css

@@ -1,98 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-.dialogContainer {
-  position: relative;
-
-  display: flex;
-  flex-direction: column;
-
-  min-height: auto;
-
-  & :global(.ring-form__group:last-child) {
-    margin-bottom: 0;
-  }
-
-  & :global(.ring-form) {
-    width: 100%;
-  }
-}
-
-.wide.wide {
-  width: calc(unit * 75);
-  max-width: calc(unit * 75);
-}
-
-.autoWidth.autoWidth {
-  width: auto;
-  max-width: 100%;
-}
-
-.header.header {
-  cursor: move;
-  user-select: none;
-
-  font-size: 24px;
-}
-
-.inSidebar .header {
-  padding-top: 0;
-
-  cursor: default;
-  user-select: text;
-}
-
-.inSidebar :global(.ring-form) {
-  width: initial;
-}
-
-.scrollableWrapper.scrollableWrapper {
-  overflow: visible;
-
-  width: auto;
-
-  padding-top: calc(unit * 3);
-}
-
-.content.content {
-  overflow: visible;
-}
-
-.error {
-  max-width: calc(unit * 45);
-
-  word-wrap: break-word;
-
-  color: var(--ring-error-color);
-}
-
-.footer {
-  height: auto;
-  padding: calc(unit * 2) calc(unit * 4) calc(unit * 4);
-
-  text-align: left;
-
-  font-size: 0;
-}
-
-.footerDescription {
-  margin-bottom: calc(unit * 2);
-
-  font-size: var(--ring-font-size-smaller);
-}
-
-.footerItems {
-  white-space: nowrap;
-}
-
-.footerItem {
-  display: inline-block;
-
-  /**
-  * Do not make space using margin-right as it will break spaces between right-sided buttons in dialog's footer
-  */
-  &:not(:first-child) {
-    margin-left: unit;
-  }
-}