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

package/components/avatar-editor-ng/avatar-editor-ng.css

@@ -1,104 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-/* stylelint-disable selector-max-specificity */
-
-:global(.ring-avatar-editor) {
-  position: relative;
-
-  width: calc(unit * 5);
-  height: calc(unit * 5);
-  padding: 1px;
-
-  text-align: center;
-
-  &::after {
-    display: inline-block;
-
-    width: 0;
-    height: calc(unit * 5);
-
-    content: "";
-    vertical-align: middle;
-  }
-}
-
-:global(.ring-avatar-editor_right) {
-  float: right;
-}
-
-:global(.ring-avatar-editor:hover:not(:disabled):not(.ring-avatar-editor_controlled)) {
-  padding: 0;
-
-  border: 1px solid var(--ring-link-hover-color);
-
-  & :global(.ring-avatar-editor__icon) {
-    visibility: visible;
-  }
-
-  & :global(.ring-avatar-editor__img) {
-    outline: 0;
-  }
-
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-
-    content: "";
-
-    background-color: rgba(0, 0, 0, 0.8);
-  }
-}
-
-:global(.ring-avatar-editor__img) {
-  max-width: calc(unit * 5);
-  max-height: calc(unit * 5);
-
-  cursor: pointer;
-  vertical-align: middle;
-}
-
-:global(.ring-avatar-editor__file-input) {
-  position: absolute;
-  left: -10000px;
-
-  visibility: hidden;
-}
-
-:global(.ring-avatar-editor__icon) {
-  position: absolute;
-  top: 10px;
-  left: 0;
-
-  visibility: hidden;
-
-  width: 100%;
-
-  color: var(--ring-content-background-color);
-
-  line-height: 14px;
-}
-
-:global(.ring-avatar-editor__frame) {
-  display: inline-block;
-
-  padding: 0;
-
-  cursor: pointer;
-  vertical-align: top;
-
-  border: 1px solid var(--ring-disabled-color);
-}
-
-:global(.ring-avatar-editor__remove) {
-  display: inline-block;
-
-  margin-left: calc(unit * 2);
-
-  vertical-align: top;
-}

package/components/avatar-editor-ng/avatar-editor-ng.examples.js

@@ -1,41 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import AvatarEditorNG from './avatar-editor-ng';
-
-export default {
-  title: 'Legacy Angular/Avatar Editor Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes:
-      'Allows to choose images to be uploaded as Data URI. On-select attribute will receive the * filename as `name` and the file contents as `data`.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [AvatarEditorNG]).controller('testCtrl', function controller() {
-    this.data = `data:image/svg+xml;utf8,
-          <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="60" cy="60" r="50" style="fill: #00cc00"/>
-          </svg>
-        `;
-  });
-
-  return `
-      <div ng-controller="testCtrl as ctrl">
-        <rg-avatar-editor
-          on-select="ctrl.name = name"
-          delete-label="Clear"
-          ng-model="ctrl.data"
-        ></rg-avatar-editor>
-
-        <h3>{{ ctrl.name || 'No file name' }}</h3>
-        <img alt="Avatar" style="max-width: 300px; max-height: 300px;" ng-src="{{ctrl.data}}" />
-      </div>
-    `;
-};
-
-basic.storyName = 'Avatar Editor Ng';

package/components/avatar-editor-ng/avatar-editor-ng.js

