gerrit.onap Code Review - vnfsdk/refrepo.git/blob

   1 /*!
   2  * Angular Material Design
   3  * https://github.com/angular/material
   4  * @license MIT
   5  * v1.1.3
   6  */
   7 goog.provide('ngmaterial.components.truncate');
   8 goog.require('ngmaterial.core');
   9 /**
  10  * @ngdoc module
  11  * @name material.components.truncate
  12  */
  13 MdTruncateController['$inject'] = ["$element"];
  14 angular.module('material.components.truncate', ['material.core'])
  15   .directive('mdTruncate', MdTruncateDirective);
  16
  17 /**
  18  * @ngdoc directive
  19  * @name mdTruncate
  20  * @module material.components.truncate
  21  * @restrict AE
  22  * @description
  23  *
  24  * The `md-truncate` component displays a label that will automatically clip text which is wider
  25  * than the component. By default, it displays an ellipsis, but you may apply the `md-clip` CSS
  26  * class to override this default and use a standard "clipping" approach.
  27  *
  28  * <i><b>Note:</b> The `md-truncate` component does not automatically adjust it's width. You must
  29  * provide the `flex` attribute, or some other CSS-based width management. See the
  30  * <a ng-href="./demo/truncate">demos</a> for examples.</i>
  31  *
  32  * @usage
  33  *
  34  * ### As an Element
  35  *
  36  * <hljs lang="html">
  37  *   <div layout="row">
  38  *     <md-button>Back</md-button>
  39  *
  40  *     <md-truncate flex>Chapter 1 - The Way of the Old West</md-truncate>
  41  *
  42  *     <md-button>Forward</md-button>
  43  *   </div>
  44  * </hljs>
  45  *
  46  * ### As an Attribute
  47  *
  48  * <hljs lang="html">
  49  *   <h2 md-truncate style="max-width: 100px;">Some Title With a Lot of Text</h2>
  50  * </hljs>
  51  *
  52  * ## CSS & Styles
  53  *
  54  * `<md-truncate>` provides two CSS classes that you may use to control the type of clipping.
  55  *
  56  * <i><b>Note:</b> The `md-truncate` also applies a setting of `width: 0;` when used with the `flex`
  57  * attribute to fix an issue with the flex element not shrinking properly.</i>
  58  *
  59  * <div>
  60  * <docs-css-api-table>
  61  *
  62  *   <docs-css-selector code=".md-ellipsis">
  63  *     Assigns the "ellipsis" behavior (default) which will cut off mid-word and append an ellipsis
  64  *     (&hellip;) to the end of the text.
  65  *   </docs-css-selector>
  66  *
  67  *   <docs-css-selector code=".md-clip">
  68  *     Assigns the "clipping" behavior which will simply chop off the text. This may happen
  69  *     mid-word or even mid-character.
  70  *   </docs-css-selector>
  71  *
  72  * </docs-css-api-table>
  73  * </div>
  74  */
  75 function MdTruncateDirective() {
  76   return {
  77     restrict: 'AE',
  78
  79     controller: MdTruncateController,
  80     controllerAs: '$ctrl',
  81     bindToController: true
  82   }
  83 }
  84
  85 /**
  86  * Controller for the <md-truncate> component.
  87  *
  88  * @param $element The md-truncate element.
  89  *
  90  * @constructor
  91  * ngInject
  92  */
  93 function MdTruncateController($element) {
  94   $element.addClass('md-truncate');
  95 }
  96
  97 ngmaterial.components.truncate = angular.module("material.components.truncate");