@@ -1,133 +0,0 @@
-import angular from 'angular';
-
-import pencilIcon from '@jetbrains/icons/pencil';
-
-import messageBundleNg from '../message-bundle-ng/message-bundle-ng';
-import alertService from '../alert-service/alert-service';
-import IconNG from '../icon-ng/icon-ng';
-
-import template from './avatar-editor-ng__template';
-import './avatar-editor-ng.css';
-
-const angularModule = angular.module('Ring.avatar-editor', [messageBundleNg, 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);
-
-export default angularModule.name;

package/components/avatar-editor-ng/avatar-editor-ng__template.js

@@ -1,28 +0,0 @@
-export default `<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>`;

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

@@ -1,33 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import {Size as AvatarSize} from '../avatar/avatar';
-
-import {avatarDataUri} from '../avatar/avatar-example-datauri';
-
-import AvatarNG from './avatar-ng';
-
-export default {
-  title: 'Legacy Angular/Avatar Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Avatar.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [AvatarNG]).controller('testCtrl', function controller() {
-    this.AvatarSize = AvatarSize;
-    this.avatarUrl = avatarDataUri;
-  });
-
-  return `
-      <div ng-controller="testCtrl as $ctrl">
-        <rg-avatar size="$ctrl.AvatarSize.Size32" url="$ctrl.avatarUrl"></rg-avatar>
-      </div>
-    `;
-};
-
-basic.storyName = 'Avatar Ng';

package/components/avatar-ng/avatar-ng.js

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

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

@@ -1,32 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import GroupNG from '../group-ng/group-ng';
-
-import BadgeNG from './badge-ng';
-
-export default {
-  title: 'Legacy Angular/Badge Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Badge.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [GroupNG, BadgeNG]);
-
-  return `
-      <rg-group>
-        <rg-badge>simple</rg-badge>
-        <rg-badge gray="true">gray</rg-badge>
-        <rg-badge valid="true">valid</rg-badge>
-        <rg-badge invalid="true">invalid</rg-badge>
-        <rg-badge disabled="true">disabled</rg-badge>
-      </rg-group>
-    `;
-};
-
-basic.storyName = 'Badge Ng';

package/components/badge-ng/badge-ng.js

@@ -1,8 +0,0 @@
-/**
- * @name Badge Ng
-*/
-
-import angularComponentFactory from '../global/angular-component-factory';
-import BadgeNg from '../badge/badge';
-
-export default angularComponentFactory(BadgeNg, 'Badge').name;

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

@@ -1,33 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import BreadcrumbNG from './breadcrumb-ng';
-
-export default {
-  title: 'Legacy Angular/Breadcrumb Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Displays a breadcrumb.'
-  }
-};
-
-export const basic = ({onClickSecondLevel}) => {
-  angular.module(APP_NAME, [BreadcrumbNG]).controller('DemoCtrl', function controller() {
-    this.clickSecondLevel = onClickSecondLevel;
-  });
-
-  return `
-      <div ng-controller="DemoCtrl as ctrl">
-        <rg-breadcrumb label="First level" link="test/href1">
-          <rg-breadcrumb label="Second level" on-click="ctrl.clickSecondLevel()">
-            <span>Active level</span>
-          </rg-breadcrumb>
-        </rg-breadcrumb>
-      </div>
-    `;
-};
-
-basic.storyName = 'Breadcrumb Ng';
-basic.argTypes = {onClickSecondLevel: {}};

package/components/breadcrumb-ng/breadcrumb-ng.js

@@ -1,60 +0,0 @@
-import angular from 'angular';
-
-import chevronRight from '@jetbrains/icons/chevron-right';
-
-import LinkModule from '../link-ng/link-ng';
-import IconModule from '../icon-ng/icon-ng';
-
-import styles from './breadcrumb.css';
-
-/**
- * @name Breadcrumb Ng
- */
-
-
-const angularModule = angular.module('Ring.breadcrumb', [LinkModule, IconModule]);
-
-angularModule.filter('breadcrumbNgChevronIcon', () => () => chevronRight);
-
-angularModule.directive('rgBreadcrumb', function rgBreadcrumbDirective() {
-  return {
-    template: `
-<div class="${styles.breadcrumb}">
-  <span class="${styles.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="${styles.separatorIcon}"
-      glyph="{{'' | breadcrumbNgChevronIcon}}"
-    ></rg-icon>
-  </span>
-
-  <span class="${styles.breadcrumbElement} ${styles.active}" data-test="ring-breadcrumb-element" ng-transclude></span>
-</div>
-
-    `,
-    replace: true,
-    transclude: true,
-    restrict: 'E',
-
-    scope: {
-      label: '@',
-      link: '@',
-      onClick: '&'
-    }
-  };
-});
-
-export default angularModule.name;

package/components/breadcrumb-ng/breadcrumb.css

@@ -1,70 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-.breadcrumb {
-  margin: 20px 0 calc(unit * 3);
-
-  font-size: 0;
-}
-
-.header {
-  margin-bottom: 0;
-}
-
-.breadcrumbSmall .breadcrumbElement {
-  display: inline-block;
-
-  height: calc(unit * 2);
-
-  font-size: var(--ring-font-size);
-  line-height: 14px;
-}
-
-.breadcrumbElement {
-  & .breadcrumb {
-    display: inline;
-  }
-
-  display: inline-block;
-
-  height: calc(unit * 3);
-
-  text-decoration: none;
-
-  font-size: 24px;
-  line-height: 28px;
-}
-
-.breadcrumbElement > span {
-  display: inline-block;
-}
-
-.breadcrumbElement.active,
-.breadcrumb .active {
-  cursor: default;
-}
-
-.elementDescription {
-  position: relative;
-  top: 2px;
-
-  display: inline-block;
-  overflow: hidden;
-
-  width: calc(50 * unit);
-  padding-left: calc(2 * unit);
-
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  font-size: var(--ring-font-size);
-  line-height: 16px;
-}
-
-.separatorIcon {
-  margin: 0 2px;
-  margin-top: -14px;
-
-  color: var(--ring-icon-disabled-color);
-}

package/components/button-group-ng/button-group-ng.css

@@ -1,4 +0,0 @@
-.buttonGroup {
-  font-size: 0;
-  line-height: 0;
-}

package/components/button-group-ng/button-group-ng.examples.js

@@ -1,30 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import ButtonNG from '../button-ng/button-ng';
-
-import ButtonGroupNG from './button-group-ng';
-
-export default {
-  title: 'Legacy Angular/Button Group Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Button Group.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [ButtonNG, ButtonGroupNG]);
-
-  return `
-      <span rg-button-group-caption>Side</span>
-      <div rg-button-group>
-        <rg-button>Left</rg-button>
-        <rg-button>Right</rg-button>
-      </div>
-    `;
-};
-
-basic.storyName = 'Button Group Ng';

package/components/button-group-ng/button-group-ng.js

@@ -1,43 +0,0 @@
-import angular from 'angular';
-
-import classNames from 'classnames';
-
-import styles from '../button-group/button-group.css';
-
-import ngStyles from './button-group-ng.css';
-
-/**
- * @name Button Group Ng
- */
-
-const angularModule = angular.module('Ring.button-group', []);
-const buttonGroupClasses = classNames(styles.buttonGroup, ngStyles.buttonGroup);
-
-function rgButtonGroup() {
-  return {
-    restrict: 'A',
-    link: function link($scope, iElement, attrs) {
-      const element = iElement[0];
-      if (attrs.split) {
-        element.classList.add(...styles.split.split(' '));
-      } else {
-        element.classList.add(...buttonGroupClasses.split(' '));
-      }
-    }
-  };
-}
-
-function rgButtonGroupCaption() {
-  return {
-    restrict: 'A',
-    link: function link($scope, iElement) {
-      const element = iElement[0];
-      element.classList.add(...styles.caption.split(' '));
-    }
-  };
-}
-
-angularModule.directive('rgButtonGroup', rgButtonGroup);
-angularModule.directive('rgButtonGroupCaption', rgButtonGroupCaption);
-
-export default angularModule.name;

package/components/button-ng/button-ng.css

@@ -1,23 +0,0 @@
-@import "../global/variables.css";
-
-/* stylelint-disable-next-line selector-type-no-unknown */
-.ringIconDefaultColor rg-icon,
-.ringIconDefaultColor :global(.ring-icon) {
-  color: var(--ring-icon-secondary-color);
-}
-
-.iconMarginFix.iconMarginFix {
-  margin-right: 0;
-}
-
-.transcludeSpacer:not(:empty) {
-  margin-left: 4px;
-}
-
-.buttonWithoutIcon .iconNg {
-  display: none;
-}
-
-.narrowRight {
-  padding-right: 12px;
-}